@dosgato/dialog 1.0.8 → 1.1.0

package/dist/Container.svelte

@@ -70,6 +70,7 @@ $: setNeedsShowHelp(helpelement);
   .dialog-field-container[data-related~="1"] {
     padding-top: 0;
     padding-left: calc(var(--dialog-container-padding, 1em) + var(--dialog-related-padding, 1em));
+    margin-top: -0.5em;
   }
   .dialog-field-container[data-related~="2"] {
     padding-left: calc(var(--dialog-container-padding, 1em) + (2 * var(--dialog-related-padding, 1em)));

package/dist/Dialog.svelte

@@ -130,6 +130,10 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     margin-right: 0.4em;
   }
 
+  .header-buttons button {
+    color: black;
+  }
+
   .dialog-content {
     position: relative;
     padding: 2em;

package/dist/FieldChooserLink.svelte

@@ -243,6 +243,11 @@ $: void updateSelected($value);
     align-items: flex-start;
     margin-top: 0.2em;
   }
+  .dialog-chooser-entry > button {
+    border-radius: 0.25em;
+    border: 1px solid #808080;
+    color: black;
+  }
   .dialog-chooser-entry-input {
     position: relative;
     flex-grow: 1;
@@ -261,6 +266,7 @@ $: void updateSelected($value);
     transform: translateY(-50%);
     cursor: pointer;
     line-height: 1;
+    color: black;
   }
   :global([data-eq~="400px"] .dialog-chooser-container .dialog-chooser-thumbnail img) {
     object-position: left;

package/dist/FieldDateTime.svelte

@@ -17,15 +17,16 @@ export let extradescid = undefined;
 export let helptext = undefined;
 export let inputelement = undefined;
 let showBadInputMessage = false;
-function wrapOnChange(onChange) {
-    showBadInputMessage = inputelement.validity.badInput;
-    onChange();
+function wrapOnBlur(onBlur) {
+    const date = new Date(inputelement.value);
+    showBadInputMessage = inputelement.validity.badInput || !(date instanceof Date && !isNaN(date.valueOf()));
+    onBlur();
 }
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={datetimeSerialize} deserialize={datetimeDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:helptextid let:messagesid>
   {#if showBadInputMessage}<div class="bad-input-warning" aria-live='polite'>{`Field ${label}`} must include both a date and time</div>{/if}
-  <Input bind:inputelement={inputelement} type="datetime-local" name={path} {value} {id} class="dialog-input {className}" onChange={() => { wrapOnChange(onChange) }} {onBlur} {valid} {invalid} {min} {max} {step} {extradescid} {messagesid} {helptextid}/>
+  <Input bind:inputelement={inputelement} type="datetime-local" name={path} {value} {id} class="dialog-input {className}" onBlur={() => { wrapOnBlur(onBlur) }} {onChange} {valid} {invalid} {min} {max} {step} {extradescid} {messagesid} {helptextid}/>
 </FieldStandard>
 
 <style>

package/dist/FieldMultiple.svelte

@@ -111,6 +111,10 @@ $: messages = compact ? $messageStore : [];
     padding: 0.15em;
     cursor: pointer;
     font-size: 1.3em;
+    color: black;
+  }
+  .dialog-multiple-buttons button:disabled {
+    color: #6d6d6d;
   }
 
 </style>

package/dist/FieldSelect.svelte

@@ -53,3 +53,10 @@ onMount(reactToChoices);
     {/each}
   </select>
 </FieldStandard>
+
+<style>
+  select {
+    color: black;
+  }
+
+</style>

package/dist/Tabs.svelte

@@ -172,6 +172,7 @@ onMount(reactToCurrent);
     background: none;
     cursor: pointer;
     border: 0;
+    color: black;
   }
   li:not(.left) {
     margin-left: -1px;

package/dist/iconpicker/FieldIconPicker.svelte

@@ -104,8 +104,8 @@ function onKeyDown(e) {
 </script>
 
 <FieldStandard bind:id {path} {descid} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>
-  <Icon icon={`${value.prefix === 'fab' ? 'fa-brands' : 'fa-solid'}:${value.icon?.slice(3) ?? 'graduation-cap'}`}/>
-  <button type="button" id="btnSelectIcon" on:click={() => { modalOpen = true }} aria-describedby={getDescribedBy([descid, messagesid, helptextid])}>Select New Icon</button>
+  <Icon icon={`${value.prefix === 'fab' ? 'fa6-brands' : 'fa6-solid'}:${value.icon?.slice(3) ?? 'graduation-cap'}`}/>
+  <button type="button" id="btnSelectIcon" class="select-icon" on:click={() => { modalOpen = true }} aria-describedby={getDescribedBy([descid, messagesid, helptextid])}>Select New Icon</button>
   {#if modalOpen}
   <Modal>
     <section>
@@ -130,8 +130,9 @@ function onKeyDown(e) {
             <ScreenReaderOnly><legend class="sr-only">Icons</legend></ScreenReaderOnly>
             <div class="icon-picker-items" role="radiogroup">
               {#each visibleIcons as icon, idx (icon.class)}
+
                 <div bind:this={iconElements[idx]} id={icon.class} class="icon-picker-item" role="radio" aria-checked={icon.class === selected.icon} tabindex={icon.class === selected.icon ? 0 : -1} data-index={idx} on:click={() => onSelectIcon(icon.class)} on:keydown={onKeyDown}>
-                  <Icon icon={`${iconToPrefix[icon.class] === 'fab' ? 'fa-brands' : 'fa-solid'}:${icon.class.slice(3)}`}/>
+                  <Icon icon={`${iconToPrefix[icon.class] === 'fab' ? 'fa6-brands' : 'fa6-solid'}:${icon.class.slice(3)}`}/>
                   <ScreenReaderOnly>{icon.label}</ScreenReaderOnly>
                 </div>
               {:else}
@@ -153,6 +154,11 @@ function onKeyDown(e) {
 
 
 <style>
+  .select-icon {
+    border-radius: 0.25em;
+    border: 1px solid #808080;
+    color: black;
+  }
   section {
     position: relative;
     background-color: #f4f4f4;