@dosgato/dialog 1.1.8 → 1.1.9

package/dist/Container.svelte

@@ -4,10 +4,11 @@
 -->
 <script>import { eq, resize, ScreenReaderOnly } from '@txstate-mws/svelte-components';
 import { randomid } from 'txstate-utils';
-import { getContext } from 'svelte';
+import { getContext, onDestroy } from 'svelte';
 import { DG_DIALOG_FIELD_MULTIPLE } from './FieldMultiple.svelte';
 import InlineMessages from './InlineMessages.svelte';
-import { getDescribedBy } from './';
+import { getDescribedBy, TAB_CONTEXT, TAB_NAME_CONTEXT } from './';
+export let path;
 /** A label for the Container `<div>`. */
 export let label;
 export let messages;
@@ -35,6 +36,17 @@ function setNeedsShowHelp(..._) {
         showhelp = false;
 }
 $: setNeedsShowHelp(helpelement);
+const tabContext = getContext(TAB_CONTEXT);
+const tabNameStore = getContext(TAB_NAME_CONTEXT);
+$: if (messages.length) {
+    tabContext?.store.notifyErrorPath($tabNameStore, path);
+}
+else {
+    tabContext?.store.notifyErrorPathGone(path);
+}
+onDestroy(() => {
+    tabContext?.store.notifyErrorPathGone(path);
+});
 </script>
 
 {#if conditional !== false}

package/dist/Container.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { Feedback } from '@txstate-mws/svelte-forms';
 declare const __propDef: {
     props: {
+        path: string;
         /** A label for the Container `<div>`. */ label: string;
         messages: Feedback[];
         /** If the input that's being built has an id pass it here so the label can point at it. */ id?: string | undefined;

package/dist/FieldChoices.svelte

@@ -65,7 +65,7 @@ onMount(reactToChoices);
 
 <Field {path} {defaultValue} {conditional} let:path let:value let:onBlur let:setVal let:messages let:valid let:invalid serialize={arraySerialize}>
   {@const _ = updateValue(value, setVal)}
-  <Container {id} {label} {messages} {descid} {related} {helptext} let:messagesid let:helptextid>
+  <Container {path} {id} {label} {messages} {descid} {related} {helptext} let:messagesid let:helptextid>
     <div class="dialog-choices {className}" class:valid class:invalid>
       {#each choices as choice, idx (choice.value)}
         {@const checkid = `${path}.${idx}`}

package/dist/FieldMultiple.svelte

@@ -26,6 +26,14 @@ export let maxedText = addMoreText;
 export let addMoreClass = undefined;
 export let related = 0;
 export let helptext = undefined;
+/**
+ * If you want to ask users if they're sure before removing an array element, fill this
+ * prop with the question that should be in the confirmation dialog.
+ *
+ * Alternatively, you can provide a function to generate the question from the item being
+ * deleted. e.g. (item) => `Are you sure you want to delete ${item.name}?`
+ */
+export let confirmDelete = undefined;
 const fieldMultipleContext = { helptextid: undefined };
 setContext(DG_DIALOG_FIELD_MULTIPLE, fieldMultipleContext);
 const inheritedPath = getContext(FORM_INHERITED_PATH);
@@ -56,10 +64,19 @@ function moveDownAndFocus(onMove, idx) {
         }
     };
 }
+function confirmedDelete(onDelete, item) {
+    return () => {
+        if (confirmDelete == null)
+            return onDelete();
+        const msg = typeof confirmDelete === 'string' ? confirmDelete : confirmDelete(item);
+        if (confirm(msg))
+            onDelete();
+    };
+}
 $: messages = compact ? $messageStore : [];
 </script>
 
-<Container {label} {messages} {conditional} {related} {helptext} let:helptextid>
+<Container {path} {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 let:onMoveDown>
     {@const showDelete = removable && !minned}
@@ -73,7 +90,7 @@ $: messages = compact ? $messageStore : [];
           <button bind:this={reorderdownelements[index]} class="dialog-multiple-move" type="button" disabled={index === currentLength - 1} on:click|preventDefault|stopPropagation={moveDownAndFocus(onMoveDown, index)}><Icon icon={caretCircleDown} hiddenLabel="move down in the list" /></button>
           <button bind:this={reorderupelements[index]} class="dialog-multiple-move" type="button" disabled={index === 0} on:click|preventDefault|stopPropagation={moveUpAndFocus(onMoveUp, index)}><Icon icon={caretCircleUp} hiddenLabel="move up in the list" /></button>
         {/if}
-        {#if showDelete}<button class="dialog-multiple-delete" type="button" on:click|preventDefault|stopPropagation={onDelete}><Icon icon={xCircle} hiddenLabel="remove from list" /></button>{/if}
+        {#if showDelete}<button class="dialog-multiple-delete" type="button" on:click|preventDefault|stopPropagation={confirmedDelete(onDelete, value)}><Icon icon={xCircle} hiddenLabel="remove from list" /></button>{/if}
       </div>{/if}
     </div>
     <svelte:fragment slot="addbutton" let:maxed let:onClick>

package/dist/FieldMultiple.svelte.d.ts

@@ -16,6 +16,13 @@ declare const __propDef: {
         addMoreClass?: string | undefined;
         related?: number | true | undefined;
         helptext?: string | undefined;
+        /**
+           * If you want to ask users if they're sure before removing an array element, fill this
+           * prop with the question that should be in the confirmation dialog.
+           *
+           * Alternatively, you can provide a function to generate the question from the item being
+           * deleted. e.g. (item) => `Are you sure you want to delete ${item.name}?`
+           */ confirmDelete?: string | ((item: any) => string) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/FieldRadio.svelte

@@ -43,5 +43,5 @@ onMount(reactToChoices);
 
 <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 let:setVal let:deserialize>
   {@const _ = updateValue(value, setVal, deserialize)}
-  <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) }))} />
+  <Switcher bind:id {path} 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/FieldStandard.svelte

@@ -36,7 +36,7 @@ export let helptext = undefined;
 </script>
 
 <Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} {initialize} {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} {related} {helptext} let:messagesid let:helptextid>
