@dosgato/dialog 0.0.18 → 0.0.20

package/FieldMultiple.svelte

@@ -1,7 +1,9 @@
-<script>import { AddMore, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
+<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 { isNotNull } from 'txstate-utils';
+import Button from './Button.svelte';
 import Container from './Container.svelte';
 export let path;
 export let label;
@@ -12,6 +14,9 @@ export let compact = false;
 export let removable = false;
 export let reorder = false;
 export let conditional = undefined;
+export let addMoreText = 'Add';
+export let maxedText = addMoreText;
+export let addMoreClass = undefined;
 const inheritedPath = getContext(FORM_INHERITED_PATH);
 const finalPath = [inheritedPath, path].filter(isNotNull).join('.');
 const store = getContext(FORM_CONTEXT);
@@ -27,7 +32,7 @@ $: messages = compact ? $messageStore : [];
 </script>
 
 <Container {label} {messages}>
-  <AddMore {path} {initialState} {minLength} {maxLength} {conditional} addMoreClass="dialog-multiple-button" let:path let:currentLength let:maxLength let:index let:minned let:maxed let:value let:onDelete let:onMoveUp>
+  <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}>
@@ -39,29 +44,31 @@ $: messages = compact ? $messageStore : [];
         {#if showDelete}<button class="dialog-multiple-delete" type="button" on:click|preventDefault|stopPropagation={onDelete}>X</button>{/if}
       </div>{/if}
     </div>
+    <svelte:fragment slot="addbutton" let:maxed let:onClick>
+      <Button type="button" icon={plusCircleLight} class="{addMoreClass} dialog-multiple-button" disabled={maxed} on:click={onClick}>{maxed ? maxedText : addMoreText}</Button>
+    </svelte:fragment>
   </AddMore>
 </Container>
 
 <style>
   .dialog-multiple {
     position: relative;
-    border: var(--dialog-container-border, 1px solid #999999);
+    border: var(--dialog-container-border, 0);
     padding: var(--dialog-container-padding, 1em);
   }
   .dialog-multiple:not(:first-child) {
     border-top: 0;
   }
   .dialog-multiple:nth-of-type(even) {
-    background-color: var(--dialog-field-bg1, #e6e6e6);
+    background-color: var(--dialog-field-bg1, transparent);
     color: var(--dialog-field-text1, inherit);
   }
   .dialog-multiple:nth-of-type(odd) {
-    background-color: var(--dialog-field-bg2, #ffffff);
+    background-color: var(--dialog-field-bg2, transparent);
     color: var(--dialog-field-text2, inherit);
   }
   :global(.dialog-multiple-button) {
-    padding: 0.3em 0.4em;
-    margin-top: 0.5em;
+    margin-left: var(--dialog-container-padding, 1em);
   }
   .dialog-multiple.has-delete-icon {
     display: flex;

package/FieldMultiple.svelte.d.ts

@@ -10,6 +10,9 @@ declare const __propDef: {
         removable?: boolean;
         reorder?: boolean;
         conditional?: boolean | undefined;
+        addMoreText?: string;
+        maxedText?: string;
+        addMoreClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldMultiselect.svelte

@@ -1,5 +1,8 @@
 <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';
 export let id = undefined;
 export let path;
 export let label = '';
@@ -11,42 +14,46 @@ export let required = false;
 export let getOptions;
 // each time we run getOptions we will save the value -> label mappings
 // that it finds, so that we can display labels on pills
-let valueToLabel = {};
+const valueToLabel = {};
 async function wrapGetOptions(search) {
-    let opts = await getOptions(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('');
-    }
-    for (const opt of opts)
+    // if (opts.length === 0) {
+    //   opts = await getOptions('')
+    // }
+    for (const opt of opts) {
         valueToLabel[opt.value] = opt.label || opt.value;
-    valueToLabel = valueToLabel;
+    }
     return opts;
 }
-function valueToSelected(value, valueToLabel) {
-    return value.map(v => ({ value: v, label: valueToLabel[v] }));
-}
+const selectedStore = new Store([]);
+let hasInit = !defaultValue.length;
+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
-function reactToValue(value) {
-    if (value == null)
-        return;
-    for (const v of value) {
+async function reactToValue(value) {
+    await Promise.all(value.map(async (v) => {
         if (!valueToLabel[v])
-            wrapGetOptions(v).catch(console.debug);
-    }
+            await wrapGetOptions(v);
+    }));
+    selectedStore.set(value.map(v => ({ value: v, label: valueToLabel[v] })).filter(v => isNotBlank(v.label)));
 }
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} let:value let:valid let:invalid let:id let:onBlur let:setVal>
-  {@const _ = reactToValue(value)}
-  <div class:valid class:invalid>
-    <MultiSelect {id} name={path} {disabled} selected={valueToSelected(value, valueToLabel)} {placeholder} getOptions={wrapGetOptions} on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}></MultiSelect>
-  </div>
-</FieldStandard>
+{#if hasInit}
+  <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} let:value let:valid let:invalid let:id let:onBlur let:setVal>
+    {@const _ = reactToValue(value)}
+    <div class:valid class:invalid>
+      <MultiSelect {id} name={path} {disabled} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions} on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}></MultiSelect>
+    </div>
+  </FieldStandard>
+{/if}
 
 <style>
   .invalid {

package/FieldNumber.svelte

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

package/FieldNumber.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean;
         inputelement?: HTMLInputElement;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldRadio.svelte

@@ -1,5 +1,4 @@
-<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
-import { randomid } from 'txstate-utils';
+<script>import { randomid } from 'txstate-utils';
 import FieldStandard from './FieldStandard.svelte';
 import Radio from './Radio.svelte';
 let className = '';
@@ -13,16 +12,22 @@ export let defaultValue = notNull ? choices[0].value : undefined;
 export let conditional = undefined;
 export let required = false;
 export let horizontal = false;
+export let helptext = undefined;
+export let number = false;
+export let date = false;
+export let datetime = false;
+export let serialize = undefined;
+export let deserialize = undefined;
 const groupid = randomid();
 const width = '100%';
 </script>
 
-<FieldStandard bind:id descid={groupid} {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:onBlur let:onChange>
+<FieldStandard bind:id descid={groupid} {label} {path} {required} {defaultValue} {conditional} {helptext} {notNull} {number} {date} {datetime} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:helptextid>
   <div class="dialog-radio {className}" class:horizontal role="radiogroup" aria-labelledby={groupid} class:invalid>
     {#each choices as choice, idx}
       {@const radioid = `${path}.${idx}`}
       <label for={radioid} style:width>
-        <Radio id={radioid} name={path} value={choice.value} selected={value === choice.value} disabled={choice.disabled} {onChange} {onBlur} />
+        <Radio id={radioid} name={path} value={choice.value} selected={value === choice.value} disabled={choice.disabled} {onChange} {onBlur} {helptextid}/>
         <span>{choice.label || (typeof choice.value === 'string' ? choice.value : '')}</span>
       </label>
     {/each}

package/FieldRadio.svelte.d.ts

@@ -15,6 +15,12 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean;
         horizontal?: boolean;
+        helptext?: string | undefined;
+        number?: boolean;
+        date?: boolean;
+        datetime?: boolean;
+        serialize?: (value: any) => string;
+        deserialize?: (value: string) => any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldSelect.svelte

@@ -1,4 +1,4 @@
-<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
+<script>import { getDescribedBy } from './';
 import FieldStandard from './FieldStandard.svelte';
 let className = '';
 export { className as class };
@@ -13,10 +13,16 @@ export let defaultValue = notNull ? choices[0].value : undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
+export let helptext = undefined;
+export let number = false;
+export let date = false;
+export let datetime = false;
+export let serialize = undefined;
+export let deserialize = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
-  <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={messagesid}>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} {notNull} {number} {date} {datetime} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
+  <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])}>
     {#if !notNull}<option value="" selected={!value}>{placeholder}</option>{/if}
     {#each choices as choice (choice.value)}
       <option value={choice.value} disabled={choice.disabled} selected={value === choice.value}>{choice.label || choice.value}</option>

package/FieldSelect.svelte.d.ts

@@ -17,6 +17,12 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean;
         inputelement?: HTMLSelectElement;
+        helptext?: string | undefined;
+        number?: boolean;
+        date?: boolean;
+        datetime?: boolean;
+        serialize?: (value: any) => string;
+        deserialize?: (value: string) => any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldStandard.svelte

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

package/FieldStandard.svelte.d.ts

@@ -6,10 +6,15 @@ declare const __propDef: {
         path: string;
         defaultValue?: any;
         label: string;
+        notNull?: boolean;
+        number?: boolean;
+        date?: boolean;
+        datetime?: boolean;
         serialize?: (value: any) => string;
         deserialize?: (value: string) => any;
         conditional?: boolean | undefined;
         required?: boolean;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,6 +30,7 @@ declare const __propDef: {
             valid: boolean;
             invalid: boolean;
             messagesid: any;
+            helptextid: string;
         };
     };
 };

package/FieldText.svelte

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

package/FieldText.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         required?: boolean;
         use?: HTMLActionEntry[];
         inputelement?: HTMLInputElement;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldTextArea.svelte

@@ -1,4 +1,5 @@
-<script>import { passActions } from '@txstate-mws/svelte-components';
+<script>import { getDescribedBy } from './';
+import { passActions } from '@txstate-mws/svelte-components';
 import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
 import FieldStandard from './FieldStandard.svelte';
 let className = '';
@@ -14,10 +15,11 @@ export let conditional = undefined;
 export let required = false;
 export let use = [];
 export let inputelement = undefined;
+export let helptext = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
-  <textarea bind:this={inputelement} name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={messagesid} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste {maxlength} use:passActions={use}></textarea>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} 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>
 
 <style>

package/FieldTextArea.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         required?: boolean;
         use?: HTMLActionEntry[];
         inputelement?: HTMLTextAreaElement;
+        helptext?: string | undefined;
     };
     events: {
         paste: ClipboardEvent;

package/Form.svelte

@@ -13,8 +13,8 @@ export let preload = undefined;
 setContext(CHOOSER_API_CONTEXT, chooserClient);
 </script>
 
-<Form bind:store class="{className} dialog-form" {submit} {validate} on:saved {autocomplete} {name} {preload} let:messages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting>
-  <slot {messages} {saved} {validating} {submitting} {valid} {invalid} />
+<Form bind:store class="{className} dialog-form" {submit} {validate} on:saved {autocomplete} {name} {preload} let:messages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting let:data>
+  <slot {messages} {saved} {validating} {submitting} {valid} {invalid} {data} />
   <div class="form-errors" aria-live='assertive'>
     {#if messages.length}
       <ul>
@@ -40,7 +40,7 @@ setContext(CHOOSER_API_CONTEXT, chooserClient);
     padding: 0;
   }
   .form-errors {
-    color: #9a3332;
+    color: var(--dg-danger-bg, #9a3332);
     padding: 1em;
   }
 </style>

package/FormDialog.svelte

@@ -0,0 +1,34 @@
+<script>import contentSave from '@iconify-icons/mdi/content-save';
+import { createEventDispatcher, setContext } from 'svelte';
+import { CHOOSER_API_CONTEXT, Form } from './';
+import Dialog from './Dialog.svelte';
+export let submit;
+export let validate = undefined;
+export let store = undefined;
+export let chooserClient = undefined;
+export let autocomplete = undefined;
+export let name = undefined;
+export let title = '';
+export let icon = undefined;
+export let size = 'normal';
+export let preload = undefined;
+const dispatch = createEventDispatcher();
+async function onSubmit() {
+    const resp = await store.submit();
+    if (resp.success)
+        dispatch('saved', resp.data);
+}
+setContext(CHOOSER_API_CONTEXT, chooserClient);
+</script>
+
+<Dialog continueText="Save" continueIcon={contentSave} cancelText="Cancel" on:escape on:continue={onSubmit} {title} {icon} {size}>
+  <Form bind:store {submit} {validate} {chooserClient} {autocomplete} {name} {preload} on:saved let:messages let:saved let:valid let:invalid let:validating let:submitting let:data>
+    <slot {messages} {saved} {validating} {submitting} {valid} {invalid} {data} />
+  </Form>
+</Dialog>
+
+<style>
+  :global(:root) {
+    --ck-z-default: var(--popup-z, 3001);
+  }
+</style>

package/FormDialog.svelte.d.ts

@@ -0,0 +1,38 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IconifyIcon } from '@iconify/svelte';
+import type { Feedback, FormStore, SubmitResponse } from '@txstate-mws/svelte-forms';
+declare class __sveltets_Render<T> {
+    props(): {
+        submit: (state: T) => Promise<SubmitResponse<T>>;
+        validate?: (state: T) => Promise<Feedback[]>;
+        store?: FormStore<T>;
+        chooserClient?: any;
+        autocomplete?: string;
+        name?: string;
+        title?: string;
+        icon?: IconifyIcon;
+        size?: "small" | "normal" | "tiny" | "large";
+        preload?: T;
+    };
+    events(): {
+        saved: CustomEvent<T>;
+        escape: CustomEvent<undefined>;
+    };
+    slots(): {
+        default: {
+            messages: any;
+            saved: any;
+            validating: any;
+            submitting: any;
+            valid: any;
+            invalid: any;
+            data: any;
+        };
+    };
+}
+export declare type FormDialogProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export declare type FormDialogEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export declare type FormDialogSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class FormDialog<T> extends SvelteComponentTyped<FormDialogProps<T>, FormDialogEvents<T>, FormDialogSlots<T>> {
+}
+export {};

package/Input.svelte

@@ -1,5 +1,6 @@
 <script>import { passActions } from '@txstate-mws/svelte-components';
 import { dateSerialize, datetimeSerialize } from '@txstate-mws/svelte-forms';
+import { isNotBlank } from 'txstate-utils';
 let className = '';
 export { className as class };
 export let name;
@@ -13,6 +14,7 @@ export let step = undefined;
 export let id = undefined;
 export let disabled = false;
 export let messagesid = undefined;
+export let helptextid = undefined;
 export let valid = false;
 export let invalid = false;
 export let onChange;
@@ -20,6 +22,7 @@ export let onBlur;
 export let onSelect = undefined;
 export let use = [];
 export let inputelement = undefined;
+$: descby = [helptextid, messagesid].filter(isNotBlank).join(' ');
 function resolveMinMax(dt) {
     if (typeof dt === 'undefined')
         return undefined;
@@ -33,4 +36,4 @@ $: minStr = resolveMinMax(min);
 $: maxStr = resolveMinMax(max);
 </script>
 
-<input bind:this={inputelement} {type} {id} class={className} autocomplete="off" data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={messagesid} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange} use:passActions={use}>
+<input bind:this={inputelement} {type} {id} class={className} autocomplete="off" data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={isNotBlank(descby) ? descby : null} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange} use:passActions={use}>

package/Input.svelte.d.ts

@@ -18,6 +18,7 @@ declare const __propDef: {
         id?: string | undefined;
         disabled?: boolean;
         messagesid?: string | undefined;
+        helptextid?: string | undefined;
         valid?: boolean;
         invalid?: boolean;
         onChange: any;

package/Listbox.svelte

@@ -122,6 +122,7 @@ function focusListbox() {
   <span id={labelId}>{label}</span>
   <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 -->
       <li
         bind:this={itemelements[i]}
         id={`${listId}-${i}`}

package/Radio.svelte

@@ -1,16 +1,19 @@
-<script>export let id = undefined;
+<script>import { isNotBlank } from 'txstate-utils';
+export let id = undefined;
 export let name;
 export let value;
 export let selected = false;
 export let onChange = undefined;
 export let onBlur = undefined;
 export let messagesid = undefined;
+export let helptextid = undefined;
 export let disabled = false;
 export let valid = false;
 export let invalid = false;
+$: descby = [messagesid, helptextid].filter(isNotBlank).join(' ');
 </script>
 
-<input {id} type="radio" {name} class:valid class:invalid checked={selected} {disabled} aria-describedby={messagesid} {value} on:change={onChange} on:blur={onBlur}>
+<input {id} type="radio" {name} class:valid class:invalid checked={selected} {disabled} aria-describedby={descby} {value} on:change={onChange} on:blur={onBlur}>
 
 <style>
 input, input:before, input:after {

package/Radio.svelte.d.ts

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

package/Tab.svelte

@@ -13,15 +13,16 @@ const last = idx === $store.tabs.length - 1;
 {#if $accordion}
   <div bind:this={tabelements[idx]} id={$store.tabids[title]} class="tabs-tab" class:last aria-selected={active} aria-controls={$store.panelids[title]} role="tab" tabindex={0} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><Icon icon={$store.tabs[idx].icon} inline />{title}<i class="tabs-accordion-arrow" aria-hidden="true"></i></div>
 {/if}
-<div id={$store.panelids[title]} hidden={!active} role="tabpanel" tabindex="0" aria-labelledby={$store.tabids[title]} class="tabs-panel" class:accordion={$accordion}>
+<div id={$store.panelids[title]} hidden={!active} role="tabpanel" tabindex="-1" aria-labelledby={$store.tabids[title]} class="tabs-panel" class:accordion={$accordion}>
   <slot />
 </div>
 
 <style>
   .tabs-panel {
     width: 100%;
-    border: var(--tabs-panel-border, var(--tabs-border, 1px solid #666666));
-    padding: var(--tabs-panel-padding, 1em);
+    min-height: 50vh;
+    border: var(--tabs-panel-border, var(--tabs-border, 0));
+    padding: var(--tabs-margin-top, 2em) var(--tabs-padding-hori, 0.7em) 0 var(--tabs-padding-hori, 0.7em);
   }
   .tabs-panel.accordion {
     border-left: 0;

package/TabStore.d.ts

@@ -2,19 +2,26 @@ import { Store } from '@txstate-mws/svelte-store';
 import type { ElementSize } from '@txstate-mws/svelte-components';
 import type { IconifyIcon } from '@iconify/svelte';
 export declare const TAB_CONTEXT: {};
-interface TabDef {
+export interface TabDef {
     title: string;
     icon?: IconifyIcon;
+    required?: boolean;
 }
 interface ITabStore extends ElementSize {
     current?: number;
+    prevTitle?: string;
+    nextTitle?: string;
+    requireNext: boolean;
     tabs: TabDef[];
+    visited: Record<string, boolean>;
     tabids: Record<string, string>;
     panelids: Record<string, string>;
 }
 export declare class TabStore extends Store<ITabStore> {
     initialTab?: string | undefined;
     constructor(tabs: TabDef[], initialTab?: string | undefined);
+    set(v: ITabStore): void;
+    currentIdx(): import("@txstate-mws/svelte-store").DerivedStore<number, ITabStore>;
     currentTitle(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;
     currentTabId(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;
     currentPanelId(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;

package/TabStore.js

@@ -1,18 +1,33 @@
 import { Store, derivedStore } from '@txstate-mws/svelte-store';
 import { findIndex, randomid } from 'txstate-utils';
 export const TAB_CONTEXT = {};
+function checkNext(v) {
+    v.visited = { ...v.visited, [v.tabs[v.current].title]: true };
+    v.prevTitle = v.current > 0 ? v.tabs[v.current - 1].title : undefined;
+    v.nextTitle = v.tabs.length - 1 > v.current ? v.tabs[v.current + 1].title : undefined;
+    v.requireNext = v.tabs.some((t, i) => t.required && !v.visited[t.title]);
+    return v;
+}
 export class TabStore extends Store {
     initialTab;
     constructor(tabs, initialTab) {
-        super({
+        const current = findIndex(tabs, t => t.title === initialTab, 0);
+        super(checkNext({
             tabs,
-            current: findIndex(tabs, t => t.title === initialTab, 0),
+            current,
+            visited: {},
             tabids: tabs.reduce((acc, curr) => ({ ...acc, [curr.title]: randomid() }), {}),
             panelids: tabs.reduce((acc, curr) => ({ ...acc, [curr.title]: randomid() }), {}),
             clientWidth: 1024
-        });
+        }));
         this.initialTab = initialTab;
     }
+    set(v) {
+        super.set(checkNext(v));
+    }
+    currentIdx() {
+        return derivedStore(this, v => v.current);
+    }
     currentTitle() {
         return derivedStore(this, v => v.tabs[v.current].title);
     }