flowbite-svelte 0.46.1 → 0.46.3

package/dist/forms/Label.svelte

@@ -1,18 +1,17 @@
-<script>import { twMerge } from 'tailwind-merge';
-export let color = 'gray';
-export let defaultClass = 'text-sm rtl:text-right font-medium block';
+<script>import { twMerge } from "tailwind-merge";
+export let color = "gray";
+export let defaultClass = "text-sm rtl:text-right font-medium block";
 export let show = true;
 let node;
 const colorClasses = {
-    gray: 'text-gray-900 dark:text-gray-300',
-    green: 'text-green-700 dark:text-green-500',
-    red: 'text-red-700 dark:text-red-500',
-    disabled: 'text-gray-400 dark:text-gray-500'
+  gray: "text-gray-900 dark:text-gray-300",
+  green: "text-green-700 dark:text-green-500",
+  red: "text-red-700 dark:text-red-500",
+  disabled: "text-gray-400 dark:text-gray-500"
 };
-// function checkDisabled(node: HTMLLabelElement) {
 $: {
-    const control = node?.control;
-    color = control?.disabled ? 'disabled' : color;
+  const control = node?.control;
+  color = control?.disabled ? "disabled" : color;
 }
 $: labelClass = twMerge(defaultClass, colorClasses[color], $$props.class);
 </script>

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

@@ -26,4 +26,3 @@ export type LabelSlots = typeof __propDef.slots;
 export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
 }
 export {};
-//# sourceMappingURL=Label.svelte.d.ts.map

package/dist/forms/MultiSelect.svelte

@@ -1,120 +1,97 @@
-<script>import Badge from '../badge/Badge.svelte';
-import CloseButton from '../utils/CloseButton.svelte';
-import { twMerge } from 'tailwind-merge';
+<script>import Badge from "../badge/Badge.svelte";
+import CloseButton from "../utils/CloseButton.svelte";
+import { twMerge } from "tailwind-merge";
+import { createEventDispatcher } from "svelte";
+const dispatcher = createEventDispatcher();
 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));
+export let size = "md";
+export let dropdownClass = "";
+export let placeholder = "";
+$: selectItems = items.filter((x) => value.includes(x.value));
 let show = false;
 const sizes = {
-    sm: 'px-2 py-1 min-h-[2.4rem]',
-    md: 'px-3 py-1 min-h-[2.7rem]',
-    lg: 'px-4 py-2 min-h-[3.2rem]'
+  sm: "px-2 py-1 min-h-[2.4rem]",
+  md: "px-3 py-1 min-h-[2.7rem]",
+  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 focus-visible:outline-none';
-// Dropdown
+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";
 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 font-semibold hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white';
-// Active item
+$: 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);
+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";
+const itemsSelectClass = "bg-gray-100 text-black font-semibold hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white";
 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';
+$: 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);
-    }
-    else {
-        if (!value.includes(select.value))
-            value = [...value, select.value];
-    }
+  if (value.includes(select.value)) {
+    clearThisOption(select);
+  } else if (!value.includes(select.value)) {
+    value = [...value, select.value];
+    dispatcher("change");
+  }
 };
 const clearAll = (e) => {
-    e.stopPropagation();
-    value = [];
+  e.stopPropagation();
+  value = [];
+  dispatcher("change");
 };
 const clearThisOption = (select) => {
-    if (value.includes(select.value)) {
-        value = value.filter((o) => o !== select.value);
-    }
+  if (value.includes(select.value)) {
+    value = value.filter((o) => o !== select.value);
+    dispatcher("change");
+  }
 };