+  <Container {path} {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/Form.svelte

@@ -1,6 +1,7 @@
 <script>import { Form } from '@txstate-mws/svelte-forms';
 import { setContext } from 'svelte';
-import { CHOOSER_API_CONTEXT } from './chooser';
+import { CHOOSER_API_CONTEXT, messageIcons } from './';
+import Icon from './Icon.svelte';
 let className = '';
 export { className as class };
 export let submit = undefined;
@@ -15,21 +16,32 @@ setContext(CHOOSER_API_CONTEXT, chooserClient);
 
 <Form bind:store class="{className} dialog-form" {submit} {validate} on:saved {autocomplete} {name} {preload} let:messages let:allMessages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting let:data>
   <slot {messages} {saved} {validating} {submitting} {valid} {invalid} {data} {allMessages} {showingInlineErrors} />
-  {#if messages.length || showingInlineErrors}
-    <div class="form-errors" aria-live='assertive'>
-      {#if messages.length}
-        <ul>
-          {#each messages as message}
-            <li>{message.message}</li>
-          {/each}
-          {#if showingInlineErrors}
-            <li>More errors. See inline messages for details.</li>
-          {/if}
-        </ul>
-      {:else if showingInlineErrors}
-        This form contains validation errors. See inline messages for details.
+  {@const errorMessages = messages.filter(m => m.type === 'error' || m.type === 'system')}
+  {@const warningMessages = messages.filter(m => m.type === 'warning')}
+  {@const successMessages = messages.filter(m => m.type === 'success')}
+  {#if errorMessages.length || showingInlineErrors}
+    <ul class="form-errors" aria-live='assertive'>
+      {#each errorMessages as message}
+        <li><Icon icon={messageIcons[message.type] ?? messageIcons.error} inline hiddenLabel="error"/> {message.message}</li>
+      {/each}
+      {#if showingInlineErrors}
+        <li><Icon icon={messageIcons.error} inline /> {#if errorMessages.length}More errors.{:else}This form contains validation errors.{/if} See inline messages for details.</li>
       {/if}
-    </div>
+    </ul>
+  {/if}
+  {#if warningMessages.length}
+    <ul class="form-warnings" aria-live='assertive'>
+      {#each warningMessages as message}
+        <li><Icon icon={messageIcons.warning} inline hiddenLabel="warning"/> {message.message}</li>
+      {/each}
+    </ul>
+  {/if}
+  {#if successMessages.length}
+    <ul class="form-successes" aria-live='assertive'>
+      {#each successMessages as message}
+        <li><Icon icon={messageIcons.success} inline hiddenLabel="success" /> {message.message}</li>
+      {/each}
+    </ul>
   {/if}
   <slot name="submit" {saved} {validating} {submitting} {valid} {invalid} {allMessages} {showingInlineErrors} />
 </Form>
@@ -44,9 +56,21 @@ setContext(CHOOSER_API_CONTEXT, chooserClient);
   :global(.dialog-content > .dialog-form) {
     margin: -2em 0;
   }
+  ul {
+    list-style-type: none;
+    padding: 0.5em;
+  }
   .form-errors {
-    color: var(--dg-danger-bg, #9a3332);
-    padding: 1em;
+    background-color: var(--dg-danger-bg, #9a3332);
+    color: var(--dg-danger-text, white);
+  }
+  .form-warnings {
+    background-color: var(--dg-warning-bg, #ffc107);
+    color: var(--dg-warning-text, black);
+  }
+  .form-successes {
+    background-color: var(--dg-success-bg, #218739);
+    color: var(--dg-success-text, white);
   }
 
 </style>

package/dist/Icon.svelte

@@ -12,6 +12,8 @@ export let inline = false;
 export let width = undefined;
 export let height = undefined;
 export let tooltip = undefined;
+let className = undefined;
+export { className as class };
 function replaceIDs(body) {
     const matches = body.matchAll(/\sid="(\S+)"/g);
     const ids = Array.from(matches).map(m => m[1]);
@@ -41,7 +43,7 @@ height ??= width;
 
 {#if icon}
   <Tooltip tip={tooltip} top>
-    <svg role="img" viewBox="{icon.left ?? 0} {icon.top ?? 0} {icon.width ?? 256} {icon.height ?? 256}" class:vFlip={icon.vFlip} class:hFlip={icon.hFlip} class:inline {width} {height} aria-hidden={!hiddenLabel} aria-label={hiddenLabel} xmlns="http://www.w3.org/2000/svg">
+    <svg role="img" class={className} viewBox="{icon.left ?? 0} {icon.top ?? 0} {icon.width ?? 256} {icon.height ?? 256}" class:vFlip={icon.vFlip} class:hFlip={icon.hFlip} class:inline {width} {height} aria-hidden={!hiddenLabel} aria-label={hiddenLabel} xmlns="http://www.w3.org/2000/svg">
       {@html svgBody(icon)}
     </svg>
   </Tooltip>

package/dist/Icon.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         width?: string | number | undefined;
         height?: string | number | undefined;
         tooltip?: string | undefined;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/InlineMessage.svelte

@@ -1,20 +1,11 @@
 <!-- @component
   The purpose of this component is to provide common `Feedback` message styling with icons that support screen readers.
 -->
-<script>import alertCircleOutline from '@iconify-icons/mdi/alert-circle-outline.js';
-import checkCircleOutline from '@iconify-icons/mdi/check-circle-outline.js';
-import informationOutline from '@iconify-icons/mdi/information-outline.js';
-import closeOctagonOutline from '@iconify-icons/mdi/close-octagon-outline.js';
-import { htmlEncode } from 'txstate-utils';
+<script>import { htmlEncode } from 'txstate-utils';
+import { messageIcons } from './';
 import Icon from './Icon.svelte';
 export let message;
-const icons = {
-    error: alertCircleOutline,
-    warning: informationOutline,
-    success: checkCircleOutline,
-    system: closeOctagonOutline
-};
-$: icon = icons[message.type] ?? alertCircleOutline;
+$: icon = messageIcons[message.type] ?? messageIcons.error;
 // Would we like to add something like the following for non-Error message types being used in aria descriptions?
 /*
 const ariaLables = {
@@ -67,16 +58,16 @@ function addMarkup(msg) {
     margin-left: 0.5em;
   }
   div.error, div.system {
-    background-color: #9a3332;
-    color: white;
+    background-color: var(--dg-danger-bg, #9a3332);
+    color: var(--dg-danger-text, white);
   }
   div.warning {
-    background-color: #ffc107;
-    color: black;
+    background-color: var(--dg-warning-bg, #ffc107);
+    color: var(--dg-warning-text, black);
   }
   div.success {
-    background-color: #218739;
-    color: white;
+    background-color: var(--dg-success-bg, #218739);
+    color: var(--dg-success-text, white);
   }
   div :global(a) {
     color: inherit;

package/dist/Switcher.svelte

@@ -7,6 +7,7 @@ import Radio from './Radio.svelte';
 let className = '';
 export { className as class };
 export let id = randomid();
+export let path = '';
 export let name = randomid();
 export let choices;
 export let horizontal = false;
@@ -30,7 +31,7 @@ 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} {related} {helptext} let:helptextid>
+<Container {path} {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 (choice.value)}
       {@const radioid = `${groupid}.${idx}`}

package/dist/Switcher.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
+        path?: string | undefined;
         name?: string | undefined;
         choices: {
             label?: string | undefined;

package/dist/Tab.svelte

@@ -1,7 +1,9 @@
-<script>import { derivedStore } from '@txstate-mws/svelte-store';
-import { getContext } from 'svelte';
+<script>import warningCircleFill from '@iconify-icons/ph/warning-circle-fill';
+import { derivedStore } from '@txstate-mws/svelte-store';
+import { getContext, setContext } from 'svelte';
+import { writable } from 'svelte/store';
 import Icon from './Icon.svelte';
-import { TAB_CONTEXT } from './TabStore';
+import { TAB_CONTEXT, TAB_NAME_CONTEXT } from './TabStore';
 export let name;
 const { store, onClick, onKeyDown, tabelements } = getContext(TAB_CONTEXT);
 const accordion = store.accordion();
@@ -13,11 +15,14 @@ const panelid = derivedStore(store, v => v.panelids[name]);
 $: active = $current === name;
 const idx = $store.tabs.findIndex(t => t.name === name);
 const last = idx === $store.tabs.length - 1;
+const tabNameStore = writable(name);
+$: $tabNameStore = name;
+setContext(TAB_NAME_CONTEXT, tabNameStore);
 </script>
 
 {#if $store.tabs.length > 1}
   {#if $accordion}
-    <div bind:this={tabelements[idx]} id={$tabid} class="tabs-tab" class:last aria-selected={active} aria-controls={$panelid} 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>
+    <div bind:this={tabelements[idx]} id={$tabid} class="tabs-tab" class:last aria-selected={active} aria-controls={$panelid} role="tab" tabindex={0} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><Icon icon={$store.tabs[idx].icon} inline />{$title}{#if $store.hasError[name] && !active} <Icon icon={warningCircleFill} inline class='errorIcon' />{/if}<i class="tabs-accordion-arrow" aria-hidden="true"></i></div>
   {/if}
   <div id={$panelid} hidden={!active} role="tabpanel" tabindex="-1" aria-labelledby={$tabid} class="tabs-panel" class:accordion={$accordion}>
     <slot />
@@ -64,5 +69,11 @@ const last = idx === $store.tabs.length - 1;
     transform: translateY(-50%) rotate(225deg);
     top: calc(50% + 0.08em);
   }
+  .tabs-tab :global(.errorIcon) {
+    color: var(--dg-danger-bg, #9a3332);
+    font-size: 1.2em;
+    margin-left: 0.4em;
+  }
+
 
 </style>

package/dist/TabStore.d.ts

@@ -2,6 +2,7 @@ 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: {};
+export declare const TAB_NAME_CONTEXT: {};
 export interface TabDef {
     name: string;
     title?: string;
@@ -18,6 +19,8 @@ interface ITabStore extends ElementSize {
     tabids: Record<string, string>;
     panelids: Record<string, string>;
     accordionOnMobile: boolean;
+    errorPaths: Record<string, string[] | undefined>;
+    hasError: Record<string, boolean | undefined>;
 }
 export declare class TabStore extends Store<ITabStore> {
     initialTab?: string | undefined;
@@ -35,5 +38,7 @@ export declare class TabStore extends Store<ITabStore> {
     end(): void;
     activate(idx: number): void;
     activateName(name: string): void;
+    notifyErrorPath(tabname: string, path: string): void;
+    notifyErrorPathGone(path: string): void;
 }
 export {};

package/dist/TabStore.js

@@ -1,6 +1,7 @@
 import { Store, derivedStore } from '@txstate-mws/svelte-store';
 import { findIndex, randomid } from 'txstate-utils';
 export const TAB_CONTEXT = {};
+export const TAB_NAME_CONTEXT = {};
 function checkNext(v) {
     v.visited = { ...v.visited, [v.tabs[v.current].name]: true };
     v.prevTitle = v.current > 0 ? v.tabs[v.current - 1].title : undefined;
@@ -20,7 +21,9 @@ export class TabStore extends Store {
             tabids: tabs.reduce((acc, curr) => ({ ...acc, [curr.name]: randomid() }), {}),
             panelids: tabs.reduce((acc, curr) => ({ ...acc, [curr.name]: randomid() }), {}),
             clientWidth: 1024,
-            accordionOnMobile: true
+            accordionOnMobile: true,
+            errorPaths: {},
+            hasError: {}
         }));
         this.initialTab = initialTab;
     }
@@ -70,4 +73,28 @@ export class TabStore extends Store {
     activateName(name) {
         this.update(v => ({ ...v, current: findIndex(v.tabs, t => t.name === name) ?? v.current }));
     }
+    notifyErrorPath(tabname, path) {
+        this.update(v => {
+            const errorPaths = {};
+            for (const k of Object.keys(v.errorPaths))
+                errorPaths[k] = v.errorPaths[k]?.filter(p => p !== path);
+            errorPaths[tabname] ??= [];
+            errorPaths[tabname].push(path);
+            const hasError = {};
+            for (const k of Object.keys(errorPaths))
+                hasError[k] = !!errorPaths[k].length;
+            return { ...v, errorPaths, hasError };
+        });
+    }
+    notifyErrorPathGone(path) {
+        this.update(v => {
+            const errorPaths = {};
+            for (const k of Object.keys(v.errorPaths))
+                errorPaths[k] = v.errorPaths[k]?.filter(p => p !== path);
+            const hasError = {};
+            for (const k of Object.keys(errorPaths))
+                hasError[k] = !!errorPaths[k].length;
+            return { ...v, errorPaths, hasError };
+        });
+    }
 }

package/dist/Tabs.svelte

@@ -1,11 +1,12 @@
-<script>import { modifierKey, resize, offset, PopupMenu } from '@txstate-mws/svelte-components';
+<script>import caretRightFill from '@iconify-icons/ph/caret-right-fill';
+import warningCircleFill from '@iconify-icons/ph/warning-circle-fill';
+import { modifierKey, resize, offset, PopupMenu } from '@txstate-mws/svelte-components';
 import { Store } from '@txstate-mws/svelte-store';
 import { getContext, onMount, setContext, tick } from 'svelte';
 import { roundTo } from 'txstate-utils';
 import { DIALOG_TABS_CONTEXT } from './Dialog.svelte';
 import Icon from './Icon.svelte';
 import { TabStore, TAB_CONTEXT } from './TabStore';
-import caretRightFill from '@iconify-icons/ph/caret-right-fill';
 export let tabs;
 export let active = undefined;
 export let store = new TabStore(tabs, active);
@@ -117,7 +118,7 @@ onMount(reactToCurrent);
       {#each $store.tabs as tab, idx (tab.name)}
         {@const active = isActive(idx, $store.current)}
         {@const left = idx === 0}
-        <li bind:this={tabelements[idx]} use:offset={{ store: active ? activeStore : undefined }} id={$store.tabids[tab.name]} class="tabs-tab" class:left class:wrapping class:active class:hidden={tabIsHidden(idx)} style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} aria-selected={active} aria-controls={$store.panelids[tab.name]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><span><Icon icon={tab.icon} inline />{tab.title}</span></li>
+        <li bind:this={tabelements[idx]} use:offset={{ store: active ? activeStore : undefined }} id={$store.tabids[tab.name]} class="tabs-tab" class:left class:wrapping class:active class:hidden={tabIsHidden(idx)} style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} aria-selected={active} aria-controls={$store.panelids[tab.name]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><span><Icon icon={tab.icon} inline />{tab.title}{#if $store.hasError[tab.name] && !active} <Icon icon={warningCircleFill} inline class='errorIcon' />{/if}</span></li>
       {/each}
       {#if cols < $store.tabs.length}
         <li class="overflow" role="presentation"><button bind:this={tabOverflowButton} type="button" tabindex="-1"><Icon icon={caretRightFill} hiddenLabel="More Tabs Menu" inline /></button></li>
@@ -161,7 +162,13 @@ onMount(reactToCurrent);
     word-break: break-word;
     text-transform: uppercase;
     font-weight: 500;
-    color: var(--tabs-text, #363534)
+    color: var(--tabs-text, #363534);
+  }
+  li :global(.errorIcon) {
+    color: var(--dg-danger-bg, #9a3332);
+    font-size: 1.2em;
+    margin-left: 0.4em;
+    vertical-align: -0.25em;
   }
   :global(.tabs-tab.hidden) {
     display: none;

package/dist/errorIcons.d.ts

@@ -0,0 +1,6 @@
+export declare const messageIcons: {
+    error: import("@iconify/types").IconifyIcon;
+    warning: import("@iconify/types").IconifyIcon;
+    success: import("@iconify/types").IconifyIcon;
+    system: import("@iconify/types").IconifyIcon;
+};

package/dist/errorIcons.js

@@ -0,0 +1,10 @@
+import alertCircleOutline from '@iconify-icons/mdi/alert-circle-outline';
+import checkCircleOutline from '@iconify-icons/mdi/check-circle-outline';
+import closeOctagonOutline from '@iconify-icons/mdi/close-octagon-outline';
+import informationOutline from '@iconify-icons/mdi/information-outline';
+export const messageIcons = {
+    error: alertCircleOutline,
+    warning: informationOutline,
+    success: checkCircleOutline,
+    system: closeOctagonOutline
+};

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export { default as Tab } from './Tab.svelte';
 export { default as Tabs } from './Tabs.svelte';
 export * from './chooser/index.js';
 export * from './fileIcons.js';
+export * from './errorIcons.js';
 export * from './TabStore.js';
 export * from './iconpicker/index.js';
 export * from './colorpicker/index.js';

package/dist/index.js

@@ -34,6 +34,7 @@ export { default as Tab } from './Tab.svelte';
 export { default as Tabs } from './Tabs.svelte';
 export * from './chooser/index.js';
 export * from './fileIcons.js';
+export * from './errorIcons.js';
 export * from './TabStore.js';
 export * from './iconpicker/index.js';
 export * from './colorpicker/index.js';

package/package.json

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