@likable-hair/svelte 0.0.44 → 0.0.48

package/buttons/Button.svelte

@@ -1,8 +1,10 @@
-<script >export let type = 'default', active = false, loading = false, icon = undefined, iconSize = 15, clazz = '', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = undefined, color = undefined, display = undefined, justifyContent = undefined, alignItems = undefined, backgroundColor = undefined, hoverBackgroundColor = '#88888847', activeBackgroundColor = hoverBackgroundColor, borderRadius = undefined, border = undefined, boxShadow = undefined;
+<script >export let type = 'default', active = false, loading = false, icon = undefined, iconSize = 15, clazz = '', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = undefined, color = undefined, display = undefined, justifyContent = undefined, alignItems = undefined, backgroundColor = undefined, hoverBackgroundColor = '#88888847', activeBackgroundColor = hoverBackgroundColor, borderRadius = undefined, border = undefined, boxShadow = undefined, loaderHeight = undefined, loaderWidth = undefined, disabled = false;
 export { clazz as class };
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 function handleClick(event) {
+    if (disabled)
+        return;
     dispatch('click', {
         nativeEvent: event
     });
@@ -45,6 +47,8 @@ import CircularLoader from '../loaders/CircularLoader.svelte';
   {#if loading}
     <CircularLoader
       color={color}
+      height={loaderHeight}
+      width={loaderWidth}
     ></CircularLoader>
   {:else}
     {#if !!icon}
@@ -118,8 +122,8 @@ import CircularLoader from '../loaders/CircularLoader.svelte';
   .no-select {
     -webkit-touch-callout: none; /* iOS Safari */
       -webkit-user-select: none; /* Safari */
-      -khtml-user-select: none; /* Konqueror HTML */
-        -moz-user-select: none; /* Old versions of Firefox */
+       -khtml-user-select: none; /* Konqueror HTML */
+         -moz-user-select: none; /* Old versions of Firefox */
           -ms-user-select: none; /* Internet Explorer/Edge */
               user-select: none; /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */

package/buttons/Button.svelte.d.ts

@@ -27,6 +27,9 @@ declare const __propDef: {
         borderRadius?: string;
         border?: string;
         boxShadow?: string;
+        loaderHeight?: string;
+        loaderWidth?: string;
+        disabled?: boolean;
     };
     events: {
         click: CustomEvent<{

package/common/Menu.svelte

@@ -1,13 +1,13 @@
 <script >import { v4 as uuidv4 } from 'uuid';
 import { fly } from 'svelte/transition';
-export let open = false, top = undefined, left = undefined, width, height, activator = undefined, anchor = 'bottom', closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
+export let open = false, top = undefined, left = undefined, width, height, maxHeight = undefined, overflow = "auto", refreshPosition = false, boxShadow = undefined, borderRadius = undefined, activator = undefined, anchor = 'bottom', closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
     duration: 100,
     y: 10
 }, outAnimation = fly, outAnimationConfig = {
     duration: 100,
     y: 10
-};
-let zIndex = 50, menuElement, currentUid = uuidv4();
+}, menuElement = undefined;
+let zIndex = 50, currentUid = uuidv4();
 function calculateMenuPosition(params) {
     if (!!params.menuElement) {
         if (!!params.activator) {
@@ -58,6 +58,13 @@ $: if (open) {
     if (!!maxZIndex)
         zIndex = maxZIndex + 2;
 }
+$: if (!!width) {
+    calculateMenuPosition({ activator, menuElement });
+}
+$: if (refreshPosition) {
+    calculateMenuPosition({ activator, menuElement });
+    refreshPosition = false;
+}
 $: if (closeOnClickOutside && !!menuElement) {
     window.addEventListener('click', (event) => {
         open = false;
@@ -81,9 +88,13 @@ $: if (closeOnClickOutside && !!menuElement) {
     style:z-index={zIndex}
     style:position="absolute"
     style:top={top + "px"}
+    style:box-shadow={boxShadow}
+    style:border-radius={borderRadius}
     style:left={left + "px"}
     style:height={height}
+    style:max-height={maxHeight}
     style:width={width}
+    style:overflow={overflow}
     in:inAnimation={inAnimationConfig}
     out:outAnimation={outAnimationConfig}
   >

package/common/Menu.svelte.d.ts

@@ -7,6 +7,11 @@ declare const __propDef: {
         left?: number;
         width: string;
         height: string;
+        maxHeight?: string;
+        overflow?: string;
+        refreshPosition?: boolean;
+        boxShadow?: string;
+        borderRadius?: string;
         activator?: HTMLElement;
         anchor?: 'bottom' | 'bottom-center';
         closeOnClickOutside?: boolean;
@@ -14,6 +19,7 @@ declare const __propDef: {
         inAnimationConfig?: SlideParams | FlyParams | FadeParams;
         outAnimation?: (node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig;
         outAnimationConfig?: SlideParams | FlyParams | FadeParams;
+        menuElement?: HTMLElement;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Autocomplete.svelte

@@ -0,0 +1,219 @@
+<script context="module" ></script>
+
+<script >export let values = [], items, searchFunction = undefined, multiple = false, disabled = false, width = "auto", maxWidth = undefined, 
+// textfield
+textFieldLabel = "", textFieldPlaceholder = "", textFieldColor = null, textFieldVariant = 'boxed', textFieldMaxWidth = "min(100px, 90%)", textFieldMinWidth = undefined, textFieldHeight = "auto", textFieldTextColor = "black", textFieldBorderWeight = "2px", textFieldBorderRadius = "5px", textFieldBorderColor = null, textFieldFocusBorderColor = null, textFieldFocusedBoxShadow = undefined, textFieldBackgroundColor = null, textFieldPadding = undefined, textFieldPaddingLeft = undefined, textFieldPaddingRight = undefined, textFieldPaddingBottom = undefined, textFieldPaddingTop = undefined, textFieldFontSize = undefined, 
+// menu
+menuBackgroundColor = "#FFF", menuBoxShadow = "rgba(149, 157, 165, 0.2) 0px 8px 24px", menuBorderRadius = "5px", focusItemBackgroundColor = "#EEEEEE", selectedItemBackgroundColor = "#D0D0D0", border = '1px solid black', borderRadius = '5px', chipColor = "#D0D0D0", chipTextColor = "black", chipHeight = "30px";
+function select(item) {
+    const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
+    if (!alreadyPresent) {
+        if (multiple)
+            values = [...values, item];
+        else
+            values = [item];
+        refreshMenuWidth();
+    }
+}
+function unselect(item) {
+    values = values.filter((i) => i.value != item.value);
+    refreshMenuWidth();
+}
+function toggle(item) {
+    const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
+    console.log(item, alreadyPresent);
+    if (alreadyPresent)
+        unselect(item);
+    else
+        select(item);
+}
+let menuWidth = undefined, menuHeight = "auto", menuOpened = false, refreshPosition = false;
+function openMenu() {
+    refreshMenuWidth();
+    menuOpened = true;
+}
+function closeMenu() {
+    menuOpened = false;
+}
+function refreshMenuWidth() {
+    menuWidth = activator.offsetWidth + 'px';
+    refreshPosition = true;
+}
+let activator, focusedIndex = undefined;
+function handleTextFieldFocus() {
+    focusedIndex = undefined;
+    openMenu();
+}
+function handleTextFieldBlur() {
+    // closeMenu()
+}
+let menuElement;
+function handleWindowKeyDown(event) {
+    if (event.key == 'ArrowDown' && (focusedIndex < filteredItems.length - 1 || focusedIndex === undefined)) {
+        if (focusedIndex === undefined)
+            focusedIndex = 0;
+        else
+            focusedIndex += 1;
+    }
+    else if (event.key == 'ArrowUp' && (focusedIndex > 0 || focusedIndex === undefined)) {
+        if (focusedIndex === undefined)
+            focusedIndex = filteredItems.length - 1;
+        else
+            focusedIndex -= 1;
+    }
+    else if (event.key == 'Enter' && focusedIndex != undefined) {
+        toggle(filteredItems[focusedIndex]);
+    }
+}
+let input;
+function handleContainerClick() {
+    if (!menuOpened)
+        input.focus();
+}
+let searchText, filteredItems = items;
+$: if (!!searchText) {
+    focusedIndex = undefined;
+    filteredItems = items.filter((it) => {
+        if (!!searchFunction)
+            return searchFunction(it, searchText);
+        else
+            return it.label.toLowerCase().includes(searchText.toLowerCase());
+    });
+}
+else {
+    filteredItems = items;
+}
+import Textfield from "./Textfield.svelte";
+import Chip from '../navigation/Chip.svelte';
+import Menu from '../common/Menu.svelte';
+</script>
+
+<svelte:window></svelte:window>
+
+<div 
+  bind:this={activator}
+  style:width={width}
+  style:max-width={maxWidth}
+  style:opacity={disabled ? '50%' : '100%'}
+  on:click={handleContainerClick}
+>
+  <slot name="selection-container">
+    <div 
+      class="selection-container"
+      style:border={border}
+      style:border-radius={borderRadius}
+    >
+      {#each values as selection}
+        <slot name="selection" selection={selection}>
+          <div
+            style:height={chipHeight}
+          >
+            <Chip
+              color={chipColor}
+              textColor={chipTextColor}
+              close={true}
+              label={true}
+              on:close={() => unselect(selection)}
+            >{selection.label}</Chip>
+          </div>
+        </slot>  
+      {/each}
+
+      <Textfield
+        label={textFieldLabel}
+        placeholder={textFieldPlaceholder}
+        color={textFieldColor}
+        bind:value={searchText}
+        variant={textFieldVariant}
+        maxWidth={textFieldMaxWidth}
+        minWidth={textFieldMinWidth}
+        textColor={textFieldTextColor}
+        borderWeight={textFieldBorderWeight}
+        borderRadius={textFieldBorderRadius}
+        borderColor={textFieldBorderColor}
+        focusBorderColor={textFieldFocusBorderColor}
+        focusedBoxShadow={textFieldFocusedBoxShadow}
+        backgroundColor={textFieldBackgroundColor}
+        padding={textFieldPadding}
+        paddingLeft={textFieldPaddingLeft}
+        paddingRight={textFieldPaddingRight}
+        paddingBottom={textFieldPaddingBottom}
+        paddingTop={textFieldPaddingTop}
+        fontSize={textFieldFontSize}
+        height={textFieldHeight}
+        disabled={disabled}
+        on:focus={handleTextFieldFocus}
+        on:blur={handleTextFieldBlur}
+        on:keydown={handleWindowKeyDown}
+        bind:inputElement={input}
+      ></Textfield>
+    </div>
+  </slot>
+</div>
+
+<slot name="menu">
+  <Menu
+    activator={activator}
+    width={menuWidth}
+    height={menuHeight}
+    maxHeight="300px"
+    boxShadow={menuBoxShadow}
+    borderRadius={menuBorderRadius}
+    bind:open={menuOpened}
+    anchor="bottom-center"
+    closeOnClickOutside
+    bind:refreshPosition={refreshPosition}
+    bind:menuElement={menuElement}
+  >
+    <div
+      style:background-color={menuBackgroundColor}
+    >
+      {#each filteredItems as item, index}
+        <slot 
+          name="item" 
+          item={item} 
+          index={index} 
+          selected={values.findIndex((i) => {
+            return i.value == item.value
+          }) != -1}
+        >
+          <div
+            style:--autocomplete-selected-item-background-color={selectedItemBackgroundColor}
+            style:--autocomplete-focus-item-background-color={focusItemBackgroundColor}
+            class:selection-item={true}
+            class:focused={index == focusedIndex}
+            class:selected={values.findIndex((i) => {
+              return i.value == item.value
+            }) != -1}
+            on:click={(event) => toggle(item)}
+          >{item.label}</div>
+        </slot>
+      {/each}
+    </div>
+  </Menu>
+</slot>
+
+<style>
+  .selection-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    padding: 5px
+  }
+
+  .selection-item {
+    padding: 10px;
+  }
+
+  .selection-item.selected {
+    background-color: var(--autocomplete-selected-item-background-color);
+  }
+
+  .selection-item.focused {
+    background-color: var(--autocomplete-focus-item-background-color);
+  }
+
+  .selection-item:hover {
+    background-color: var(--autocomplete-focus-item-background-color);
+  }
+</style>

package/forms/Autocomplete.svelte.d.ts

@@ -0,0 +1,69 @@
+import { SvelteComponentTyped } from "svelte";
+export declare type Item = {
+    value: string;
+    label?: string;
+    data?: any;
+};
+import type { VariantOptions } from './Textfield.svelte';
+declare const __propDef: {
+    props: {
+        values?: Item[];
+        items: Item[];
+        searchFunction?: (item: Item, searchText: string) => boolean;
+        multiple?: boolean;
+        disabled?: boolean;
+        width?: string;
+        maxWidth?: string;
+        textFieldLabel?: string;
+        textFieldPlaceholder?: string;
+        textFieldColor?: string;
+        textFieldVariant?: VariantOptions;
+        textFieldMaxWidth?: string;
+        textFieldMinWidth?: string;
+        textFieldHeight?: string;
+        textFieldTextColor?: string;
+        textFieldBorderWeight?: string;
+        textFieldBorderRadius?: string;
+        textFieldBorderColor?: string;
+        textFieldFocusBorderColor?: string;
+        textFieldFocusedBoxShadow?: string;
+        textFieldBackgroundColor?: string;
+        textFieldPadding?: string;
+        textFieldPaddingLeft?: string;
+        textFieldPaddingRight?: string;
+        textFieldPaddingBottom?: string;
+        textFieldPaddingTop?: string;
+        textFieldFontSize?: string;
+        menuBackgroundColor?: string;
+        menuBoxShadow?: string;
+        menuBorderRadius?: string;
+        focusItemBackgroundColor?: string;
+        selectedItemBackgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        chipColor?: string;
+        chipTextColor?: string;
+        chipHeight?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'selection-container': {};
+        selection: {
+            selection: Item;
+        };
+        menu: {};
+        item: {
+            item: Item;
+            index: any;
+            selected: boolean;
+        };
+    };
+};
+export declare type AutocompleteProps = typeof __propDef.props;
+export declare type AutocompleteEvents = typeof __propDef.events;
+export declare type AutocompleteSlots = typeof __propDef.slots;
+export default class Autocomplete extends SvelteComponentTyped<AutocompleteProps, AutocompleteEvents, AutocompleteSlots> {
+}
+export {};

package/forms/Textfield.svelte

@@ -1,4 +1,6 @@
-<script >export let label = "", placeholder = "", color = null, value = "", variant = 'outlined', width = "100%", textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text';
+<script  context="module"></script>
+
+<script >export let label = "", placeholder = "", color = null, value = "", disabled = false, variant = 'outlined', width = "100%", height = "50px", maxWidth = undefined, minWidth = undefined, textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text', inputElement = undefined;
 import { v4 as uuidv4 } from 'uuid';
 import { onMount } from 'svelte';
 let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
@@ -20,7 +22,6 @@ $: if (!!labelElement) {
 
 <style>
   .input-container {
-    height: 50px;
     position: relative;
     --textfield-final-color: var(--textfield-theme-color, --textfield-border-color, rgb(88, 88, 88));
     --textfield-final-border-color: var(--textfield-border-color, var(--textfield-final-color))
@@ -111,6 +112,9 @@ $: if (!!labelElement) {
 
 <div 
   style:width={width}
+  style:min-width={minWidth}
+  style:max-width={maxWidth}
+  style:height={height}
   style:--textfield-theme-color={color}
   style:--textfield-border-color={borderColor}
   style:--textfield-border-weight={borderWeight}
@@ -161,6 +165,7 @@ $: if (!!labelElement) {
               class="input-outlined"
               type="password"
               placeholder={placeholder}
+              disabled={disabled}
               bind:value={value}
               on:change
               on:input
@@ -171,6 +176,7 @@ $: if (!!labelElement) {
               on:keydown
               on:keypress
               on:keyup
+              bind:this={inputElement}
             />
           {:else if type == 'text'}
             <input 
@@ -181,6 +187,7 @@ $: if (!!labelElement) {
               class="input-outlined"
               type="text"
               placeholder={placeholder}
+              disabled={disabled}
               bind:value={value}
               on:change
               on:input
@@ -191,6 +198,7 @@ $: if (!!labelElement) {
               on:keydown
               on:keypress
               on:keyup
+              bind:this={inputElement}
             />
           {/if}
           <div>
@@ -213,6 +221,7 @@ $: if (!!labelElement) {
             class="input-boxed"
             type="password"
             placeholder={placeholder || label}
+            disabled={disabled}
             bind:value={value}
             on:change
             on:input
@@ -221,8 +230,9 @@ $: if (!!labelElement) {
             on:blur={handleBlur}
             on:blur
             on:keydown
-              on:keypress
-              on:keyup
+            on:keypress
+            on:keyup
+            bind:this={inputElement}
           />
         {:else if type == 'text'}
           <input
@@ -233,6 +243,7 @@ $: if (!!labelElement) {
             class="input-boxed"
             type="text"
             placeholder={placeholder || label}
+            disabled={disabled}
             bind:value={value}
             on:change
             on:input
@@ -243,6 +254,7 @@ $: if (!!labelElement) {
             on:keydown
             on:keypress
             on:keyup
+            bind:this={inputElement}
           />
         {/if}
         <div>

package/forms/Textfield.svelte.d.ts

@@ -1,12 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
+export declare type VariantOptions = 'outlined' | 'boxed';
 declare const __propDef: {
     props: {
         label?: string;
         placeholder?: string;
         color?: string;
         value?: string;
-        variant?: "outlined" | "boxed";
+        disabled?: boolean;
+        variant?: VariantOptions;
         width?: string;
+        height?: string;
+        maxWidth?: string;
+        minWidth?: string;
         textColor?: string;
         borderWeight?: string;
         borderRadius?: string;
@@ -21,6 +26,7 @@ declare const __propDef: {
         paddingTop?: string;
         fontSize?: string;
         type?: 'text' | 'password';
+        inputElement?: HTMLElement;
     };
     events: {
         change: Event;

package/media/Avatar.svelte

@@ -1,4 +1,4 @@
-<script >export let src, alt = "", width = "40px", maxWidth = undefined, minWidth = undefined, height = "40px", maxHeight = undefined, minHeight = undefined, lazyLoaded = false, borderRadius = "50%";
+<script >export let src, alt = "", width = "40px", maxWidth = undefined, minWidth = undefined, height = "40px", maxHeight = undefined, minHeight = undefined, lazyLoaded = false, referrerpolicy = "no-referrer", borderRadius = "50%";
 import Image from './Image.svelte';
 </script>
 
@@ -27,5 +27,6 @@ import Image from './Image.svelte';
     style:min-height={minHeight}
     style:border-radius={borderRadius}
     style:object-fit="cover"
+    referrerpolicy={referrerpolicy}
   />
 {/if}

package/media/Avatar.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         maxHeight?: string;
         minHeight?: string;
         lazyLoaded?: boolean;
+        referrerpolicy?: string;
         borderRadius?: string;
     };
     events: {

package/media/DescriptiveAvatar.svelte

@@ -1,4 +1,4 @@
-<script >export let src, title = undefined, description = undefined, direction = 'row', reverse = false, avatarSpacing = '10px', width = undefined, maxWidth = undefined, minWidth = undefined, height = undefined, maxHeight = undefined, minHeight = undefined, lazyLoaded = false, borderRadius = "50%";
+<script >export let src, title = undefined, description = undefined, direction = 'row', reverse = false, avatarSpacing = '10px', width = undefined, maxWidth = undefined, minWidth = undefined, height = undefined, maxHeight = undefined, minHeight = undefined, lazyLoaded = false, borderRadius = "50%", referrerpolicy = "no-referrer";
 let textAlignment;
 $: if (direction == 'column') {
     textAlignment = 'center';
@@ -53,6 +53,7 @@ import Avatar from "./Avatar.svelte";
       minHeight={minHeight}
       borderRadius={borderRadius}
       lazyLoaded={lazyLoaded}
+      referrerpolicy={referrerpolicy}
     ></Avatar>
   </div>
   <div 

package/media/DescriptiveAvatar.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         minHeight?: string;
         lazyLoaded?: boolean;
         borderRadius?: string;
+        referrerpolicy?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/navigation/Chip.svelte

@@ -1,56 +1,53 @@
 <script >import Icon from '../media/Icon.svelte';
 import Button from '../buttons/Button.svelte';
 import { createEventDispatcher } from 'svelte';
-export let active = true, close = false, closeIcon = "mdi-close-circle", color = "blue", textColor = "white", disabled = false, filter = false, filterIcon = "mdi-check", label = false, outlined = false, size = 12;
+export let close = false, closeIcon = "mdi-close-circle", color = "blue", textColor = "white", disabled = false, filter = false, filterIcon = "mdi-check", label = false, outlined = false, size = 12;
 const dispatch = createEventDispatcher();
 function handleChipClick() {
     dispatch('click');
 }
 function handleCloseClick() {
-    active = false;
     dispatch('close');
 }
 </script>
 
-{#if active}
-  <div
-    class="chip"
-    style:border-radius={label?"5px":"100px"}
-    style:background-color="{color}"
-    style:color={outlined?color:textColor}
-    class:label={label}
-    class:outlined={outlined}
-    class:disabled={disabled}
-    on:click={handleChipClick}
+<div
+  class="chip"
+  style:border-radius={label?"5px":"100px"}
+  style:background-color="{color}"
+  style:color={outlined?color:textColor}
+  class:label={label}
+  class:outlined={outlined}
+  class:disabled={disabled}
+  on:click={handleChipClick}
+>
+  {#if filter}
+    <div class="icon-before">
+      <Icon
+        name={filterIcon}
+        size={size}
+      ></Icon>
+    </div>
+  {/if}
+  <div class="text"
+    style:font-size="{size}pt"
+    style:line-height="{size}pt"
   >
-    {#if filter}
-      <div class="icon-before">
-        <Icon
-          name={filterIcon}
-          size={size}
-        ></Icon>
-      </div>
-    {/if}
-    <div class="text"
-      style:font-size="{size}pt"
-      style:line-height="{size}pt"
-    >
-    <slot></slot>
-  </div>
-    {#if close}
-      <div class="icon-after">
-        <Button
-          icon={closeIcon}
-          iconSize={size}
-          type='icon'
-          hoverBackgroundColor="none"
-          on:click={handleCloseClick}
-        >
-        </Button>
-      </div>
-    {/if}
-  </div>
-{/if}
+  <slot></slot>
+</div>
+  {#if close}
+    <div class="icon-after">
+      <Button
+        icon={closeIcon}
+        iconSize={size}
+        type='icon'
+        hoverBackgroundColor="none"
+        on:click={handleCloseClick}
+      >
+      </Button>
+    </div>
+  {/if}
+</div>
 
 <style>
   .chip {

package/navigation/Chip.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        active?: boolean;
         close?: boolean;
         closeIcon?: string;
         color?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.44",
+  "version": "0.0.48",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -80,6 +80,7 @@
     "./dates/YearSelector.svelte": "./dates/YearSelector.svelte",
     "./dates/utils": "./dates/utils.js",
     "./dialogs/Dialog.svelte": "./dialogs/Dialog.svelte",
+    "./forms/Autocomplete.svelte": "./forms/Autocomplete.svelte",
     "./forms/Checkbox.svelte": "./forms/Checkbox.svelte",
     "./forms/FileInput.svelte": "./forms/FileInput.svelte",
     "./forms/FileInputList.svelte": "./forms/FileInputList.svelte",