@dosgato/dialog 0.0.46 → 0.0.48

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,34 @@
-<script>import { eq } from '@txstate-mws/svelte-components';
-import InlineMessages from './InlineMessages.svelte';
+<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 './';
 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;
+let helpelement;
+let needsShowHelp = false;
+function setNeedsShowHelp(..._) {
+    needsShowHelp = (helpelement?.getClientRects().length ?? 0) > 1;
+    if (!needsShowHelp)
+        showhelp = false;
+}
+$: setNeedsShowHelp(helpelement);
 </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 +36,19 @@ 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 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}>{helptext}</span>
+        {#if needsShowHelp}
+          <button type="button" class="dialog-field-help-expand">Show {#if showhelp}Less{:else}More{/if}<ScreenReaderOnly>, ignore this, the help text it controls will be read to you as input description</ScreenReaderOnly></button>
+        {/if}
+      </div>
     {/if}
-    <slot {messagesid} {helptextid}/>
+    <slot {messagesid} helptextid={descids} />
   </div>
   <InlineMessages bind:id={messagesid} {messages} />
 </div>
+{/if}
 
 <style>
   .dialog-field-container {
@@ -32,6 +56,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 +82,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 +120,41 @@ 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;
+  }
+  .dialog-field-help.expanded {
+    white-space: normal;
+    max-height: fit-content;
+  }
+  .dialog-field-help.needsShowHelp {
+    padding-right: 6em;
+    cursor: help;
+  }
+  .dialog-field-help.expanded {
+    padding-right: 0;
+  }
+  .dialog-field-help:not(.expanded) .dialog-field-help-expand {
+    position: absolute;
+    top: 0;
+    right: 0.5em;
+  }
+  .dialog-field-help-expand {
+    background: none!important;
+    border: none;
+    padding: 0!important;
+    color: #069;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .dialog-field-help-expand:hover {
+    text-decoration: none;
   }
 
 </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: {