lutra 0.0.17 → 0.0.19

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

@@ -2,120 +2,67 @@ import { SvelteComponent } from "svelte";
 import type { Autocomplete } from "./types.js";
 declare const __propDef: {
     props: {
-        /** alt attribute for the image type. Required for accessibility */
         alt?: string | undefined;
-        /** Additional attributes to add to the input element. */
         attrs?: Record<string, string> | undefined;
-        /** Whether the input should be autocapitalized. */
         autocapitalize?: boolean | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
-        /** Specifies whether autocomplete is enabled for the input. */
         autocomplete?: Autocomplete | undefined;
-        /** Whether the input should be autocorrected. (Safari only) */
         autocorrect?: boolean | undefined;
-        /** A hint to the browser for which capture method to use. */
         capture?: "user" | "environment" | undefined;
-        /** Whether the input should be checked. */
         checked?: boolean | undefined;
-        /** Whether the input should be contained. */
         contained?: boolean | undefined;
-        /** Whether the input should be copyable. */
         copyable?: boolean | undefined;
-        /** The default value of the input element. */
         defaultValue?: string | undefined;
-        /** Form field name for the directionality of the element's text content during form submission */
         dirname?: string | undefined;
-        /** Whether the input should be disabled. */
         disabled?: boolean | undefined;
-        /** A hint to the browser for which enter key to display for the input. */
         enterkeyhint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
-        /** The height of the input element. Valid for image inputs. */
         height?: number | undefined;
-        /** Help text to display below the input. */
         help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** A random id is generated if not provided. */
-        id?: string | undefined;
-        /** Whether the input should be indeterminate. */
+        id?: import("svelte").Bindable<string | undefined>;
         indeterminate?: boolean | undefined;
-        /** A hint to the browser for which keyboard to display. This is only used for type="text" inputs. Strongly consider using type="email" or type="url" etc. instead */
         inputmode?: "none" | "search" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
-        /** The label for the input */
         label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
         labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** The id of a datalist element that contains pre-defined options for the input element. */
         list?: string | undefined;
-        /** The maximum number of characters (as UTF-16 code units) the user can enter into the input. Valid for text, search, url, tel, email, and password. */
         maxlength?: number | undefined;
-        /** The minimum number of characters (as UTF-16 code units) the user can enter into the input. Valid for text, search, url, tel, email, and password. */
         minlength?: number | undefined;
-        /** Allow multiple f
-        /** The maximum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
         max?: number | undefined;
-        /** The minimum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
         min?: number | undefined;
-        /** Whether the input should allow multiple values. Valid for email and file inputs. */
         multiple?: boolean | undefined;
-        /** The name of the input element. */
         name: string;
-        /** The onblur event handler */
         onblur?: ((e: FocusEvent) => void) | undefined;
-        /** Onchange event handler */
         onchange?: ((e: Event) => void) | undefined;
-        /** Onclick event handler */
         onclick?: ((e: MouseEvent) => void) | undefined;
-        /** Onfocus event handler */
         onfocus?: ((e: FocusEvent) => void) | undefined;
-        /** Keyup event handler */
         onkeyup?: ((e: KeyboardEvent) => void) | undefined;
-        /** Keydown event handler */
         onkeydown?: ((e: KeyboardEvent) => void) | undefined;
-        /** Keypress event handler */
         onkeypress?: ((e: KeyboardEvent) => void) | undefined;
-        /** A regular expression that the input's value is checked against. Valid for text, search, url, tel, email, and password. */
         pattern?: string | undefined;
-        /** Placeholder text to display when the input is empty. */
         placeholder?: string | undefined;
-        /** Suffix content, to display after the input. */
         suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** Prefix content, to display before the input. */
         prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** Whether the input should be read-only. */
         readonly?: boolean | undefined;
-        /** Whether the input should be required. */
         required?: boolean | undefined;
-        /** The maximum number of items that should be displayed in the drop-down list of previous search queries. Safari only. */
         results?: number | undefined;
-        /** The shape of the input element. */
         shape?: "default" | "circle" | "rounded" | "pill" | undefined;
-        /** The size of the input element. */
         size?: number | undefined;
-        /** Source URL for the image type. */
         src?: string | undefined;
-        /** Spellcheck the input. */
         spellcheck?: boolean | undefined;
-        /** A number that specifies the granularity that the value must adhere to. Valid for date, month, week, time, datetime-local, number, and range. */
         step?: number | undefined;
-        /** An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. */
         tabindex?: number | undefined;
-        /** A string that defines the title of the input element. */
         title?: string | undefined;
-        /** The type of input to display. */
         type?: "number" | "color" | "button" | "search" | "time" | "image" | "text" | "submit" | "email" | "tel" | "url" | "date" | "checkbox" | "radio" | "hidden" | "password" | "file" | "range" | "datetime-local" | "month" | "week" | undefined;
-        /** The value of the input element. */
-        value?: string | undefined;
-        /** Whether the input should be viewable. Valid for password inputs. */
+        value?: import("svelte").Bindable<string | undefined>;
         viewable?: boolean | undefined;
-        /** Whether the input should only accept directory uploads. */
         webkitdirectory?: boolean | undefined;
     };
     events: {
@@ -127,5 +74,69 @@ export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;
 export type InputSlots = typeof __propDef.slots;
 export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        alt?: string | undefined;
+        attrs?: Record<string, string> | undefined;
+        autocapitalize?: boolean | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
+        autocomplete?: Autocomplete | undefined;
+        autocorrect?: boolean | undefined;
+        capture?: "user" | "environment" | undefined;
+        checked?: boolean | undefined;
+        contained?: boolean | undefined;
+        copyable?: boolean | undefined;
+        defaultValue?: string | undefined;
+        dirname?: string | undefined;
+        disabled?: boolean | undefined;
+        enterkeyhint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+        height?: number | undefined;
+        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        id?: import("svelte").Bindable<string | undefined>;
+        indeterminate?: boolean | undefined;
+        inputmode?: "none" | "search" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | 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;
+        list?: string | undefined;
+        maxlength?: number | undefined;
+        minlength?: number | undefined;
+        max?: number | undefined;
+        min?: number | undefined;
+        multiple?: boolean | undefined;
+        name: string;
+        onblur?: ((e: FocusEvent) => void) | undefined;
+        onchange?: ((e: Event) => void) | undefined;
+        onclick?: ((e: MouseEvent) => void) | undefined;
+        onfocus?: ((e: FocusEvent) => void) | undefined;
+        onkeyup?: ((e: KeyboardEvent) => void) | undefined;
+        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
+        onkeypress?: ((e: KeyboardEvent) => void) | undefined;
+        pattern?: string | undefined;
+        placeholder?: string | undefined;
+        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        readonly?: boolean | undefined;
+        required?: boolean | undefined;
+        results?: number | undefined;
+        shape?: "default" | "circle" | "rounded" | "pill" | undefined;
+        size?: number | undefined;
+        src?: string | undefined;
+        spellcheck?: boolean | undefined;
+        step?: number | undefined;
+        tabindex?: number | undefined;
+        title?: string | undefined;
+        type?: "number" | "color" | "button" | "search" | "time" | "image" | "text" | "submit" | "email" | "tel" | "url" | "date" | "checkbox" | "radio" | "hidden" | "password" | "file" | "range" | "datetime-local" | "month" | "week" | undefined;
+        value?: import("svelte").Bindable<string | undefined>;
+        viewable?: boolean | undefined;
+        webkitdirectory?: boolean | undefined;
+    }>);
 }
 export {};

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