-function create_custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {
-    return new CustomEvent(type, { detail, bubbles, cancelable });
-}
-function init(node, value) {
-    const inital = value; // hack for below
-    return {
-        update: (value) => {
-            selectItems = items.filter((x) => value.includes(x.value));
-            // avoid initial event emitting
-            if (value !== inital) {
-                node.dispatchEvent(create_custom_event('input', selectItems));
-                node.dispatchEvent(create_custom_event('change', selectItems));
-            }
-        }
-    };
-}
-// Keyboard navigation
 function handleEscape() {
-    if (show) {
-        show = false;
-    }
+  if (show) {
+    show = false;
+  }
 }
 function handleToggleActiveItem() {
-    if (!show) {
-        show = true;
-        activeIndex = 0;
-    }
-    else {
-        if (activeItem !== null)
-            selectOption(activeItem);
-    }
+  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;
-        }
+  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();
+  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 -->
-<select use:init={value} {...$$restProps} {value} hidden multiple on:change on:input>
+<select {...$$restProps} {value} hidden multiple on:input>
   {#each items as { value, name }}
     <option {value}>{name}</option>
   {/each}
@@ -139,7 +116,7 @@ function handleKeyDown(event) {
     {#if selectItems.length}
       <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" />
+    <div class="w-[1px] bg-gray-300 dark:bg-gray-600"></div>
     <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">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={show ? 'm1 5 4-4 4 4' : 'm9 1-4 4-4-4'} />
     </svg>

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

@@ -10,9 +10,9 @@ declare const __propDef: {
         placeholder?: string | undefined;
     };
     events: {
-        change: Event;
         input: Event;
         click: MouseEvent;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -38,4 +38,3 @@ export type MultiSelectSlots = typeof __propDef.slots;
 export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
 }
 export {};
-//# sourceMappingURL=MultiSelect.svelte.d.ts.map

package/dist/forms/NumberInput.svelte

@@ -1,4 +1,4 @@
-<script>import Input from './Input.svelte';
+<script>import Input from "./Input.svelte";
 export let value = 0;
 </script>
 

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

@@ -34,4 +34,3 @@ export type NumberInputSlots = typeof __propDef.slots;
 export default class NumberInput extends SvelteComponentTyped<NumberInputProps, NumberInputEvents, NumberInputSlots> {
 }
 export {};
-//# sourceMappingURL=NumberInput.svelte.d.ts.map

package/dist/forms/Radio.svelte

@@ -1,30 +1,28 @@
-<script context="module">// this part is shared between Radio and Checkbox
-import { twMerge } from 'tailwind-merge';
+<script context="module">import { twMerge } from "tailwind-merge";
 const colorClasses = {
-    primary: 'text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600',
-    secondary: 'text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600',
-    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
-    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
-    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
-    teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
-    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
-    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
-    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
+  primary: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600",
+  secondary: "text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600",
+  red: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600",
+  green: "text-green-600 focus:ring-green-500 dark:focus:ring-green-600",
+  purple: "text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600",
+  teal: "text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600",
+  yellow: "text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600",
+  orange: "text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600",
+  blue: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"
 };
-export const labelClass = (inline, extraClass) => twMerge(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
-export const inputClass = (custom, color, rounded, tinted, spacing, extraClass) => twMerge('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2', spacing, tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', rounded && 'rounded', colorClasses[color], extraClass);
+export const labelClass = (inline, extraClass) => twMerge(inline ? "inline-flex" : "flex", "items-center", extraClass);
+export const inputClass = (custom, color, rounded, tinted, spacing, extraClass) => twMerge("w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2", spacing, tinted ? "dark:bg-gray-600 dark:border-gray-500" : "dark:bg-gray-700 dark:border-gray-600", custom && "sr-only peer", rounded && "rounded", colorClasses[color], extraClass);
 </script>
 
-<script>import { getContext } from 'svelte';
-import Label from './Label.svelte';
-export let color = 'primary';
+<script>import { getContext } from "svelte";
+import Label from "./Label.svelte";
+export let color = "primary";
 export let custom = false;
 export let inline = false;
-export let group = undefined;
-export let value = '';
-export let spacing = $$slots.default ? 'me-2' : '';
-// tinted if put in component having its own background
-let background = getContext('background');
+export let group = void 0;
+export let value = "";
+export let spacing = $$slots.default ? "me-2" : "";
+let background = getContext("background");
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>

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

@@ -47,4 +47,3 @@ export type RadioSlots = typeof __propDef.slots;
 export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
 }
 export {};
-//# sourceMappingURL=Radio.svelte.d.ts.map

package/dist/forms/RadioButton.svelte

@@ -1,16 +1,15 @@
-<script>import Button from '../buttons/Button.svelte';
-import { twMerge } from 'tailwind-merge';
-export let group = '';
-export let value = '';
+<script>import Button from "../buttons/Button.svelte";
+import { twMerge } from "tailwind-merge";
+export let group = "";
+export let value = "";
 export let inline = true;
-// Button properties forwarding
 export let pill = false;
 export let outline = false;
-export let size = undefined;
-export let color = undefined;
+export let size = void 0;
+export let color = void 0;
 export let shadow = false;
 let buttonClass;
-$: buttonClass = twMerge(inline ? 'inline-flex' : 'flex', $$props.class);
+$: buttonClass = twMerge(inline ? "inline-flex" : "flex", $$props.class);
 </script>
 
 <Button tag="label" checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>

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

@@ -49,4 +49,3 @@ export type RadioButtonSlots = typeof __propDef.slots;
 export default class RadioButton extends SvelteComponentTyped<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
 }
 export {};
-//# sourceMappingURL=RadioButton.svelte.d.ts.map

package/dist/forms/Range.svelte

@@ -1,13 +1,13 @@
-<script>import { twMerge } from 'tailwind-merge';
+<script>import { twMerge } from "tailwind-merge";
 export let value;
-export let size = 'md';
+export let size = "md";
 const sizes = {
-    sm: 'h-1 range-sm',
-    md: 'h-2',
-    lg: 'h-3 range-lg'
+  sm: "h-1 range-sm",
+  md: "h-2",
+  lg: "h-3 range-lg"
 };
 let inputClass;
-$: inputClass = twMerge('w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700', sizes[size] ?? sizes.md, $$props.class);
+$: inputClass = twMerge("w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700", sizes[size] ?? sizes.md, $$props.class);
 </script>
 
 <input type="range" bind:value {...$$restProps} class={inputClass} on:change on:click on:keydown on:keypress on:keyup />

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

@@ -28,4 +28,3 @@ export type RangeSlots = typeof __propDef.slots;
 export default class Range extends SvelteComponentTyped<RangeProps, RangeEvents, RangeSlots> {
 }
 export {};
-//# sourceMappingURL=Range.svelte.d.ts.map

package/dist/forms/Search.svelte

@@ -1,12 +1,12 @@
-<script>import Wrapper from '../utils/Wrapper.svelte';
-import Input from './Input.svelte';
-export let size = 'lg';
-export let placeholder = 'Search';
-export let value = undefined;
+<script>import Wrapper from "../utils/Wrapper.svelte";
+import Input from "./Input.svelte";
+export let size = "lg";
+export let placeholder = "Search";
+export let value = void 0;
 const sizes = {
-    sm: 'w-3.5 h-3.5',
-    md: 'w-5 h-5',
-    lg: 'w-6 h-6'
+  sm: "w-3.5 h-3.5",
+  md: "w-5 h-5",
+  lg: "w-6 h-6"
 };
 </script>
 

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

@@ -40,4 +40,3 @@ export type SearchSlots = typeof __propDef.slots;
 export default class Search extends SvelteComponentTyped<SearchProps, SearchEvents, SearchSlots> {
 }
 export {};
-//# sourceMappingURL=Search.svelte.d.ts.map

package/dist/forms/Select.svelte

@@ -1,28 +1,28 @@
-<script>import { twMerge } from 'tailwind-merge';
+<script>import { twMerge } from "tailwind-merge";
 export let items = [];
-export let value = undefined;
-export let placeholder = 'Choose option ...';
+export let value = void 0;
+export let placeholder = "Choose option ...";
 export let underline = false;
-export let size = 'md';
-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';
+export let size = "md";
+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',
-    md: 'text-sm p-2.5',
-    lg: 'text-base py-3 px-4'
+  sm: "text-sm p-2",
+  md: "text-sm p-2.5",
+  lg: "text-base py-3 px-4"
 };
 let selectClass;
-$: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$props.class);
+$: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && "!px-0", $$props.class);
 </script>
 
 <select {...$$restProps} bind:value class={selectClass} on:change on:contextmenu on:input>
   {#if placeholder}
-    <option disabled selected value="">{placeholder}</option>
+    <option disabled selected={(value === undefined) ? true : undefined} value="">{placeholder}</option>
   {/if}
 
-  {#each items as { value, name }}
-    <option {value}>{name}</option>
+  {#each items as { value: itemValue, name }}
+    <option value={itemValue} selected={(itemValue === value) ? true : undefined}>{name}</option>
   {:else}
     <slot />
   {/each}

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

@@ -39,4 +39,3 @@ export type SelectSlots = typeof __propDef.slots;
 export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
 }
 export {};
-//# sourceMappingURL=Select.svelte.d.ts.map

package/dist/forms/Textarea.svelte

@@ -1,34 +1,34 @@
-<script>import { twMerge } from 'tailwind-merge';
-import { getContext } from 'svelte';
-import Wrapper from '../utils/Wrapper.svelte';
-const background = getContext('background');
-export let value = undefined;
-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';
-export let innerWrappedClass = 'py-2 px-4 bg-white dark:bg-gray-800';
+<script>import { twMerge } from "tailwind-merge";
+import { getContext } from "svelte";
+import Wrapper from "../utils/Wrapper.svelte";
+const background = getContext("background");
+export let value = void 0;
+export let wrappedClass = "block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50";
+export let unWrappedClass = "p-2.5 text-sm focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50";
+export let innerWrappedClass = "py-2 px-4 bg-white dark:bg-gray-800";
 let wrapped;
 $: wrapped = $$slots.header || $$slots.footer;
 let wrapperClass;
-$: wrapperClass = twMerge('w-full rounded-lg bg-gray-50', background ? 'dark:bg-gray-800' : 'dark:bg-gray-700', 'text-gray-900 dark:placeholder-gray-400 dark:text-white ', 'border border-gray-200 dark:border-gray-600', $$props.class);
+$: wrapperClass = twMerge("w-full rounded-lg bg-gray-50", background ? "dark:bg-gray-600" : "dark:bg-gray-700", "text-gray-900 dark:placeholder-gray-400 dark:text-white", "border border-gray-200", background ? "dark:border-gray-500" : "dark:border-gray-600", $$props.class);
 let textareaClass;
 $: textareaClass = wrapped ? wrappedClass : twMerge(wrapperClass, unWrappedClass);
-const headerClass = (header) => twMerge(header ? 'border-b' : 'border-t', 'py-2 px-3 border-gray-200 dark:border-gray-600');
+const headerClass = (header) => twMerge(header ? "border-b" : "border-t", "py-2 px-3 border-gray-200", background ? "dark:border-gray-500" : "dark:border-gray-600");
 let innerWrapperClass;
-$: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? '' : 'rounded-b-lg', $$slots.header ? '' : 'rounded-t-lg');
+$: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? "" : "rounded-b-lg", $$slots.header ? "" : "rounded-t-lg");
 </script>
 
 <Wrapper show={wrapped} class={wrapperClass}>
   {#if $$slots.header}
     <div class={headerClass(true)}>
-      <slot name="header" />
+      <slot name="header"></slot>
     </div>
   {/if}
   <Wrapper show={wrapped} class={innerWrapperClass}>
-    <textarea bind:value on:blur on:change on:click on:contextmenu on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {...$$restProps} class={textareaClass} />
+    <textarea bind:value on:blur on:change on:click on:contextmenu on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste on:select {...$$restProps} class={textareaClass} />
   </Wrapper>
   {#if $$slots.footer}
     <div class={headerClass(false)}>
-      <slot name="footer" />
+      <slot name="footer"></slot>
     </div>
   {/if}
 </Wrapper>
@@ -38,7 +38,7 @@ $: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? '' : 'rounded
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let value: any = undefined;
-@prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
-@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 wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50';
+@prop export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50';
 @prop export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-gray-800';
 -->

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

@@ -21,6 +21,7 @@ declare const __propDef: {
         mouseleave: MouseEvent;
         mouseover: MouseEvent;
         paste: ClipboardEvent;
+        select: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -36,11 +37,10 @@ export type TextareaSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let value: any = undefined;
- * @prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
- * @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 wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50';
+ * @prop export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50';
  * @prop export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-gray-800';
  */
 export default class Textarea extends SvelteComponentTyped<TextareaProps, TextareaEvents, TextareaSlots> {
 }
 export {};
-//# sourceMappingURL=Textarea.svelte.d.ts.map

package/dist/forms/Toggle.svelte

@@ -1,38 +1,37 @@
-<script>import { getContext } from 'svelte';
-import { twMerge } from 'tailwind-merge';
-import Checkbox from './Checkbox.svelte';
-export let size = 'default';
+<script>import { getContext } from "svelte";
+import { twMerge } from "tailwind-merge";
+import Checkbox from "./Checkbox.svelte";
+export let size = "default";
 export let group = [];
-export let value = '';
-export let checked = undefined;
-export let customSize = '';
-// tinted if put in component having its own background
-let background = getContext('background');
+export let value = "";
+export let checked = void 0;
+export let customSize = "";
+let background = getContext("background");
 const common = "me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all";
 const colors = {
-    primary: 'peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600',
-    secondary: 'peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600',
-    red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
-    green: 'peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600',
-    purple: 'peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600',
-    yellow: 'peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400',
-    teal: 'peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600',
-    orange: 'peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500',
-    blue: 'peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600'
+  primary: "peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600",
+  secondary: "peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600",
+  red: "peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600",
+  green: "peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600",
+  purple: "peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600",
+  yellow: "peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400",
+  teal: "peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600",
+  orange: "peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500",
+  blue: "peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600"
 };
 const sizes = {
-    small: 'w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4',
-    default: 'w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5',
-    large: 'w-14 h-7 after:top-0.5 after:start-[4px]  after:h-6 after:w-6',
-    custom: customSize
+  small: "w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4",
+  default: "w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5",
+  large: "w-14 h-7 after:top-0.5 after:start-[4px]  after:h-6 after:w-6",
+  custom: customSize
 };
 let divClass;
-$: divClass = twMerge(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', $$props.classDiv);
+$: divClass = twMerge(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", $$props.classDiv);
 </script>
 
 <Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>
-  <span class={divClass} />
-  <slot />
+  <span class={divClass}></span>
+  <slot></slot>
 </Checkbox>
 
 <!--

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

@@ -33,4 +33,3 @@ export type ToggleSlots = typeof __propDef.slots;
 export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
 }
 export {};
-//# sourceMappingURL=Toggle.svelte.d.ts.map