lutra 0.1.68 → 0.1.69

package/dist/css/{3-typo.css → 4-typo.css}

@@ -16,13 +16,15 @@ small {
     line-height: var(--font-line-height-tight);
 }
 
-small.smaller {
+small.smaller,
+small small {
     font-size: var(--font-size-xs);
 }
 
 /* Form elements inherit base typography */
 input, textarea, select, button {
     font-family: var(--font-family);
+    font-size: inherit;
     line-height: var(--font-line-height);
 }
 

package/dist/css/lutra.css

@@ -1,7 +1,8 @@
-@layer l-base, base, l-typo, typo, l-layout, layout, theme, l-media, media, misc;
+@layer l-props, l-init, l-base, l-typo, typo, l-layout, l-media, l-default, theme, media, misc;
 
-@import "./1-props.css";
-@import "./2-base.css" layer(l-base);
-@import "./3-typo.css" layer(l-typo);
-@import "./4-layout.css" layer(l-layout);
-@import "./5-media.css" layer(l-media);
+@import "./1-props.css" layer(l-props);
+@import "./2-init.css" layer(l-init);
+@import "./3-base.css" layer(l-base);
+@import "./4-typo.css" layer(l-typo);
+@import "./5-layout.css" layer(l-layout);
+@import "./6-media.css" layer(l-media);

package/dist/css/themes/DefaultTheme.css

@@ -1,4 +1,6 @@
-@layer theme {
+@layer l-props, l-init, l-base, l-typo, typo, l-layout, l-media, l-default, theme, media, misc;
+
+@layer l-default {
     :root {
         --hue: 240deg;
         --chroma: 0.5;
@@ -172,7 +174,8 @@
 
         --field-label-color: var(--text-color-p);
 
-        --form-background-actions: color-mix(in srgb, var(--theme-surface-interactive) 35%, transparent);
+        --form-background: var(--background-body);
+        --form-background-actions: color-mix(in oklch, var(--theme-surface-interactive) 35%, transparent);
 
         /**
          * Borders
@@ -201,12 +204,20 @@
         --link-color-hover: var(--button-submit-base-color-hover);
         --link-color-active: var(--button-submit-base-color-hover);
 
+        /**
+         * Status Colors
+         */
+
+        --status-default-color: light-dark(#111111, #e0e0e0);
+
         /**
          * Menus
          */
 
         --menu-background-color: var(--surface-background);
-        --menu-background-color-hover: color-mix(in srgb, var(--theme-surface-interactive) 35%, transparent);
+        --menu-background-color-hover: color-mix(in oklch, var(--theme-surface-interactive) 35%, transparent);
+        --menu-text-color: var(--text-color-p);
+        --menu-text-color-subtle: var(--text-color-p-subtle);
         --menu-border-color: var(--border-color-subtle);
         --menu-border-size: var(--border-size-thin);
         --menu-border-style: var(--border-style);
@@ -221,7 +232,7 @@
         --table-header-color: var(--text-color-heading);
         --table-row-background: transparent;
         --table-row-background-even: transparent;
-        --table-row-background-hover: color-mix(in srgb, var(--theme-surface-interactive) 60%, transparent);
+        --table-row-background-hover: color-mix(in oklch, var(--theme-surface-interactive) 60%, transparent);
         --table-cell-color: var(--text-color-p);
 
         /**
@@ -270,6 +281,7 @@
         --toast-border: var(--surface-border);
         --toast-border-radius: var(--surface-border-radius);
         --toast-shadow: var(--surface-shadow);
+        --toast-title-color: var(--text-color-heading);
 
         /**
          * Scrim/Backdrop

package/dist/form/Button.svelte

@@ -3,6 +3,17 @@
 	import { getContext, type Component, type Snippet } from 'svelte';
 	import type { LutraForm } from './types.js';
 
+    /**
+     * @description
+     * A polymorphic form button that renders as a `<button>` or `<a>` depending on whether `href` is set.
+     * Automatically disables itself while its parent form is in a loading state.
+     * Inherits the alignment context set by a parent `FormActions` component.
+     *
+     * @example
+     * <Button type="submit" kind="default">Save</Button>
+     * <Button href="/cancel" kind="secondary">Cancel</Button>
+     * <Button kind="warn" icon={TrashIcon}>Delete</Button>
+     */
     let {
         href,
         type = 'button',
@@ -14,14 +25,23 @@
         onclick,
         children,
     }: {
+        /** When set, renders as an `<a>` link instead of a `<button>`. */
         href?: string;
+        /** The button type attribute. */
         type?: 'button' | 'submit' | 'reset';
+        /** Visual style variant. */
         kind?: 'default' | 'outlined' | 'secondary' | 'warn';
+        /** Size variant. */
         size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        /** Additional CSS class names. */
         class?: string;
+        /** Whether the button is disabled. Also disabled automatically when the parent form is loading. */
         disabled?: boolean;
+        /** Icon component or string to render before the label. */
         icon?: string | Component;
+        /** Click event handler. */
         onclick?: (event: MouseEvent) => void;
+        /** Button label content. */
         children: Snippet;
     } = $props();
 

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

@@ -1,13 +1,22 @@
 import { type Component, type Snippet } from 'svelte';
 type $$ComponentProps = {
+    /** When set, renders as an `<a>` link instead of a `<button>`. */
     href?: string;
+    /** The button type attribute. */
     type?: 'button' | 'submit' | 'reset';
+    /** Visual style variant. */
     kind?: 'default' | 'outlined' | 'secondary' | 'warn';
+    /** Size variant. */
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Additional CSS class names. */
     class?: string;
+    /** Whether the button is disabled. Also disabled automatically when the parent form is loading. */
     disabled?: boolean;
+    /** Icon component or string to render before the label. */
     icon?: string | Component;
+    /** Click event handler. */
     onclick?: (event: MouseEvent) => void;
+    /** Button label content. */
     children: Snippet;
 };
 declare const Button: Component<$$ComponentProps, {}, "">;

package/dist/form/Datepicker.svelte

@@ -4,11 +4,24 @@
 import UiContent from "../components/UIContent.svelte";
   import { getLocaleFirstDayOfWeek } from "../util/locale.js";
 
+    /**
+     * @description
+     * A custom date/time range picker with year, month and day grids.
+     * Renders start and end `datetime-local` inputs alongside visual selection components
+     * for year, month and day. Respects the user's locale for first day of week.
+     *
+     * @example
+     * <Datepicker />
+     * <Datepicker range={{ min: new Date('2024-01-01'), max: new Date('2025-12-31') }} />
+     */
     let {
         range
     }: {
+        /** Optional date range constraints. */
         range?: {
+            /** Minimum selectable date. */
             min?: Date;
+            /** Maximum selectable date. */
             max?: Date;
         }
     } = $props();

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

@@ -1,6 +1,9 @@
 type $$ComponentProps = {
+    /** Optional date range constraints. */
     range?: {
+        /** Minimum selectable date. */
         min?: Date;
+        /** Maximum selectable date. */
         max?: Date;
     };
 };

package/dist/form/FieldContent.svelte

@@ -7,7 +7,14 @@
 
     /**
      * @description
-     * This component is used internally by the Input, Select, etc. components to render the label and the input field in a consistent way.
+     * Internal wrapper used by Input, Select and Textarea to render the label, field
+     * border, prefix/suffix decorations, help text and error messages in a consistent layout.
+     *
+     * @cssprop --field-background -- Background color of the field container.
+     * @cssprop --field-border-size -- Border width of the field container.
+     * @cssprop --field-border-style -- Border style of the field container.
+     * @cssprop --field-border-color -- Border color of the field container.
+     * @cssprop --field-border-radius -- Border radius of the field container.
      */
     let {
         id,
@@ -62,8 +69,7 @@
         {#if contained}
             <div
                 class="Field"
-                class:hasPrefix={prefix}
-                class:hasSuffix={suffix}
+                
                 class:invalid={field?.tainted && issue?.code}
             >
                 {#if prefix}
@@ -105,13 +111,15 @@
     .FieldContentContainer {
         display: flex;
         flex-direction: column;
-        gap: var(--form-field-gap, var(--space-xs));
+        gap: var(--form-field-inside-gap);
+        min-width: 0;
     }
     .FieldContent {
         display: flex;
         gap: var(--form-label-gap, var(--space-xs));
         flex-direction: column;
         font-size: 1em;
+        min-width: 0;
     }
     .FieldContent.row {
         flex-direction: row-reverse;
@@ -124,6 +132,7 @@
         border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
         border-radius: var(--field-border-radius);
         display: flex;
+        min-width: 0;
     }
     .Field.invalid {
         border-color: var(--field-border-color-invalid);
@@ -138,7 +147,7 @@
         padding-inline: var(--form-field-gap, var(--space-md));
         font-size: 1em;
         text-box: trim-both cap alphabetic;
-        color: var(--text-subtle);
+        color: var(--text-color-p-subtle);
     }
     .Suffix {
         padding-inline-start: 0;
@@ -158,16 +167,16 @@
         outline-color: var(--focus-ring-color-invalid); 
         border-color: var(--focus-ring-color-invalid);
     }
-    .Field.hasPrefix :global(input) {
+    .Field:has(.Prefix) :global(input) {
         padding-inline-start: var(--space-xxs);
     }
     .Field :global(button) {
-        margin-right: var(--space-xxs);
+        margin-inline-end: var(--space-xxs);
     }
     .Field :global(button:focus-visible) {
-        outline: var(--focus-outline);
+        outline: var(--focus-ring);
         outline-offset: 3px;
-        border-radius: calc(var(--field-radius) - 2px);
+        border-radius: calc(var(--field-border-radius) - 2px);
     }
     .Help {
         font-size: min(11px, var(--font-size-075));

package/dist/form/FieldError.svelte

@@ -16,7 +16,7 @@
 
 <style>
     p.Error {
-        color: var(--field-color-danger, light-dark(red, red));
+        color: var(--field-color-danger);
         font-size: max(0.85em, 11px);
         font-weight: var(--font-weight-normal);
         text-wrap: balance;

package/dist/form/Fieldset.svelte

@@ -3,14 +3,19 @@
 
     /**
      * @description
-     * A fieldset is a group of related form elements that can be disabled or enabled.
+     * A fieldset is a group of related form elements. Supports responsive column
+     * layouts via container queries, optional contained styling with padding,
+     * and rounded borders.
+     *
+     * @cssprop --form-field-gap -- Gap between fields within the fieldset.
+     * @cssprop --form-padding-block -- Block padding when contained.
+     * @cssprop --form-padding-inline -- Inline padding when contained.
+     * @cssprop --field-label-font-size -- Font size for the legend.
+     *
      * @example
-     * <script>
-     *    import Input from "lutra/Input.svelte";
-     * <\/script>
-     * <Fieldset legend="Personal Information">
-     *    <Input label="First Name" />
-     *    <Input label="Last Name" />
+     * <Fieldset legend="Personal Information" columns={2}>
+     *   <Input label="First Name" name="first" />
+     *   <Input label="Last Name" name="last" />
      * </Fieldset>
      */
 
@@ -76,16 +81,19 @@
     }
     fieldset {
         display: grid;
+        border: none;
+        margin: 0;
+        padding: 0;
         width: var(--width, fit-content);
         grid-template-columns: repeat(var(--lg-cols), 1fr);
-        gap: var(--gap, 1.5em);
+        gap: var(--form-field-gap);
     }
     legend {
-        font-weight: 500;
-        font-size: var(--font-size, 1em);
+        font-weight: var(--font-weight-normal);
+        font-size: var(--field-label-font-size);
     }
     fieldset.contained {
-        padding: 1.5em;
+        padding: var(--form-padding-block) var(--form-padding-inline);
     }
     fieldset.fullWidth {
         width: 100%;

package/dist/form/Form.svelte

@@ -12,6 +12,30 @@
 	import { getIndividualValidators, parseFormIssues } from "./form.js";
 	import { useForm } from "./client.svelte.js";
 
+    /**
+     * @description
+     * The root form component. Wraps SvelteKit's `enhance` for progressive enhancement,
+     * integrates with Zod-based validation via Bodyguard, and provides layout token
+     * overrides for all child form sections, fields and actions.
+     *
+     * @cssprop --form-action-gap -- Gap between action buttons.
+     * @cssprop --form-field-gap -- Gap between fields in a section.
+     * @cssprop --form-label-gap -- Gap between label and input.
+     * @cssprop --form-title-gap -- Gap within a section title.
+     * @cssprop --form-section-gap -- Gap between sections.
+     * @cssprop --form-padding-block -- Block padding for contained sections.
+     * @cssprop --form-padding-inline -- Inline padding for contained sections.
+     *
+     * @example
+     * <Form form={data.form} action="?/save">
+     *   <FormSection title="Profile">
+     *     <Input name="name" label="Name" />
+     *   </FormSection>
+     *   <FormActions>
+     *     <Button type="submit">Save</Button>
+     *   </FormActions>
+     * </Form>
+     */
     let {
         name = 'form',
         form: _form,
@@ -35,15 +59,25 @@
         paddingBlock,
         paddingInline,
     }: {
+        /** The key under which the form data is returned in the action result. */
         name?: string;
+        /** The Lutra form object from the server load function. */
         form?: LutraForm<any>;
+        /** Bindable reference to the underlying `<form>` element. */
         formEl?: HTMLFormElement | null;
+        /** The form action URL. */
         action?: string;
+        /** The form encoding type. */
         enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
+        /** The HTTP method. */
         method?: "GET" | "POST";
+        /** Callback invoked before the form is submitted. Can cancel submission. */
         beforesubmit?: BeforeSubmitFn;
+        /** Whether the form should span the full width. */
         fullWidth?: boolean;
+        /** Whether to reset fields after a successful update. */
         resetOnUpdate?: boolean;
+        /** Callback invoked with the action result after submission. */
         onresult?: (args: {
             formData: FormData;
             formElement: HTMLFormElement;
@@ -54,16 +88,27 @@
                 invalidateAll?: boolean | undefined;
             } | undefined) => void;
         }) => void;
+        /** Form content. */
         children: Snippet;
+        /** Whether the form sections should be contained (bordered). */
         contained?: boolean;
+        /** General spacing override. */
         spacing?: string;
+        /** Override for `--form-action-gap`. */
         actionGap?: string;
+        /** Override for `--form-field-gap`. */
         fieldGap?: string;
+        /** Override for `--form-label-gap`. */
         labelGap?: string;
+        /** Override for `--form-title-gap`. */
         titleGap?: string;
+        /** Override for `--form-section-gap`. */
         sectionGap?: string;
+        /** Shorthand override for both `--form-padding-block` and `--form-padding-inline`. */
         padding?: string;
+        /** Override for `--form-padding-block`. */
         paddingBlock?: string;
+        /** Override for `--form-padding-inline`. */
         paddingInline?: string;
     } = $props();
 
@@ -85,7 +130,6 @@
     const bodyguard = new Bodyguard();
 
     function setFormIssuesAndFields(issues: any, fields: any) {
-        console.log('setFormIssuesAndFields', issues, fields)
         if(form) {
             form.issues = issues;
             form.fields = fields;
@@ -126,6 +170,7 @@
     };
 
     const style = `
+        --fcc: ${contained ? 1 : 0};
         ${actionGap ? `--form-action-gap: ${actionGap};` : ''}
         ${fieldGap ? `--form-field-gap: ${fieldGap};` : ''}
         ${labelGap ? `--form-label-gap: ${labelGap};` : ''}
@@ -146,75 +191,104 @@
 </script>
 
 <UiContent>
-    <form
-        {method}
-        {action}
-        {enctype}
-        style={style}
-        bind:this={formEl}
-        onchange={validate}
-        use:enhance={async ({ formElement, formData, action, cancel, submitter }) => {
-            // `formElement` is this `<form>` element
-            // `formData` is its `FormData` object that's about to be submitted
-            // `action` is the URL to which the form is posted
-            // calling `cancel()` will prevent the submission
-            // `submitter` is the `HTMLElement` that caused the form to be submitted
-            if(form) form.state = 'loading';
-            //await Promise.resolve(beforesubmit(form));
-            if(beforesubmit) await Promise.resolve(beforesubmit({ form: formElement, data: formData, cancel: () => {
-                if(form) form.state = 'error';
-                cancel();
-            }}));
-            for(const { id, fn } of beforesubmitFunctions) {
-                await Promise.resolve(fn({ form: formElement, data: formData, cancel: () => {
+    <div class="FormContainer">
+        <form
+            {method}
+            {action}
+            {enctype}
+            style={style}
+            bind:this={formEl}
+            onchange={validate}
+            use:enhance={async ({ formElement, formData, action, cancel, submitter }) => {
+                // `formElement` is this `<form>` element
+                // `formData` is its `FormData` object that's about to be submitted
+                // `action` is the URL to which the form is posted
+                // calling `cancel()` will prevent the submission
+                // `submitter` is the `HTMLElement` that caused the form to be submitted
+                if(form) form.state = 'loading';
+                //await Promise.resolve(beforesubmit(form));
+                if(beforesubmit) await Promise.resolve(beforesubmit({ form: formElement, data: formData, cancel: () => {
                     if(form) form.state = 'error';
                     cancel();
                 }}));
-            }
-            console.log('form state', form?.state);
-            return async (opts) => {
-                const { result, update } = opts;
-                // `result` is an `ActionResult` object
-                // `update` is a function which triggers the default logic that would be triggered if this callback wasn't set
-                console.log('form result', opts);
-                if(onresult) {
-                    console.log('calling onresult', opts);
-                    onresult(opts);
+                for(const { id, fn } of beforesubmitFunctions) {
+                    await Promise.resolve(fn({ form: formElement, data: formData, cancel: () => {
+                        if(form) form.state = 'error';
+                        cancel();
+                    }}));
                 }
-                const resultForm = result.type !== "redirect" && result.type !== "error" ? result?.data![name] : null;
-                console.log('resultForm', resultForm, form);
-                if(result.type === "success") {
-                    if(resultForm && form) {
-                        form.valid = Object.assign({ valid: false }, resultForm).valid ?? false;
+                return async (opts) => {
+                    const { result, update } = opts;
+                    if(onresult) {
+                        onresult(opts);
                     }
-                    if(form) form.state = 'success';
-                    console.log('form state', form?.state, resetOnUpdate, opts);
-                    update({ reset: !!resetOnUpdate });
-                } else if(result.type === "failure") {
-                    console.log('FAILURE', opts);
-                    if(resultForm && form) {
-                        console.log('setting form issues and fields')
-                        setFormIssuesAndFields(
-                            Object.assign({ issues: [] }, resultForm).issues, // Have to assign to avoid type error as we cant use `as` here
-                            Object.assign({ fields: [] }, resultForm).fields,
-                        );
+                    const resultForm = result.type !== "redirect" && result.type !== "error" ? result?.data![name] : null;
+                    if(result.type === "success") {
+                        if(resultForm && form) {
+                            form.valid = Object.assign({ valid: false }, resultForm).valid ?? false;
+                        }
+                        if(form) form.state = 'success';
+                        update({ reset: !!resetOnUpdate });
+                    } else if(result.type === "failure") {
+                        if(resultForm && form) {
+                            setFormIssuesAndFields(
+                                Object.assign({ issues: [] }, resultForm).issues, // Have to assign to avoid type error as we cant use `as` here
+                                Object.assign({ fields: [] }, resultForm).fields,
+                            );
+                        }
+                        if(form) form.state = 'error';
+                    } else if(result.type === "error") {
+                        console.error('[lutra] Error from form enhance call', result.error, opts);
+                        if(form) form.state = 'error';
+                    } else if(result.type === "redirect") {
+                        if(form) form.state = 'success';
+                        await goto(result.location);
                     }
-                    if(form) form.state = 'error';
-                } else if(result.type === "error") {
-                    console.error('[lutra] Error from form enhance call', result.error, opts);
-                    if(form) form.state = 'error';
-                } else if(result.type === "redirect") {
-                    console.log('redirect', opts);
-                    //window.location.href = result.location;
-                    if(form) form.state = 'success';
-                    await goto(result.location);
-                }
-            };
-        }}
-    >
-        {@render children()}
-    </form>
+                };
+            }}
+        >
+            {@render children()}
+        </form>
+    </div>
 </UiContent>
 
 <style>
+    .FormContainer {
+        container-type: inline-size;
+    }
+    form {
+        display: grid;
+        grid-template-columns: fit-content(20%) 1fr;
+        border: calc(var(--fcc) * var(--form-border-size)) var(--form-border-style) var(--form-border-color);
+        border-radius: calc(var(--fcc) * var(--form-border-radius));
+        --form-padding-block: var(--space-md);
+        --form-padding-inline: var(--space-md);
+        --form-section-gap: var(--space-md);
+    }
+    @container (min-width: 600px) {
+        form {
+            --form-padding-block: var(--space-lg);
+            --form-padding-inline: var(--space-lg);
+            --form-section-gap: var(--space-xl);
+        }
+    }
+    @container (min-width: 1000px) {
+        form {
+            --form-padding-block: var(--space-xl);
+            --form-padding-inline: var(--space-xl);
+            --form-section-gap: var(--space-xxl);
+        }
+    }
+    @container (min-width: 1400px) {
+        form {
+            --form-padding-block: var(--space-xxl);
+            --form-padding-inline: var(--space-xxl);
+            --form-section-gap: var(--space-xxxl);
+        }
+    }
+    @container (max-width: 800px) {
+        form {
+            grid-template-columns: 1fr;
+        }
+    }
 </style>

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

@@ -2,15 +2,25 @@ import type { ActionResult } from "@sveltejs/kit";
 import type { Snippet } from "svelte";
 import type { BeforeSubmitFn, LutraForm } from "./types.js";
 type $$ComponentProps = {
+    /** The key under which the form data is returned in the action result. */
     name?: string;
+    /** The Lutra form object from the server load function. */
     form?: LutraForm<any>;
+    /** Bindable reference to the underlying `<form>` element. */
     formEl?: HTMLFormElement | null;
+    /** The form action URL. */
     action?: string;
+    /** The form encoding type. */
     enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
+    /** The HTTP method. */
     method?: "GET" | "POST";
+    /** Callback invoked before the form is submitted. Can cancel submission. */
     beforesubmit?: BeforeSubmitFn;
+    /** Whether the form should span the full width. */
     fullWidth?: boolean;
+    /** Whether to reset fields after a successful update. */
     resetOnUpdate?: boolean;
+    /** Callback invoked with the action result after submission. */
     onresult?: (args: {
         formData: FormData;
         formElement: HTMLFormElement;
@@ -21,16 +31,27 @@ type $$ComponentProps = {
             invalidateAll?: boolean | undefined;
         } | undefined) => void;
     }) => void;
+    /** Form content. */
     children: Snippet;
+    /** Whether the form sections should be contained (bordered). */
     contained?: boolean;
+    /** General spacing override. */
     spacing?: string;
+    /** Override for `--form-action-gap`. */
     actionGap?: string;
+    /** Override for `--form-field-gap`. */
     fieldGap?: string;
+    /** Override for `--form-label-gap`. */
     labelGap?: string;
+    /** Override for `--form-title-gap`. */
     titleGap?: string;
+    /** Override for `--form-section-gap`. */
     sectionGap?: string;
+    /** Shorthand override for both `--form-padding-block` and `--form-padding-inline`. */
     padding?: string;
+    /** Override for `--form-padding-block`. */
     paddingBlock?: string;
+    /** Override for `--form-padding-inline`. */
     paddingInline?: string;
 };
 declare const Form: import("svelte").Component<$$ComponentProps, {}, "formEl">;