lutra 0.0.18 → 0.0.20

package/dist/display/Notification.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">import Overlay from "../layout/Overlay.svelte";
+import PageContent from "../layout/PageContent.svelte";
+import { removeOverlay } from "../layout/overlays.svelte.js";
+import Close from "./Close.svelte";
+import { createId } from "../utils/id.js";
+import Icon from "./Icon.svelte";
+let {
+  id = createId(),
+  children,
+  title,
+  content,
+  icon,
+  actions
+} = $props();
+function onclick(e) {
+  e.preventDefault();
+  removeOverlay(id);
+}
+</script>
+
+{#snippet notification()}
+    <div class="Notification">
+        {#if !actions}
+            <Close position="top right" {onclick} />
+        {/if}
+        {#if icon}
+            <div class="Icon">
+                <Icon {icon} --vertical-align="text-top" --icon-width="2rem" --icon-height="2rem" />
+            </div>
+        {/if}
+        <div class="Content">
+            <PageContent --margin-scale="0.35">
+                {#if children}
+                    {@render children()}
+                {:else}
+                    {#if title}
+                        <h5>{title}</h5>
+                    {/if}
+                    <p>{content}</p>
+                {/if}
+            </PageContent>
+        </div>
+        {#if actions}
+            <div class="Actions">
+                {@render actions()}
+            </div>
+        {/if}
+    </div>
+{/snippet}
+
+{#if children}
+    <Overlay z={100} layer="notifications" position="bottom right" {id}>
+        {@render notification()}
+    </Overlay>
+{:else}
+    {@render notification()}
+{/if}
+
+<style>
+    .Notification {
+        display: block;
+        pointer-events: none;
+        background: var(--bg-app);
+        border-radius: var(--border-radius);
+        border: var(--border);
+        padding: 0.75rem 1rem;
+        width: 30rem;
+        font-size: 0.85em;
+        display: grid;
+        grid-template-areas: "content";
+        grid-template-columns: 1fr;
+        gap: 1rem;
+        box-shadow: 0 0.5rem 1rem var(--shadow);
+    }
+    .Notification:has(.Icon):has(.Actions) {
+        grid-template-areas: "icon content actions";
+        grid-template-columns: auto 1fr auto;
+    }
+    .Notification:not(:has(.Icon)):has(.Actions) {
+        grid-template-areas: "content actions";
+        grid-template-columns: 1fr auto;
+    }
+    .Notification:has(.Icon):not(:has(.Actions)) {
+        grid-template-areas: "icon content";
+        grid-template-columns: auto 1fr;
+    }
+    .Icon {
+        grid-area: icon;
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        pointer-events: auto;
+    }
+    .Content {
+        grid-area: content;
+    }
+    .Actions {
+        grid-area: actions;
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        pointer-events: auto;
+    }
+</style>

package/dist/display/Notification.svelte.d.ts

@@ -0,0 +1,42 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentType } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        title?: string | undefined;
+        content?: string | undefined;
+        icon?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | ComponentType | undefined;
+        actions?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NotificationProps = typeof __propDef.props;
+export type NotificationEvents = typeof __propDef.events;
+export type NotificationSlots = typeof __propDef.slots;
+export default class Notification extends SvelteComponent<NotificationProps, NotificationEvents, NotificationSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        id?: string | undefined;
+        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        title?: string | undefined;
+        content?: string | undefined;
+        icon?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | ComponentType | undefined;
+        actions?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+    }>);
+}
+export {};

package/dist/display/Popup.svelte.d.ts

@@ -2,13 +2,9 @@ import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
 declare const __propDef: {
     props: {
-        /** The content of the popup */
         content: Snippet<[close: () => void]>;
-        /** Snippet containing the trigger element */
         trigger: Snippet<[attrs: (node: Element) => void]>;
-        /** Triggers the popup on hover (and keyboard focus) instead of click */
         hover?: boolean | undefined;
-        /** The shape of the popup */
         shape?: "rounded" | "sharp" | undefined;
     };
     events: {
@@ -20,5 +16,15 @@ export type PopupProps = typeof __propDef.props;
 export type PopupEvents = typeof __propDef.events;
 export type PopupSlots = typeof __propDef.slots;
 export default class Popup extends SvelteComponent<PopupProps, PopupEvents, PopupSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        content: (this: void, close: () => void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+        trigger: (this: void, attrs: (node: Element) => void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+        hover?: boolean | undefined;
+        shape?: "rounded" | "sharp" | undefined;
+    }>);
 }
 export {};

package/dist/display/Table.svelte

@@ -19,3 +19,6 @@
 >
     {@render children()}
 </table>
+
+<style>
+</style>

package/dist/display/Table.svelte.d.ts

@@ -19,5 +19,16 @@ export type TableProps = typeof __propDef.props;
 export type TableEvents = typeof __propDef.events;
 export type TableSlots = typeof __propDef.slots;
 export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        colored?: boolean | undefined;
+        contained?: boolean | undefined;
+        rounded?: boolean | undefined;
+        hang?: boolean | undefined;
+        hoverable?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/display/Tag.svelte.d.ts

@@ -3,19 +3,12 @@ import type { Snippet } from "svelte";
 import type { StatusColorOrString } from '../utils/color.js';
 declare const __propDef: {
     props: {
-        /** Use a mono-spaced font for the tag. */
         code?: boolean | undefined;
-        /** The color of the tag. */
         color?: StatusColorOrString | undefined;
-        /** The shape of the tag. */
         shape?: "rounded" | "pill" | "rectangle" | undefined;
-        /** A function to run when the tag is clicked. */
         onclick?: ((event: MouseEvent) => void) | undefined;
-        /** A URL to link to. */
         href?: string | undefined;
-        /** The target of the link. */
         target?: string | undefined;
-        /** The content of the tag. */
         children: Snippet;
     };
     events: {
@@ -27,5 +20,16 @@ export type TagProps = typeof __propDef.props;
 export type TagEvents = typeof __propDef.events;
 export type TagSlots = typeof __propDef.slots;
 export default class Tag extends SvelteComponent<TagProps, TagEvents, TagSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        code?: boolean | undefined;
+        color?: StatusColorOrString | undefined;
+        shape?: "rounded" | "pill" | "rectangle" | undefined;
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        href?: string | undefined;
+        target?: string | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/display/Tooltip.svelte

@@ -51,7 +51,7 @@ const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toS
     }
     .TooltipContent {
         background-color: var(--bg-app);
-        padding: 0.125rem 0.35rem;
+        padding: 0.25rem 0.35rem;
         border-radius: calc(var(--border-radius));
         border-top: var(--border-subtle);
         border-left: var(--border-subtle);

package/dist/display/Tooltip.svelte.d.ts

@@ -2,11 +2,8 @@ import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
 declare const __propDef: {
     props: {
-        /** Content to trigger the tooltip */
         children: Snippet;
-        /** The content of the tooltip */
         tip: string | Snippet;
-        /** Open the tooltip on render (cannot be closed) */
         open?: boolean | undefined;
     };
     events: {
@@ -18,5 +15,14 @@ export type TooltipProps = typeof __propDef.props;
 export type TooltipEvents = typeof __propDef.events;
 export type TooltipSlots = typeof __propDef.slots;
 export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+        tip: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        });
+        open?: boolean | undefined;
+    }>);
 }
 export {};

package/dist/display/notifications.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type OverlayPosition } from "../layout/overlays.svelte.js";
+import type { ComponentType, Snippet } from "svelte";
+/**
+ * Add a notification to the screen.
+ * @param {object} opts - The options for the notification.
+ * @param {string} opts.content - The content of the notification.
+ * @param {OverlayPosition} opts.position - The position of the notification.
+ * @param {Snippet | ComponentType} opts.icon - The icon of the notification.
+ * @param {string} opts.title - The title of the notification.
+ * @param {string} opts.stack - Group notifications together by named stacks.
+ * @param {number} opts.autoClose - The time in milliseconds before the notification closes.
+ * @returns {void}
+ */
+export declare function addNotification(opts: {
+    content: string;
+    position?: OverlayPosition;
+    icon?: Snippet | ComponentType;
+    title?: string;
+    stack?: string;
+    autoClose?: number;
+}): void;

package/dist/display/notifications.svelte.js

@@ -0,0 +1,31 @@
+import { createId } from "../utils/id.js";
+import { addOverlay, removeOverlay } from "../layout/overlays.svelte.js";
+import NotificationSvelte from "./Notification.svelte";
+/**
+ * Add a notification to the screen.
+ * @param {object} opts - The options for the notification.
+ * @param {string} opts.content - The content of the notification.
+ * @param {OverlayPosition} opts.position - The position of the notification.
+ * @param {Snippet | ComponentType} opts.icon - The icon of the notification.
+ * @param {string} opts.title - The title of the notification.
+ * @param {string} opts.stack - Group notifications together by named stacks.
+ * @param {number} opts.autoClose - The time in milliseconds before the notification closes.
+ * @returns {void}
+ */
+export function addNotification(opts) {
+    const id = createId();
+    addOverlay({
+        id,
+        z: 100,
+        content: NotificationSvelte,
+        props: { id, ...opts },
+        stack: opts.stack,
+        position: opts.position || "top right",
+        layer: "notifications",
+    });
+    if (opts.autoClose) {
+        setTimeout(() => {
+            removeOverlay(id);
+        }, opts.autoClose);
+    }
+}

package/dist/form/Button.svelte.d.ts

@@ -20,5 +20,17 @@ export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
 export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        href?: string | undefined;
+        type?: "button" | "submit" | "reset" | undefined;
+        disabled?: boolean | undefined;
+        icon?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | ComponentType | undefined;
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/form/FieldActions.svelte

@@ -38,7 +38,7 @@
         justify-content: end;
         grid-column: 1 / -1;
     }
-    @container (max-width: 400px) {
+    @container (max-width: 480px) {
         .Actions {
             flex-direction: column;
         }

package/dist/form/FieldActions.svelte.d.ts

@@ -14,5 +14,11 @@ export type FieldActionsProps = typeof __propDef.props;
 export type FieldActionsEvents = typeof __propDef.events;
 export type FieldActionsSlots = typeof __propDef.slots;
 export default class FieldActions extends SvelteComponent<FieldActionsProps, FieldActionsEvents, FieldActionsSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        align?: "middle" | "justified" | "start" | "end" | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/form/FieldContainer.svelte

@@ -29,4 +29,9 @@
     .FieldContainer.contained :global(.FieldSection:has(+ .FieldActions)) {
         border-bottom: var(--border);
     }
+    @container (max-width: 800px) {
+        .FieldContainer {
+            grid-template-columns: 1fr;
+        }
+    }
 </style>

package/dist/form/FieldContainer.svelte.d.ts

@@ -14,5 +14,11 @@ export type FieldContainerProps = typeof __propDef.props;
 export type FieldContainerEvents = typeof __propDef.events;
 export type FieldContainerSlots = typeof __propDef.slots;
 export default class FieldContainer extends SvelteComponent<FieldContainerProps, FieldContainerEvents, FieldContainerSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        contained?: boolean | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/form/FieldContent.svelte

@@ -123,6 +123,9 @@ let {
     .Field.hasPrefix :global(input) {
         padding-inline-start: 0.35em;
     }
+    .Field :global(button) {
+        margin-right: 2px;
+    }
     .Field :global(button:focus-visible) {
         outline: var(--focus-outline);
         outline-offset: 3px;

package/dist/form/FieldContent.svelte.d.ts

@@ -32,5 +32,28 @@ export type FieldContentProps = typeof __propDef.props;
 export type FieldContentEvents = typeof __propDef.events;
 export type FieldContentSlots = typeof __propDef.slots;
 export default class FieldContent extends SvelteComponent<FieldContentProps, FieldContentEvents, FieldContentSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        id: string;
+        contained?: boolean | undefined;
+        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        type?: string | undefined;
+        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        direction?: "row" | "column" | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+        field?: FormField | undefined;
+        issue?: FormIssue | undefined;
+    }>);
 }
 export {};

package/dist/form/FieldError.svelte.d.ts

@@ -13,5 +13,9 @@ export type FieldErrorProps = typeof __propDef.props;
 export type FieldErrorEvents = typeof __propDef.events;
 export type FieldErrorSlots = typeof __propDef.slots;
 export default class FieldError extends SvelteComponent<FieldErrorProps, FieldErrorEvents, FieldErrorSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        code: string;
+        message?: string | undefined;
+    }>);
 }
 export {};

