@dosgato/dialog 1.0.6 → 1.0.8

package/dist/Container.svelte

@@ -47,6 +47,7 @@ $: setNeedsShowHelp(helpelement);
   <div class="dialog-field-content">
     {#if helptext}
       <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div use:resize={{ debounce: 10 }} on:resize={setNeedsShowHelp} id={helptextid} class="dialog-field-help" class:needsShowHelp class:expanded={showhelp} on:click={() => { if (needsShowHelp) showhelp = !showhelp }}>
         <span bind:this={helpelement}>{@html helptext}</span>
         {#if needsShowHelp}

package/dist/FieldChoices.svelte

@@ -69,7 +69,7 @@ onMount(reactToChoices);
     <div class="dialog-choices {className}" class:valid class:invalid>
       {#each choices as choice, idx (choice.value)}
         {@const checkid = `${path}.${idx}`}
-        {@const included = value && value.includes(choice.value)}
+        {@const included = value?.includes(choice.value)}
         {@const label = choice.label || (typeof choice.value === 'string' ? choice.value : '')}
         <label for={checkid} style:width style:order={orders[idx]}>
           <Checkbox id={checkid} name={checkid} value={included} descid={getDescribedBy([descid, messagesid, helptextid, extradescid])} disabled={choice.disabled} onChange={() => onChangeCheckbox(setVal, choice, included)} {onBlur} />

package/dist/FieldChooserLink.svelte

@@ -66,7 +66,7 @@ async function userUrlEntryDebounced() {
     store.clearPreview();
     if (isBlank(url)) {
         selectedAsset = undefined;
-        formStore.setField(finalPath, undefined);
+        void formStore.setField(finalPath, undefined);
         return;
     }
     let found = false;
@@ -117,7 +117,7 @@ async function userUrlEntryDebounced() {
             }
         }
     }
-    formStore.setField(finalPath, selectedAsset?.id);
+    void formStore.setField(finalPath, selectedAsset?.id);
     formStore.dirtyField(finalPath);
 }
 const urlToValueCache = {};
@@ -159,7 +159,7 @@ async function updateSelected(..._) {
         }
     }
 }
-$: updateSelected($value);
+$: void updateSelected($value);
 </script>
 
 <FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {required} {related} {helptext} let:value let:messagesid let:helptextid let:valid let:invalid let:id let:onBlur let:setVal>

package/dist/FieldDateTime.svelte

@@ -15,8 +15,23 @@ export let required = false;
 export let related = 0;
 export let extradescid = undefined;
 export let helptext = undefined;