@@ -1,9 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        /** The value of the input. */
         value: string;
-        /** The maximum length of the input. */
         maxlength: number;
     };
     events: {
@@ -15,5 +13,9 @@ export type InputLengthProps = typeof __propDef.props;
 export type InputLengthEvents = typeof __propDef.events;
 export type InputLengthSlots = typeof __propDef.slots;
 export default class InputLength extends SvelteComponent<InputLengthProps, InputLengthEvents, InputLengthSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        value: string;
+        maxlength: number;
+    }>);
 }
 export {};

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

@@ -1,13 +1,10 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        /** The id of the input element */
         id?: string | undefined;
-        /** The label for the input */
         label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** The help text for the input */
         tip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
@@ -21,5 +18,14 @@ export type LabelProps = typeof __propDef.props;
 export type LabelEvents = typeof __propDef.events;
 export type LabelSlots = typeof __propDef.slots;
 export default class Label extends SvelteComponent<LabelProps, LabelEvents, LabelSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        id?: string | undefined;
+        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        tip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+    }>);
 }
 export {};

package/dist/form/Select.svelte

@@ -54,7 +54,6 @@ const originalData = form?.originalData;
 >
     <select
         bind:this={el}
-        {...attrs}
         {disabled}
         {id}
         {name}

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

@@ -1,71 +1,46 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        /** Additional attributes to add to the input element. */
         attrs?: Record<string, string> | undefined;
