lutra 0.1.68 → 0.1.70

package/dist/css/{2-base.css → 3-base.css}

@@ -1,130 +1,6 @@
 /**
  * Base DOM setup
- * Initializes shorthand variables and foundational sizing
  */
-:root {
-    /* Base size for all sizing */
-    --base-size: 16px;
-
-    /* Spacing scale */
-    --space-base: 1em;
-    --space-025: calc(var(--space-base) * 0.25);
-    --space-050: calc(var(--space-base) * 0.5);
-    --space-075: calc(var(--space-base) * 0.75);
-    --space-100: calc(var(--space-base) * 1);
-    --space-125: calc(var(--space-base) * 1.25);
-    --space-150: calc(var(--space-base) * 1.5);
-    --space-175: calc(var(--space-base) * 1.75);
-    --space-200: calc(var(--space-base) * 2);
-    --space-225: calc(var(--space-base) * 2.25);
-    --space-250: calc(var(--space-base) * 2.5);
-    --space-300: calc(var(--space-base) * 3);
-    --space-350: calc(var(--space-base) * 3.5);
-    --space-400: calc(var(--space-base) * 4);
-    --space-450: calc(var(--space-base) * 4.5);
-    --space-500: calc(var(--space-base) * 5);
-    --space-550: calc(var(--space-base) * 5.5);
-    --space-600: calc(var(--space-base) * 6);
-    --space-700: calc(var(--space-base) * 7);
-    --space-800: calc(var(--space-base) * 8);
-    --space-900: calc(var(--space-base) * 9);
-    --space-1000: calc(var(--space-base) * 10);
-
-    --space-xxs: var(--space-025);
-    --space-xs: var(--space-050);
-    --space-sm: var(--space-075);
-    --space-md: var(--space-100);
-    --space-lg: var(--space-150);
-    --space-xl: var(--space-200);
-    --space-xxl: var(--space-300);
-    --space-xxxl: var(--space-400);
-
-    --font-scale: 1.175;
-    --font-size-base: 1em;
-
-    --font-size-xs: calc(var(--font-size-base) * pow(var(--font-scale), -2));
-    --font-size-sm: calc(var(--font-size-base) * pow(var(--font-scale), -1));
-    --font-size-p: var(--font-size-base);
-    --font-size-h6: var(--font-size-base);
-    --font-size-h5: calc(var(--font-size-base) * pow(var(--font-scale), 1));
-    --font-size-h4: calc(var(--font-size-base) * pow(var(--font-scale), 2));
-    --font-size-h3: calc(var(--font-size-base) * pow(var(--font-scale), 3));
-    --font-size-h2: calc(var(--font-size-base) * pow(var(--font-scale), 4));
-    --font-size-h1: calc(var(--font-size-base) * pow(var(--font-scale), 5));
-    --font-size-hero: calc(var(--font-size-base) * pow(var(--font-scale), 6));
-    --font-size-jumbo: calc(var(--font-size-base) * pow(var(--font-scale), 7));
-
-    --text-color-h1: var(--text-color-heading);
-    --text-color-h2: var(--text-color-heading);
-    --text-color-h3: var(--text-color-heading);
-    --text-color-h4: var(--text-color-heading);
-    --text-color-h5: var(--text-color-heading);
-    --text-color-h6: var(--text-color-heading);
-    --field-color: var(--text-color-p);
-
-    --border-radius-scale: 1.2;
-    --border-size-thin: 1px;
-    --border-size-thick: 2px;
-
-    --border-radius-base: calc(var(--border-radius-scale) * 0.25em);
-    --border-radius-sm: calc(var(--border-radius-scale) * 0.5em);
-    --border-radius-lg: calc(var(--border-radius-scale) * 2em);
-
-    --form-border-radius: var(--border-radius-base);
-    --form-border-size: var(--border-size-thin);
-    --form-border-style: var(--border-style);
-    --form-border-color: var(--border-color);
-
-    --field-border-radius: var(--border-radius-base);
-    --field-border-size: var(--border-size-thin);
-    --field-border-style: var(--border-style);
-    --field-border-color: var(--border-color);
-
-    --button-border-radius: var(--border-radius-base);
-    --button-border-size: var(--border-size-thin);
-    --button-border-style: var(--border-style);
-    --button-border-color: var(--border-color);
-
-    --link-color-visited: var(--link-color);
-    --link-color-active: var(--link-color);
-
-    /* Shorthand compound variables */
-    --field-padding: var(--field-padding-block) var(--field-padding-inline);
-    --field-border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
-    
-    --button-padding: var(--button-padding-block) var(--button-padding-inline);
-    --button-border: var(--button-border-size) var(--button-border-style) var(--button-submit-border-color);
-    --button-icon-size: 1em;
-    
-    /* Focus ring compound */
-    --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color);
-
-    /* Shadows */
-    --shadow-base: var(--shadow-base);
-    --shadow-sm: var(--shadow-sm);
-    --shadow-md: var(--shadow-md);
-    --shadow-lg: var(--shadow-lg);
-    --shadow-xl: var(--shadow-xl);
-    --shadow-2xl: var(--shadow-2xl);
-
-    --tooltip-background: var(--surface-background);
-    --tooltip-color: var(--text-color-p);
-    --tooltip-border: var(--surface-border);
-    --tooltip-border-radius: var(--surface-border-radius);
-    --tooltip-shadow: var(--surface-shadow);
-
-    /* Table compound variables */
-    --table-border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
-    --table-cell-padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
-
-    /* Modal compound variables */
-    --modal-border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
-    --modal-padding: var(--modal-padding-block) var(--modal-padding-inline);
-    --modal-actions-padding: var(--modal-actions-padding-block) var(--modal-actions-padding-inline);
-
-    --mix-target: light-dark(black, white);
-}
-
 body {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
@@ -141,16 +17,53 @@ body {
     width: 100%;
     min-height: 0;
     scrollbar-gutter: stable;
+	-webkit-text-size-adjust: 100%;
+	-ms-overflow-style: -ms-autohiding-scrollbar;
+	box-sizing: border-box;
+	border-collapse: collapse;
+}
+
+html {
+    color-scheme: light dark;
+    &:not(.light) {
+        @media (prefers-color-scheme: dark) {
+            color-scheme: only dark;
+        }
+    }
+}
+
+html.light {
+    color-scheme: only light;
+}
+
+html.dark {
+    color-scheme: only dark;
+}
+
+html,
+body {
+	height: 100%;
+	width: 100%;
 }
 
-body * {
+* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+	scrollbar-width: thin;
+	scrollbar-color: var(--scrollbar-color) transparent;
 }
 
-html {
-    color-scheme: light dark;
+.visually-hidden {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: auto;
+	margin: 0;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	white-space: nowrap;
 }
 
 input, textarea, select, button {
@@ -229,12 +142,10 @@ input, textarea, select, .button, ::file-selector-button, .Field {
         background-image var(--transition-duration-fast) var(--transition-timing-function),
         background-color var(--transition-duration-fast) var(--transition-timing-function),
         color var(--transition-duration-fast) var(--transition-timing-function),
-        box-shadow var(--transition-duration-fast) var(--transition-timing-function),
-        outline var(--transition-duration-fast) var(--transition-timing-function),
-        outline-offset var(--transition-duration-fast) var(--transition-timing-function);
+        box-shadow var(--transition-duration-fast) var(--transition-timing-function);
 }
 
-input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
+input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
     outline: var(--focus-ring-size) solid var(--focus-ring-color);
     outline-offset: var(--focus-ring-offset);
     border-color: var(--focus-ring-color);

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;
@@ -170,9 +172,20 @@
         --checkbox-border-color-checked: var(--button-submit-base-color);
         --checkbox-indicator-color: light-dark(#ffffff, #ffffff);
 
+        /**
+         * Toggle
+         */
+
+        --toggle-background: var(--border-color);
+        --toggle-background-checked: var(--checkbox-background-checked);
+        --toggle-border-color: var(--toggle-background);
+        --toggle-border-color-checked: var(--toggle-background-checked);
+        --toggle-thumb-color: var(--checkbox-indicator-color);
+
         --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 +214,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 +242,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 +291,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,21 +167,21 @@
         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));
+        font-size: var(--font-size-sm);
         line-height: var(--font-line-height-tight);
         color: var(--text-color-p-subtle);
-        font-weight: var(--font-weight-normal);
+        font-weight: var(--font-weight-light);
     }
 </style>

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/FieldGroup.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import Label from "./Label.svelte";
+	import StringOrSnippet from "../util/StringOrSnippet.svelte";
+
+    /**
+     * @description
+     * Groups related form fields (checkboxes, radios, toggles) under a shared label
+     * with a tighter gap than the default form field spacing.
+     *
+     * @cssprop --field-group-gap -- Gap between items within the group.
+     * @cssprop --form-label-gap -- Gap between the group label and the items.
+     *
+     * @example
+     * <FieldGroup label="Permissions">
+     *   <Input name="read" type="checkbox" label="Read" />
+     *   <Input name="write" type="checkbox" label="Write" />
+     *   <Input name="admin" type="checkbox" label="Admin" />
+     * </FieldGroup>
+     */
+    let {
+        id = crypto.randomUUID(),
+        label,
+        labelHelp,
+        labelTip,
+        help,
+        required,
+        children,
+    }: {
+        /** A unique id for the group. Auto-generated if not provided. */
+        id?: string;
+        /** The group label. */
+        label?: string | Snippet;
+        /** Help text to display alongside the label. */
+        labelHelp?: string | Snippet;
+        /** Context tooltip for the label. */
+        labelTip?: string | Snippet;
+        /** Help text to display below the group. */
+        help?: string | Snippet;
+        /** Whether the group is required. */
+        required?: boolean;
+        /** The grouped fields to render. */
+        children: Snippet;
+    } = $props();
+</script>
+
+<div
+    class="FieldGroup"
+    role="group"
+    aria-labelledby={label ? `fg-${id}` : undefined}
+>
+    {#if label}
+        <div id="fg-{id}">
+            <Label {label} tip={labelTip} help={labelHelp} {required} />
+        </div>
+    {/if}
+    <div class="FieldGroupContent">
+        {@render children()}
+    </div>
+    {#if help}
+        <div class="Help">
+            <StringOrSnippet content={help} />
+        </div>
+    {/if}
+</div>
+
+<style>
+    .FieldGroup {
+        display: flex;
+        flex-direction: column;
+        gap: var(--form-label-gap, var(--space-xs));
+    }
+    .FieldGroupContent {
+        display: flex;
+        flex-direction: column;
+        gap: var(--field-group-gap);
+    }
+    .Help {
+        font-size: var(--font-size-sm);
+        line-height: var(--font-line-height-tight);
+        color: var(--text-color-p-subtle);
+        font-weight: var(--font-weight-light);
+    }
+</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** A unique id for the group. Auto-generated if not provided. */
+    id?: string;
+    /** The group label. */
+    label?: string | Snippet;
+    /** Help text to display alongside the label. */
+    labelHelp?: string | Snippet;
+    /** Context tooltip for the label. */
+    labelTip?: string | Snippet;
+    /** Help text to display below the group. */
+    help?: string | Snippet;
+    /** Whether the group is required. */
+    required?: boolean;
+    /** The grouped fields to render. */
+    children: Snippet;
+};
+declare const FieldGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type FieldGroup = ReturnType<typeof FieldGroup>;
+export default FieldGroup;

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%;