@dosgato/dialog 0.0.51 → 0.0.53

package/dist/Container.svelte

@@ -1,17 +1,27 @@
+<!-- @component
+  The purpose of `<Container>` is to provide common rendering for helptext, screen reader support,
+  and `Feedback` messages for its slotted components under a common `<div>` useful for form fields.
+-->
 <script>import { eq, resize, ScreenReaderOnly } from '@txstate-mws/svelte-components';
 import { randomid } from 'txstate-utils';
 import { getContext } from 'svelte';
 import { DG_DIALOG_FIELD_MULTIPLE } from './FieldMultiple.svelte';
 import InlineMessages from './InlineMessages.svelte';
 import { getDescribedBy } from './';
+/** A label for the Container `<div>`. */
+export let label;
+export let messages;
+/** If the input that's being built has an id pass it here so the label can point at it. */
 export let id = undefined;
+/** If `descid` is defined then this assumes you've made an outside label referenced to by descid `<div id={descid}`.
+Useful for things like checkboxes and radio buttons that have their own individual labels. */
 export let descid = undefined;
-export let label;
 export let helptext = undefined;
-export let messages;
+/** Syntactic sugar that toggles a '*' to be appended to label. */
 export let required = false;
 export let related = 0;
 export let conditional = undefined;
+/** The `id` of `<div>` messages are rendered in. */
 let messagesid;
 const dgMultipleContext = getContext(DG_DIALOG_FIELD_MULTIPLE);
 const helptextid = randomid();

package/dist/Container.svelte.d.ts

