@dosgato/dialog 0.0.46 → 0.0.47

package/dist/ButtonGroup.svelte

@@ -44,6 +44,7 @@ function onKeyDown(choice, idx) {
 {#if name}
   <input type="hidden" {name} {value}>
 {/if}
+<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <ul class="dialog-btn-group" class:disabled class:valid class:invalid aria-disabled={disabled} role="radiogroup" aria-labelledby={groupid} on:blur>
   {#each choices as choice, i}
     {@const selected = choice.value === value}

package/dist/Checkbox.svelte

@@ -5,16 +5,13 @@ export let value;
 export let onChange = undefined;
 export let onBlur = undefined;
 export let descid = undefined;
-export let messagesid = undefined;
 export let disabled = false;
 export let valid = false;
 export let invalid = false;
 export let inputelement = undefined;
-export let helptextid = undefined;
-$: descby = [descid, messagesid, helptextid].filter(isNotBlank).join(' ');
 </script>
 
-<input bind:this={inputelement} {id} type="checkbox" {name} class:valid class:invalid {disabled} aria-describedby={descby} bind:checked={value} on:change={onChange} on:blur={onBlur}>
+<input bind:this={inputelement} {id} type="checkbox" {name} class:valid class:invalid {disabled} aria-describedby={descid} bind:checked={value} on:change={onChange} on:blur={onBlur}>
 
 <style>
 input, input:before, input:after {

package/dist/Checkbox.svelte.d.ts

@@ -7,12 +7,10 @@ declare const __propDef: {
         onChange?: any;
         onBlur?: any;
         descid?: string | undefined;
-        messagesid?: string | undefined;
         disabled?: boolean | undefined;
         valid?: boolean | undefined;
         invalid?: boolean | undefined;
         inputelement?: HTMLInputElement | undefined;
-        helptextid?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/Container.svelte

@@ -1,17 +1,26 @@
 <script>import { eq } from '@txstate-mws/svelte-components';
-import InlineMessages from './InlineMessages.svelte';
 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 './';
 export let id = undefined;
 export let descid = undefined;
 export let label;
 export let helptext = undefined;
 export let messages;
 export let required = false;
+export let related = 0;
+export let conditional = undefined;
 let messagesid;
-const helptextid = helptext ? randomid() : undefined;
+const dgMultipleContext = getContext(DG_DIALOG_FIELD_MULTIPLE);
+const helptextid = randomid();
+$: descids = getDescribedBy([helptext ? helptextid : undefined, dgMultipleContext?.helptextid]);
+let showhelp = false;
 </script>
 
-<div use:eq class="dialog-field-container">
+{#if conditional !== false}
+<div use:eq class="dialog-field-container" data-related={Array.from({ length: related === true ? 1 : related }, (_, i) => i + 1).join(' ')}>
   {#if descid == null}
     <label class="dialog-field-label" for={id}>{label}{#if required}&nbsp;*{/if}</label>
   {:else}
@@ -19,12 +28,14 @@ const helptextid = helptext ? randomid() : undefined;
   {/if}
   <div class="dialog-field-content">
     {#if helptext}
-      <div id={helptextid} class="dialog-field-help">{helptext}</div>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div id={helptextid} class="dialog-field-help" class:expanded={showhelp} on:click={() => { showhelp = !showhelp }}>{helptext}</div>
     {/if}
-    <slot {messagesid} {helptextid}/>
+    <slot {messagesid} helptextid={descids} />
   </div>
   <InlineMessages bind:id={messagesid} {messages} />
 </div>
+{/if}
 
 <style>
   .dialog-field-container {
@@ -32,6 +43,13 @@ const helptextid = helptext ? randomid() : undefined;
     padding: var(--dialog-container-padding, 1em) 0;
     --dialog-container-tab-correct: calc(-1 * var(--tabs-panel-padding, 1em));
   }
+  .dialog-field-container[data-related~="1"] {
+    padding-top: 0;
+    padding-left: calc(var(--dialog-container-padding, 1em) + var(--dialog-related-padding, 1em));
+  }
+  .dialog-field-container[data-related~="2"] {
+    padding-left: calc(var(--dialog-container-padding, 1em) + (2 * var(--dialog-related-padding, 1em)));
+  }
   .dialog-field-container:last-child {
     border-bottom: 0;
   }
@@ -51,6 +69,13 @@ const helptextid = helptext ? randomid() : undefined;
     padding-left: var(--tabs-panel-padding, 1em);
     padding-right: var(--tabs-panel-padding, 1em);
   }
+  :global(.tabs-panel) .dialog-field-container[data-related~="1"] {
+    padding-left: calc(var(--tabs-panel-padding, 1em) + var(--dialog-container-padding, 1em));
+  }
+  :global(.tabs-panel) .dialog-field-container[data-related~="2"] {
+    padding-left: calc(var(--tabs-panel-padding, 1em) + (2 * var(--dialog-container-padding, 1em)));
+  }
+
   :global(.tabs-panel) .dialog-field-container:first-child {
     margin-top: var(--dialog-container-tab-correct);
   }
@@ -82,9 +107,19 @@ const helptextid = helptext ? randomid() : undefined;
     background-color: var(--dialog-field-bg2, transparent);
     color: var(--dialog-field-text2, inherit);
   }
-  .dialog-field-container :global(.dialog-field-help) {
+  .dialog-field-help {
     font-size: 0.9em;
     color: #595959;
+    margin-bottom: 0.4em;
+    line-height: 1.25em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: help;
+  }
+  .dialog-field-help.expanded {
+    white-space: normal;
+    max-height: fit-content;
   }
 
 </style>

package/dist/Container.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         helptext?: string | undefined;
         messages: Feedback[];
         required?: boolean | undefined;
+        related?: number | true | undefined;
+        conditional?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/Dialog.svelte

@@ -3,7 +3,7 @@
 <script>import arrowLeftLight from '@iconify-icons/ph/arrow-left-light';
 import arrowRightLight from '@iconify-icons/ph/arrow-right-light';
 import xLight from '@iconify-icons/ph/x-light';
-import { Modal, ScreenReaderOnly } from '@txstate-mws/svelte-components';
+import { eq, Modal, ScreenReaderOnly } from '@txstate-mws/svelte-components';
 import { createEventDispatcher, setContext } from 'svelte';
 import { isNotBlank, randomid } from 'txstate-utils';
 import { Button, Icon } from './';
@@ -35,7 +35,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
 </script>
 
 <Modal {escapable} {initialfocus} hidefocus={false} includeselector=".ck-body-wrapper" on:escape>
-  <section class="{size}">
+  <section class="{size}" use:eq>
     {#if title || icon}
       <header id={labelid}>
         <Icon width="1.4em" {icon} inline />{title}

package/dist/FieldAutocomplete.svelte

@@ -17,6 +17,8 @@ export let defaultValue = undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 let inputvalue = '';
 let popupvalue = undefined;
@@ -77,9 +79,9 @@ onMount(() => {
 });
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={finalserialize} deserialize={finaldeserialize} let:value let:setVal let:valid let:invalid let:id let:onBlur let:messagesid let:helptextid>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={finalserialize} deserialize={finaldeserialize} let:value let:setVal let:valid let:invalid let:id let:onBlur let:messagesid let:helptextid>
   {@const _ = reactToValue(value, setVal)}
-  <input bind:this={inputelement} bind:value={inputvalue} {id} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} aria-expanded={false} aria-controls={menuid} on:blur={onBlur} on:keyup={onKeyUp(setVal)} autocapitalize="none" type="text" autocomplete="off" aria-autocomplete="list" role="combobox" {disabled} aria-describedby={getDescribedBy([messagesid, helptextid])}>
+  <input bind:this={inputelement} bind:value={inputvalue} {id} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} aria-expanded={false} aria-controls={menuid} on:blur={onBlur} on:keyup={onKeyUp(setVal)} autocapitalize="none" type="text" autocomplete="off" aria-autocomplete="list" role="combobox" {disabled} aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])}>
   <PopupMenu bind:menushown bind:menuid align="bottomleft" usePortal={portal} items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
   <ScreenReaderOnly arialive="polite" ariaatomic={true} id={liveTextId}>
     {filteredChoices.length} {filteredChoices.length === 1 ? 'option' : 'options'} available.

package/dist/FieldAutocomplete.svelte.d.ts

@@ -17,6 +17,8 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean | undefined;
         inputelement?: HTMLInputElement | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
     };
     events: {

package/dist/FieldCheckbox.svelte

@@ -1,6 +1,7 @@
 <script>import { randomid } from 'txstate-utils';
 import FieldStandard from './FieldStandard.svelte';
 import Checkbox from './Checkbox.svelte';
+import { getDescribedBy } from './';
 let className = '';
 export { className as class };
 export let id = undefined;
@@ -11,6 +12,8 @@ export let defaultValue = undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 function onChange(setVal) {
     return function () {
@@ -20,10 +23,10 @@ function onChange(setVal) {
 const descid = randomid();
 </script>
 
-<FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {helptext} {required} let:value let:messagesid let:helptextid let:valid let:invalid let:id let:onBlur let:setVal>
+<FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {related} {helptext} {required} let:value let:messagesid let:helptextid let:valid let:invalid let:id let:onBlur let:setVal>
   <div class={className}>
     <label for={id}>
-      <Checkbox bind:inputelement {id} name={path} {value} {messagesid} {helptextid} {descid} {valid} {invalid} {onBlur} onChange={onChange(setVal)}></Checkbox>
+      <Checkbox bind:inputelement {id} name={path} {value} descid={getDescribedBy([descid, messagesid, helptextid, extradescid])} {valid} {invalid} {onBlur} onChange={onChange(setVal)}></Checkbox>
       <span>{boxLabel}</span>
     </label>
   </div>

package/dist/FieldCheckbox.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean | undefined;
         inputelement?: HTMLInputElement | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
     };
     events: {

package/dist/FieldChoices.svelte

@@ -4,6 +4,7 @@ import { derivedStore } from '@txstate-mws/svelte-store';
 import { randomid } from 'txstate-utils';
 import Container from './Container.svelte';
 import Checkbox from './Checkbox.svelte';
+import { getDescribedBy } from './helpers';
 let className = '';
 export { className as class };
 export let id = undefined;
@@ -14,6 +15,8 @@ export let defaultValue = [];
 export let conditional = undefined;
 export let maxwidth = 250;
 export let leftToRight = false;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 const store = getContext(FORM_CONTEXT);
 const currentWidth = derivedStore(store, 'width');
@@ -40,14 +43,14 @@ const descid = randomid();
 </script>
 
 <Field {path} {defaultValue} {conditional} let:path let:value let:onBlur let:setVal let:messages let:valid let:invalid>
-  <Container {id} {label} {messages} {descid} {helptext} let:messagesid let:helptextid>
+  <Container {id} {label} {messages} {descid} {related} {helptext} let:messagesid let:helptextid>
     <div class="dialog-choices {className}" class:valid class:invalid>
       {#each choices as choice, idx}
         {@const checkid = `${path}.${idx}`}
         {@const included = value && 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} {messagesid} {helptextid} {descid} disabled={choice.disabled} onChange={() => onChangeCheckbox(setVal, choice, included)} {onBlur} />
+          <Checkbox id={checkid} name={checkid} value={included} descid={getDescribedBy([descid, messagesid, helptextid, extradescid])} disabled={choice.disabled} onChange={() => onChangeCheckbox(setVal, choice, included)} {onBlur} />
           <span>{label}</span>
         </label>
       {/each}

package/dist/FieldChoices.svelte.d.ts

@@ -14,6 +14,8 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         maxwidth?: number | undefined;
         leftToRight?: boolean | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
     };
     events: {

package/dist/FieldChooserLink.svelte

@@ -19,6 +19,8 @@ export let folders = false;
 export let urlEntry = false;
 export let initialSource = undefined;
 export let initialPath = undefined;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 export let selectedAsset = undefined;
 // TODO: add a mime type acceptance prop, maybe a regex or function, to prevent users from
@@ -122,7 +124,7 @@ async function updateSelected(..._) {
 $: updateSelected($value);
 </script>
 
-<FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {required} {helptext} let:value let:messagesid let:helptextid let:valid let:invalid let:id let:onBlur let:setVal>
+<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>
   {#if selectedAsset}
     <div class="dialog-chooser-container">
       <Thumbnail item={selectedAsset} />
@@ -133,7 +135,7 @@ $: updateSelected($value);
     {#if urlEntry}
       <input type="text" value={selectedAsset?.url ?? ''} on:change={userUrlEntry} on:keyup={userUrlEntry}>
     {/if}
-    <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid])}>Select {#if value}New{/if} {#if assets && pages}Link Target{:else if images}Image{:else if assets}Asset{:else}Page{/if}</button>
+    <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>Select {#if value}New{/if} {#if assets && pages}Link Target{:else if images}Image{:else if assets}Asset{:else}Page{/if}</button>
   </div>
   {#if modalshown}
     <Chooser {store} {label} {pages} {assets} {images} {initialSource} {initialPath} {folders} {required} on:change={onChange(setVal)} on:escape={hide} />

package/dist/FieldChooserLink.svelte.d.ts

@@ -16,6 +16,8 @@ declare const __propDef: {
         urlEntry?: boolean | undefined;
         initialSource?: string | undefined;
         initialPath?: string | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
         selectedAsset?: AnyItem | RawURL | undefined;
     };

package/dist/FieldCodeEditor.svelte

@@ -16,6 +16,8 @@ export let conditional = undefined;
 export let required = false;
 export let use = [];
 export let inputelement = undefined;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 export let language;
 const store = getContext(FORM_CONTEXT);
@@ -45,7 +47,7 @@ function updateValidState(invalidIn, messagesIdIn) {
     invalid = !!invalidIn;
     messagesid = messagesIdIn;
     inputelement?.setAttribute('aria-invalid', String(!!invalid));
-    const descby = getDescribedBy([messagesid, helptextid]);
+    const descby = getDescribedBy([messagesid, helptextid, extradescid]);
     if (descby)
         inputelement?.setAttribute('aria-describedby', descby);
     else
@@ -53,7 +55,7 @@ function updateValidState(invalidIn, messagesIdIn) {
 }
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
   {@const _ = setSlotProps(helptextid, onChange)}
   {@const __ = updateValidState(invalid, messagesid)}
   <div bind:this={editorelement} style:height="{rows * 1.333}em" class:valid class:invalid on:paste on:focusout={onBlur} use:passActions={use}></div>

package/dist/FieldCodeEditor.svelte.d.ts

@@ -13,6 +13,8 @@ declare const __propDef: {
         required?: boolean | undefined;
         use?: HTMLActionEntry<any>[] | undefined;
         inputelement?: HTMLTextAreaElement | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
         language: 'js' | 'css' | 'html';
     };

package/dist/FieldDate.svelte

@@ -13,9 +13,11 @@ export let step = undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={dateSerialize} deserialize={dateDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  <Input bind:inputelement type="date" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {messagesid} {helptextid}/>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={dateSerialize} deserialize={dateDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
+  <Input bind:inputelement type="date" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {extradescid} {messagesid} {helptextid}/>
 </FieldStandard>

package/dist/FieldDate.svelte.d.ts

@@ -16,6 +16,8 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean | undefined;
         inputelement?: HTMLInputElement | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
     };
     events: {

package/dist/FieldDateTime.svelte

@@ -12,9 +12,11 @@ export let max = undefined;
 export let step = undefined;
 export let conditional = undefined;
 export let required = false;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={datetimeSerialize} deserialize={datetimeDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:helptextid>
-  <Input type="datetime-local" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {helptextid}/>
+<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}/>
 </FieldStandard>

package/dist/FieldDateTime.svelte.d.ts

@@ -15,6 +15,8 @@ declare const __propDef: {
         step?: number | undefined;
         conditional?: boolean | undefined;
         required?: boolean | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
     };
     events: {

package/dist/FieldDualListbox.svelte

@@ -1,10 +1,11 @@
 <script>import menuRight from '@iconify-icons/mdi/menu-right.js';
 import menuLeft from '@iconify-icons/mdi/menu-left.js';
-import FieldStandard from './FieldStandard.svelte';
 import { ScreenReaderOnly, modifierKey } from '@txstate-mws/svelte-components';
+import { randomid } from 'txstate-utils';
+import FieldStandard from './FieldStandard.svelte';
 import Icon from './Icon.svelte';
 import Listbox from './Listbox.svelte';
-import { randomid } from 'txstate-utils';
+import { getDescribedBy } from './';
 export let id = undefined;
 export let path;
 export let label = '';
@@ -15,6 +16,9 @@ export let choices;
 export let defaultValue = [];
 export let conditional = undefined;
 export let required = false;
+export let related = 0;
+export let extradescid = undefined;
+export let helptext = undefined;
 let itemsToAdd = []; // the items selected in the left listbox
 let itemsToRemove = []; // the items selected in the right listbox
 let instructions = 'test';
@@ -79,12 +83,12 @@ function onkeydown(value, setVal) {
 }
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {descid} let:value let:valid let:invalid let:id let:onBlur let:setVal>
+<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>
   <div {id} role="group" class="dual-list-container" on:keydown={onkeydown(value, setVal)}>
     <ScreenReaderOnly>
       <span aria-live="polite">{instructions}</span>
     </ScreenReaderOnly>
-    <Listbox label={sourceLabel} multiselect={multiselect} items={getAvailable(value)} {descid} {valid} {invalid} on:change={e => { itemsToAdd = e.detail }} selected={itemsToAdd} on:blur={onBlur}/>
+    <Listbox label={sourceLabel} multiselect={multiselect} items={getAvailable(value)} descid={getDescribedBy([descid, messagesid, helptextid, extradescid])} {valid} {invalid} on:change={e => { itemsToAdd = e.detail }} selected={itemsToAdd} on:blur={onBlur}/>
     <div class="toolbar">
       <button type="button" class="toolbar-button" title="Move selection to {selectedLabel}" disabled={itemsToAdd.length === 0} on:click={addToSelected(value, setVal)}>
         <Icon icon={menuRight} width='3em'/>
@@ -93,7 +97,7 @@ function onkeydown(value, setVal) {
         <Icon icon={menuLeft} width='3em'/>
       </button>
     </div>
-    <Listbox label={selectedLabel} multiselect={multiselect} items={valueToSelectedChoices(value)} {descid} {valid} {invalid} on:change={e => { itemsToRemove = e.detail }} selected={itemsToRemove} on:blur={onBlur}/>
+    <Listbox label={selectedLabel} multiselect={multiselect} items={valueToSelectedChoices(value)} descid={getDescribedBy([descid, messagesid, helptextid, extradescid])} {valid} {invalid} on:change={e => { itemsToRemove = e.detail }} selected={itemsToRemove} on:blur={onBlur}/>
   </div>
 </FieldStandard>
 

package/dist/FieldDualListbox.svelte.d.ts

@@ -12,6 +12,9 @@ declare const __propDef: {
         defaultValue?: string[] | undefined;
         conditional?: boolean | undefined;
         required?: boolean | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/FieldMultiple.svelte

@@ -1,7 +1,10 @@
+<script context="module">export const DG_DIALOG_FIELD_MULTIPLE = {};
+function noOp(..._) { return ''; }
+</script>
 <script>import plusCircleLight from '@iconify-icons/ph/plus-circle-light';
 import { AddMore, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { derivedStore } from '@txstate-mws/svelte-store';
-import { getContext } from 'svelte';
+import { getContext, setContext } from 'svelte';
 import { isNotNull } from 'txstate-utils';
 import Button from './Button.svelte';
 import Container from './Container.svelte';
@@ -17,6 +20,10 @@ export let conditional = undefined;
 export let addMoreText = 'Add';
 export let maxedText = addMoreText;
 export let addMoreClass = undefined;
+export let related = 0;
+export let helptext = undefined;
+const fieldMultipleContext = { helptextid: undefined };
+setContext(DG_DIALOG_FIELD_MULTIPLE, fieldMultipleContext);
 const inheritedPath = getContext(FORM_INHERITED_PATH);
 const finalPath = [inheritedPath, path].filter(isNotNull).join('.');
 const store = getContext(FORM_CONTEXT);
@@ -31,13 +38,14 @@ function moveUpAndFocus(onMoveUp, idx) {
 $: messages = compact ? $messageStore : [];
 </script>
 
-<Container {label} {messages}>
+<Container {label} {messages} {conditional} {related} {helptext} let:helptextid>
+  {noOp(fieldMultipleContext.helptextid = helptextid)}
   <AddMore {path} {initialState} {minLength} {maxLength} {conditional} let:path let:currentLength let:maxLength let:index let:minned let:maxed let:value let:onDelete let:onMoveUp>
     {@const showDelete = removable && !minned}
     {@const showMove = reorder && index > 0}
     <div class="dialog-multiple" class:has-delete-icon={showDelete}>
       <div class="dialog-multiple-content">
-        <slot {path} {index} {value} {maxed} {maxLength} {currentLength} />
+        <slot {path} {index} {value} {maxed} {maxLength} {currentLength}/>
       </div>
       {#if showDelete || showMove}<div class="dialog-multiple-buttons">
         {#if reorder}<button bind:this={reorderelements[index]} class="dialog-multiple-move" type="button" aria-hidden={!showMove} disabled={!showMove} style:visibility={showMove ? 'visible' : 'hidden'} on:click|preventDefault|stopPropagation={moveUpAndFocus(onMoveUp, index)}>^</button>{/if}

package/dist/FieldMultiple.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+export declare const DG_DIALOG_FIELD_MULTIPLE: {};
 declare const __propDef: {
     props: {
         path: string;
@@ -13,6 +14,8 @@ declare const __propDef: {
         addMoreText?: string | undefined;
         maxedText?: string | undefined;
         addMoreClass?: string | undefined;
+        related?: number | true | undefined;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/FieldMultiselect.svelte

@@ -1,8 +1,9 @@
 <script>import { MultiSelect } from '@txstate-mws/svelte-components';
 import { Store } from '@txstate-mws/svelte-store';
-import FieldStandard from './FieldStandard.svelte';
 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;
 export let label = '';
@@ -13,6 +14,9 @@ export let conditional = undefined;
 export let required = false;
 export let maxSelections = 0;
 export let getOptions;
+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
 const valueToLabel = {};
@@ -52,10 +56,10 @@ async function reactToValue(value) {
 
 <div bind:this={inputelement}></div>
 {#if hasInit}
-  <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} let:value let:valid let:invalid let:id let:onBlur let:setVal>
+  <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>
     {@const _ = reactToValue(value)}
     <div class:valid class:invalid>
-      <MultiSelect {id} name={path} usePortal={portal} {disabled} {maxSelections} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions} on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}></MultiSelect>
+      <MultiSelect {id} name={path} usePortal={portal} descid={getDescribedBy([messagesid, helptextid, extradescid])} {disabled} {maxSelections} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions} on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur} />
     </div>
   </FieldStandard>
 {/if}

package/dist/FieldMultiselect.svelte.d.ts

@@ -12,6 +12,9 @@ declare const __propDef: {
         required?: boolean | undefined;
         maxSelections?: number | undefined;
         getOptions: (search: string) => Promise<PopupMenuItem[]>;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/FieldNumber.svelte

@@ -14,9 +14,11 @@ export let step = undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={numberSerialize} deserialize={nullable ? numberNullableDeserialize : numberDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:helptextid>
-  <Input bind:inputelement type="number" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {helptextid}></Input>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={numberSerialize} deserialize={nullable ? numberNullableDeserialize : numberDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:helptextid>
+  <Input bind:inputelement type="number" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {helptextid} {extradescid}></Input>
 </FieldStandard>

package/dist/FieldNumber.svelte.d.ts

@@ -13,6 +13,8 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean | undefined;
         inputelement?: HTMLInputElement | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
     };
     events: {

package/dist/FieldRadio.svelte

@@ -11,6 +11,8 @@ export let defaultValue = notNull ? choices[0].value : undefined;
 export let conditional = undefined;
 export let required = false;
 export let horizontal = false;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 export let number = false;
 export let date = false;
@@ -21,5 +23,5 @@ export let deserialize = undefined;
 </script>
 
 <Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:messages let:serialize>
-  <Switcher bind:id class={className} name={path} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {helptext} {messages} on:change={onChange} {onBlur} choices={choices.map(c => ({ ...c, value: serialize(c.value) }))} />
+  <Switcher bind:id class={className} name={path} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {related} {extradescid} {helptext} {messages} on:change={onChange} {onBlur} choices={choices.map(c => ({ ...c, value: serialize(c.value) }))} />
 </Field>

package/dist/FieldRadio.svelte.d.ts

@@ -15,6 +15,8 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean | undefined;
         horizontal?: boolean | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
         number?: boolean | undefined;
         date?: boolean | undefined;

package/dist/FieldSelect.svelte

@@ -13,6 +13,8 @@ export let defaultValue = notNull ? choices[0].value : undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 export let number = false;
 export let date = false;
@@ -22,8 +24,8 @@ export let serialize = undefined;
 export let deserialize = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid let:serialize>
-  <select bind:this={inputelement} {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid aria-describedby={getDescribedBy([messagesid, helptextid])}>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid let:serialize>
+  <select bind:this={inputelement} {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])}>
     {#if !notNull}<option value="" selected={!value}>{placeholder}</option>{/if}
     {#each choices as choice (choice.value)}
       {@const serializedValue = serialize(choice.value)}

package/dist/FieldSelect.svelte.d.ts

@@ -17,6 +17,8 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean | undefined;
         inputelement?: HTMLSelectElement | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
         number?: boolean | undefined;
         date?: boolean | undefined;

package/dist/FieldStandard.svelte

@@ -16,11 +16,12 @@ export let deserialize = undefined;
 export let finalize = undefined;
 export let conditional = undefined;
 export let required = false;
+export let related = 0;
 export let helptext = undefined;
 </script>
 
 <Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} {finalize} let:path let:value let:onBlur let:onChange let:setVal let:messages let:valid let:invalid let:serialize let:deserialize>
-  <Container {id} {label} {messages} {descid} {required} {helptext} let:messagesid let:helptextid>
+  <Container {id} {label} {messages} {descid} {required} {related} {helptext} let:messagesid let:helptextid>
     <slot {id} {path} {value} {onBlur} {onChange} {setVal} {valid} {invalid} {messagesid} {helptextid} {serialize} {deserialize} />
   </Container>
 </Field>

package/dist/FieldStandard.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
         finalize?: ((value: any) => any) | undefined;
         conditional?: boolean | undefined;
         required?: boolean | undefined;
+        related?: number | true | undefined;
         helptext?: string | undefined;
     };
     events: {

package/dist/FieldText.svelte

@@ -15,9 +15,11 @@ export let conditional = undefined;
 export let required = false;
 export let use = [];
 export let inputelement = undefined;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  <Input bind:inputelement {type} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid} {helptextid} {use}></Input>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
+  <Input bind:inputelement {type} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid} {helptextid} {extradescid} {use}></Input>
 </FieldStandard>

package/dist/FieldText.svelte.d.ts

@@ -15,6 +15,8 @@ declare const __propDef: {
         required?: boolean | undefined;
         use?: HTMLActionEntry<any>[] | undefined;
         inputelement?: HTMLInputElement | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
     };
     events: {

package/dist/FieldTextArea.svelte

@@ -15,11 +15,13 @@ export let conditional = undefined;
 export let required = false;
 export let use = [];
 export let inputelement = undefined;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  <textarea bind:this={inputelement} name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={getDescribedBy([messagesid, helptextid])} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste {maxlength} use:passActions={use}></textarea>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
+  <textarea bind:this={inputelement} name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste {maxlength} use:passActions={use}></textarea>
 </FieldStandard>
 
 <style>

package/dist/FieldTextArea.svelte.d.ts

@@ -14,6 +14,8 @@ declare const __propDef: {
         required?: boolean | undefined;
         use?: HTMLActionEntry<any>[] | undefined;
         inputelement?: HTMLTextAreaElement | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
     };
     events: {

package/dist/Input.svelte

@@ -13,6 +13,7 @@ export let max = undefined;
 export let step = undefined;
 export let id = undefined;
 export let disabled = false;
+export let extradescid = undefined;
 export let messagesid = undefined;
 export let helptextid = undefined;
 export let valid = false;
@@ -22,7 +23,7 @@ export let onBlur;
 export let onSelect = undefined;
 export let use = [];
 export let inputelement = undefined;
-$: descby = [helptextid, messagesid].filter(isNotBlank).join(' ');
+$: descby = [messagesid, helptextid, extradescid].filter(isNotBlank).join(' ');
 function resolveMinMax(dt) {
     if (typeof dt === 'undefined')
         return undefined;

package/dist/Input.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         step?: number | undefined;
         id?: string | undefined;
         disabled?: boolean | undefined;
+        extradescid?: string | undefined;
         messagesid?: string | undefined;
         helptextid?: string | undefined;
         valid?: boolean | undefined;

package/dist/Listbox.svelte

@@ -120,6 +120,7 @@ function focusListbox() {
 
 <div class="listbox-container" class:valid class:invalid>
   <span id={labelId}>{label}</span>
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul bind:this={listboxElement} role="listbox" id={listId} class="listbox-items" tabindex="0" aria-describedby={descid} aria-labelledby={labelId} aria-multiselectable={multiselect} on:keydown={onkeydown} on:focus={focusListbox}>
     {#each items as item, i (item.value)}
       <!-- svelte-ignore a11y-click-events-have-key-events -->

package/dist/Radio.svelte

@@ -7,10 +7,11 @@ export let onChange = undefined;
 export let onBlur = undefined;
 export let messagesid = undefined;
 export let helptextid = undefined;
+export let extradescid = undefined;
 export let disabled = false;
 export let valid = false;
 export let invalid = false;
-$: descby = [messagesid, helptextid].filter(isNotBlank).join(' ');
+$: descby = [messagesid, helptextid, extradescid].filter(isNotBlank).join(' ');
 </script>
 
 <input {id} type="radio" {name} class:valid class:invalid checked={selected} {disabled} aria-describedby={descby} {value} on:change={onChange} on:blur={onBlur}>

package/dist/Radio.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         onBlur?: any;
         messagesid?: string | undefined;
         helptextid?: string | undefined;
+        extradescid?: string | undefined;
         disabled?: boolean | undefined;
         valid?: boolean | undefined;
         invalid?: boolean | undefined;

package/dist/Switcher.svelte

@@ -12,6 +12,8 @@ export let choices;
 export let horizontal = false;
 export let label;
 export let required = false;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 export let messages = [];
 export let iptValue = choices[0].value;
@@ -28,12 +30,12 @@ function onChange(e) {
 $: columns = Math.floor($store.width / 250);
 $: width = (horizontal ? 100 / Math.min(choices.length, choices.length === 4 && columns === 3 ? 2 : columns) : 100) + '%';
 </script>
-<Container {id} {label} {messages} descid={groupid} {required} {helptext} let:helptextid>
+<Container {id} {label} {messages} descid={groupid} {required} {related} {helptext} let:helptextid>
   <div class="dialog-radio {className}" use:eq={{ store }} class:horizontal role="radiogroup" aria-labelledby={groupid} class:valid class:invalid>
     {#each choices as choice, idx}
       {@const radioid = `${groupid}.${idx}`}
       <label for={radioid} style:width>
-        <Radio id={radioid} {name} value={choice.value} selected={iptValue === choice.value} disabled={choice.disabled} {onChange} {onBlur} {helptextid}/>
+        <Radio id={radioid} {name} value={choice.value} selected={iptValue === choice.value} disabled={choice.disabled} {onChange} {onBlur} {helptextid} {extradescid} />
         <span>{choice.label || choice.value}</span>
       </label>
     {/each}

package/dist/Switcher.svelte.d.ts

@@ -13,6 +13,8 @@ declare const __propDef: {
         horizontal?: boolean | undefined;
         label: string;
         required?: boolean | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
         messages?: Feedback[] | undefined;
         iptValue?: string | undefined;

package/dist/Tabs.svelte

@@ -87,6 +87,7 @@ onMount(reactToCurrent);
 
 {#if $store.tabs.length > 1}
   {#if !$accordion}
+    <!-- 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)}
         {@const active = isActive(idx, $store.current)}

package/dist/chooser/Chooser.svelte

@@ -91,23 +91,28 @@ onMount(async () => {
         <Tabs bind:store={tabStore} tabs={$sources.map(s => ({ name: s.name, title: s.label ?? s.name }))} />
       {/if}
     </header>
-    <section class="dialog-chooser-chooser">
-      {#if $store.initialized}
-        <Tree headers={[
-          { label: 'Path', id: 'name', grow: 4, icon: item => item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : applicationOutline), get: 'name' }
-        ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
-      {/if}
-    </section>
-    <section class="dialog-chooser-preview" tabindex="-1">
-      {#if $preview}
-        <Thumbnail item={$preview} larger />
-        <Details item={$preview}>
-          {#if $preview.type === 'folder'}
-            <li>{$selected?.children?.length ?? 0} sub-items</li>
-          {/if}
-        </Details>
-      {/if}
-    </section>
+    <div class="dialog-chooser-body">
+      <section class="dialog-chooser-chooser">
+        {#if $store.initialized}
+          <Tree headers={[
+            { label: 'Path', id: 'name', grow: 4, icon: item => item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : applicationOutline), get: 'name' }
+          ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
+        {/if}
+      </section>
+      <section class="dialog-chooser-preview" tabindex="-1">
+        {#if $preview}
+          <Thumbnail item={$preview} larger />
+          <Details item={$preview}>
+            {#if $preview.type === 'folder'}
+              <div class="folder-info">
+                <dt>Contents:</dt>
+                <dd>{$selected?.children?.length ?? 0} sub-items</dd>
+              </div>
+            {/if}
+          </Details>
+        {/if}
+      </section>
+    </div>
   </section>
 </Dialog>
 
@@ -115,7 +120,6 @@ onMount(async () => {
   .dialog-chooser-window {
     position: relative;
     height: 80vh;
-    display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     justify-content: flex-end;
@@ -124,6 +128,10 @@ onMount(async () => {
   .dialog-chooser-window * {
     box-sizing: border-box;
   }
+
+  .dialog-chooser-body {
+    display: flex;
+  }
   .dialog-chooser-chooser {
     position: relative;
     width: 75%;
@@ -140,6 +148,12 @@ onMount(async () => {
     padding: 1em;
     overflow-y: auto;
   }
+  .folder-info dt {
+    font-weight: bold;
+  }
+  .folder-info dd {
+    margin: 0;
+  }
   header {
     position: relative;
     width: 100%;

package/dist/chooser/Details.svelte

@@ -2,25 +2,48 @@
 export let item;
 </script>
 
-<ul class="dialog-chooser-info" aria-live="polite">
+<dl class="dialog-chooser-info" aria-live="polite">
   {#if item.type !== 'raw'}
-    <li>{item.path}</li>
+    <div class="top-row">
+      <dt>Name:</dt>
+      <dd>{item.path}</dd>
+    </div>
   {:else if item.id}
-    <li>External Link<br>{item.url}</li>
+    <div>
+      <dt>External Link:</dt>
+      <dd>{item.url}</dd>
+    </div>
   {/if}
-  {#if item.type === 'asset' && item.image}
-    <li>{item.image.width}x{item.image.height}</li>
+  {#if item.type === 'asset'}
+    <div class="asset-properties">
+      {#if item.image}
+        <div>
+          <dt>Dimensions:</dt>
+          <dd>{item.image.width}x{item.image.height}</dd>
+        </div>
+      {/if}
+      <div>
+        <dt>File Type:</dt>
+        <dd>{item.mime}</dd>
+      </div>
+      <div>
+        <dt>File Size:</dt>
+        <dd>{bytesToHuman(item.bytes)}</dd>
+      </div>
+    </div>
   {:else if item.type === 'page' && item.title}
-    <li>{item.title}</li>
+    <div>
+      <dt>Title:</dt>
+      <dd>{item.title}</dd>
+    </div>
   {:else if item.type === 'folder'}
-    <li>{item.path}</li>
-  {/if}
-  {#if item.type === 'asset'}
-    <li>{item.mime}</li>
-    <li>{bytesToHuman(item.bytes)}</li>
+    <div>
+      <dt>Path:</dt>
+      <dd>{item.path}</dd>
+    </div>
   {/if}
   <slot />
-</ul>
+</dl>
 
 <style>
   .dialog-chooser-info {
@@ -28,5 +51,24 @@ export let item;
     margin: 0;
     list-style: none;
   }
+  .dialog-chooser-info dt {
+    font-weight: bold;
+  }
+  .dialog-chooser-info dd {
+    margin: 0;
+  }
+  .top-row {
+    margin-bottom: 1em;
+  }
+  .asset-properties {
+    display: flex;
+    justify-content: space-between;
+  }
+  :global([data-eq~="1400px"]) .asset-properties {
+    flex-direction: column;
+  }
+  :global([data-eq~="1400px"]) .asset-properties div:not(:last-child){
+    margin-bottom: 1em;
+  }
 
 </style>

package/dist/helpers.d.ts

@@ -1 +1 @@
-export declare function getDescribedBy(ids: (string | undefined)[]): string | null;
+export declare function getDescribedBy(ids: (string | undefined)[]): string | undefined;

package/dist/helpers.js

@@ -1,5 +1,5 @@
 import { isNotBlank } from 'txstate-utils';
 export function getDescribedBy(ids) {
     const descby = ids.filter(isNotBlank).join(' ');
-    return isNotBlank(descby) ? descby : null;
+    return isNotBlank(descby) ? descby : undefined;
 }

package/dist/tree/Tree.svelte

@@ -1,10 +1,9 @@
 <script>import { resize } from '@txstate-mws/svelte-components';
 import { derivedStore, Store } from '@txstate-mws/svelte-store';
-import { afterUpdate, beforeUpdate, onDestroy, onMount, setContext } from 'svelte';
-import { hashid } from 'txstate-utils';
+import { afterUpdate, beforeUpdate, onDestroy, onMount, setContext, tick } from 'svelte';
 import LoadIcon from './LoadIcon.svelte';
 import TreeNode from './TreeNode.svelte';
-import { TreeStore, TREE_STORE_CONTEXT } from './treestore';
+import { getHashId, TreeStore, TREE_STORE_CONTEXT } from './treestore';
 export let headers;
 export let nodeClass = undefined;
 export let singleSelect = undefined;
@@ -93,18 +92,24 @@ function headerDragEnd() {
 function headerDragReset() {
     store.resetHeaderOverride();
 }
+let mounted = false;
 onMount(async () => {
     document.addEventListener('dragend', onDragEnd);
     const saveFocusId = $store.focused?.id;
+    headerSizes.set(calcHeaderSizes()); // seems to need a kick on first mount
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    // need to wait long enough for headers to redraw before trying to mount the rows
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    mounted = true;
     await store.refresh();
     if ($store.focused?.id && $store.focused.id === saveFocusId) {
-        const el = document.getElementById(hashid($store.focused.id));
+        const el = document.getElementById(getHashId($store.focused.id));
         el?.scrollIntoView({ block: 'center' });
     }
-    headerSizes.set(calcHeaderSizes()); // seems to need a kick on first mount
 });
 onDestroy(() => {
-    document.removeEventListener('dragend', onDragEnd);
+    if (typeof document !== 'undefined')
+        document.removeEventListener('dragend', onDragEnd);
 });
 let hadFocus = false;
 beforeUpdate(() => {
@@ -112,7 +117,7 @@ beforeUpdate(() => {
 });
 afterUpdate(() => {
     if ($store.focused?.id) {
-        const el = document.getElementById(hashid($store.focused.id));
+        const el = document.getElementById(getHashId($store.focused.id));
         if (el && hadFocus) {
             if (el !== document.activeElement)
                 el.focus();
@@ -130,7 +135,8 @@ afterUpdate(() => {
     {#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 $rootItems?.length}
+{#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}>
     {#each $rootItems as item, i (item.id)}
       <TreeNode

package/dist/tree/TreeNode.svelte

@@ -4,9 +4,9 @@ import menuDown from '@iconify-icons/mdi/menu-down';
 import menuRight from '@iconify-icons/mdi/menu-right';
 import { modifierKey, ScreenReaderOnly } from '@txstate-mws/svelte-components';
 import { createEventDispatcher, getContext } from 'svelte';
-import { hashid, isNotBlank, toArray } from 'txstate-utils';
+import { isNotBlank, toArray } from 'txstate-utils';
 import { Icon } from '..';
-import { TREE_STORE_CONTEXT } from './treestore';
+import { TREE_STORE_CONTEXT, getHashId } from './treestore';
 import LoadIcon from './LoadIcon.svelte';
 import TreeCell from './TreeCell.svelte';
 export let headers;
@@ -26,7 +26,7 @@ let nodeelement;
 let userWantsCopy = false;
 $: isSelected = $selected.has(item.id);
 $: showChildren = !!item.open && !!item.children?.length;
-$: hashedId = hashid(item.id);
+$: hashedId = getHashId(item.id);
 $: isDraggable = $draggable && ((isSelected && !$selectedUndraggable) || store.dragEligible([item], true) || store.dragEligible([item], false));
 $: dropZone = $dragging && store.dropEffect(item, false, userWantsCopy) !== 'none';
 $: dropDisabled = $dragging && !dropZone;

package/dist/tree/treestore.d.ts

@@ -48,7 +48,7 @@ export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITr
     #private;
     fetchChildren: FetchChildrenFn<T>;
     treeElement?: HTMLElement;
-    rootItems: import("@txstate-mws/svelte-store").DerivedStore<TypedTreeItem<T>[] | undefined, ITreeStore<T>>;
+    rootItems: import("svelte/store").Readable<any>;
     draggable: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
     dragging: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
     selectedUndraggable: import("@txstate-mws/svelte-store").DerivedStore<boolean | undefined, ITreeStore<T>>;
@@ -115,3 +115,5 @@ export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITr
     setHeaderOverride(id: string, width: string): void;
     resetHeaderOverride(): void;
 }
+export declare const hashedIds: Record<string, string>;
+export declare function getHashId(str: string): string;

package/dist/tree/treestore.js

@@ -1,10 +1,12 @@
 import { ActiveStore, derivedStore } from '@txstate-mws/svelte-store';
-import { keyby } from 'txstate-utils';
+import { derived } from 'svelte/store';
+import { hashid, keyby } from 'txstate-utils';
 export const TREE_STORE_CONTEXT = {};
+const rootItems = v => v.rootItems;
 export class TreeStore extends ActiveStore {
     fetchChildren;
     treeElement;
-    rootItems = derivedStore(this, 'rootItems');
+    rootItems = derived(this, rootItems);
     draggable = derivedStore(this, v => v.draggable && !v.loading);
     dragging = derivedStore(this, 'dragging');
     selectedUndraggable = derivedStore(this, 'selectedUndraggable');
@@ -29,7 +31,7 @@ export class TreeStore extends ActiveStore {
     }
     async visit(item, cb) {
         await cb(item);
-        await Promise.all((item.children ?? []).map(async (child) => await this.visit(child, cb)));
+        await Promise.all((item.children ?? []).map(async (child) => { await this.visit(child, cb); }));
     }
     visitSync(item, cb) {
         cb(item);
@@ -77,15 +79,17 @@ export class TreeStore extends ActiveStore {
         try {
             const children = await this.fetch(item);
             // re-open any open children
-            await Promise.all(children.map(async (child) => await this.visit(child, async (child) => {
-                child.open = this.value.itemsById[child.id]?.open;
-                if (child.open) {
-                    child.children = await this.fetch(child);
-                    child.hasChildren = child.children.length > 0;
-                    if (!child.hasChildren)
-                        child.open = false;
-                }
-            })));
+            await Promise.all(children.map(async (child) => {
+                await this.visit(child, async (child) => {
+                    child.open = this.value.itemsById[child.id]?.open;
+                    if (child.open) {
+                        child.children = await this.fetch(child);
+                        child.hasChildren = child.children.length > 0;
+                        if (!child.hasChildren)
+                            child.open = false;
+                    }
+                });
+            }));
             if (item) {
                 this.visitSync(item, itm => { if (itm.id !== item.id)
                     this.value.itemsById[itm.id] = undefined; });
@@ -336,3 +340,8 @@ export class TreeStore extends ActiveStore {
         this.trigger();
     }
 }
+export const hashedIds = {};
+export function getHashId(str) {
+    hashedIds[str] ??= hashid(str);
+    return hashedIds[str];
+}

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.46",
+  "version": "0.0.47",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -20,7 +20,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@txstate-mws/svelte-components": "^1.3.9",
+    "@txstate-mws/svelte-components": "^1.4.5",
     "@txstate-mws/svelte-forms": "^1.3.4",
     "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",