lutra 0.1.69 → 0.1.73

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

@@ -7,7 +7,7 @@ type $$ComponentProps = {
     /** Visual style variant. */
     kind?: 'default' | 'outlined' | 'secondary' | 'warn';
     /** Size variant. */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    scale?: '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. */

package/dist/form/FieldContent.svelte

@@ -27,6 +27,7 @@
         help,
         type = "text",
         direction = 'column', // 'row' | 'column'
+        scale = 'md',
         required,
         children,
         field,
@@ -42,6 +43,8 @@
         labelTip?: string | Snippet;
         labelHelp?: string | Snippet;
         direction?: 'row' | 'column';
+        /** Size variant controlling font-size. Em-based tokens cascade automatically. */
+        scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         required?: boolean;
         children: Snippet;
         field?: FormField;
@@ -63,7 +66,7 @@
     </div>
 {/snippet}
 
-<div class="FieldContentContainer">
+<div class="FieldContentContainer {scale}">
     <div class="FieldContent {type} {direction}" class:contained>
         <Label {label} tip={labelTip} help={labelHelp} {id} {required} />
         {#if contained}
@@ -179,9 +182,14 @@
         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);
     }
+
+    .FieldContentContainer.xs { font-size: var(--font-size-xs); }
+    .FieldContentContainer.sm { font-size: var(--font-size-sm); }
+    .FieldContentContainer.lg { font-size: var(--font-size-h5); }
+    .FieldContentContainer.xl { font-size: var(--font-size-h4); }
 </style>

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