-        /** Options for the select element. */
         children?: ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** Whether the input should be disabled. */
         disabled?: boolean | undefined;
-        /** Help text to display below the input. */
         help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** A random id is generated if not provided. */
-        id?: string | undefined;
-        /** The label for the input */
+        id?: import("svelte").Bindable<string | undefined>;
         label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
         labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** The name of the input element. */
         name: string;
-        /** The onblur event handler */
         onblur?: ((e: FocusEvent) => void) | undefined;
-        /** Onchange event handler */
         onchange?: ((e: Event) => void) | undefined;
-        /** Onclick event handler */
         onclick?: ((e: MouseEvent) => void) | undefined;
-        /** Onfocus event handler */
         onfocus?: ((e: FocusEvent) => void) | undefined;
-        /** Keyup event handler */
         onkeyup?: ((e: KeyboardEvent) => void) | undefined;
-        /** Keydown event handler */
         onkeydown?: ((e: KeyboardEvent) => void) | undefined;
-        /** Keypress event handler */
         onkeypress?: ((e: KeyboardEvent) => void) | undefined;
-        /** The options for the select element. */
         options?: string[] | {
             value: string;
             label: string;
         }[] | undefined;
-        /** Placeholder text to display when the input is empty. */
         placeholder?: string | undefined;
-        /** Suffix content, to display after the input. */
         suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** Prefix content, to display before the input. */
         prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** Whether the input should be required. */
         required?: boolean | undefined;
-        /** The maximum number of items that should be displayed in the drop-down list of previous search queries. Safari only. */
         results?: number | undefined;
-        /** The shape of the input element. */
         shape?: "default" | "circle" | "rounded" | "pill" | undefined;
-        /** Source URL for the image type. */
         src?: string | undefined;
-        /** An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. */
         tabindex?: number | undefined;
-        /** The value of the input element. */
-        value?: string | undefined;
+        value?: import("svelte").Bindable<string | undefined>;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -76,5 +51,47 @@ export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;
 export type SelectSlots = typeof __propDef.slots;
 export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        attrs?: Record<string, string> | undefined;
+        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        disabled?: boolean | undefined;
+        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        id?: import("svelte").Bindable<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;
+        name: string;
+        onblur?: ((e: FocusEvent) => void) | undefined;
+        onchange?: ((e: Event) => void) | undefined;
+        onclick?: ((e: MouseEvent) => void) | undefined;
+        onfocus?: ((e: FocusEvent) => void) | undefined;
+        onkeyup?: ((e: KeyboardEvent) => void) | undefined;
+        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
+        onkeypress?: ((e: KeyboardEvent) => void) | undefined;
+        options?: string[] | {
+            value: string;
+            label: string;
+        }[] | undefined;
+        placeholder?: string | undefined;
+        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        required?: boolean | undefined;
+        results?: number | undefined;
+        shape?: "default" | "circle" | "rounded" | "pill" | undefined;
+        src?: string | undefined;
+        tabindex?: number | undefined;
+        value?: import("svelte").Bindable<string | undefined>;
+    }>);
 }
 export {};

