@likable-hair/svelte 4.0.2 → 4.0.4

package/dist/components/composed/forms/AsyncAutocomplete.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
+<script lang="ts" generics="Data">import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
 import debounceStore from "../../../stores/debounce";
 import { writable } from 'svelte/store';
 let { items = [], values = [], multiple = false, searcher, placeholder, searchThreshold = 2, debounceTimeout = 500, searching = false, search = false, searchText, maxVisibleChips, menuOpened = false, mobileDrawer = false, closeOnSelect = false, disabled = false, chipLabelSnippet, itemLabelSnippet, onchange, } = $props();

package/dist/components/composed/forms/AsyncAutocomplete.svelte.d.ts

@@ -1,29 +1,50 @@
 import type { Item } from "../../../components/simple/forms/Autocomplete.svelte";
 export type { Item };
-import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
-import type { ComponentProps } from "svelte";
-interface Props {
-    items: Item[];
-    values?: Item[];
-    multiple?: boolean;
-    searcher: (params: {
-        searchText: string;
-    }) => Promise<Item[]>;
-    placeholder?: string;
-    searchThreshold?: number;
-    debounceTimeout?: number;
-    searching?: boolean;
-    search?: boolean;
-    searchText?: string;
-    maxVisibleChips?: number;
-    menuOpened?: boolean;
-    mobileDrawer?: boolean;
-    closeOnSelect?: boolean;
-    disabled?: boolean;
-    chipLabelSnippet?: ComponentProps<typeof Autocomplete>['chipLabelSnippet'];
-    itemLabelSnippet?: ComponentProps<typeof Autocomplete>['itemLabelSnippet'];
-    onchange?: ComponentProps<typeof Autocomplete>['onchange'];
+declare class __sveltets_Render<Data> {
+    props(): {
+        items: Item<Data>[];
+        values?: Item<Data>[] | undefined;
+        multiple?: boolean;
+        searcher: (params: {
+            searchText: string;
+        }) => Promise<Item<Data>[]>;
+        placeholder?: string;
+        searchThreshold?: number;
+        debounceTimeout?: number;
+        searching?: boolean;
+        search?: boolean;
+        searchText?: string;
+        maxVisibleChips?: number;
+        menuOpened?: boolean;
+        mobileDrawer?: boolean;
+        closeOnSelect?: boolean;
+        disabled?: boolean;
+        chipLabelSnippet?: import("svelte").Snippet<[{
+            selection: Item<Data>;
+        }]> | undefined;
+        itemLabelSnippet?: import("svelte").Snippet<[{
+            item: Item<Data>;
+        }]> | undefined;
+        onchange?: ((event: {
+            detail: {
+                unselect: Item<Data> | undefined;
+                select: Item<Data> | undefined;
+                selection: Item<Data>[];
+            };
+        }) => void) | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
 }
-declare const AsyncAutocomplete: import("svelte").Component<Props, {}, "">;
-type AsyncAutocomplete = ReturnType<typeof AsyncAutocomplete>;
+interface $$IsomorphicComponent {
+    new <Data>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Data>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Data>['props']>, ReturnType<__sveltets_Render<Data>['events']>, ReturnType<__sveltets_Render<Data>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Data>['bindings']>;
+    } & ReturnType<__sveltets_Render<Data>['exports']>;
+    <Data>(internal: unknown, props: ReturnType<__sveltets_Render<Data>['props']> & {}): ReturnType<__sveltets_Render<Data>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AsyncAutocomplete: $$IsomorphicComponent;
+type AsyncAutocomplete<Data> = InstanceType<typeof AsyncAutocomplete<Data>>;
 export default AsyncAutocomplete;

package/dist/components/simple/charts/Bar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Chart, Tooltip, } from 'chart.js';
 import 'chart.js/auto';
 import 'chartjs-adapter-date-fns';
-let { data = $bindable(), options = $bindable(), resetZoom = $bindable(), ...rest } = $props();
+let { data, options = $bindable(), resetZoom = $bindable(), ...rest } = $props();
 Chart.register(Tooltip);
 let canvasElem, chart;
 $effect(() => {

package/dist/components/simple/charts/Bar.svelte.d.ts

@@ -7,6 +7,6 @@ interface Props extends HTMLCanvasAttributes {
     options: ChartOptions<'bar'>;
     resetZoom?: boolean;
 }
-declare const Bar: import("svelte").Component<Props, {}, "data" | "options" | "resetZoom">;
+declare const Bar: import("svelte").Component<Props, {}, "options" | "resetZoom">;
 type Bar = ReturnType<typeof Bar>;
 export default Bar;

package/dist/components/simple/charts/BarChart.svelte

@@ -104,7 +104,7 @@ let chartOptions = $derived({
 </script>
 
 <Bar
-  bind:data={data}
+  data={data}
   bind:resetZoom
   options={chartOptions}
   width={width}

package/dist/components/simple/charts/Line.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Chart, Tooltip, } from 'chart.js';
 import 'chart.js/auto';
 import 'chartjs-adapter-date-fns';
-let { data = $bindable(), options = $bindable(), resetZoom = $bindable(), ...rest } = $props();
+let { data, options = $bindable(), resetZoom = $bindable(), ...rest } = $props();
 Chart.register(Tooltip);
 let canvasElem, chart;
 $effect(() => {

package/dist/components/simple/charts/Line.svelte.d.ts

@@ -7,6 +7,6 @@ interface Props extends HTMLCanvasAttributes {
     options: ChartOptions<'line'>;
     resetZoom?: boolean;
 }
-declare const Line: import("svelte").Component<Props, {}, "data" | "options" | "resetZoom">;
+declare const Line: import("svelte").Component<Props, {}, "options" | "resetZoom">;
 type Line = ReturnType<typeof Line>;
 export default Line;

package/dist/components/simple/charts/LineChart.svelte

@@ -90,7 +90,7 @@ let chartOptions = $derived({
 </script>
 
 <Line 
-  bind:data={(data as ComponentProps<typeof Line>['data'])}
+  data={(data as ComponentProps<typeof Line>['data'])}
   options={chartOptions}
   bind:resetZoom
 ></Line>

package/dist/components/simple/forms/Autocomplete.svelte

@@ -1,18 +1,18 @@
 <script module lang="ts">export {};
 </script>
 
-<script lang="ts" generics="Data">import '../../../css/main.css';
-import './Autocomplete.css';
-import { scrollInMenu } from '../common/scroller';
-let { values = $bindable([]), items = [], searchFunction = undefined, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = undefined, minWidth = "200px", openingId = $bindable("autocomplete-menu"), searchText = $bindable(undefined), maxVisibleChips = undefined, menuOpened = $bindable(false), closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = undefined, class: clazz = {}, selectionContainerSnippet, selectionSnippet, chipLabelSnippet, exceedCounterSnippet, menuSnippet, itemLabelSnippet, itemSnippet, onchange, onfocus, onblur, onkeydown, onclose, } = $props();
+<script lang="ts" generics="Data">import "../../../css/main.css";
+import "./Autocomplete.css";
+import { scrollInMenu } from "../common/scroller";
+let { values = $bindable(), items = [], searchFunction = undefined, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = undefined, minWidth = "200px", openingId = $bindable("autocomplete-menu"), searchText = $bindable(undefined), maxVisibleChips = undefined, menuOpened = $bindable(false), closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = undefined, class: clazz = {}, selectionContainerSnippet, selectionSnippet, chipLabelSnippet, exceedCounterSnippet, menuSnippet, itemLabelSnippet, itemSnippet, onchange, onfocus, onblur, onkeydown, onclose, } = $props();
 let notVisibleChipNumber = $derived(Math.max((values?.length || 0) - (maxVisibleChips || 0), 0));
 function select(item) {
     if (disabled)
         return;
-    const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
+    const alreadyPresent = values?.findIndex((i) => i.value === item.value) !== -1;
     if (!alreadyPresent) {
         if (multiple)
-            values = [...values, item];
+            values = [...(values || []), item];
         else
             values = [item];
         refreshMenuWidth();
@@ -22,7 +22,7 @@ function select(item) {
                     unselect: undefined,
                     select: item,
                     selection: values,
-                }
+                },
             });
         }
     }
@@ -32,25 +32,25 @@ function select(item) {
 function unselect(item) {
     if (disabled)
         return;
-    if (values.length == 1 && mandatory)
+    if (!!values && values.length == 1 && mandatory)
         return;
-    values = values.filter((i) => i.value != item.value);
+    values = values?.filter((i) => i.value != item.value);
     refreshMenuWidth();
     if (onchange) {
         onchange({
             detail: {
                 unselect: item,
                 select: undefined,
-                selection: values,
-            }
+                selection: values || [],
+            },
         });
     }
 }
 function pop() {
-    if (values.length == 1 && mandatory)
+    if (!!values && values.length == 1 && mandatory)
         return;
-    let poppedElement = values.pop();
-    values = [...values];
+    let poppedElement = values?.pop();
+    values = [...(values || [])];
     refreshMenuWidth();
     if (onchange) {
         onchange({
@@ -58,12 +58,12 @@ function pop() {
                 unselect: poppedElement,
                 select: undefined,
                 selection: values,
-            }
+            },
         });
     }
 }
 function toggle(item) {
-    const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
+    const alreadyPresent = values?.findIndex((i) => i.value === item.value) != -1;
     if (alreadyPresent)
         unselect(item);
     else
@@ -125,19 +125,19 @@ function handleKeyDown(event) {
     else if (event.key == "Enter" && focusedIndex != undefined) {
         toggle(filteredItems[focusedIndex]);
     }
-    else if (event.key == 'Backspace' && searchText == '') {
+    else if (event.key == "Backspace" && searchText == "") {
         pop();
     }
-    else if (event.key == 'Escape' || event.key == 'Tab') {
-        searchText = '';
+    else if (event.key == "Escape" || event.key == "Tab") {
+        searchText = "";
         if (!!input)
             input.blur();
         menuOpened = false;
     }
     if (focusedIndex !== undefined && !!menuElement) {
-        let child = menuElement.querySelector('.item-' + focusedIndex);
+        let child = menuElement.querySelector(".item-" + focusedIndex);
         if (!!child)
-            scrollInMenu(menuElement, child, 'instant');
+            scrollInMenu(menuElement, child, "instant");
     }
 }
 let input = $state();
@@ -161,7 +161,11 @@ $effect(() => {
             if (searchFunction)
                 return searchFunction(it, searchText);
             else
-                return !!searchText && it.label?.toString().toLowerCase().includes((searchText).toLowerCase());
+                return (!!searchText &&
+                    it.label
+                        ?.toString()
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()));
         });
     }
     else {
@@ -178,11 +182,12 @@ $effect(() => {
 });
 $effect(() => {
     if (!!input) {
-        if (!disabled && values.length != 0) {
-            input.style.width = Math.max(searchText?.length || placeholder?.length, 1) + 'ch';
+        if (!disabled && values?.length !== 0) {
+            input.style.width =
+                Math.max(searchText?.length || placeholder?.length, 1) + "ch";
         }
         else {
-            input.style.width = 'auto';
+            input.style.width = "auto";
         }
     }
 });
@@ -190,7 +195,7 @@ import Chip from "../navigation/Chip.svelte";
 import Menu from "../common/Menu.svelte";
 import {} from "svelte";
 import SimpleTextField from "./SimpleTextField.svelte";
-import MenuOrDrawer from '../../composed/common/MenuOrDrawer.svelte';
+import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
 </script>
 
 <svelte:window />
@@ -204,19 +209,25 @@ import MenuOrDrawer from '../../composed/common/MenuOrDrawer.svelte';
   style:opacity={disabled ? "50%" : "100%"}
   onclick={handleContainerClick}
   onkeypress={handleContainerClick}
-  class={clazz.activator || ''}
+  class={clazz.activator || ""}
   role="button"
   tabindex="0"
 >
   {#if selectionContainerSnippet}
-    {@render selectionContainerSnippet({ values, searchText, disabled, openMenu, handleKeyDown, unselect, select})}
+    {@render selectionContainerSnippet({
+      values: values || [],
+      searchText,
+      disabled,
+      openMenu,
+      handleKeyDown,
+      unselect,
+      select,
+    })}
   {:else}
-    <div
-      class="selection-container"
-    >
+    <div class="selection-container">
       {#each (values || []).slice(0, maxVisibleChips) as selection}
         {#if selectionSnippet}
-          {@render selectionSnippet({ selection, unselect})}
+          {@render selectionSnippet({ selection, unselect })}
         {:else}
           <div tabindex="-1">
             <Chip
@@ -237,7 +248,13 @@ import MenuOrDrawer from '../../composed/common/MenuOrDrawer.svelte';
       {/each}
       {#if maxVisibleChips !== undefined && notVisibleChipNumber > 0}
         {#if exceedCounterSnippet}
-          {@render exceedCounterSnippet({ notVisibleChipNumber, maxVisibleChips, values, searchText, disabled })}
+          {@render exceedCounterSnippet({
+            notVisibleChipNumber,
+            maxVisibleChips,
+            values: values || [],
+            searchText,
+            disabled,
+          })}
         {:else}
           <div class="not-visible-chip-number">+ {notVisibleChipNumber}</div>
         {/if}
@@ -250,7 +267,7 @@ import MenuOrDrawer from '../../composed/common/MenuOrDrawer.svelte';
         onblur={handleTextFieldBlur}
         onkeydown={handleKeyDown}
         {disabled}
-        placeholder={placeholder}
+        {placeholder}
         bind:this={input}
       />
     </div>
@@ -260,109 +277,112 @@ import MenuOrDrawer from '../../composed/common/MenuOrDrawer.svelte';
 {#key searchText}
   {#if menuSnippet}
     {@render menuSnippet()}
-  {:else}
-    {#if !mobileDrawer}
-      <Menu
-        {activator}
-        _width={localMenuWidth || ""}
-        _height={menuHeight}
-        _maxHeight="300px"
-        _boxShadow={menuBoxShadow}
-        _borderRadius={menuBorderRadius}
-        bind:open={menuOpened}
-        anchor="bottom-center"
-        closeOnClickOutside
-        bind:refreshPosition
-        bind:menuElement
-        bind:openingId={openingId}
-        flipOnOverflow
+  {:else if !mobileDrawer}
+    <Menu
+      {activator}
+      _width={localMenuWidth || ""}
+      _height={menuHeight}
+      _maxHeight="300px"
+      _boxShadow={menuBoxShadow}
+      _borderRadius={menuBorderRadius}
+      bind:open={menuOpened}
+      anchor="bottom-center"
+      closeOnClickOutside
+      bind:refreshPosition
+      bind:menuElement
+      bind:openingId
+      flipOnOverflow
+    >
+      <ul
+        class={clazz.menu || ""}
+        style:background-color="rgb(var(--global-color-background-100))"
       >
-        <ul
-          class={clazz.menu || ''}
-          style:background-color="rgb(var(--global-color-background-100))"
-        >
-          {#each filteredItems as item, index}
-            <li class="item-{index}">
-              {#if itemSnippet}
-                {@render itemSnippet({
-                  item,
-                  index,
-                  selected: (values || [])
-                    .findIndex((i) => { return i.value == item.value }) != -1
-                })}
-              {:else}
-                <div
-                  class:selection-item={true}
-                  class:focused={index == focusedIndex}
-                  class:selected={(values || []).findIndex((i) => {
+        {#each filteredItems as item, index}
+          <li class="item-{index}">
+            {#if itemSnippet}
+              {@render itemSnippet({
+                item,
+                index,
+                selected:
+                  (values || []).findIndex((i) => {
                     return i.value == item.value;
-                  }) != -1}
-                  onclick={() => toggle(item)}
-                  onkeypress={() => toggle(item)}
-                  role="button"
-                  tabindex="0"
-                >
-                  {#if itemLabelSnippet}
-                    {@render itemLabelSnippet({ item })}
-                  {:else}
-                    {item.label}
-                  {/if}
-                </div>
-              {/if}
-            </li>
-          {/each}
-        </ul>
-      </Menu>
-    {:else}
-      <MenuOrDrawer
-        {activator}
-        _width={localMenuWidth || ""}
-        _height={menuHeight}
-        _maxHeight="300px"
-        _boxShadow={menuBoxShadow}
-        _borderRadius={menuBorderRadius}
-        bind:open={menuOpened}
-        {onclose}
+                  }) != -1,
+              })}
+            {:else}
+              <div
+                class:selection-item={true}
+                class:focused={index == focusedIndex}
+                class:selected={(values || []).findIndex((i) => {
+                  return i.value == item.value;
+                }) != -1}
+                onclick={() => toggle(item)}
+                onkeypress={() => toggle(item)}
+                role="button"
+                tabindex="0"
+              >
+                {#if itemLabelSnippet}
+                  {@render itemLabelSnippet({ item })}
+                {:else}
+                  {item.label}
+                {/if}
+              </div>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    </Menu>
+  {:else}
+    <MenuOrDrawer
+      {activator}
+      _width={localMenuWidth || ""}
+      _height={menuHeight}
+      _maxHeight="300px"
+      _boxShadow={menuBoxShadow}
+      _borderRadius={menuBorderRadius}
+      bind:open={menuOpened}
+      {onclose}
+    >
+      <ul
+        class={clazz.menu || ""}
+        style:background-color="rgb(var(--global-color-background-100))"
       >
-        <ul
-          class={clazz.menu || ''}
-          style:background-color="rgb(var(--global-color-background-100))"
-        >
-          {#each filteredItems as item, index}
-            <li class="item-{index}">
-              {#if itemSnippet}
-                {@render itemSnippet({
-                  item,
-                  index,
-                  selected: (values || [])
-                    .findIndex((i) => { return i.value == item.value }) != -1
-                })}
-              {:else}
-                <div
-                  class:selection-item={true}
-                  class:focused={index == focusedIndex}
-                  class:selected={(values || []).findIndex((i) => {
+        {#each filteredItems as item, index}
+          <li class="item-{index}">
+            {#if itemSnippet}
+              {@render itemSnippet({
+                item,
+                index,
+                selected:
+                  (values || []).findIndex((i) => {
                     return i.value == item.value;
-                  }) != -1}
-                  onclick={() => toggle(item)}
-                  onkeypress={() => toggle(item)}
-                  role="button"
-                  tabindex="0"
-                >
-                  {#if itemLabelSnippet}
-                    {@render itemLabelSnippet({ item })}
-                  {:else}
-                    {item.label}
-                  {/if}
-                </div>
-              {/if}
-            </li>
-          {/each}
-        </ul>
-      </MenuOrDrawer>
-    {/if}
+                  }) != -1,
+              })}
+            {:else}
+              <div
+                class:selection-item={true}
+                class:focused={index == focusedIndex}
+                class:selected={(values || []).findIndex((i) => {
+                  return i.value == item.value;
+                }) != -1}
+                onclick={() => toggle(item)}
+                onkeypress={() => toggle(item)}
+                role="button"
+                tabindex="0"
+              >
+                {#if itemLabelSnippet}
+                  {@render itemLabelSnippet({ item })}
+                {:else}
+                  {item.label}
+                {/if}
+              </div>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    </MenuOrDrawer>
   {/if}
 {/key}
+
 <style>
   ul {
     list-style: none;
@@ -375,10 +395,7 @@ import MenuOrDrawer from '../../composed/common/MenuOrDrawer.svelte';
     flex-wrap: wrap;
     align-items: center;
     gap: 5px;
-    border: var(
-      --autocomplete-border,
-      var(--autocomplete-default-border)
-    );
+    border: var(--autocomplete-border, var(--autocomplete-default-border));
     background-color: var(
       --autocomplete-background-color,
       var(--autocomplete-default-background-color)
@@ -387,15 +404,12 @@ import MenuOrDrawer from '../../composed/common/MenuOrDrawer.svelte';
       --autocomplete-border-radius,
       var(--autocomplete-default-border-radius)
     );
-    padding: var(
-      --autocomplete-padding,
-      var(--autocomplete-default-padding)
-    );
+    padding: var(--autocomplete-padding, var(--autocomplete-default-padding));
     min-height: var(
       --autocomplete-min-height,
       var(--autocomplete-default-min-height)
     );
-    transition: all .1s;
+    transition: all 0.1s;
   }
 
   .selection-container:focus-within {
@@ -403,10 +417,7 @@ import MenuOrDrawer from '../../composed/common/MenuOrDrawer.svelte';
       --autocomplete-focus-border,
       var(
         --autocomplete-default-focus-border,
-        var(
-          --autocomplete-border,
-          var(--autocomplete-default-border)
-        )
+        var(--autocomplete-border, var(--autocomplete-default-border))
       )
     );
     box-shadow: var(
@@ -417,7 +428,10 @@ import MenuOrDrawer from '../../composed/common/MenuOrDrawer.svelte';
 
   .selection-item {
     padding: 10px;
-    max-width: var(--autocomplete-options-max-width, var(--autocomplete-default-options-max-width));
+    max-width: var(
+      --autocomplete-options-max-width,
+      var(--autocomplete-default-options-max-width)
+    );
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;

package/dist/components/simple/forms/Autocomplete.svelte.d.ts

@@ -3,11 +3,11 @@ export type Item<Data = any> = {
     label?: string | number;
     data?: Data;
 };
-import '../../../css/main.css';
-import './Autocomplete.css';
+import "../../../css/main.css";
+import "./Autocomplete.css";
 import { type ComponentProps, type Snippet } from "svelte";
 import SimpleTextField from "./SimpleTextField.svelte";
-import MenuOrDrawer from '../../composed/common/MenuOrDrawer.svelte';
+import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
 declare class __sveltets_Render<Data> {
     props(): {
         values?: Item<Data>[] | undefined;

package/dist/components/simple/forms/Checkbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import './Checkbox.css';
 import '../../../css/main.css';
 import { onMount } from 'svelte';
-let { value = $bindable(false), id = undefined, disabled = false, onchange, } = $props();
+let { value = $bindable(), id = undefined, disabled = false, onchange, } = $props();
 onMount(() => {
     window.addEventListener('keydown', handleKeyDown);
     window.addEventListener('keyup', handleKeyUp);

package/dist/components/simple/forms/FileInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import '../../../css/main.css';
 import './FileInput.css';
-let { files = $bindable(undefined), placeholder = undefined, persistOverUpload = true, disabled = false, maxFiles = undefined, class: clazz = '', onfileDrop, onfileSelect, onchange, bodySnippet, } = $props();
+let { files = $bindable(), placeholder = undefined, persistOverUpload = true, disabled = false, maxFiles = undefined, class: clazz = '', onfileDrop, onfileSelect, onchange, bodySnippet, } = $props();
 let inputElement = undefined;
 let dropAreaActive = $state(false);
 const highlight = (highlighted) => {

package/dist/components/simple/forms/FileInputList.svelte

@@ -3,7 +3,7 @@ import "./FileInputList.css";
 import Button from "../buttons/Button.svelte";
 import FileInput from "./FileInput.svelte";
 import Icon from "../media/Icon.svelte";
-let { files = $bindable([]), persistOverUpload = true, dropAreaActive = true, icon = "mdi-file-document", message = "Drop file here or click to upload", disabled = false, maxFiles = undefined, class: clazz = '', onchange, onfileChange, onfileDrop, onfileSelect, bodySnippet: bodyOuterSnippet, messageSnippet, fileListSnippet, } = $props();
+let { files = $bindable(), persistOverUpload = true, dropAreaActive = true, icon = "mdi-file-document", message = "Drop file here or click to upload", disabled = false, maxFiles = undefined, class: clazz = '', onchange, onfileChange, onfileDrop, onfileSelect, bodySnippet: bodyOuterSnippet, messageSnippet, fileListSnippet, } = $props();
 let fileActive = $state(null);
 function handleFileMouseEnter(file) {
     dropAreaActive = false;
@@ -17,13 +17,13 @@ function handleFileClick(file) {
     alert(file.name);
 }
 function handleRemove(file) {
-    files = files.filter((elem) => {
+    files = files?.filter((elem) => {
         return elem != file;
     });
     if (onfileChange) {
         onfileChange({
             detail: {
-                files
+                files: files || []
             }
         });
     }
@@ -32,7 +32,7 @@ function handleFileDrop() {
     if (onfileChange) {
         onfileChange({
             detail: {
-                files
+                files: files || []
             }
         });
     }
@@ -44,7 +44,7 @@ function handleFileSelect() {
     if (onfileChange) {
         onfileChange({
             detail: {
-                files
+                files: files || []
             }
         });
     }
@@ -58,7 +58,7 @@ function handleFileSelect() {
   <FileInput
     bind:files
     {persistOverUpload}
-    disabled={disabled || (maxFiles !== undefined && files.length >= maxFiles)}
+    disabled={disabled || (maxFiles !== undefined && !!files && files.length >= maxFiles)}
     --file-input-border-radius="var(--file-input-list-border-radius,var(--file-input-list-default-border-radius))"
     --file-input-background-color="var(--file-input-list-background-color,var(--file-input-list-default-background-color))"
     --file-input-color="var(--file-input-list-color,var(--file-input-list-default-color))"
@@ -79,7 +79,7 @@ function handleFileSelect() {
           style:display="flex"
         >
           <div class="body-container" class:{active}>
-            {#if files.length == 0}
+            {#if files?.length == 0}
               {#if messageSnippet}
                 {@render messageSnippet({ message })}
               {:else}
@@ -87,11 +87,11 @@ function handleFileSelect() {
               {/if}
             {:else}
               {#if fileListSnippet}
-                {@render fileListSnippet({ files })}
+                {@render fileListSnippet({ files: files || [] })}
               {:else}
                 <table class="file-list">
                   <tbody>
-                    {#each files as file}
+                    {#each (files || []) as file}
                       <tr
                         onclick={(e) => {
                           e.stopPropagation()

package/dist/components/simple/forms/RadioButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import './RadioButton.css';
 import "../../../css/main.css";
-let { name, value, id = undefined, checked = $bindable(false), label = undefined, disabled = false, onblur, onchange, onfocus, oninput, onkeydown, onkeypress, onkeyup, } = $props();
+let { name, value, id = undefined, checked = $bindable(), label = undefined, disabled = false, onblur, onchange, onfocus, oninput, onkeydown, onkeypress, onkeyup, } = $props();
 </script>
 
 <input

package/dist/components/simple/forms/Select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>import './Select.css';
 </script>
 <script lang="ts">import { Icon } from "../../..";
-let { options, name = undefined, value = $bindable(undefined), disabled = false, placeholder = undefined, onchange, optionAttributes, ...rest } = $props();
+let { options, name = undefined, value = $bindable(), disabled = false, placeholder = undefined, onchange, optionAttributes, ...rest } = $props();
 </script>
 
 <select

package/dist/components/simple/forms/SimpleTextField.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import '../../../css/main.css';
 import './SimpleTextField.css';
 import Icon from "../media/Icon.svelte";
-let { value = $bindable(undefined), type = "text", placeholder = undefined, disabled = false, readonly = false, id = undefined, appendIcon = undefined, appendInnerIcon = undefined, prependIcon = undefined, prependInnerIcon = undefined, iconSize = "12pt", name = undefined, hint = undefined, input = $bindable(undefined), class: clazz = {}, prependSnippet, prependInnerSnippet, appendInnerSnippet, appendSnippet, hintSnippet, onchange, oninput, onfocus, onblur, onkeydown, onkeyup, onkeypress, ...rest } = $props();
+let { value = $bindable(), type = "text", placeholder = undefined, disabled = false, readonly = false, id = undefined, appendIcon = undefined, appendInnerIcon = undefined, prependIcon = undefined, prependInnerIcon = undefined, iconSize = "12pt", name = undefined, hint = undefined, input = $bindable(undefined), class: clazz = {}, prependSnippet, prependInnerSnippet, appendInnerSnippet, appendSnippet, hintSnippet, onchange, oninput, onfocus, onblur, onkeydown, onkeyup, onkeypress, ...rest } = $props();
 </script>
 
 <div

package/dist/components/simple/forms/Switch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import './Switch.css';
-let { value = $bindable(undefined), disabled = false, onchange: onchangeInternal, } = $props();
+let { value = $bindable(), disabled = false, onchange: onchangeInternal, } = $props();
 function onchange(event) {
     if (onchangeInternal) {
         onchangeInternal({

package/dist/components/simple/forms/Textarea.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { createId } from '@paralleldrive/cuid2';
-let { label = undefined, placeholder = "placeholder", textAreaId = createId(), fontFamily = "inherit", value = $bindable(""), resizable = true, disabled = false, readOnly = false, maxLength = undefined, textColor = "black", border = "none", borderRadius = "5px", focusedBoxShadow = undefined, backgroundColor = undefined, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, labelFontSize = undefined, labelColor = undefined, width = "100%", height = "100%" } = $props();
+let { label = undefined, placeholder = "placeholder", textAreaId = createId(), fontFamily = "inherit", value = $bindable(), resizable = true, disabled = false, readOnly = false, maxLength = undefined, textColor = "black", border = "none", borderRadius = "5px", focusedBoxShadow = undefined, backgroundColor = undefined, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, labelFontSize = undefined, labelColor = undefined, width = "100%", height = "100%" } = $props();
 </script>
 
 <div class="container">

package/dist/components/simple/forms/VerticalSwitch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import './VerticalSwitch.css';
-let { value = $bindable(false), rounded = false, onchange, falseOptionSnippet, trueOptionSnippet, } = $props();
+let { value = $bindable(), rounded = false, onchange, falseOptionSnippet, trueOptionSnippet, } = $props();
 </script>
 
 <div

package/dist/components/simple/forms/VerticalTextSwitch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { fly } from "svelte/transition";
-let { value = $bindable(false), height = "100%", width = "100%", backgroundColor, firstColor, secondColor = firstColor, fontSize = "12px", hoverBackgroundColor, hoverBoxShadow, animationDuration = 200, falseOptionSnippet, trueOptionSnippet, } = $props();
+let { value = $bindable(), height = "100%", width = "100%", backgroundColor, firstColor, secondColor = firstColor, fontSize = "12px", hoverBackgroundColor, hoverBoxShadow, animationDuration = 200, falseOptionSnippet, trueOptionSnippet, } = $props();
 let optionHeight = $state(undefined);
 </script>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",