lutra 0.1.69 → 0.1.70

package/dist/components/DataList.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { DataListItem } from "./DataListTypes.js";
+
+    /**
+     * @description
+     * Renders an array of label/value pairs as a semantic description list (`<dl>`).
+     * Supports horizontal (side-by-side), vertical (stacked), or auto (container-query
+     * responsive) layouts. Values can be plain strings, snippets, render functions,
+     * or components.
+     *
+     * @cssprop --data-list-gap -- Gap between items in the list.
+     *
+     * @example
+     * <DataList items={[
+     *     { label: 'Name', value: 'Alice' },
+     *     { label: 'Email', value: 'alice@example.com' },
+     * ]} />
+     */
+    let {
+        items,
+        direction = 'auto',
+    }: {
+        /** The data items to display. */
+        items: DataListItem[];
+        /** Layout direction. 'auto' switches from horizontal to vertical based on container width. */
+        direction?: 'horizontal' | 'vertical' | 'auto';
+    } = $props();
+</script>
+
+<div class="DataList">
+    <dl class={direction}>
+        {#each items as item}
+            <div>
+                <dt>{item.label}</dt>
+                <dd>
+                    {#if item.snippet}
+                        {@render item.snippet()}
+                    {:else if item.render}
+                        {@render item.render()}
+                    {:else if item.component}
+                        <item.component />
+                    {:else if item.value}
+                        {item.value}
+                    {/if}
+                </dd>
+            </div>
+        {/each}
+    </dl>
+</div>
+
+<style>
+    .DataList {
+        container-type: inline-size;
+    }
+
+    dl {
+        margin: 0;
+        padding: 0;
+    }
+
+    dt {
+        color: var(--text-color-p-subtle);
+    }
+
+    dd {
+        margin: 0;
+        color: var(--text-color-p);
+    }
+
+    /**
+     * Horizontal layout: two-column grid with subgrid for aligned labels
+     */
+    dl.horizontal,
+    dl.auto {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: var(--data-list-gap);
+    }
+
+    dl.horizontal > div,
+    dl.auto > div {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+        align-items: baseline;
+    }
+
+    /**
+     * Vertical layout: stacked label over value
+     */
+    dl.vertical {
+        display: flex;
+        flex-direction: column;
+        gap: var(--data-list-gap);
+    }
+
+    /**
+     * Auto: switch to vertical when the container is narrow
+     */
+    @container (max-width: 300px) {
+        dl.auto {
+            display: flex;
+            flex-direction: column;
+        }
+
+        dl.auto > div {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+</style>

package/dist/components/DataList.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { DataListItem } from "./DataListTypes.js";
+type $$ComponentProps = {
+    /** The data items to display. */
+    items: DataListItem[];
+    /** Layout direction. 'auto' switches from horizontal to vertical based on container width. */
+    direction?: 'horizontal' | 'vertical' | 'auto';
+};
+declare const DataList: import("svelte").Component<$$ComponentProps, {}, "">;
+type DataList = ReturnType<typeof DataList>;
+export default DataList;

package/dist/components/DataListTypes.d.ts

@@ -0,0 +1,14 @@
+import type { Component, Snippet } from "svelte";
+import type { RenderFn } from "../types.js";
+export type DataListItem = {
+    /** Text label for the item (e.g. "Status", "Email") */
+    label: string;
+    /** Text value to display */
+    value?: string;
+    /** Snippet to render as the value */
+    snippet?: Snippet;
+    /** Render function for the value (works in object literals) */
+    render?: RenderFn;
+    /** Component to render as the value */
+    component?: Component;
+};

package/dist/components/DataListTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Popover.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import { BROWSER } from "esm-env";
+	import UIContent from "./UIContent.svelte";
 
 	/**
 	 * @description
@@ -207,7 +208,9 @@
 	class:unstyled
 	style={popoverStyle}
 >
-	{@render children()}
+	<UIContent>
+		{@render children()}
+	</UIContent>
 </div>
 
 <style>

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export { default as AspectRatio } from './AspectRatio.svelte';
 export { default as Avatar } from './Avatar.svelte';
 export { default as Close } from './Close.svelte';
 export { default as ContextTip } from './ContextTip.svelte';
+export { default as DataList } from './DataList.svelte';
 export { default as Dialog } from './Dialog.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as IconButton } from './IconButton.svelte';
@@ -22,6 +23,7 @@ export { default as Toast } from './Toast.svelte';
 export { default as ToastContainer } from './ToastContainer.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as UIContent } from './UIContent.svelte';
+export * from './DataListTypes.js';
 export * from './MenuTypes.js';
 export * from './ModalTypes.js';
 export * from './toasts.svelte.js';

package/dist/components/index.js

@@ -2,6 +2,7 @@ export { default as AspectRatio } from './AspectRatio.svelte';
 export { default as Avatar } from './Avatar.svelte';
 export { default as Close } from './Close.svelte';
 export { default as ContextTip } from './ContextTip.svelte';
+export { default as DataList } from './DataList.svelte';
 export { default as Dialog } from './Dialog.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as IconButton } from './IconButton.svelte';
@@ -23,6 +24,7 @@ export { default as ToastContainer } from './ToastContainer.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as UIContent } from './UIContent.svelte';
 // Types and APIs
+export * from './DataListTypes.js';
 export * from './MenuTypes.js';
 export * from './ModalTypes.js';
 export * from './toasts.svelte.js';

package/dist/css/1-props.css

@@ -196,50 +196,51 @@
 @property --field-background-interest  { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
 @property --field-background-loading   { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
 
-@property --field-border-color          { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --field-border-color-active    { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-border-color-inactive  { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --field-border-color-disabled  { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --field-border-color-focus     { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-border-color-invalid   { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --field-border-color-valid     { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --field-border-color-success   { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --field-border-color-danger    { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --field-border-color-warn      { syntax: "*"; inherits: true; initial-value: #ca8a04; }
-@property --field-border-color-info      { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-border-color-selected  { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-border-color-interest  { syntax: "*"; inherits: true; initial-value: #7c3aed; }
-@property --field-border-color-loading   { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --field-border-color          { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --field-border-color-active    { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-inactive  { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --field-border-color-disabled  { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --field-border-color-focus     { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-invalid   { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --field-border-color-valid     { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --field-border-color-success   { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --field-border-color-danger    { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --field-border-color-warn      { syntax: "<color>"; inherits: true; initial-value: #ca8a04; }
+@property --field-border-color-info      { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-selected  { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-interest  { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
+@property --field-border-color-loading   { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
 
 @property --field-border-size          { syntax: "<length>"; inherits: true; initial-value: 1px; }
 @property --field-border-style         { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
 @property --field-border-radius        { syntax: "<length>"; inherits: true; initial-value: 8px; }
 
-@property --field-color                { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
-@property --field-color-active         { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-color-inactive       { syntax: "*"; inherits: true; initial-value: #666666; }
-@property --field-color-disabled       { syntax: "*"; inherits: true; initial-value: #cccccc; }
-@property --field-color-focus          { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-color-invalid        { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --field-color-valid          { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --field-color-success        { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --field-color-danger         { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --field-color-warn           { syntax: "*"; inherits: true; initial-value: #ca8a04; }
-@property --field-color-info           { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-color-selected       { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-color-interest       { syntax: "*"; inherits: true; initial-value: #7c3aed; }
-@property --field-color-loading        { syntax: "*"; inherits: true; initial-value: #7c3aed; }
-
-@property --field-label-color          { syntax: "*"; inherits: true; initial-value: #111111; }
+@property --field-color                { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
+@property --field-color-active         { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-color-inactive       { syntax: "<color>"; inherits: true; initial-value: #666666; }
+@property --field-color-disabled       { syntax: "<color>"; inherits: true; initial-value: #cccccc; }
+@property --field-color-focus          { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-color-invalid        { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --field-color-valid          { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --field-color-success        { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --field-color-danger         { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --field-color-warn           { syntax: "<color>"; inherits: true; initial-value: #ca8a04; }
+@property --field-color-info           { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-color-selected       { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-color-interest       { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
+@property --field-color-loading        { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
+
+@property --field-label-color          { syntax: "<color>"; inherits: true; initial-value: #111111; }
 @property --field-label-font-size      { syntax: "<length>"; inherits: true; initial-value: 16px; }
 @property --field-label-font-weight    { syntax: "<number>"; inherits: true; initial-value: 600; }
 
-@property --field-placeholder-color    { syntax: "*"; inherits: true; initial-value: #999999; }
+@property --field-placeholder-color    { syntax: "<color>"; inherits: true; initial-value: #999999; }
 @property --field-padding-inline       { syntax: "<length>"; inherits: true; initial-value: 8px; }
 @property --field-padding-block        { syntax: "<length>"; inherits: true; initial-value: 8px; }
 
 @property --field-icon-size            { syntax: "<length>"; inherits: true; initial-value: 24px; }
 @property --field-icon-order           { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --field-group-gap            { syntax: "<length>"; inherits: true; initial-value: 8px; }
 
 /**
  * Checkbox and Radio
@@ -249,93 +250,107 @@
 @property --checkbox-border-radius { syntax: "<length>"; inherits: true; initial-value: 4px; }
 @property --checkbox-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 @property --checkbox-background-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
-@property --checkbox-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --checkbox-border-color-checked { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --checkbox-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --checkbox-border-color-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
 @property --checkbox-indicator-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 
+/**
+ * Toggle
+ */
+
+@property --toggle-width { syntax: "<length>"; inherits: true; initial-value: 44px; }
+@property --toggle-height { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --toggle-background { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --toggle-background-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --toggle-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --toggle-border-color-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --toggle-thumb-size { syntax: "<length>"; inherits: true; initial-value: 18px; }
+@property --toggle-thumb-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --toggle-thumb-shadow { syntax: "*"; inherits: true; initial-value: 0 1px 3px rgba(0, 0, 0, 0.2); }
+
 /**
  * Button Component
  */
 
-@property --button-base-color { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-base-color-hover { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --button-base-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-base-color-hover { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 
 /* primary */
 
-@property --button-submit-color { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-submit-color-hover { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-submit-color-disabled { syntax: "*"; inherits: true; initial-value: #cccccc; }
-@property --button-submit-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-submit-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --button-submit-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-submit-color-hover { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-submit-color-disabled { syntax: "<color>"; inherits: true; initial-value: #cccccc; }
+@property --button-submit-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
 
-@property --button-submit-background { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-submit-background-hover { syntax: "*"; inherits: true; initial-value: #1d4ed8; }
-@property --button-submit-background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
-@property --button-submit-background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-submit-background-loading { syntax: "*"; inherits: true; initial-value: #f0f9ff; }
+@property --button-submit-background { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-background-hover { syntax: "<color>"; inherits: true; initial-value: #1d4ed8; }
+@property --button-submit-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --button-submit-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
 
-@property --button-submit-border-color { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-submit-border-color-hover { syntax: "*"; inherits: true; initial-value: #1d4ed8; }
-@property --button-submit-border-color-disabled { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --button-submit-border-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-submit-border-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --button-submit-border-color { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #1d4ed8; }
+@property --button-submit-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --button-submit-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-border-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
 
 /* action */
-@property --button-action-color { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-action-color-hover { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-action-color-disabled { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-action-color-focus { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-action-color-loading { syntax: "*"; inherits: true; initial-value: #ffffff; }
-
-@property --button-action-background { syntax: "*"; inherits: true; initial-value: #111111; }
-@property --button-action-background-hover { syntax: "*"; inherits: true; initial-value: #111111; }
-@property --button-action-background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
-@property --button-action-background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-action-background-loading { syntax: "*"; inherits: true; initial-value: #f0f9ff; }
-
-@property --button-action-border-color { syntax: "*"; inherits: true; initial-value: #111111; }
-@property --button-action-border-color-hover { syntax: "*"; inherits: true; initial-value: #111111; }
-@property --button-action-border-color-disabled { syntax: "*"; inherits: true; initial-value: #111111; }
-@property --button-action-border-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-action-border-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --button-action-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-hover { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-disabled { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-focus { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-loading { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+
+@property --button-action-background { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-background-hover { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --button-action-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-action-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
+
+@property --button-action-border-color { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-action-border-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
 
 /* danger */
-@property --button-danger-color { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-color-hover { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-color-disabled { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-color-focus { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-color-loading { syntax: "*"; inherits: true; initial-value: #dc2626; }
-
-@property --button-danger-background { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-background-hover { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
-@property --button-danger-background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-danger-background-loading { syntax: "*"; inherits: true; initial-value: #f0f9ff; }
-
-@property --button-danger-border-color { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-border-color-hover { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-border-color-disabled { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --button-danger-border-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-danger-border-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --button-danger-color { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-hover { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-disabled { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-focus { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-loading { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+
+@property --button-danger-background { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-background-hover { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --button-danger-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-danger-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
+
+@property --button-danger-border-color { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --button-danger-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-danger-border-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
 
 /* success */
-@property --button-success-color { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-color-hover { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-color-disabled { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-color-focus { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-color-loading { syntax: "*"; inherits: true; initial-value: #16a34a; }
-
-@property --button-success-background { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-background-hover { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
-@property --button-success-background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-success-background-loading { syntax: "*"; inherits: true; initial-value: #f0f9ff; }
-
-@property --button-success-border-color { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-border-color-hover { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-border-color-disabled { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --button-success-border-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-success-border-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --button-success-color { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-hover { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-disabled { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-focus { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-loading { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+
+@property --button-success-background { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-background-hover { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --button-success-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-success-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
+
+@property --button-success-border-color { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --button-success-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-success-border-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
 
 @property --button-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
 @property --button-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
@@ -343,7 +358,7 @@
 
 @property --button-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
 @property --button-padding-block { syntax: "<length>"; inherits: true; initial-value: 8px; }
-@property --button-padding { syntax: "*"; inherits: true; initial-value: 8px; }
+@property --button-padding { syntax: "<length>"; inherits: true; initial-value: 8px; }
 @property --button-border { syntax: "*"; inherits: true; initial-value: none; }
 
 @property --button-font-weight { syntax: "<number>"; inherits: true; initial-value: 500; }
@@ -355,16 +370,16 @@
  * Shadows
  */
 
-@property --shadow-color { syntax: "*"; inherits: true; initial-value: rgba(0, 0, 0, 0.1); }
+@property --shadow-color { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.1); }
 @property --shadow-base { syntax: "*"; inherits: true; initial-value: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
 
 /**
  * Code
  */
 
-@property --code-background { syntax: "*"; inherits: true; initial-value: #f8fafc; }
-@property --code-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
-@property --code-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --code-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
+@property --code-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
+@property --code-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
 @property --code-border-size { syntax: "<length>"; inherits: true; initial-value: 0; }
 @property --code-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
 @property --code-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
@@ -376,18 +391,18 @@
  * Backgrounds
  */
 
-@property --background-body { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --background-main { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --background-main-subtle { syntax: "*"; inherits: true; initial-value: #f8fafc; }
-
-@property --background-active { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --background-inactive { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
-@property --background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
-@property --background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --background-invalid { syntax: "*"; inherits: true; initial-value: #fef2f2; }
-@property --background-valid { syntax: "*"; inherits: true; initial-value: #dcfce7; }
-@property --background-success { syntax: "*"; inherits: true; initial-value: #dcfce7; }
-@property --background-danger { syntax: "*"; inherits: true; initial-value: #fef2f2; }
+@property --background-body { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --background-main { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --background-main-subtle { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
+
+@property --background-active { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --background-inactive { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --background-invalid { syntax: "<color>"; inherits: true; initial-value: #fef2f2; }
+@property --background-valid { syntax: "<color>"; inherits: true; initial-value: #dcfce7; }
+@property --background-success { syntax: "<color>"; inherits: true; initial-value: #dcfce7; }
+@property --background-danger { syntax: "<color>"; inherits: true; initial-value: #fef2f2; }
 @property --background-warn { syntax: "<color>"; inherits: true; initial-value: #fefce8; }
 @property --background-info { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
 @property --background-selected { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
@@ -417,8 +432,8 @@
 
 @property --focus-ring { syntax: "*"; inherits: true; initial-value: 2px solid #2563eb; }
 @property --focus-ring-size { syntax: "<length>"; inherits: true; initial-value: 2px; }
-@property --focus-ring-color { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --focus-ring-color-invalid { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --focus-ring-color { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --focus-ring-color-invalid { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
 @property --focus-ring-offset { syntax: "<length>"; inherits: true; initial-value: 0px; }
 
 /**
@@ -435,7 +450,7 @@
  */
 
 @property --tooltip-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
-@property --tooltip-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --tooltip-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
 @property --tooltip-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
 @property --tooltip-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
 @property --tooltip-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 8px rgba(0, 0, 0, 0.15); }
@@ -485,21 +500,27 @@
 @property --table-cell-padding-block { syntax: "<length>"; inherits: true; initial-value: 8px; }
 
 @property --table-header-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
-@property --table-header-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --table-header-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
 @property --table-header-font-weight { syntax: "<number>"; inherits: true; initial-value: 600; }
 
 @property --table-row-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
 @property --table-row-background-even { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
 @property --table-row-background-hover { syntax: "<color>"; inherits: true; initial-value: #f1f5f9; }
 
-@property --table-cell-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --table-cell-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
+
+/**
+ * Data List
+ */
+
+@property --data-list-gap { syntax: "<length>"; inherits: true; initial-value: 12px; }
 
 /**
  * Modal
  */
 
 @property --modal-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
-@property --modal-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --modal-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
 @property --modal-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
 @property --modal-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
 @property --modal-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
@@ -509,12 +530,12 @@
 @property --modal-padding-block { syntax: "<length>"; inherits: true; initial-value: 24px; }
 @property --modal-width { syntax: "*"; inherits: true; initial-value: fit-content; }
 @property --modal-min-width { syntax: "*"; inherits: true; initial-value: auto; }
-@property --modal-max-width { syntax: "*"; inherits: true; initial-value: 640px; }
-@property --modal-max-height { syntax: "*"; inherits: true; initial-value: 600px; }
+@property --modal-max-width { syntax: "<length>"; inherits: true; initial-value: 640px; }
+@property --modal-max-height { syntax: "<length>"; inherits: true; initial-value: 600px; }
 @property --modal-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
 
 @property --modal-actions-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
-@property --modal-actions-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --modal-actions-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
 @property --modal-actions-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
 @property --modal-actions-padding-block { syntax: "<length>"; inherits: true; initial-value: 16px; }
 

package/dist/css/2-init.css

@@ -106,7 +106,7 @@
     --link-color-disabled: #cccccc;
     --link-color-loading: #7c3aed;
 
-    --link-icon-size: 24px;
+    --link-icon-size: 1.5em;
     --link-icon-order: 1;
 
     /* Borders */
@@ -210,25 +210,38 @@
     --field-label-font-weight: 600;
 
     --field-placeholder-color: #999999;
-    --field-padding-inline: 8px;
-    --field-padding-block: 8px;
+    --field-padding-inline: 0.5em;
+    --field-padding-block: 0.5em;
 
-    --field-icon-size: 24px;
+    --field-icon-size: 1.5em;
     --field-icon-order: 1;
+    --field-group-gap: var(--space-xs);
 
     /* Shorthand compound: field */
     --field-padding: var(--field-padding-block) var(--field-padding-inline);
     --field-border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
 
     /* Checkbox and Radio */
-    --checkbox-size: 18px;
-    --checkbox-border-radius: 4px;
+    --checkbox-size: 1.125em;
+    --checkbox-border-radius: 0.25em;
     --checkbox-background: #ffffff;
     --checkbox-background-checked: #2563eb;
     --checkbox-border-color: #d1d5db;
     --checkbox-border-color-checked: #2563eb;
     --checkbox-indicator-color: #ffffff;
 
+    /* Toggle */
+    --toggle-width: 2.75em;
+    --toggle-height: 1.5em;
+    --toggle-background: #d1d5db;
+    --toggle-background-checked: #2563eb;
+    --toggle-border-color: #d1d5db;
+    --toggle-border-color-checked: #2563eb;
+    --toggle-thumb-size: 1.125em;
+    --toggle-thumb-color: #ffffff;
+    --toggle-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    --toggle-thumb-offset: calc((var(--toggle-height) - var(--toggle-thumb-size)) / 2 - var(--field-border-size));
+
     /* Button Component */
     --button-base-color: #ffffff;
     --button-base-color-hover: #ffffff;
@@ -314,8 +327,8 @@
     --button-border-radius: var(--border-radius-base);
     --button-border-color: var(--border-color);
 
-    --button-padding-inline: 16px;
-    --button-padding-block: 8px;
+    --button-padding-inline: 1em;
+    --button-padding-block: 0.5em;
 
     --button-font-weight: 500;
 
@@ -341,10 +354,10 @@
     --code-border-color: #d1d5db;
     --code-border-size: 0;
     --code-border-style: solid;
-    --code-border-radius: 8px;
+    --code-border-radius: 0.5em;
 
-    --code-padding-inline: 16px;
-    --code-padding-block: 8px;
+    --code-padding-inline: 1em;
+    --code-padding-block: 0.5em;
 
     /* Backgrounds */
     --background-body: #ffffff;
@@ -402,7 +415,7 @@
     /* Toast */
     --toast-background: #ffffff;
     --toast-border: 1px solid #d1d5db;
-    --toast-border-radius: 8px;
+    --toast-border-radius: 0.5em;
     --toast-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     --toast-padding-inline: 1rem;
     --toast-padding-block: 0.75rem;
@@ -423,16 +436,16 @@
     --menu-border-color: #cccccc;
     --menu-border-size: 1px;
     --menu-border-style: solid;
-    --menu-border-radius: 8px;
+    --menu-border-radius: 0.5em;
 
     /* Table */
     --table-border-color: #d1d5db;
     --table-border-size: 1px;
     --table-border-style: solid;
-    --table-border-radius: 8px;
+    --table-border-radius: 0.5em;
 
-    --table-cell-padding-inline: 12px;
-    --table-cell-padding-block: 8px;
+    --table-cell-padding-inline: 0.75em;
+    --table-cell-padding-block: 0.5em;
 
     --table-header-background: #f8fafc;
     --table-header-color: #1a1a1a;
@@ -448,16 +461,19 @@
     --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);
 
+    /* Data List */
+    --data-list-gap: var(--space-sm);
+
     /* Modal */
     --modal-background: #ffffff;
     --modal-border-color: #d1d5db;
     --modal-border-size: 1px;
     --modal-border-style: solid;
-    --modal-border-radius: 8px;
+    --modal-border-radius: 0.5em;
     --modal-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 
-    --modal-padding-inline: 24px;
-    --modal-padding-block: 24px;
+    --modal-padding-inline: 1.5em;
+    --modal-padding-block: 1.5em;
     --modal-width: fit-content;
     --modal-min-width: auto;
     --modal-max-width: 40rem;
@@ -466,8 +482,8 @@
 
     --modal-actions-background: #f8fafc;
     --modal-actions-border-color: #d1d5db;
-    --modal-actions-padding-inline: 16px;
-    --modal-actions-padding-block: 16px;
+    --modal-actions-padding-inline: 1em;
+    --modal-actions-padding-block: 1em;
 
     /* Shorthand compound: modal */
     --modal-border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
@@ -477,13 +493,13 @@
     /* Shared Surface System */
     --surface-background: #ffffff;
     --surface-border: 1px solid #d1d5db;
-    --surface-border-radius: 8px;
+    --surface-border-radius: 0.5em;
     --surface-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 
     /* Popover Component */
     --popover-background: #ffffff;
     --popover-border: 1px solid #d1d5db;
-    --popover-border-radius: 8px;
+    --popover-border-radius: 0.5em;
     --popover-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     --popover-width: max-content;
     --popover-max-width: calc(100vw - 2rem);

package/dist/css/themes/DefaultTheme.css

@@ -172,6 +172,16 @@
         --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: var(--background-body);

package/dist/form/FieldContent.svelte

@@ -179,9 +179,9 @@
         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/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/Toggle.svelte

@@ -1,4 +1,166 @@
 <script lang="ts">
+	import { getContext, onMount, type Snippet } from "svelte";
+	import type { LutraForm } from "./types.js";
+	import { fieldChange } from "./client.svelte.js";
+	import FieldContent from "./FieldContent.svelte";
+	import { getFromObjWithStringPath } from "./form.js";
+	import { ZodType } from "zod";
 
+    /**
+     * @description
+     * A mobile-style toggle switch. Renders as `<input type="checkbox" role="switch">`
+     * for full accessibility. Integrates with the Lutra form system for validation,
+     * error display and field state tracking.
+     *
+     * @example
+     * <Toggle name="notifications" label="Enable notifications" />
+     * <Toggle name="darkMode" label="Dark mode" value={true} />
+     */
+    let {
+        disabled,
+        help,
+        id = $bindable(crypto.randomUUID()),
+        label,
+        labelHelp,
+        labelTip,
+        name,
+        onblur,
+        onchange,
+        onfocus,
+        required,
+        title,
+        value = $bindable(false),
+        ...rest
+    }: {
+        /** Whether the toggle is disabled. */
+        disabled?: boolean;
+        /** Help text to display below the toggle. */
+        help?: string | Snippet;
+        /** A random id is generated if not provided. */
+        id?: string;
+        /** The label for the toggle. */
+        label?: string | Snippet;
+        /** Help text to display below the label. */
+        labelHelp?: string | Snippet;
+        /** Context tooltip for the label. Renders with a questionmark using ContextTip. */
+        labelTip?: string | Snippet;
+        /** The name of the toggle field. */
+        name: string;
+        /** The onblur event handler. */
+        onblur?: (e: FocusEvent) => void;
+        /** Onchange event handler. */
+        onchange?: (e: Event) => void;
+        /** Onfocus event handler. */
+        onfocus?: (e: FocusEvent) => void;
+        /** Whether the toggle is required. */
+        required?: boolean;
+        /** A string that defines the title of the toggle. */
+        title?: string;
+        /** The checked state of the toggle. */
+        value?: boolean;
+    } = $props();
+
+    let el: HTMLInputElement | undefined = $state();
+
+    const form = getContext<LutraForm<any>>('form');
+    const field = $derived(form?.fields[name]);
+    const issue = $derived(form?.issues?.find((issue) => issue.name === name));
+    const validator = getContext<Record<string, ZodType>>('form.validators')?.[name];
+    const data = form?.data;
+    const originalData = form?.originalData;
+
+    if(!value) value = form ? (getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) as boolean) : false;
+
+    onMount(() => {
+        if(value) fieldChange(form, name, () => el)({} as any);
+    });
 </script>
 
+<FieldContent
+    {id}
+    {label}
+    {labelHelp}
+    {labelTip}
+    contained={false}
+    direction="row"
+    {field}
+    {issue}
+    type="toggle"
+    {help}
+    {required}
+>
+    <input
+        type="checkbox"
+        role="switch"
+        class="Toggle"
+        bind:this={el}
+        {disabled}
+        {id}
+        {name}
+        {title}
+        required={required || field?.required}
+        onchange={fieldChange(form, name, () => el, validator, onchange)}
+        {onblur}
+        {onfocus}
+        bind:checked={value}
+        aria-checked={value}
+        {...rest}
+    />
+</FieldContent>
+
+<style>
+    input.Toggle {
+        appearance: none;
+        width: var(--toggle-width);
+        height: var(--toggle-height);
+        border-radius: calc(infinity * 1px);
+        background: var(--toggle-background);
+        border: var(--field-border-size) var(--field-border-style) var(--toggle-border-color);
+        cursor: pointer;
+        position: relative;
+        flex-shrink: 0;
+        padding: 0;
+        margin: 0;
+        transition:
+            background var(--transition-duration-fast) var(--transition-timing-function),
+            border-color var(--transition-duration-fast) var(--transition-timing-function);
+    }
+
+    input.Toggle::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        inset-inline-start: var(--toggle-thumb-offset);
+        width: var(--toggle-thumb-size);
+        height: var(--toggle-thumb-size);
+        border-radius: 50%;
+        background: var(--toggle-thumb-color);
+        translate: 0 -50%;
+        transition: translate var(--transition-duration-fast) var(--transition-timing-function);
+        box-shadow: var(--toggle-thumb-shadow);
+    }
+
+    input.Toggle:checked {
+        background: var(--toggle-background-checked);
+        border-color: var(--toggle-border-color-checked);
+    }
+
+    input.Toggle:checked::before {
+        translate: calc(var(--toggle-width) - var(--toggle-height)) -50%;
+    }
+
+    input.Toggle:checked::after {
+        content: none;
+        display: none;
+    }
+
+    input.Toggle:focus-visible {
+        outline: var(--focus-ring-size) solid var(--focus-ring-color);
+        outline-offset: var(--focus-ring-offset);
+    }
+
+    input.Toggle:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+</style>

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

@@ -1,18 +1,32 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Toggle = InstanceType<typeof Toggle>;
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Whether the toggle is disabled. */
+    disabled?: boolean;
+    /** Help text to display below the toggle. */
+    help?: string | Snippet;
+    /** A random id is generated if not provided. */
+    id?: string;
+    /** The label for the toggle. */
+    label?: string | Snippet;
+    /** Help text to display below the label. */
+    labelHelp?: string | Snippet;
+    /** Context tooltip for the label. Renders with a questionmark using ContextTip. */
+    labelTip?: string | Snippet;
+    /** The name of the toggle field. */
+    name: string;
+    /** The onblur event handler. */
+    onblur?: (e: FocusEvent) => void;
+    /** Onchange event handler. */
+    onchange?: (e: Event) => void;
+    /** Onfocus event handler. */
+    onfocus?: (e: FocusEvent) => void;
+    /** Whether the toggle is required. */
+    required?: boolean;
+    /** A string that defines the title of the toggle. */
+    title?: string;
+    /** The checked state of the toggle. */
+    value?: boolean;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "id" | "value">;
+type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/form/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Button } from './Button.svelte';
 export { default as FormActions } from './FormActions.svelte';
 export { default as FieldError } from './FieldError.svelte';
+export { default as FieldGroup } from './FieldGroup.svelte';
 export { default as FormSection } from './FormSection.svelte';
 export { default as Fieldset } from './Fieldset.svelte';
 export { default as Form } from './Form.svelte';

package/dist/form/index.js

@@ -1,6 +1,7 @@
 export { default as Button } from './Button.svelte';
 export { default as FormActions } from './FormActions.svelte';
 export { default as FieldError } from './FieldError.svelte';
+export { default as FieldGroup } from './FieldGroup.svelte';
 export { default as FormSection } from './FormSection.svelte';
 export { default as Fieldset } from './Fieldset.svelte';
 export { default as Form } from './Form.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.1.69",
+	"version": "0.1.70",
 	"scripts": {
 		"dev": "vite dev",
 		"bump-and-publish:patch": "pnpm version:patch && pnpm build && npm publish",