+export let inputelement = undefined;
+let showBadInputMessage = false;
+function wrapOnChange(onChange) {
+    showBadInputMessage = inputelement.validity.badInput;
+    onChange();
+}
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={datetimeSerialize} deserialize={datetimeDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:helptextid let:messagesid>
-  <Input type="datetime-local" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {extradescid} {messagesid} {helptextid}/>
+  {#if showBadInputMessage}<div class="bad-input-warning" aria-live='polite'>{`Field ${label}`} must include both a date and time</div>{/if}
+  <Input bind:inputelement={inputelement} type="datetime-local" name={path} {value} {id} class="dialog-input {className}" onChange={() => { wrapOnChange(onChange) }} {onBlur} {valid} {invalid} {min} {max} {step} {extradescid} {messagesid} {helptextid}/>
 </FieldStandard>
+
+<style>
+  .bad-input-warning {
+    margin-bottom: 0.3em;
+    color: var(--dg-danger-bg, #9a3332);
+  }
+
+</style>

package/dist/FieldDateTime.svelte.d.ts

@@ -18,6 +18,7 @@ declare const __propDef: {
         related?: number | true | undefined;
         extradescid?: string | undefined;
         helptext?: string | undefined;
+        inputelement?: HTMLInputElement | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/FieldDualListbox.svelte

@@ -62,7 +62,7 @@ function valueToSelectedChoices(value) {
     return ret;
 }
 function getAvailable(value) {
-    return choices.filter(choice => value.indexOf(choice.value) === -1);
+    return choices.filter(choice => !value.includes(choice.value));
 }
 function onkeydown(value, setVal) {
     return (e) => {
@@ -85,6 +85,7 @@ function onkeydown(value, setVal) {
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {descid} {related} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:helptextid let:messagesid serialize={arraySerialize}>
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <div {id} role="group" class="dual-list-container" on:keydown={onkeydown(value, setVal)}>
     <ScreenReaderOnly>
       <span aria-live="polite">{instructions}</span>

package/dist/FieldHidden.svelte

@@ -1,4 +1,4 @@
-<script>import { Field, nullableSerialize, nullableDeserialize, FormStore, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
+<script>import { Field, nullableSerialize, nullableDeserialize, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { getContext } from 'svelte';
 import { isNotBlank } from 'txstate-utils';
 export let id = undefined;
@@ -11,7 +11,7 @@ export let conditional = undefined;
 const store = getContext(FORM_CONTEXT);
 const inheritedPath = getContext(FORM_INHERITED_PATH);
 const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
-$: store.setField(finalPath, value);
+$: void store.setField(finalPath, value);
 </script>
 
 <Field {path} {conditional} {boolean} {number} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value>

package/dist/Form.svelte

@@ -1,4 +1,4 @@
-<script>import { Form, FormStore } from '@txstate-mws/svelte-forms';
+<script>import { Form } from '@txstate-mws/svelte-forms';
 import { setContext } from 'svelte';
 import { CHOOSER_API_CONTEXT } from './chooser';
 let className = '';

package/dist/Listbox.svelte

@@ -26,7 +26,7 @@ async function reactToItems(..._) {
     if (listboxElement)
         listboxElement.removeAttribute('aria-activedescendant');
 }
-$: reactToItems(items);
+$: void reactToItems(items);
 const selectItem = (item, index) => (e) => {
     e.stopPropagation();
     e.preventDefault();

package/dist/MaxLength.svelte

@@ -33,4 +33,4 @@ function getMaxlengthMessage(length) {
     font-weight: bold;
   }
 
-</style>
+</style>

package/dist/Tab.svelte

@@ -1,7 +1,7 @@
 <script>import { derivedStore } from '@txstate-mws/svelte-store';
 import { getContext } from 'svelte';
 import Icon from './Icon.svelte';
-import { TabStore, TAB_CONTEXT } from './TabStore';
+import { TAB_CONTEXT } from './TabStore';
 export let name;
 const { store, onClick, onKeyDown, tabelements } = getContext(TAB_CONTEXT);
 const accordion = store.accordion();

package/dist/Tabs.svelte

@@ -1,10 +1,11 @@
-<script>import { modifierKey, resize, offset } from '@txstate-mws/svelte-components';
+<script>import { modifierKey, resize, offset, PopupMenu } from '@txstate-mws/svelte-components';
 import { Store } from '@txstate-mws/svelte-store';
-import { getContext, onMount, setContext } from 'svelte';
+import { getContext, onMount, setContext, tick } from 'svelte';
 import { roundTo } from 'txstate-utils';
 import { DIALOG_TABS_CONTEXT } from './Dialog.svelte';
 import Icon from './Icon.svelte';
 import { TabStore, TAB_CONTEXT } from './TabStore';
+import caretRightFill from '@iconify-icons/ph/caret-right-fill';
 export let tabs;
 export let active = undefined;
 export let store = new TabStore(tabs, active);
@@ -13,7 +14,9 @@ export let accordionOnMobile = true;
 $: store.update(v => ({ ...v, tabs, accordionOnMobile }));
 const activeStore = new Store({});
 const tabelements = [];
+let tabOverflowButton;
 let activeelement;
+let hiddenTabs = [];
 setContext(TAB_CONTEXT, { store, onClick, onKeyDown, tabelements });
 const dialogContext = (disableDialogControl ? undefined : getContext(DIALOG_TABS_CONTEXT)) ?? { change: () => { } };
 dialogContext.onNext = () => { store.right(); };
@@ -47,18 +50,22 @@ function onKeyDown(idx) {
         }
         else if (e.key === 'ArrowLeft' && $store.current > 0) {
             store.left();
+            await tick();
             tabelements[$store.current].focus();
         }
         else if (e.key === 'ArrowRight' && $store.current < $store.tabs.length - 1) {
             store.right();
+            await tick();
             tabelements[$store.current].focus();
         }
         else if (e.key === 'Home' && $store.current > 0) {
             store.home();
+            await tick();
             tabelements[$store.current].focus();
         }
         else if (e.key === 'End' && $store.current < $store.tabs.length - 1) {
             store.end();
+            await tick();
             tabelements[$store.current].focus();
         }
     };
@@ -66,6 +73,17 @@ function onKeyDown(idx) {
 function isActive(idx, activeidx) {
     return idx === (activeidx ?? 0);
 }
+function onOverflowChange(e) {
+    store.activateName(e.detail.value);
+}
+function tabIsHidden(index) {
+    if (!wrapping)
+        return false;
+    const left = Math.max($currentIdx - cols + 1, 0);
+    const right = Math.min(left + cols - 1);
+    // return (index !== $currentIdx && index >= cols) || (index === cols - 1 && $currentIdx > cols - 1)
+    return (index !== $currentIdx) && ((index < left) || (index > right));
+}
 const activeOversize = 2;
 async function reactToCurrent(..._) {
     if (!activeelement)
@@ -80,9 +98,10 @@ async function reactToCurrent(..._) {
     const width = span.offsetWidth + (activeOversize * 2);
     activeelement.style.transform = `translateX(${left}px)`;
     activeelement.style.width = `${width}px`;
+    hiddenTabs = $store.tabs.filter((tab, idx) => { return tabIsHidden(idx); });
 }
 $: active = $currentName;
-$: reactToCurrent($activeStore);
+$: void reactToCurrent($activeStore);
 onMount(reactToCurrent);
 </script>
 
@@ -92,9 +111,13 @@ onMount(reactToCurrent);
     <ul use:resize={{ store }} class="tabs-buttons" role="tablist">
       {#each $store.tabs as tab, idx (tab.name)}
         {@const active = isActive(idx, $store.current)}
-        {@const left = idx % cols === 0}
-        <li bind:this={tabelements[idx]} use:offset={{ store: active ? activeStore : undefined }} id={$store.tabids[tab.name]} class="tabs-tab" class:left class:wrapping class:active style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} aria-selected={active} aria-controls={$store.panelids[tab.name]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><span><Icon icon={tab.icon} inline />{tab.title}</span></li>
+        {@const left = idx === 0}
+        <li bind:this={tabelements[idx]} use:offset={{ store: active ? activeStore : undefined }} id={$store.tabids[tab.name]} class="tabs-tab" class:left class:wrapping class:active class:hidden={tabIsHidden(idx)} style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} aria-selected={active} aria-controls={$store.panelids[tab.name]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><span><Icon icon={tab.icon} inline />{tab.title}</span></li>
       {/each}
+      {#if cols < $store.tabs.length}
+        <li class="overflow" role="presentation"><button bind:this={tabOverflowButton} type="button" tabindex="-1"><Icon icon={caretRightFill} hiddenLabel="More Tabs Menu" inline /></button></li>
+        <PopupMenu buttonelement={tabOverflowButton} items={hiddenTabs.map(t => ({ value: t.name }))} on:change={onOverflowChange}/>
+      {/if}
     </ul>
     <div bind:this={activeelement} class="tabs-active"></div>
     <slot current={$store.current} />
@@ -135,6 +158,21 @@ onMount(reactToCurrent);
     font-weight: 500;
     color: var(--tabs-text, #363534)
   }
+  :global(.tabs-tab.hidden) {
+    display: none;
+  }
+  li.overflow {
+    min-width: 2em;
+    display: flex;
+    align-items: center;
+    background-color: transparent !important;
+    padding: 0;
+  }
+  li.overflow button {
+    background: none;
+    cursor: pointer;
+    border: 0;
+  }
   li:not(.left) {
     margin-left: -1px;
   }
@@ -158,20 +196,4 @@ onMount(reactToCurrent);
     border-radius: 2px;
   }
 
-  /* .tabs-active {
-    background: var(--dg-tabs-active, var(--dg-button-bg, #501214));
-    height: 3px;
-    border-radius: 2px;
-    overflow: hidden;
-    width: 0px;
-    margin-top: calc(-1 * var(--tabs-padding-vert, 0.7em));
-    margin-bottom: var(--tabs-padding-vert, 0.7em);
-    transition: 0.2s transform;
-  }
-  @media (prefers-reduced-motion) {
-    .tabs-active {
-      transition: none;
-    }
-  } */
-
 </style>

package/dist/chooser/Chooser.svelte

@@ -1,7 +1,7 @@
 <script>import browserIcon from '@iconify-icons/ph/browser';
 import folderIcon from '@iconify-icons/ph/folder';
 import folderNotchOpen from '@iconify-icons/ph/folder-notch-open';
-import { createEventDispatcher, getContext, onMount, setContext } from 'svelte';
+import { createEventDispatcher, getContext, onMount, setContext, tick } from 'svelte';
 import { isNotBlank, randomid } from 'txstate-utils';
 import { Button, Dialog, iconForMime, Tabs, Tree, UploadUI } from '..';
 import { CHOOSER_API_CONTEXT } from './ChooserAPI';
@@ -68,8 +68,11 @@ async function selectPreview(preloadPath) {
         if (!currentSelection)
             return;
         store.setPreview(currentSelection);
-        treeStore.select(currentSelection, {});
-        treeStore.trigger();
+        treeStore.select(currentSelection, { clear: true });
+        await tick();
+        const focusedElement = document.querySelector('.tree-node[tabindex="0"]');
+        if (focusedElement?.classList.contains('tree-node'))
+            focusedElement.scrollIntoView({ block: 'center' });
     }
 }
 onMount(async () => {

package/dist/chooser/ChooserPreview.svelte

@@ -142,4 +142,4 @@ $: reactToPreview($preview);
     }
   }
 
-</style>
+</style>

package/dist/colorpicker/FieldColorPicker.svelte

@@ -33,7 +33,7 @@ onMount(reactToOptions);
 </script>
 
 <FieldStandard bind:id descid={groupid} {path} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:onBlur let:onChange let:messagesid let:helptextid let:setVal>
-  {@const _ = updateValue(value, setVal)}
+  {@const _ = void updateValue(value, setVal)}
   <div class="container-query-wrapper">
     <div class="color-container {className}" role="radiogroup" aria-labelledby={groupid} class:invalid class:valid>
       {#if addAllOption}

package/dist/cropper/FieldCropper.svelte

@@ -112,6 +112,7 @@ let focusWithin = false;
   {@const _ = init(value, setVal)}
   {#if isNotBlank(imageSrc)}
     <div on:focusin={() => { focusWithin = true }} on:focusout={() => { focusWithin = false }}>
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div bind:this={container} use:resize on:resize={() => updateRect()} class="crop-image-container" on:mousedown={onMouseDown} on:touchstart={onMouseDown} on:touchmove={onMouseMove} style:cursor={$store.cursor}>
         <img class="crop-image" src={imageSrc} alt="" />
         {#if $selection && $outputPct}
@@ -119,6 +120,7 @@ let focusWithin = false;
             <img class='crop-image clipped' src={imageSrc} alt="" style:clip-path="polygon({$outputPct.left}% {$outputPct.top}%, {100 - $outputPct.right}% {$outputPct.top}%, {100 - $outputPct.right}% {100 - $outputPct.bottom}%, {$outputPct.left}% {100 - $outputPct.bottom}%, {$outputPct.left}% {$outputPct.top}%)" />
           </div>
           <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
           <div class='selectionHilite' {id} tabindex="0" on:keydown={onKeyDown('move')}
             aria-labelledby={descid}
             aria-describedby="{movedescid} {helptextid ?? ''}"
@@ -132,24 +134,28 @@ let focusWithin = false;
               <ScreenReaderOnly arialive="polite">top left x y coordinate is ({Math.round($selection.left)}, {Math.round($selection.top)}) bottom right x y coordinate is ({Math.round($selection.right)}, {Math.round($selection.bottom)})</ScreenReaderOnly>
               <ScreenReaderOnly arialive="polite">crop area is {Math.round($store.width)} pixels wide by {Math.round($store.height)} pixels tall</ScreenReaderOnly>
             {/if}
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div class='selectionCorner tl'
               tabindex="0"
               on:keydown={onKeyDown('tl')}
             >
               <ScreenReaderOnly>arrows adjust crop size, bottom right is fixed, hold shift and/or cmd/alt for bigger steps</ScreenReaderOnly>
             </div>
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div class='selectionCorner tr'
               tabindex="0"
               on:keydown={onKeyDown('tr')}
             >
               <ScreenReaderOnly>arrows adjust crop size, bottom left is fixed, hold shift and/or cmd/alt for bigger steps</ScreenReaderOnly>
             </div>
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div class='selectionCorner bl'
               tabindex="0"
               on:keydown={onKeyDown('bl')}
             >
               <ScreenReaderOnly>arrows adjust crop size, top right is fixed, hold shift and/or cmd/alt for bigger steps</ScreenReaderOnly>
             </div>
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div class='selectionCorner br'
               tabindex="0"
               on:keydown={onKeyDown('br')}

package/dist/iconpicker/FieldIconPicker.svelte

@@ -18,7 +18,7 @@ let selected = defaultValue;
 const iconToPrefix = {};
 const categoriesToIcons = keyby(IconCategories, 'key');
 for (const icon of FontAwesomeIcons) {
-    iconToPrefix[icon.class] = icon.free.indexOf('brands') > -1 ? 'fab' : 'fas';
+    iconToPrefix[icon.class] = icon.free.includes('brands') ? 'fab' : 'fas';
 }
 const iconElements = [];
 let visibleIcons = FontAwesomeIcons;
@@ -130,7 +130,7 @@ function onKeyDown(e) {
             <ScreenReaderOnly><legend class="sr-only">Icons</legend></ScreenReaderOnly>
             <div class="icon-picker-items" role="radiogroup">
               {#each visibleIcons as icon, idx (icon.class)}
-                <div bind:this={iconElements[idx]} id={icon.class} class="icon-picker-item" role="radio" aria-checked={icon.class === selected.icon} tabindex={icon.class === selected.icon ? 0 : -1} data-index={idx} on:click={() => onSelectIcon(icon.class)}  on:keydown={onKeyDown}>
+                <div bind:this={iconElements[idx]} id={icon.class} class="icon-picker-item" role="radio" aria-checked={icon.class === selected.icon} tabindex={icon.class === selected.icon ? 0 : -1} data-index={idx} on:click={() => onSelectIcon(icon.class)} on:keydown={onKeyDown}>
                   <Icon icon={`${iconToPrefix[icon.class] === 'fab' ? 'fa-brands' : 'fa-solid'}:${icon.class.slice(3)}`}/>
                   <ScreenReaderOnly>{icon.label}</ScreenReaderOnly>
                 </div>

package/dist/tree/Tree.svelte

@@ -159,6 +159,7 @@ $: myRootItems = $store?.rootItems?.filter(r => myRootItemIds.has(r.id)) ?? [];
   <div class="checkbox" bind:this={checkboxelement}>&nbsp;</div>
   {#each headers as header, i (header.label)}
     <div bind:this={headerelements[i]} id={header.id} class="tree-header-cell {header.id}" style:width={$headerOverride[header.id] ?? $headerSizes?.[i]} style:padding-left={i === 0 ? '1.4em' : undefined}>{header.label}{#if i === 0 && $store.loading}<LoadIcon />{/if}{#if i === 0 && isNotBlank(search)}&nbsp;(searching: {search}){/if}</div>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     {#if enableResize && i !== headers.length - 1}<div class="tree-separator {header.id}" on:mousedown={headerDragStart(header, i)} on:touchstart={headerDragStart(header, i)} on:dblclick={headerDragReset}>&nbsp;</div>{/if}
   {/each}
 </div>

package/dist/tree/TreeNode.svelte

@@ -41,7 +41,7 @@ function onKeyDown(e) {
             store.copy();
         }
         else if (e.key === 'v') {
-            store.paste();
+            void store.paste();
         }
     }
     else if (e.key === 'Escape') {
@@ -77,7 +77,7 @@ function onKeyDown(e) {
             store.focus(child);
         }
         else {
-            store.open(item);
+            void store.open(item);
         }
     }
     else if (e.key === 'ArrowLeft') {
@@ -158,7 +158,7 @@ function onClick(e) {
         if (item.open && wasFocused && !item.loading)
             store.close(item);
         else if (!item.open)
-            store.open(item);
+            void store.open(item);
     }
 }
 function onCheckClick(e) {
@@ -207,15 +207,15 @@ function onDragOverAbove(e) {
 }
 let dragOver = 0;
 let dragOverAbove = 0;
-function onDrop(e) {
+async function onDrop(e) {
     e.preventDefault();
     dragOver = 0;
-    return store.drop(item, false, e.dataTransfer.dropEffect === 'copy');
+    return await store.drop(item, false, e.dataTransfer.dropEffect === 'copy');
 }
-function onDropAbove(e) {
+async function onDropAbove(e) {
     e.preventDefault();
     dragOverAbove = 0;
-    return store.drop(item, true, e.dataTransfer.dropEffect === 'copy');
+    return await store.drop(item, true, e.dataTransfer.dropEffect === 'copy');
 }
 function onDragEnter(e) {
     if (!dropZone)
@@ -244,7 +244,7 @@ function onDragLeaveAbove(e) {
         dragOverAbove--;
 }
 let display = $focused && $focused.id === item.id;
-onMount(async () => {
+onMount(() => {
     if ($focused && $focused.id === item.id)
         nodeelement.scrollIntoView({ block: 'center' });
     nodeelement.addEventListener('lazy', () => { display = true; });
@@ -258,6 +258,7 @@ $: if ($dragging) {
 </script>
 <li role="presentation">
   {#if dropAbove}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div class="drop-above"
       class:dragOverAbove
       on:dragenter={onDragEnterAbove}
@@ -298,6 +299,7 @@ $: if ($dragging) {
   {#if display}
     <!-- keyboard users have modifier keys, they don't ever focus the checkbox -->
     <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div class="checkbox" on:click={onCheckClick}>
       <Icon icon={isSelected ? checkboxOutline : checkboxBlankOutline } width="1.15em" inline />
     </div>
@@ -310,6 +312,7 @@ $: if ($dragging) {
       >
         {#if i === 0 && item.hasChildren}
           <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
           <span class="arrow" on:click={onClick}><Icon icon={item.open ? menuDown : menuRight} width="1.5em" inline /></span>
         {/if}
         <TreeCell {header} {item} />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.1.7",
-    "@codemirror/lang-css": "^6.2.0",
+    "@codemirror/lang-css": "^6.2.1",
     "@codemirror/lang-html": "^6.4.3",
     "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",
@@ -35,8 +35,8 @@
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.0.1",
     "@sveltejs/package": "^2.0.1",
-    "eslint-config-standard-with-typescript": "^34.0.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-config-standard-with-typescript": "^39.0.0",
+    "eslint-plugin-svelte": "^2.0.0",
     "svelte-check": "^3.0.1",
     "svelte-preprocess": "^5.0.0",
     "svelte2tsx": "^0.6.0",