@@ -11,6 +11,8 @@ type $$ComponentProps = {
     labelTip?: string | Snippet;
     labelHelp?: string | Snippet;
     direction?: 'row' | 'column';
+    /** Size variant controlling font-size. Em-based tokens cascade automatically. */
+    scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     required?: boolean;
     children: Snippet;
     field?: FormField;

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

@@ -69,6 +69,7 @@
         readonly,
         required,
         shape = 'rounded',
+        scale = 'md',
         size,
         src,
         step,
@@ -162,6 +163,8 @@
         required?: boolean;
         /** The shape of the input element. */
         shape?: 'default' | 'rounded' | 'pill' | 'circle';
+        /** Size variant controlling font-size. Em-based tokens cascade automatically. */
+        scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         /** The size of the input element. */
         size?: number;
         /** Source URL for the image type. */
@@ -350,6 +353,7 @@
         {prefix}
         {suffix}
         {required}
+        {scale}
     >
 
         {#if type === "checkbox" || type === "radio"}

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

@@ -83,6 +83,8 @@ type $$ComponentProps = {
     required?: boolean;
     /** The shape of the input element. */
     shape?: 'default' | 'rounded' | 'pill' | 'circle';
+    /** Size variant controlling font-size. Em-based tokens cascade automatically. */
+    scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /** The size of the input element. */
     size?: number;
     /** Source URL for the image type. */

package/dist/form/SegmentedControl.svelte

@@ -0,0 +1,273 @@
+<script lang="ts">
+	import { getContext, onMount, type Snippet } from "svelte";
+	import { BROWSER } from "esm-env";
+	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";
+	import type { SegmentedControlOption } from "./SegmentedControlTypes.js";
+
+	/**
+	 * @description
+	 * A segmented control that functions as a styled radio group. Works both as a
+	 * standalone control (with `onchange` callback and bindable `value`) and as a
+	 * form-integrated field via the Lutra form system.
+	 *
+	 * Options can be passed as `string[]` (each string used as both label and value)
+	 * or as `SegmentedControlOption[]` for more control.
+	 *
+	 * @cssprop --segmented-background - Track background. (Default: var(--tab-background-color, var(--menu-background-color)))
+	 * @cssprop --segmented-background-active - Selected segment background. (Default: var(--tab-background-color-active, var(--background-selected)))
+	 * @cssprop --segmented-text-color - Text color. (Default: var(--tab-text-color, var(--menu-text-color)))
+	 * @cssprop --segmented-text-color-active - Selected text color. (Default: var(--tab-text-color-active, var(--text-color-heading)))
+	 * @cssprop --segmented-border-size - Border width. (Default: var(--tab-border-size, var(--menu-border-size)))
+	 * @cssprop --segmented-border-style - Border style. (Default: var(--tab-border-style, var(--menu-border-style)))
+	 * @cssprop --segmented-border-color - Border color. (Default: var(--tab-border-color, var(--menu-border-color)))
+	 * @cssprop --segmented-border-radius - Border radius. (Default: var(--tab-border-radius, var(--menu-border-radius)))
+	 *
+	 * @example
+	 * <SegmentedControl name="view" options={['List', 'Grid', 'Board']} />
+	 * <SegmentedControl name="tab" options={[{ label: 'Inbox', value: 'inbox' }, { label: 'Sent', value: 'sent' }]} />
+	 */
+	let {
+		disabled,
+		help,
+		id = $bindable(crypto.randomUUID()),
+		label,
+		labelHelp,
+		labelTip,
+		name,
+		onchange,
+		options,
+		required,
+		shape = "rounded",
+		scale = "md",
+		value = $bindable(""),
+	}: {
+		/** Whether the entire control is disabled. */
+		disabled?: boolean;
+		/** Help text to display below the control. */
+		help?: string | Snippet;
+		/** A random id is generated if not provided. */
+		id?: string;
+		/** The label for the control. */
+		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 field (used as the radio group name). */
+		name: string;
+		/** Change event handler. */
+		onchange?: (e: Event) => void;
+		/** Segment options. Accepts `string[]` or `SegmentedControlOption[]`. */
+		options: string[] | SegmentedControlOption[];
+		/** Whether the field is required. */
+		required?: boolean;
+		/** The shape of the control. */
+		shape?: "rounded" | "pill" | "rectangle";
+		/** Size variant controlling padding and font-size. */
+		scale?: "xs" | "sm" | "md" | "lg" | "xl";
+		/** The currently selected value (bindable). */
+		value?: string;
+	} = $props();
+
+	/** Normalise string[] options into SegmentedControlOption[]. */
+	const normalised = $derived(
+		options.map((o): SegmentedControlOption =>
+			typeof o === "string" ? { label: o, value: o } : o
+		)
+	);
+
+	let els: HTMLInputElement[] = $state([]);
+	let segmentEls: HTMLLabelElement[] = $state([]);
+	let loaded = $state(false);
+
+	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) {
+		const formValue = form
+			? (getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) as string)
+			: undefined;
+		if (formValue) value = formValue;
+		else if (normalised.length) value = normalised[0].value;
+	}
+
+	const selectedIndex = $derived(
+		normalised.findIndex((o) => o.value === value)
+	);
+
+	const indicatorStyle = $derived.by(() => {
+		if (!BROWSER || !loaded || selectedIndex < 0) return "opacity: 0;";
+		const el = segmentEls[selectedIndex];
+		if (!el) return "opacity: 0;";
+		return `opacity: 1; width: ${el.offsetWidth}px; translate: ${el.offsetLeft}px 0;`;
+	});
+
+	onMount(async () => {
+		if (value) {
+			const checkedEl = els.find((el) => el?.value === value);
+			if (checkedEl) fieldChange(form, name, () => checkedEl)({} as any);
+		}
+		await new Promise((resolve) => setTimeout(resolve, 50));
+		loaded = true;
+	});
+
+	function handleChange(e: Event, index: number) {
+		fieldChange(form, name, () => els[index], validator, onchange)(e);
+	}
+</script>
+
+<FieldContent
+	{id}
+	{label}
+	{labelHelp}
+	{labelTip}
+	contained={false}
+	{field}
+	{issue}
+	type="segmented"
+	{help}
+	{required}
+>
+	<div class="SegmentedControl {shape} {scale}" role="radiogroup">
+		{#each normalised as option, i}
+			<label
+				bind:this={segmentEls[i]}
+				class="Segment"
+				class:selected={value === option.value}
+				class:disabled={disabled || option.disabled}
+			>
+				<input
+					type="radio"
+					bind:this={els[i]}
+					{name}
+					value={option.value}
+					disabled={disabled || option.disabled}
+					required={i === 0 ? (required || field?.required) : undefined}
+					bind:group={value}
+					onchange={(e) => handleChange(e, i)}
+				/>
+				{option.label}
+			</label>
+		{/each}
+		<div class="Indicator" style={indicatorStyle}></div>
+	</div>
+</FieldContent>
+
+<svelte:window onresize={() => { loaded = false; loaded = true; }} />
+
+<style>
+	.SegmentedControl {
+		position: relative;
+		display: inline-flex;
+		background: var(--segmented-background, var(--tab-background-color, var(--menu-background-color)));
+		border: var(--segmented-border-size, var(--tab-border-size, var(--menu-border-size)))
+			var(--segmented-border-style, var(--tab-border-style, var(--menu-border-style)))
+			var(--segmented-border-color, var(--tab-border-color, var(--menu-border-color)));
+		border-radius: var(--segmented-border-radius, var(--tab-border-radius, var(--menu-border-radius)));
+		overflow: clip;
+	}
+
+	.SegmentedControl.pill {
+		border-radius: calc(infinity * 1px);
+	}
+
+	.SegmentedControl.rectangle {
+		border-radius: 0;
+	}
+
+	.Segment {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: inherit;
+		cursor: pointer;
+		color: var(--segmented-text-color, var(--tab-text-color, var(--menu-text-color)));
+		font-weight: var(--font-weight-medium);
+		letter-spacing: var(--tab-letter-spacing, -0.05ch);
+		user-select: none;
+		transition: color var(--transition-duration-fast) var(--transition-timing-function);
+	}
+
+	.Segment:hover:not(.disabled):not(.selected) {
+		background: var(--tab-background-color-hover, var(--menu-background-color-hover));
+	}
+
+	.Segment.selected {
+		color: var(--segmented-text-color-active, var(--tab-text-color-active, var(--text-color-heading)));
+	}
+
+	.Segment.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.Segment:has(input:focus-visible) {
+		outline: var(--focus-ring-size) solid var(--focus-ring-color);
+		outline-offset: calc(-1 * var(--focus-ring-size));
+		z-index: 2;
+	}
+
+	.Segment input {
+		position: absolute;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.Indicator {
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: 0;
+		background: var(--segmented-background-active, var(--tab-background-color-active, var(--background-selected)));
+		border-radius: inherit;
+		transition:
+			translate var(--transition-duration-fast) ease-out,
+			width var(--transition-duration-fast) ease-out;
+		opacity: 0;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.Indicator {
+			transition: none;
+		}
+	}
+
+	/* Size: xs */
+	.SegmentedControl.xs .Segment {
+		padding: 0.125em 0.375em;
+		font-size: var(--font-size-xs);
+	}
+
+	/* Size: sm */
+	.SegmentedControl.sm .Segment {
+		padding: var(--space-xxs) var(--space-sm);
+		font-size: var(--font-size-sm);
+	}
+
+	/* Size: md */
+	.SegmentedControl.md .Segment {
+		padding: var(--space-xs) var(--space-md);
+		font-size: var(--font-size-sm);
+	}
+
+	/* Size: lg */
+	.SegmentedControl.lg .Segment {
+		padding: var(--space-sm) var(--space-lg);
+		font-size: 1em;
+	}
+
+	/* Size: xl */
+	.SegmentedControl.xl .Segment {
+		padding: var(--space-md) var(--space-xl);
+		font-size: var(--font-size-h5);
+	}
+</style>

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

@@ -0,0 +1,33 @@
+import { type Snippet } from "svelte";
+import type { SegmentedControlOption } from "./SegmentedControlTypes.js";
+type $$ComponentProps = {
+    /** Whether the entire control is disabled. */
+    disabled?: boolean;
+    /** Help text to display below the control. */
+    help?: string | Snippet;
+    /** A random id is generated if not provided. */
+    id?: string;
+    /** The label for the control. */
+    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 field (used as the radio group name). */
+    name: string;
+    /** Change event handler. */
+    onchange?: (e: Event) => void;
+    /** Segment options. Accepts `string[]` or `SegmentedControlOption[]`. */
+    options: string[] | SegmentedControlOption[];
+    /** Whether the field is required. */
+    required?: boolean;
+    /** The shape of the control. */
+    shape?: "rounded" | "pill" | "rectangle";
+    /** Size variant controlling padding and font-size. */
+    scale?: "xs" | "sm" | "md" | "lg" | "xl";
+    /** The currently selected value (bindable). */
+    value?: string;
+};
+declare const SegmentedControl: import("svelte").Component<$$ComponentProps, {}, "id" | "value">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;

package/dist/form/SegmentedControlTypes.d.ts

@@ -0,0 +1,8 @@
+export type SegmentedControlOption = {
+    /** Display label for the segment. */
+    label: string;
+    /** Value submitted when this segment is selected. */
+    value: string;
+    /** Whether this individual segment is disabled. */
+    disabled?: boolean;
+};

package/dist/form/SegmentedControlTypes.js

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

package/dist/form/Select.svelte

@@ -40,6 +40,7 @@
         required,
         results,
         shape = 'default',
+        scale = 'md',
         tabindex,
         value = $bindable(),
     }: {
@@ -87,6 +88,8 @@
         results?: number;
         /** The shape of the input element. */
         shape?: 'default' | 'rounded' | 'pill' | 'circle';
+        /** Size variant controlling font-size. Em-based tokens cascade automatically. */
+        scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         /** Source URL for the image type. */
         src?: string;
         /** An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. */
@@ -120,6 +123,7 @@
     {field}
     {issue}
     {required}
+    {scale}
     contained
 >
     <div class="SelectContainer">

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

@@ -47,6 +47,8 @@ type $$ComponentProps = {
     results?: number;
     /** The shape of the input element. */
     shape?: 'default' | 'rounded' | 'pill' | 'circle';
+    /** Size variant controlling font-size. Em-based tokens cascade automatically. */
+    scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /** Source URL for the image type. */
     src?: string;
     /** An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. */

package/dist/form/Textarea.svelte

@@ -55,6 +55,7 @@
         required,
         resize,
         shape = 'rounded',
+        scale = 'md',
         step,
         style,
         tabindex,
@@ -138,6 +139,8 @@
         resize?: boolean | 'both' | 'horizontal' | 'vertical' | 'none';
         /** The shape of the input element. */
         shape?: 'default' | 'rounded' | 'pill' | 'circle';
+        /** Size variant controlling font-size. Em-based tokens cascade automatically. */
+        scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         /** Spellcheck the input. */
         spellcheck?: boolean;
         /** A number that specifies the granularity that the value must adhere to. Valid for date, month, week, time, datetime-local, number, and range. */
@@ -221,6 +224,7 @@
     {help}
     {suffix}
     {required}
+    {scale}
 >
     <textarea 
         class="{resizeClass}"

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

@@ -77,6 +77,8 @@ type $$ComponentProps = {
     resize?: boolean | 'both' | 'horizontal' | 'vertical' | 'none';
     /** The shape of the input element. */
     shape?: 'default' | 'rounded' | 'pill' | 'circle';
+    /** Size variant controlling font-size. Em-based tokens cascade automatically. */
+    scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /** Spellcheck the input. */
     spellcheck?: boolean;
     /** A number that specifies the granularity that the value must adhere to. Valid for date, month, week, time, datetime-local, number, and range. */