package/dist/form/FieldSection.svelte

@@ -57,7 +57,7 @@ let {
     .FieldSection.noTitle .FieldSectionFields {
         grid-column: 1 / -1;
     }
-    @container (max-width: 640px) {
+    @media(max-width: 1280px) {
         .FieldSection {
             padding: 2em;
             gap: 1.5em;
@@ -66,6 +66,18 @@ let {
             gap: 0.5em;
             padding-block-end: 1.5em;
         }
+    }
+    @media(max-width: 640px) {
+        .FieldSection {
+            padding: 1em;
+            gap: 1.5em;
+        }
+        .FieldSectionTitle {
+            gap: 0.5em;
+            padding-block-end: 1.5em;
+        }
+    }
+    @container (max-width: 800px) {
         .FieldSectionTitle,
         .FieldSectionFields {
             grid-column: 1 / -1;

package/dist/form/FieldSection.svelte.d.ts

@@ -19,5 +19,16 @@ export type FieldSectionProps = typeof __propDef.props;
 export type FieldSectionEvents = typeof __propDef.events;
 export type FieldSectionSlots = typeof __propDef.slots;
 export default class FieldSection extends SvelteComponent<FieldSectionProps, FieldSectionEvents, FieldSectionSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        title?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        description?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/form/Fieldset.svelte.d.ts

@@ -2,23 +2,16 @@ import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
 declare const __propDef: {
     props: {
-        /** Whether the fieldset should be full width. */
         fullWidth?: boolean | undefined;
-        /** The description of the fieldset. */
         description?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** Whether the fieldset should be contained. */
         contained?: boolean | undefined;
-        /** Whether the fieldset should be rounded. */
         rounded?: boolean | undefined;
-        /** The legend of the fieldset. */
         legend?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** The number of columns to display the fieldset in. You can pass a single number or an array of numbers. The array will be used to set the number of columns at different breakpoints (lg, md, sm). */
         columns?: number | [number] | [number, number] | [number, number, number] | undefined;
-        /** Content to be rendered inside the fieldset. */
         children: Snippet;
     };
     events: {
@@ -30,5 +23,20 @@ export type FieldsetProps = typeof __propDef.props;
 export type FieldsetEvents = typeof __propDef.events;
 export type FieldsetSlots = typeof __propDef.slots;
 export default class Fieldset extends SvelteComponent<FieldsetProps, FieldsetEvents, FieldsetSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        fullWidth?: boolean | undefined;
+        description?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        contained?: boolean | undefined;
+        rounded?: boolean | undefined;
+        legend?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        columns?: number | [number] | [number, number] | [number, number, number] | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/form/Form.svelte

@@ -6,39 +6,41 @@ import { get } from "svelte/store";
 import { dezerialize } from "@auth70/zodex-esm";
 import { array } from "zod";
 import { arrayPathToStringPath, getIndividualValidators, parseFormIssues } from "./form.js";
+import { useForm } from "./client.svelte.js";
 let {
-  form,
+  form: _form,
   action,
   enctype = "multipart/form-data",
   method = "POST",
   fullWidth = false,
   children
 } = $props();
-setContext("form", form);
-setContext("form.validators", getIndividualValidators(form));
-const schema = form?.schema ? dezerialize(form?.schema) : null;
+let form = $state(_form ? useForm(_form) : null);
+setContext("form", form?.form);
+setContext("form.validators", getIndividualValidators(form?.form));
+const schema = form?.form.schema ? dezerialize(form?.form.schema) : null;
 const bodyguard = new Bodyguard();
 let formEl;
 function setFormIssuesAndFields(issues, fields) {
   if (form) {
-    form.issues = issues;
-    form.fields = fields;
+    form.form.issues = issues;
+    form.form.fields = fields;
   }
 }
 async function validate() {
   if (form && schema) {
-    form.tainted = true;
+    form.form.tainted = true;
     const req = new Request("localhost", {
       method: "POST",
       body: new FormData(formEl)
     });
     const result = await bodyguard.softForm(req, schema.parse);
     if (result.success === true) {
-      form.valid = true;
-      form.issues = [];
+      form.form.valid = true;
+      form.form.issues = [];
     } else {
-      form.valid = false;
-      form.issues = parseFormIssues(result.error.issues);
+      form.form.valid = false;
+      form.form.issues = parseFormIssues(result.error.issues);
     }
   }
 }
@@ -68,8 +70,9 @@ onMount(() => {
                 const resultForm = result.type !== "redirect" && result.type !== "error" ? result?.data?.form : null;
                 if(result.type === "success") {
                     if(resultForm && form) {
-                        form.valid = Object.assign({ valid: false }, resultForm).valid ?? false;
+                        form.form.valid = Object.assign({ valid: false }, resultForm).valid ?? false;
                     }
+                    update();
                 } else if(result.type === "failure") {
                     if(resultForm && form) {
                         setFormIssuesAndFields(

package/dist/form/Form.svelte.d.ts

@@ -19,5 +19,15 @@ export type FormProps = typeof __propDef.props;
 export type FormEvents = typeof __propDef.events;
 export type FormSlots = typeof __propDef.slots;
 export default class Form extends SvelteComponent<FormProps, FormEvents, FormSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        form?: Form<any> | undefined;
+        action?: string | undefined;
+        enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | undefined;
+        method?: "GET" | "POST" | undefined;
+        fullWidth?: boolean | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/form/Input.svelte

@@ -62,7 +62,8 @@ let {
   type,
   value = $bindable(),
   viewable,
-  webkitdirectory
+  webkitdirectory,
+  ...rest
 } = $props();
 let el = $state();
 let copyTitle = $state("Copy");
@@ -110,6 +111,7 @@ function copy(e) {
     copyTitle = "Copy";
     copyTooltipOpen = false;
   }, 1500);
+  el.focus();
 }
 </script>
 
@@ -117,7 +119,6 @@ function copy(e) {
 <input
     bind:this={el}
     {alt}
-    {...attrs}
     autocapitalize={typeof autocapitalize === 'string' ? autocapitalize : (typeof autocapitalize === 'boolean' ? (autocapitalize ? 'on' : 'off') : undefined)}
     {autocomplete}
     autocorrect={typeof autocorrect === 'boolean' ? (autocorrect ? 'on' : 'off') : undefined}
@@ -157,6 +158,7 @@ function copy(e) {
     {type}
     value={value || getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue || ''}
     {webkitdirectory}
+    {...rest}
 />
 {/snippet}