@@ -2,12 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 import type { Feedback } from '@txstate-mws/svelte-forms';
 declare const __propDef: {
     props: {
-        id?: string | undefined;
-        descid?: string | undefined;
-        label: string;
-        helptext?: string | undefined;
+        /** A label for the Container `<div>`. */ label: string;
         messages: Feedback[];
-        required?: boolean | undefined;
+        /** If the input that's being built has an id pass it here so the label can point at it. */ id?: string | undefined;
+        /** If `descid` is defined then this assumes you've made an outside label referenced to by descid `<div id={descid}`.
+          Useful for things like checkboxes and radio buttons that have their own individual labels. */ descid?: string | undefined;
+        helptext?: string | undefined;
+        /** Syntactic sugar that toggles a '*' to be appended to label. */ required?: boolean | undefined;
         related?: number | true | undefined;
         conditional?: boolean | undefined;
     };
@@ -24,6 +25,10 @@ declare const __propDef: {
 export type ContainerProps = typeof __propDef.props;
 export type ContainerEvents = typeof __propDef.events;
 export type ContainerSlots = typeof __propDef.slots;
+/**
+ * The purpose of `<Container>` is to provide common rendering for helptext, screen reader support,
+ * and `Feedback` messages for its slotted components under a common `<div>` useful for form fields.
+ */
 export default class Container extends SvelteComponentTyped<ContainerProps, ContainerEvents, ContainerSlots> {
 }
 export {};

package/dist/FieldChoices.svelte

@@ -1,3 +1,9 @@
+<!-- @component
+  A Field component for dynamically rendering checkbox choices accross the available width of a `<div>`. If there are more
+  choices than the available width of the `<div>` will support then it will create multiple rows to render within using
+  flex. Ordering is top down by default but can be order horizontally by toggling `leftToRight`.
+  The value of the field will be an array corresponding to the values of the checkboxes that are checked.
+-->
 <script>import { getContext } from 'svelte';
 import { Field, FORM_CONTEXT } from '@txstate-mws/svelte-forms';
 import { derivedStore } from '@txstate-mws/svelte-store';

package/dist/FieldChoices.svelte.d.ts

@@ -26,6 +26,12 @@ declare const __propDef: {
 export type FieldChoicesProps = typeof __propDef.props;
 export type FieldChoicesEvents = typeof __propDef.events;
 export type FieldChoicesSlots = typeof __propDef.slots;
+/**
+ * A Field component for dynamically rendering checkbox choices accross the available width of a `<div>`. If there are more
+ * choices than the available width of the `<div>` will support then it will create multiple rows to render within using
+ * flex. Ordering is top down by default but can be order horizontally by toggling `leftToRight`.
+ * The value of the field will be an array corresponding to the values of the checkboxes that are checked.
+ */
 export default class FieldChoices extends SvelteComponentTyped<FieldChoicesProps, FieldChoicesEvents, FieldChoicesSlots> {
 }
 export {};

package/dist/FieldMultiselect.svelte

@@ -1,32 +1,45 @@
+<!-- @component
+  The purpose of FieldMultiselect is to provide a Field with text input having a popup menu
+  that displays, or completes, choice selections based on what's been typed in the text input.
+  Selected choices will be added to a list of selected items, in a pill format, that provides
+  a means for tracking and removing existing selections. The choices listed in the popup are
+  controlled by the parent component via the `getOptions` function that will be used as a
+  debounced callback on the contents of the text input.
+-->
 <script>import { MultiSelect } from '@txstate-mws/svelte-components';
 import { Store } from '@txstate-mws/svelte-store';
 import { onMount } from 'svelte';
 import { isNotBlank } from 'txstate-utils';
 import FieldStandard from './FieldStandard.svelte';
 import { getDescribedBy } from './helpers';
-export let id = undefined;
 export let path;
+/** Function to pass to the component that tells it how to use the text
+in the text input to determine what `PopupMenuItem[]` should be displayed
+in the `<PopupMenu>`. Items already 'selected' from the popup menu will be
+tracked and automatically filtered from the popup if returned as one of the
+`PopupMenuItem[]` by `getOptions`. */
+export let getOptions;
+export let id = undefined;
 export let label = '';
+/** Text to display in the text input when it's empty. */
 export let placeholder = '';
 export let disabled = false;
 export let defaultValue = [];
 export let conditional = undefined;
 export let required = false;
+/** Max number of selections to be allowed before disabling the input - 0 for unlimited. */
 export let maxSelections = 0;
-export let getOptions;
+export let lookupByValue = async (val) => { const options = await getOptions(val); return options.find((opt) => opt.value === val); };
 export let related = 0;
 export let extradescid = undefined;
 export let helptext = undefined;
-// each time we run getOptions we will save the value -> label mappings
-// that it finds, so that we can display labels on pills
+// Each time we run getOptions we will save the value -> label mappings
+// that it finds, so that we can display labels on pills.
 const valueToLabel = {};
 async function wrapGetOptions(search) {
     const opts = await getOptions(search);
-    // if no options are returned with the search term, we can end up with an infinite loop
-    // the first time reactToValue calls wrapGetOptions
-    // if (opts.length === 0) {
-    //   opts = await getOptions('')
-    // }
+    /** If no options are returned with the search term, we can end up with an infinite loop the first time reactToValue calls wrapGetOptions */
+    // if (opts.length === 0) opts = await getOptions('')
     for (const opt of opts) {
         valueToLabel[opt.value] = opt.label || opt.value;
     }
@@ -41,14 +54,17 @@ onMount(async () => {
     await reactToValue(defaultValue);
     hasInit = true;
 });
-// if we get a value from the form that we haven't seen in the popup menu
-// yet, we won't have a label for it
-// this function runs getOptions on any selected values for which the label
-// is currently unknown
+// If we get a value from the form that we haven't seen in the popup menu
+// yet, we won't have a label for it.
+// This function runs getOptions on any selected values for which the label
+// is currently unknown.
 async function reactToValue(value) {
     await Promise.all(value.map(async (v) => {
-        if (!valueToLabel[v])
-            await wrapGetOptions(v);
+        if (!valueToLabel[v]) {
+            const item = await lookupByValue(v);
+            if (item)
+                valueToLabel[item.value] = item.label ?? item.value;
+        }
     }));
     selectedStore.set(value.map(v => ({ value: v, label: valueToLabel[v] })).filter(v => isNotBlank(v.label)));
 }

package/dist/FieldMultiselect.svelte.d.ts

@@ -2,16 +2,21 @@ import { SvelteComponentTyped } from "svelte";
 import type { PopupMenuItem } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         path: string;
+        /** Function to pass to the component that tells it how to use the text
+          in the text input to determine what `PopupMenuItem[]` should be displayed
+          in the `<PopupMenu>`. Items already 'selected' from the popup menu will be
+          tracked and automatically filtered from the popup if returned as one of the
+          `PopupMenuItem[]` by `getOptions`. */ getOptions: (search: string) => Promise<PopupMenuItem[]>;
+        id?: string | undefined;
         label?: string | undefined;
-        placeholder?: string | undefined;
+        /** Text to display in the text input when it's empty. */ placeholder?: string | undefined;
         disabled?: boolean | undefined;
         defaultValue?: string[] | undefined;
         conditional?: boolean | undefined;
         required?: boolean | undefined;
-        maxSelections?: number | undefined;
-        getOptions: (search: string) => Promise<PopupMenuItem[]>;
+        /** Max number of selections to be allowed before disabling the input - 0 for unlimited. */ maxSelections?: number | undefined;
+        lookupByValue?: ((val: string) => Promise<PopupMenuItem | undefined>) | undefined;
         related?: number | true | undefined;
         extradescid?: string | undefined;
         helptext?: string | undefined;
@@ -24,6 +29,14 @@ declare const __propDef: {
 export type FieldMultiselectProps = typeof __propDef.props;
 export type FieldMultiselectEvents = typeof __propDef.events;
 export type FieldMultiselectSlots = typeof __propDef.slots;
+/**
+ * The purpose of FieldMultiselect is to provide a Field with text input having a popup menu
+ * that displays, or completes, choice selections based on what's been typed in the text input.
+ * Selected choices will be added to a list of selected items, in a pill format, that provides
+ * a means for tracking and removing existing selections. The choices listed in the popup are
+ * controlled by the parent component via the `getOptions` function that will be used as a
+ * debounced callback on the contents of the text input.
+ */
 export default class FieldMultiselect extends SvelteComponentTyped<FieldMultiselectProps, FieldMultiselectEvents, FieldMultiselectSlots> {
 }
 export {};

package/dist/FieldStandard.svelte

@@ -1,10 +1,22 @@
+<!-- @component
+  The purpose of `<FieldStandard>` is to provide a standard [`<Field>`](https://github.com/txstate-etc/svelte-forms#field)
+  component that not only handles the association of a state/value with the JSON payload associated with a
+  [`FormStore`](https://github.com/txstate-etc/svelte-forms/blob/main/src/lib/FormStore.ts) but also handles
+  common rendering for helptext, aria descriptions, and `Feedback` messages for its slotted components
+  by encapsulating them in a [`<Container>`](https://github.com/txstate-etc/dosgato-dialog/blob/main/src/lib/Container.svelte)
+  setup to work in conjuction with the parent `<Field>` tag.
+-->
 <script>import { Field } from '@txstate-mws/svelte-forms';
 import { randomid } from 'txstate-utils';
 import Container from './Container.svelte';
+/** If the input that's being built has an id pass it here so the label can point at it. */
 export let id = randomid();
+/** If `descid` is defined then this assumes you've made an outside label referenced to by descid `<div id={descid}`.
+Useful for things like checkboxes and radio buttons that have their own individual labels. */
 export let descid = undefined;
 export let path;
 export let defaultValue = undefined;
+/** A label for the Container `<div>`. */
 export let label;
 export let notNull = false;
 export let number = false;
@@ -13,6 +25,7 @@ export let datetime = false;
 export let boolean = false;
 export let serialize = undefined;
 export let deserialize = undefined;
+/** If you need to do some processing just before submit or validate define that processing here. */
 export let finalize = undefined;
 export let conditional = undefined;
 export let required = false;

package/dist/FieldStandard.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
-        descid?: string | undefined;
+        /** If the input that's being built has an id pass it here so the label can point at it. */ id?: string | undefined;
+        /** If `descid` is defined then this assumes you've made an outside label referenced to by descid `<div id={descid}`.
+          Useful for things like checkboxes and radio buttons that have their own individual labels. */ descid?: string | undefined;
         path: string;
         defaultValue?: any;
-        label: string;
+        /** A label for the Container `<div>`. */ label: string;
         notNull?: boolean | undefined;
         number?: boolean | undefined;
         date?: boolean | undefined;
@@ -13,7 +14,7 @@ declare const __propDef: {
         boolean?: boolean | undefined;
         serialize?: ((value: any) => string) | undefined;
         deserialize?: ((value: string) => any) | undefined;
-        finalize?: ((value: any) => any) | undefined;
+        /** If you need to do some processing just before submit or validate define that processing here. */ finalize?: ((value: any) => any) | undefined;
         conditional?: boolean | undefined;
         required?: boolean | undefined;
         related?: number | true | undefined;
@@ -42,6 +43,14 @@ declare const __propDef: {
 export type FieldStandardProps = typeof __propDef.props;
 export type FieldStandardEvents = typeof __propDef.events;
 export type FieldStandardSlots = typeof __propDef.slots;
+/**
+ * The purpose of `<FieldStandard>` is to provide a standard [`<Field>`](https://github.com/txstate-etc/svelte-forms#field)
+ * component that not only handles the association of a state/value with the JSON payload associated with a
+ * [`FormStore`](https://github.com/txstate-etc/svelte-forms/blob/main/src/lib/FormStore.ts) but also handles
+ * common rendering for helptext, aria descriptions, and `Feedback` messages for its slotted components
+ * by encapsulating them in a [`<Container>`](https://github.com/txstate-etc/dosgato-dialog/blob/main/src/lib/Container.svelte)
+ * setup to work in conjuction with the parent `<Field>` tag.
+ */
 export default class FieldStandard extends SvelteComponentTyped<FieldStandardProps, FieldStandardEvents, FieldStandardSlots> {
 }
 export {};

package/dist/Icon.svelte

@@ -1,6 +1,12 @@
+<!-- @component
+  This is a wrapper component around iconify's [OfflineIcon](https://docs.iconify.design/icon-components/svelte/offline.html)
+  implementation of icons that adds a hidden label that can be read by screen readers. Useful for situations where aria-label
+  isn't supported, to provide in kind icon support, while still making use of aria attributes regardless of support.
+-->
 <script>import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
 import { ScreenReaderOnly } from '@txstate-mws/svelte-components';
 export let icon;
+/** Label used in a `<ScreenReaderOnly>`. */
 export let hiddenLabel = undefined;
 export let inline = false;
 export let width = '1em';

package/dist/Icon.svelte.d.ts

@@ -3,7 +3,7 @@ import type { IconifyIcon } from '@iconify/svelte';
 declare const __propDef: {
     props: {
         icon: IconifyIcon | undefined;
-        hiddenLabel?: string | undefined;
+        /** Label used in a `<ScreenReaderOnly>`. */ hiddenLabel?: string | undefined;
         inline?: boolean | undefined;
         width?: string | number | undefined;
         height?: string | number | undefined;
@@ -17,6 +17,11 @@ declare const __propDef: {
 export type IconProps = typeof __propDef.props;
 export type IconEvents = typeof __propDef.events;
 export type IconSlots = typeof __propDef.slots;
+/**
+ * This is a wrapper component around iconify's [OfflineIcon](https://docs.iconify.design/icon-components/svelte/offline.html)
+ * implementation of icons that adds a hidden label that can be read by screen readers. Useful for situations where aria-label
+ * isn't supported, to provide in kind icon support, while still making use of aria attributes regardless of support.
+ */
 export default class Icon extends SvelteComponentTyped<IconProps, IconEvents, IconSlots> {
 }
 export {};

package/dist/InlineMessage.svelte

@@ -1,3 +1,6 @@
+<!-- @component
+  The purpose of this component is to provide common `Feedback` message styling with icons that support screen readers.
+-->
 <script>import alertCircleOutline from '@iconify-icons/mdi/alert-circle-outline.js';
 import checkCircleOutline from '@iconify-icons/mdi/check-circle-outline.js';
 import informationOutline from '@iconify-icons/mdi/information-outline.js';
@@ -11,6 +14,16 @@ const icons = {
     system: closeOctagonOutline
 };
 $: icon = icons[message.type] ?? alertCircleOutline;
+// Would we like to add something like the following for non-Error message types being used in aria descriptions?
+/*
+const ariaLables = {
+  error: 'Error',
+  warning: 'Warning',
+  success: 'Success',
+  system: 'System'
+}
+$: hiddenLabel = ariaLables[message.type] ?? 'Error'
+*/
 </script>
 
 <div class={message.type}><Icon width='1.5em' {icon} hiddenLabel='Error' /><span>{message.message}</span></div>

package/dist/InlineMessage.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
 export type InlineMessageProps = typeof __propDef.props;
 export type InlineMessageEvents = typeof __propDef.events;
 export type InlineMessageSlots = typeof __propDef.slots;
+/** The purpose of this component is to provide common `Feedback` message styling with icons that support screen readers. */
 export default class InlineMessage extends SvelteComponentTyped<InlineMessageProps, InlineMessageEvents, InlineMessageSlots> {
 }
 export {};

package/dist/InlineMessages.svelte

@@ -1,7 +1,10 @@
+<!-- @component
+  This renders the `Feedback` messages bound to it if there are any to display.
+-->
 <script>import { randomid } from 'txstate-utils';
 import InlineMessage from './InlineMessage.svelte';
-export let id = randomid();
 export let messages;
+export let id = randomid();
 const savedid = id;
 $: id = messages.length ? savedid : undefined;
 </script>

package/dist/InlineMessages.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import type { Feedback } from '@txstate-mws/svelte-forms';
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         messages: Feedback[];
+        id?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -13,6 +13,7 @@ declare const __propDef: {
 export type InlineMessagesProps = typeof __propDef.props;
 export type InlineMessagesEvents = typeof __propDef.events;
 export type InlineMessagesSlots = typeof __propDef.slots;
+/** This renders the `Feedback` messages bound to it if there are any to display. */
 export default class InlineMessages extends SvelteComponentTyped<InlineMessagesProps, InlineMessagesEvents, InlineMessagesSlots> {
 }
 export {};

package/dist/Tabs.svelte

@@ -9,6 +9,7 @@ export let tabs;
 export let active = undefined;
 export let store = new TabStore(tabs, active);
 export let disableDialogControl = false;
+export let accordionOnMobile = true;
 $: store.update(v => ({ ...v, tabs }));
 const activeStore = new Store({});
 const tabelements = [];
@@ -29,7 +30,7 @@ const accordion = store.accordion();
 $: cols = Math.min(Math.floor(($store.clientWidth ?? 1024) / 90), $store.tabs.length);
 $: scalefactor = Math.min(roundTo(($store.clientWidth ?? 1024) / (cols * 130), 4), 1);
 $: wrapping = cols !== $store.tabs.length;
-$: dialogContext.hasTabs = !$accordion;
+$: dialogContext.hasTabs = !$accordion || !accordionOnMobile;
 function onClick(idx) {
     return () => store.activate(idx);
 }
@@ -86,7 +87,7 @@ onMount(reactToCurrent);
 </script>
 
 {#if $store.tabs.length > 1}
-  {#if !$accordion}
+  {#if !$accordion || !accordionOnMobile}
     <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
     <ul use:resize={{ store }} class="tabs-buttons" role="tablist">
       {#each $store.tabs as tab, idx (tab.name)}

package/dist/Tabs.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         active?: string | undefined;
         store?: TabStore | undefined;
         disableDialogControl?: boolean | undefined;
+        accordionOnMobile?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/chooser/Thumbnail.svelte

@@ -9,7 +9,7 @@ export let larger = false;
 <div class="dialog-chooser-thumbnail">
   {#if item.type === 'asset'}
     {#if item.image}
-      <img src={(larger ? item.image.thumbnailUrl : item.image.previewUrl) ?? item.image.thumbnailUrl ?? item.url} alt="" />
+      <img src={(larger ? (item.image.previewUrl ?? item.image.thumbnailUrl) : (item.image.thumbnailUrl ?? item.image.previewUrl)) ?? item.url} alt="" />
     {:else}
       <FileIcon mime={item.mime} width='5em' />
     {/if}

package/dist/cropper/FieldCropper.svelte

@@ -108,7 +108,7 @@ let focusWithin = false;
 </script>
 
 <svelte:window on:mousemove={onMouseMove} on:mouseup={onMouseUp} on:touchend={onMouseUp} on:touchcancel={onMouseUp} />
-<FieldStandard bind:id {label} {path} {required} {conditional} {helptext} {descid} let:value let:setVal let:helptextid>
+<FieldStandard bind:id {label} {path} {required} conditional={conditional && isNotBlank(imageSrc)} {helptext} {descid} let:value let:setVal let:helptextid>
   {@const _ = init(value, setVal)}
   {#if isNotBlank(imageSrc)}
     <div on:focusin={() => { focusWithin = true }} on:focusout={() => { focusWithin = false }}>

package/dist/cropper/FieldCropper.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         id?: string | undefined;
         path: string;
-        imageSrc: string;
+        imageSrc: string | undefined;
         selectionAspectRatio?: number | undefined;
         minSelection?: number | undefined;
         label?: string | undefined;

package/dist/tree/Tree.svelte

@@ -1,10 +1,12 @@
 <script>import { resize } from '@txstate-mws/svelte-components';
 import { derivedStore, Store } from '@txstate-mws/svelte-store';
-import { afterUpdate, beforeUpdate, onDestroy, onMount, setContext, tick } from 'svelte';
+import { afterUpdate, beforeUpdate, onDestroy, onMount, setContext } from 'svelte';
+import { toArray } from 'txstate-utils';
 import LoadIcon from './LoadIcon.svelte';
 import TreeNode from './TreeNode.svelte';
 import { getHashId, TreeStore, TREE_STORE_CONTEXT } from './treestore';
 export let headers;
+export let searchable = undefined;
 export let nodeClass = undefined;
 export let singleSelect = undefined;
 export let enableResize = false;
@@ -53,6 +55,28 @@ $: store.singleSelect = singleSelect;
 function onDragEnd() {
     store.update(v => ({ ...v, dragging: false }));
 }
+let search = '';
+let searchTimer = 0;
+$: searchableFn = searchable == null ? undefined : (typeof searchable === 'function' ? (itm) => toArray(searchable(itm)) : (itm) => [itm[searchable]]);
+function onKeyUp(e) {
+    if (!searchableFn)
+        return;
+    if (e.key.length === 1) {
+        search += e.key;
+        const searchItems = $store.focused?.parent ? $store.focused.parent.children : $store.rootItems;
+        const newFocus = searchItems?.find(itm => searchableFn(itm).some(str => str.toLocaleLowerCase().startsWith(search.toLocaleLowerCase())));
+        if (newFocus)
+            store.focus(newFocus);
+        clearTimeout(searchTimer);
+        searchTimer = setTimeout(() => { search = ''; }, 4000);
+    }
+    else if (e.key === 'Backspace') {
+        search = search.substring(0, search.length - 1);
+    }
+    else if (e.key === 'Escape') {
+        search = '';
+    }
+}
 let dragheaderid;
 let dragheaderidx;
 let dragtarget;
@@ -126,13 +150,13 @@ afterUpdate(() => {
 <div class="tree-header" class:resizing={!!dragheaderid} use:resize={{ store: treeWidth }} aria-hidden="true" on:mouseup={headerDragEnd} on:touchend={headerDragEnd} on:mousemove={dragheaderid ? headerDrag : undefined} on:touchmove={dragheaderid ? headerDrag : undefined}>
   <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]}>{header.label}{#if i === 0 && $store.loading}<LoadIcon />{/if}</div>
+    <div bind:this={headerelements[i]} id={header.id} class="tree-header-cell {header.id}" style:width={$headerOverride[header.id] ?? $headerSizes?.[i]}>{header.label}{#if i === 0 && $store.loading}<LoadIcon />{/if}{#if i === 0 && search}&nbsp;(searching: {search}){/if}</div>
     {#if enableResize && i !== headers.length - 1}<div class="tree-separator" on:mousedown={headerDragStart(header, i)} on:touchstart={headerDragStart(header, i)} on:dblclick={headerDragReset}>&nbsp;</div>{/if}
   {/each}
 </div>
 {#if mounted && $rootItems?.length}
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
-  <ul bind:this={store.treeElement} role="tree" class:resizing={!!dragheaderid} on:mousemove={dragheaderid ? headerDrag : undefined} on:touchmove={dragheaderid ? headerDrag : undefined} on:mouseup={headerDragEnd} on:touchend={headerDragEnd}>
+  <ul bind:this={store.treeElement} role="tree" class:resizing={!!dragheaderid} on:mousemove={dragheaderid ? headerDrag : undefined} on:touchmove={dragheaderid ? headerDrag : undefined} on:mouseup={headerDragEnd} on:touchend={headerDragEnd} on:keyup={onKeyUp}>
     {#each $rootItems as item, i (item.id)}
       <TreeNode
         {item}

package/dist/tree/Tree.svelte.d.ts

@@ -4,6 +4,7 @@ import type { DragEligibleFn, CopyHandlerFn, DropEffectFn, FetchChildrenFn, Move
 declare class __sveltets_Render<T extends TreeItemFromDB> {
     props(): {
         headers: TreeHeader<T>[];
+        searchable?: keyof T | ((item: T) => string | string[]) | undefined;
         nodeClass?: ((itm: T) => string) | undefined;
         singleSelect?: boolean | undefined;
         enableResize?: boolean | undefined;

package/dist/tree/TreeNode.svelte

@@ -356,7 +356,7 @@ $: if ($dragging) {
     border-bottom: var(--tree-border, 1px dashed #aaaaaa);
     width: 100%;
     overflow: hidden;
-    min-height: 2.9em;
+    min-height: calc(2.7em + 2px);
   }
   :global(.resizing) .tree-node {
     cursor: col-resize;
@@ -390,6 +390,9 @@ $: if ($dragging) {
   .tree-node.dropDisabled {
     opacity: 0.6;
   }
+  .tree-node :global(svg) {
+    display: block;
+  }
   .drop-above {
     position: absolute;
     top: -3px;

package/dist/tree/treestore.js

@@ -209,6 +209,7 @@ export class TreeStore extends ActiveStore {
         this.trigger();
         const selectedItems = Array.from(droppedItems.values());
         const commonparent = this.findCommonParent([...selectedItems, item]);
+        this.focus(item, false);
         try {
             const result = dropEffect === 'move'
                 ? await this.moveHandler?.(selectedItems, item, above)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",