package/dist/form/form.js

@@ -184,7 +184,7 @@ export async function loadForm(schema, event, obj) {
  * @returns {FormIssue[]} - The parsed issues.
  */
 export function parseFormIssues(issues) {
-    return JSON.parse(JSON.stringify(issues.map((issue) => {
+    return JSON.parse(JSON.stringify((issues || []).map((issue) => {
         return {
             ...issue,
             name: arrayPathToStringPath(issue.path),

package/dist/grid/Column.svelte.d.ts

@@ -13,5 +13,10 @@ export type ColumnProps = typeof __propDef.props;
 export type ColumnEvents = typeof __propDef.events;
 export type ColumnSlots = typeof __propDef.slots;
 export default class Column extends SvelteComponent<ColumnProps, ColumnEvents, ColumnSlots> {
+    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\"";
+        };
+    }>);
 }
 export {};

package/dist/grid/Grid.svelte.d.ts

@@ -14,5 +14,11 @@ export type GridProps = typeof __propDef.props;
 export type GridEvents = typeof __propDef.events;
 export type GridSlots = typeof __propDef.slots;
 export default class Grid extends SvelteComponent<GridProps, GridEvents, GridSlots> {
+    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\"";
+        };
+        fullWidth?: boolean | undefined;
+    }>);
 }
 export {};

package/dist/grid/Row.svelte.d.ts

@@ -3,7 +3,6 @@ import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
         children: Snippet;
-        /** The number of columns to span. Pass in a number between 1 and 12, or a string with a fraction. To define a span for different viewport sizes, pass in an array of numbers or strings in the order: `small`, `medium`, `large`, `xlarge`. If the array is shorter than 4, the remaining values will be set to the last value. */
         span?: string | number | [number, number, number, number] | undefined;
     };
     events: {
@@ -15,5 +14,11 @@ export type RowProps = typeof __propDef.props;
 export type RowEvents = typeof __propDef.events;
 export type RowSlots = typeof __propDef.slots;
 export default class Row extends SvelteComponent<RowProps, RowEvents, RowSlots> {
+    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\"";
+        };
+        span?: string | number | [number, number, number, number] | undefined;
+    }>);
 }
 export {};

package/dist/layout/Layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import "../style.css";
 import Theme from "./Theme.svelte";
+import OverlayContainer from "./OverlayContainer.svelte";
 let {
   theme,
   children
@@ -33,6 +34,7 @@ let {
 <div class="Layout">
     <Theme theme={theme}>
         {@render children()}
+        <OverlayContainer />
     </Theme>
 </div>
 

package/dist/layout/Layout.svelte.d.ts

@@ -3,9 +3,7 @@ import type { Snippet } from "svelte";
 import "../style.css";
 declare const __propDef: {
     props: {
-        /** The theme to use for the layout. Leave empty to detect automatically or get from user preferences, if any exist. */
         theme?: 'light' | 'dark' | undefined;
-        /** The content to display. */
         children: Snippet;
     };
     events: {
@@ -17,5 +15,11 @@ export type LayoutProps = typeof __propDef.props;
 export type LayoutEvents = typeof __propDef.events;
 export type LayoutSlots = typeof __propDef.slots;
 export default class Layout extends SvelteComponent<LayoutProps, LayoutEvents, LayoutSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        theme?: "light" | "dark" | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/layout/LayoutFooter.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        /** The copyright text to display. */
         copyright?: string | undefined;
     };
     events: {
@@ -13,5 +12,8 @@ export type LayoutFooterProps = typeof __propDef.props;
 export type LayoutFooterEvents = typeof __propDef.events;
 export type LayoutFooterSlots = typeof __propDef.slots;
 export default class LayoutFooter extends SvelteComponent<LayoutFooterProps, LayoutFooterEvents, LayoutFooterSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        copyright?: string | undefined;
+    }>);
 }
 export {};

package/dist/layout/LayoutGrid.svelte.d.ts

@@ -2,19 +2,14 @@ import { SvelteComponent } from "svelte";
 import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
-        /** The header of the grid. */
         header?: ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** The footer of the grid. */
         footer?: ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** Add a subtle border to the header and footer. */
         border?: boolean | undefined;
-        /** Make the header sticky. */
         sticky?: boolean | undefined;
-        /** The main content of the grid. */
         children: Snippet;
     };
     events: {
@@ -26,5 +21,18 @@ export type LayoutGridProps = typeof __propDef.props;
 export type LayoutGridEvents = typeof __propDef.events;
 export type LayoutGridSlots = typeof __propDef.slots;
 export default class LayoutGrid extends SvelteComponent<LayoutGridProps, LayoutGridEvents, LayoutGridSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        header?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        footer?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        border?: boolean | undefined;
+        sticky?: 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/layout/LayoutHeader.svelte.d.ts

@@ -4,25 +4,13 @@ declare const __propDef: {
         left?: ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /**
-         * The center of the header (usually a menu), search bar, etc.
-         */
         center?: ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /**
-         * The right side of the header (usually user info, settings, etc.)
-         */
         right?: ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /**
-         * The text to display for the skip to content link
-         */
         skipToContentText?: string | undefined;
-        /**
-         * Whether the header should be sticky
-         */
         sticky?: boolean | undefined;
     };
     events: {
@@ -34,5 +22,18 @@ export type LayoutHeaderProps = typeof __propDef.props;
 export type LayoutHeaderEvents = typeof __propDef.events;
 export type LayoutHeaderSlots = typeof __propDef.slots;
 export default class LayoutHeader extends SvelteComponent<LayoutHeaderProps, LayoutHeaderEvents, LayoutHeaderSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        left?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        center?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        right?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        skipToContentText?: string | undefined;
+        sticky?: boolean | undefined;
+    }>);
 }
 export {};

package/dist/layout/LayoutSideMenu.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">import MenuItem from "../nav/MenuItem.svelte";
+let {
+  items,
+  children
+} = $props();
+</script>
+
+<main>
+    <aside>
+        <nav>
+            <ul>
+                {#each items as item, index}
+                    <MenuItem {index} {item} />
+                {/each}
+            </ul>
+        </nav>
+    </aside>
+    {@render children()}
+</main>
+
+<style>
+    main {
+        display: grid;
+        grid-template-columns: clamp(10rem, 20%, 20rem) 1fr;
+    }
+    nav {
+        padding: 4rem 0 4rem 2rem;
+        --menu-item-margin: 0;
+    }
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        position: sticky;
+        top: -1rem;
+        border-left: 1px solid var(--border);
+    }
+    @media (max-width: 1280px) {
+        nav {
+            padding: 2rem 0 2rem 1rem;
+        }
+        ul {
+            padding: 0;
+        }
+    }
+    @media(max-width: 800px) {
+        main {
+            grid-template-columns: 1fr;
+        }
+        nav {
+            padding: 0 1rem;
+        }
+    }
+</style>

package/dist/layout/LayoutSideMenu.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+import type { MenuItem as Item } from "../nav/MenuTypes.js";
+declare const __propDef: {
+    props: {
+        items: Item[];
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LayoutSideMenuProps = typeof __propDef.props;
+export type LayoutSideMenuEvents = typeof __propDef.events;
+export type LayoutSideMenuSlots = typeof __propDef.slots;
+export default class LayoutSideMenu extends SvelteComponent<LayoutSideMenuProps, LayoutSideMenuEvents, LayoutSideMenuSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        items: Item[];
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
+}
+export {};