flowbite-svelte 0.45.1 → 0.46.1

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -33,7 +33,7 @@ export type FileuploadSlots = typeof __propDef.slots;
  * @prop export let files: FileList | undefined = undefined;
  * @prop export let inputClass: string = 'border !p-0 dark:text-gray-400';
  */
-export default class Fileupload extends SvelteComponent<FileuploadProps, FileuploadEvents, FileuploadSlots> {
+export default class Fileupload extends SvelteComponentTyped<FileuploadProps, FileuploadEvents, FileuploadSlots> {
 }
 export {};
 //# sourceMappingURL=Fileupload.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Fileupload.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Fileupload.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAqBD,QAAA,MAAM,SAAS;;;;gBADoF,QAAQ,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CACzC,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
+{"version":3,"file":"Fileupload.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Fileupload.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;gBADoF,QAAQ,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CACzC,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { InputType } from '../types';
 declare const __propDef: {
     props: {
@@ -43,7 +43,7 @@ export type FloatingLabelInputSlots = typeof __propDef.slots;
  * @prop export let color: 'base' | 'green' | 'red' = 'base';
  * @prop export let value: any = undefined;
  */
-export default class FloatingLabelInput extends SvelteComponent<FloatingLabelInputProps, FloatingLabelInputEvents, FloatingLabelInputSlots> {
+export default class FloatingLabelInput extends SvelteComponentTyped<FloatingLabelInputProps, FloatingLabelInputEvents, FloatingLabelInputSlots> {
 }
 export {};
 //# sourceMappingURL=FloatingLabelInput.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLabelInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/FloatingLabelInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAuF1C,QAAA,MAAM,SAAS;;;;;;;;gBADsO,GAAG;;;;;;;;;;;;;;;;;;;;;CAC1K,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,eAAe,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC1I"}
+{"version":3,"file":"FloatingLabelInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/FloatingLabelInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAuF1C,QAAA,MAAM,SAAS;;;;;;;;gBADsO,GAAG;;;;;;;;;;;;;;;;;;;;;CAC1K,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -21,7 +21,7 @@ export type HelperSlots = typeof __propDef.slots;
  * @prop export let helperClass: string = 'text-xs font-normal text-gray-500 dark:text-gray-300';
  * @prop export let color: 'gray' | 'green' | 'red' | 'disabled' = 'gray';
  */
-export default class Helper extends SvelteComponent<HelperProps, HelperEvents, HelperSlots> {
+export default class Helper extends SvelteComponentTyped<HelperProps, HelperEvents, HelperSlots> {
 }
 export {};
 //# sourceMappingURL=Helper.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Helper.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Helper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAuBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,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;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}
+{"version":3,"file":"Helper.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Helper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,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;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { SizeType, FormSizeType } from '../types';
 export declare function clampSize(s: SizeType): "sm" | "lg" | "md";
 import type { InputType } from '../types';
@@ -52,7 +52,7 @@ export type InputSlots = typeof __propDef.slots;
  * @prop export let color: 'base' | 'green' | 'red' = 'base';
  * @prop export let floatClass: string = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
  */
-export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
+export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
 }
 export {};
 //# sourceMappingURL=Input.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Input.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACzD,wBAAgB,SAAS,CAAC,CAAC,EAAE,QAAQ,sBAEpC;AAMH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAyE1C,QAAA,MAAM,SAAS;;;;gBAD6I,GAAG;eAAS,YAAY,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAClH,CAAC;AAC/E,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;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Input.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACzD,wBAAgB,SAAS,CAAC,CAAC,EAAE,QAAQ,sBAEpC;AAMH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAyE1C,QAAA,MAAM,SAAS;;;;gBAD6I,GAAG;eAAS,YAAY,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAClH,CAAC;AAC/E,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;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/forms/InputAddon.svelte

@@ -21,7 +21,8 @@ const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
 const prefixPadding = { sm: 'px-2', md: 'px-3', lg: 'px-4' };
 // size: explicit, inherited, default
 $: _size = size || clampSize(group?.size) || 'md';
-$: divClass = twMerge(textSizes[_size], prefixPadding[_size], background ? borderClasses['tinted'] : borderClasses['base'], 'text-gray-500 bg-gray-200', background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, 'inline-flex items-center border-t border-b first:border-s border-e', 'first:rounded-s-lg last:rounded-e-lg', $$props.class);
+$: divClass = twMerge(textSizes[_size], prefixPadding[_size], 'text-gray-500 bg-gray-200', background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses['tinted'] : borderClasses['base'], 'inline-flex items-center border border-e-0', 'first:rounded-s-lg last:rounded-e-lg', $$props.class);
+console.log('borderClasses', borderClasses['base']);
 </script>
 
 <div {...$$restProps} class={divClass}>

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -19,7 +19,7 @@ export type InputAddonSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let size: 'sm' | 'md' | 'lg' | undefined = undefined;
  */
-export default class InputAddon extends SvelteComponent<InputAddonProps, InputAddonEvents, InputAddonSlots> {
+export default class InputAddon extends SvelteComponentTyped<InputAddonProps, InputAddonEvents, InputAddonSlots> {
 }
 export {};
 //# sourceMappingURL=InputAddon.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputAddon.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/InputAddon.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAmDD,QAAA,MAAM,SAAS;;;eADyB,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS;;;;;;;;CACQ,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
+{"version":3,"file":"InputAddon.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/InputAddon.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoDD,QAAA,MAAM,SAAS;;;eADyB,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS;;;;;;;;CACQ,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -23,7 +23,7 @@ export type LabelSlots = typeof __propDef.slots;
  * @prop export let defaultClass: string = 'text-sm rtl:text-right font-medium block';
  * @prop export let show: boolean = true;
  */
-export default class Label extends SvelteComponent<LabelProps, LabelEvents, LabelSlots> {
+export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
 }
 export {};
 //# sourceMappingURL=Label.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Label.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAuCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Label.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Label.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/forms/MultiSelect.svelte

@@ -5,6 +5,7 @@ export let items = [];
 export let value = [];
 export let size = 'md';
 export let dropdownClass = '';
+export let placeholder = '';
 let selectItems = items.filter((x) => value.includes(x.value));
 let show = false;
 const sizes = {
@@ -13,14 +14,18 @@ const sizes = {
     lg: 'px-4 py-2 min-h-[3.2rem]'
 };
 // Container
-const multiSelectClass = 'relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 focus-within:ring-1 focus-within:border-primary-500 ring-primary-500 dark:focus-within:border-primary-500 dark:ring-primary-500';
+const multiSelectClass = 'relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 focus-within:ring-1 focus-within:border-primary-500 ring-primary-500 dark:focus-within:border-primary-500 dark:ring-primary-500 focus-visible:outline-none';
 // Dropdown
 let multiSelectDropdown;
 $: multiSelectDropdown = twMerge('absolute z-50 p-3 flex flex-col gap-1 max-h-64 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 start-0 top-[calc(100%+1rem)] rounded-lg cursor-pointer overflow-y-scroll w-full', dropdownClass);
 // Items
 const itemsClass = 'py-2 px-3 rounded-lg text-gray-600 hover:text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-600';
 // Selected items
-const itemsSelectClass = 'bg-gray-100 text-black hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white';
+const itemsSelectClass = 'bg-gray-100 text-black font-semibold hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white';
+// Active item
+let activeIndex = null;
+$: activeItem = activeIndex !== null ? items[((activeIndex % items.length) + items.length) % items.length] : null;
+const activeItemClass = 'bg-primary-100 text-primary-500 dark:bg-primary-500 dark:text-primary-100 hover:bg-primary-100 dark:hover:bg-primary-500 hover:text-primary-600 dark:hover:text-primary-100';
 const selectOption = (select) => {
     if (value.includes(select.value)) {
         clearThisOption(select);
@@ -55,6 +60,57 @@ function init(node, value) {
         }
     };
 }
+// Keyboard navigation
+function handleEscape() {
+    if (show) {
+        show = false;
+    }
+}
+function handleToggleActiveItem() {
+    if (!show) {
+        show = true;
+        activeIndex = 0;
+    }
+    else {
+        if (activeItem !== null)
+            selectOption(activeItem);
+    }
+}
+function handleArrowUpDown(offset) {
+    if (!show) {
+        show = true;
+        activeIndex = 0;
+    }
+    else {
+        if (activeIndex !== null) {
+            activeIndex += offset;
+        }
+        else {
+            activeIndex = 0;
+        }
+    }
+}
+function handleKeyDown(event) {
+    switch (event.key) {
+        case 'Escape':
+            handleEscape();
+            break;
+        case 'Enter':
+        case ' ':
+            handleToggleActiveItem();
+            break;
+        case 'ArrowDown':
+            handleArrowUpDown(1);
+            break;
+        case 'ArrowUp':
+            handleArrowUpDown(-1);
+            break;
+        default:
+            return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+}
 </script>
 
 <!-- Hidden select for form submission -->
@@ -64,7 +120,10 @@ function init(node, value) {
   {/each}
 </select>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div on:click={() => (show = !show)} on:focusout={() => (show = false)} tabindex="-1" role="listbox" class={twMerge(multiSelectClass, sizes[size], $$props.class)}>
+<div on:click={() => (show = !show)} on:focusout={() => (show = false)} on:keydown={handleKeyDown} tabindex="0" role="listbox" class={twMerge(multiSelectClass, sizes[size], $$props.class)}>
+  {#if !selectItems.length}
+    <span class="text-gray-400">{placeholder}</span>
+  {/if}
   <span class="flex gap-2 flex-wrap">
     {#if selectItems.length}
       {#each selectItems as item (item.name)}
@@ -78,7 +137,7 @@ function init(node, value) {
   </span>
   <div class="flex ms-auto gap-2 items-center">
     {#if selectItems.length}
-      <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400" />
+      <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400 dark:text-white" />
     {/if}
     <div class="w-[1px] bg-gray-300 dark:bg-gray-600" />
     <svg class="cursor-pointer h-3 w-3 ms-1 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
@@ -90,7 +149,7 @@ function init(node, value) {
     <div on:click|stopPropagation role="presentation" class={multiSelectDropdown}>
       {#each items as item (item.name)}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div on:click={() => selectOption(item)} role="presentation" class={twMerge(itemsClass, selectItems.includes(item) && itemsSelectClass)}>
+        <div on:click={() => selectOption(item)} role="presentation" class={twMerge(itemsClass, selectItems.includes(item) && itemsSelectClass, activeItem === item && activeItemClass)}>
           {item.name}
         </div>
       {/each}
@@ -106,4 +165,5 @@ function init(node, value) {
 @prop export let value: (string | number)[] = [];
 @prop export let size: FormSizeType = 'md';
 @prop export let dropdownClass: string = '';
+@prop export let placeholder: string = '';
 -->

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { FormSizeType, SelectOptionType } from '../types';
 declare const __propDef: {
     props: {
@@ -7,6 +7,7 @@ declare const __propDef: {
         value?: (string | number)[] | undefined;
         size?: FormSizeType | undefined;
         dropdownClass?: string | undefined;
+        placeholder?: string | undefined;
     };
     events: {
         change: Event;
@@ -32,8 +33,9 @@ export type MultiSelectSlots = typeof __propDef.slots;
  * @prop export let value: (string | number)[] = [];
  * @prop export let size: FormSizeType = 'md';
  * @prop export let dropdownClass: string = '';
+ * @prop export let placeholder: string = '';
  */
-export default class MultiSelect extends SvelteComponent<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
+export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
 }
 export {};
 //# sourceMappingURL=MultiSelect.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/MultiSelect.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAID,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAqH/D,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;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,eAAe,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CAC9G"}
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/MultiSelect.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAID,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAiL/D,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;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -31,7 +31,7 @@ export type NumberInputSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let value: number = 0;
  */
-export default class NumberInput extends SvelteComponent<NumberInputProps, NumberInputEvents, NumberInputSlots> {
+export default class NumberInput extends SvelteComponentTyped<NumberInputProps, NumberInputEvents, NumberInputSlots> {
 }
 export {};
 //# sourceMappingURL=NumberInput.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/NumberInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAiBD,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;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,eAAe,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CAC9G"}
+{"version":3,"file":"NumberInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/NumberInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,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;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 export declare const labelClass: (inline: boolean, extraClass: string) => string;
 export declare const inputClass: (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, spacing: string, extraClass: string) => string;
 import type { FormColorType } from '../types';
@@ -44,7 +44,7 @@ export type RadioSlots = typeof __propDef.slots;
  * @prop export let value: number | string = '';
  * @prop export let spacing: string = $$slots.default ? 'me-2' : '';
  */
-export default class Radio extends SvelteComponent<RadioProps, RadioEvents, RadioSlots> {
+export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
 }
 export {};
 //# sourceMappingURL=Radio.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WAAyE,CAAC;AAExI,eAAO,MAAM,UAAU,WAAY,OAAO,SAAS,aAAa,WAAW,OAAO,UAAU,OAAO,WAAW,MAAM,cAAc,MAAM,WAAgR,CAAC;AAI3Z,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA8B9C,QAAA,MAAM,SAAS;;;;;;gBAD0K,MAAM,GAAG,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;CACtI,CAAC;AAC/E,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;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WAAyE,CAAC;AAExI,eAAO,MAAM,UAAU,WAAY,OAAO,SAAS,aAAa,WAAW,OAAO,UAAU,OAAO,WAAW,MAAM,cAAc,MAAM,WAAgR,CAAC;AAI3Z,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA8B9C,QAAA,MAAM,SAAS;;;;;;gBAD0K,MAAM,GAAG,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;CACtI,CAAC;AAC/E,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;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { ButtonColorType, SizeType } from '../types';
 declare const __propDef: {
     props: {
@@ -46,7 +46,7 @@ export type RadioButtonSlots = typeof __propDef.slots;
  * @prop export let color: ButtonColorType | undefined = undefined;
  * @prop export let shadow: boolean = false;
  */
-export default class RadioButton extends SvelteComponent<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
+export default class RadioButton extends SvelteComponentTyped<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
 }
 export {};
 //# sourceMappingURL=RadioButton.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/RadioButton.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAED,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAgC5D,QAAA,MAAM,SAAS;;;;;;;;eAD+O,QAAQ,GAAG,SAAS;gBAAU,eAAe,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACzO,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;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,eAAe,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CAC9G"}
+{"version":3,"file":"RadioButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/RadioButton.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAgC5D,QAAA,MAAM,SAAS;;;;;;;;eAD+O,QAAQ,GAAG,SAAS;gBAAU,eAAe,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACzO,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;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -25,7 +25,7 @@ export type RangeSlots = typeof __propDef.slots;
  * @prop export let value: number;
  * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
  */
-export default class Range extends SvelteComponent<RangeProps, RangeEvents, RangeSlots> {
+export default class Range extends SvelteComponentTyped<RangeProps, RangeEvents, RangeSlots> {
 }
 export {};
 //# sourceMappingURL=Range.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Range.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Range.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAwBD,QAAA,MAAM,SAAS;;;eADwC,MAAM;;;;;;;;;;;;;CACiB,CAAC;AAC/E,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;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Range.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Range.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwBD,QAAA,MAAM,SAAS;;;eADwC,MAAM;;;;;;;;;;;;;CACiB,CAAC;AAC/E,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;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { FormSizeType } from '../types';
 declare const __propDef: {
     props: {
@@ -37,7 +37,7 @@ export type SearchSlots = typeof __propDef.slots;
  * @prop export let placeholder: string = 'Search';
  * @prop export let value: any = undefined;
  */
-export default class Search extends SvelteComponent<SearchProps, SearchEvents, SearchSlots> {
+export default class Search extends SvelteComponentTyped<SearchProps, SearchEvents, SearchSlots> {
 }
 export {};
 //# sourceMappingURL=Search.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Search.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAuC/C,QAAA,MAAM,SAAS;;;;;gBAD+G,GAAG;;;;;;;;;;;;;;;;;;;;;CACnD,CAAC;AAC/E,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}
+{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Search.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAuC/C,QAAA,MAAM,SAAS;;;;;gBAD+G,GAAG;;;;;;;;;;;;;;;;;;;;;CACnD,CAAC;AAC/E,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/forms/Select.svelte

@@ -4,8 +4,8 @@ export let value = undefined;
 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-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';
+export let defaultClass = 'text-gray-900 disabled:text-gray-400 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:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+export let underlineClass = 'text-gray-500 disabled:text-gray-400 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:disabled:text-gray-500 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
 const common = 'block w-full';
 const sizes = {
     sm: 'text-sm p-2',
@@ -37,6 +37,6 @@ $: selectClass = twMerge(common, underline ? underlineClass : defaultClass, size
 @prop export let placeholder: string = 'Choose option ...';
 @prop export let underline: boolean = false;
 @prop export let size: 'sm' | 'md' | 'lg' = 'md';
-@prop export let 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 export let 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';
+@prop export let defaultClass: string = 'text-gray-900 disabled:text-gray-400 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:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+@prop export let underlineClass: string = 'text-gray-500 disabled:text-gray-400 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:disabled:text-gray-500 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
 -->

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { SelectOptionType } from '../types';
 declare const __propDef: {
     props: {
@@ -33,10 +33,10 @@ export type SelectSlots = typeof __propDef.slots;
  * @prop export let placeholder: string = 'Choose option ...';
  * @prop export let underline: boolean = false;
  * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
- * @prop export let 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 export let 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';
+ * @prop export let defaultClass: string = 'text-gray-900 disabled:text-gray-400 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:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+ * @prop export let underlineClass: string = 'text-gray-500 disabled:text-gray-400 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:disabled:text-gray-500 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
  */
-export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
+export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
 }
 export {};
 //# sourceMappingURL=Select.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Select.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAED,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AA2CjD,QAAA,MAAM,SAAS;;;;gBADyM,GAAG;;;;;;;;;;;;;;;;;CAC7I,CAAC;AAC/E,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;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Select.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AA2CjD,QAAA,MAAM,SAAS;;;;gBADyM,GAAG;;;;;;;;;;;;;;;;;CAC7I,CAAC;AAC/E,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;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -40,7 +40,7 @@ export type TextareaSlots = typeof __propDef.slots;
  * @prop export let 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';
  * @prop export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-gray-800';
  */
-export default class Textarea extends SvelteComponent<TextareaProps, TextareaEvents, TextareaSlots> {
+export default class Textarea extends SvelteComponentTyped<TextareaProps, TextareaEvents, TextareaSlots> {
 }
 export {};
 //# sourceMappingURL=Textarea.svelte.d.ts.map

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,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAmDD,QAAA,MAAM,SAAS;;;gBADiI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CACrE,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;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Textarea.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmDD,QAAA,MAAM,SAAS;;;gBADiI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CACrE,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;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -30,7 +30,7 @@ export type ToggleSlots = typeof __propDef.slots;
  * @prop export let checked: boolean | undefined = undefined;
  * @prop export let customSize: string = '';
  */
-export default class Toggle extends SvelteComponent<ToggleProps, ToggleEvents, ToggleSlots> {
+export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
 }
 export {};
 //# sourceMappingURL=Toggle.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Toggle.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAwDD,QAAA,MAAM,SAAS;;;;;;kBAD6M,OAAO,GAAG,SAAS;;;;;;;;;;;;CACjK,CAAC;AAC/E,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;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Toggle.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwDD,QAAA,MAAM,SAAS;;;;;;kBAD6M,OAAO,GAAG,SAAS;;;;;;;;;;;;CACjK,CAAC;AAC/E,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;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/gallery/Gallery.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { ImgType } from '../types';
 declare const __propDef: {
     props: {
@@ -24,7 +24,7 @@ export type GallerySlots = typeof __propDef.slots;
  * @prop export let items: ImgType[] = [];
  * @prop export let imgClass: string = 'h-auto max-w-full rounded-lg';
  */
-export default class Gallery extends SvelteComponent<GalleryProps, GalleryEvents, GallerySlots> {
+export default class Gallery extends SvelteComponentTyped<GalleryProps, GalleryEvents, GallerySlots> {
 }
 export {};
 //# sourceMappingURL=Gallery.svelte.d.ts.map

package/dist/gallery/Gallery.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/gallery/Gallery.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AA+B1C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+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;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,eAAe,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CAC9F"}
+{"version":3,"file":"Gallery.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/gallery/Gallery.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AA+B1C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+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;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/indicators/Indicator.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { IndicatorPlacementType } from '../types';
 declare const __propDef: {
     props: {
@@ -30,7 +30,7 @@ export type IndicatorSlots = typeof __propDef.slots;
  * @prop export let placement: IndicatorPlacementType | undefined = undefined;
  * @prop export let offset: boolean = true;
  */
-export default class Indicator extends SvelteComponent<IndicatorProps, IndicatorEvents, IndicatorSlots> {
+export default class Indicator extends SvelteComponentTyped<IndicatorProps, IndicatorEvents, IndicatorSlots> {
 }
 export {};
 //# sourceMappingURL=Indicator.svelte.d.ts.map

package/dist/indicators/Indicator.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/indicators/Indicator.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAkFzD,QAAA,MAAM,SAAS;;;;;;;oBADmO,sBAAsB,GAAG,SAAS;;;;;;;;;CACtM,CAAC;AAC/E,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;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,eAAe,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CACtG"}
+{"version":3,"file":"Indicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/indicators/Indicator.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAkFzD,QAAA,MAAM,SAAS;;;;;;;oBADmO,sBAAsB,GAAG,SAAS;;;;;;;;;CACtM,CAAC;AAC/E,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;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/kbd/ArrowKeyDown.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -17,7 +17,7 @@ export type ArrowKeyDownSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let svgClass: string = 'w-4 h-4';
  */
-export default class ArrowKeyDown extends SvelteComponent<ArrowKeyDownProps, ArrowKeyDownEvents, ArrowKeyDownSlots> {
+export default class ArrowKeyDown extends SvelteComponentTyped<ArrowKeyDownProps, ArrowKeyDownEvents, ArrowKeyDownSlots> {
 }
 export {};
 //# sourceMappingURL=ArrowKeyDown.svelte.d.ts.map

package/dist/kbd/ArrowKeyDown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowKeyDown.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/kbd/ArrowKeyDown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAgBD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,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;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,eAAe,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CAClH"}
+{"version":3,"file":"ArrowKeyDown.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/kbd/ArrowKeyDown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,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;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/kbd/ArrowKeyLeft.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -17,7 +17,7 @@ export type ArrowKeyLeftSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let svgClass: string = 'w-4 h-4';
  */
-export default class ArrowKeyLeft extends SvelteComponent<ArrowKeyLeftProps, ArrowKeyLeftEvents, ArrowKeyLeftSlots> {
+export default class ArrowKeyLeft extends SvelteComponentTyped<ArrowKeyLeftProps, ArrowKeyLeftEvents, ArrowKeyLeftSlots> {
 }
 export {};
 //# sourceMappingURL=ArrowKeyLeft.svelte.d.ts.map

package/dist/kbd/ArrowKeyLeft.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowKeyLeft.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/kbd/ArrowKeyLeft.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAgBD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,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;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,eAAe,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CAClH"}
+{"version":3,"file":"ArrowKeyLeft.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/kbd/ArrowKeyLeft.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,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;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/kbd/ArrowKeyRight.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -17,7 +17,7 @@ export type ArrowKeyRightSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let svgClass: string = 'w-4 h-4';
  */
-export default class ArrowKeyRight extends SvelteComponent<ArrowKeyRightProps, ArrowKeyRightEvents, ArrowKeyRightSlots> {
+export default class ArrowKeyRight extends SvelteComponentTyped<ArrowKeyRightProps, ArrowKeyRightEvents, ArrowKeyRightSlots> {
 }
 export {};
 //# sourceMappingURL=ArrowKeyRight.svelte.d.ts.map