lutra 0.1.70 → 0.1.74

package/dist/components/Callout.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { Component, Snippet } from "svelte";
+	import Icon from "./Icon.svelte";
+
+	/**
+	 * @description
+	 * A styled callout/banner for inline notices and announcements.
+	 * Renders children as content with an optional leading icon.
+	 * Visual appearance is customisable via CSS custom properties.
+	 *
+	 * @cssprop --callout-background - Background color of the callout. (Default: var(--theme-surface-subtle))
+	 * @cssprop --callout-text-color - Text color inside the callout. (Default: var(--text-color-p))
+	 * @cssprop --callout-link-color - Color of links inside the callout. (Default: var(--link-color))
+	 * @cssprop --callout-border-radius - Border radius of the callout. Overridden by the shape prop. (Default: var(--border-radius-sm))
+	 *
+	 * @example
+	 * <Callout icon={InfoIcon}>
+	 *   Please <a href="/upgrade">upgrade</a> to the new version.
+	 * </Callout>
+	 */
+	let {
+		icon,
+		shape = "rounded",
+		scale = "md",
+		children,
+	}: {
+		/** Icon component or string to render before the content. */
+		icon?: string | Component;
+		/** The shape of the callout. */
+		shape?: "rounded" | "pill" | "rectangle";
+		/** Size variant controlling font-size. Padding and gap scale accordingly. */
+		scale?: "xs" | "sm" | "md" | "lg" | "xl";
+		/** Callout content. */
+		children: Snippet;
+	} = $props();
+</script>
+
+<div class="Callout {shape} {scale}" role="note">
+	{#if icon}
+		<Icon {icon} />
+	{/if}
+	<div class="Content">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.Callout {
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm);
+		padding-block: var(--space-sm);
+		padding-inline: var(--space-md);
+		border-radius: var(--callout-border-radius, var(--border-radius-sm));
+		background: var(--callout-background, var(--theme-surface-subtle));
+		color: var(--callout-text-color, var(--text-color-p));
+		line-height: var(--font-line-height);
+	}
+
+	.Callout.pill {
+		border-radius: calc(infinity * 1px);
+	}
+
+	.Callout.rectangle {
+		border-radius: 0;
+	}
+
+	.Callout :global(a) {
+		color: var(--callout-link-color, var(--link-color));
+	}
+
+	.Callout :global(a:hover) {
+		color: var(--callout-link-color, var(--link-color-hover));
+	}
+
+	.Content {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.Callout.xs { font-size: var(--font-size-xs); padding: var(--space-xxs) var(--space-xs); gap: var(--space-xxs); }
+	.Callout.sm { font-size: var(--font-size-sm); padding: var(--space-xs) var(--space-sm); gap: var(--space-xs); }
+	.Callout.lg { font-size: var(--font-size-h5); padding: var(--space-md) var(--space-lg); gap: var(--space-md); }
+	.Callout.xl { font-size: var(--font-size-h4); padding: var(--space-lg) var(--space-xl); gap: var(--space-md); }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Component, Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Icon component or string to render before the content. */
+    icon?: string | Component;
+    /** The shape of the callout. */
+    shape?: "rounded" | "pill" | "rectangle";
+    /** Size variant controlling font-size. Padding and gap scale accordingly. */
+    scale?: "xs" | "sm" | "md" | "lg" | "xl";
+    /** Callout content. */
+    children: Snippet;
+};
+declare const Callout: Component<$$ComponentProps, {}, "">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

package/dist/components/IconButton.svelte

@@ -23,7 +23,8 @@
         disabled,
         children,
         onclick,
-        mask = true
+        mask = true,
+        scale = 'md'
     }: {
         /** The icon to display. */
         icon: string | Component;
@@ -34,7 +35,9 @@
         /** Whether the button is disabled. */
         disabled?: boolean,
         /** Whether to mask the content. */
-        mask?: boolean
+        mask?: boolean,
+        /** Size variant controlling font-size. Icon and padding scale automatically. */
+        scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
     } = $props();
 
 </script>
@@ -55,11 +58,11 @@
 {/snippet}
 
 {#if onclick}
-    <button type="button" {disabled} class="IconButton" {onclick}>
+    <button type="button" {disabled} class="IconButton {scale}" {onclick}>
         {@render inside()}
     </button>
 {:else}
-    <span class="IconButton">
+    <span class="IconButton {scale}">
         {@render inside()}
     </span>
 {/if}
@@ -105,4 +108,9 @@
         gap: var(--space-xs);
         align-items: center;
     }
+
+    .IconButton.xs { font-size: var(--font-size-xs); }
+    .IconButton.sm { font-size: var(--font-size-sm); }
+    .IconButton.lg { font-size: var(--font-size-h5); }
+    .IconButton.xl { font-size: var(--font-size-h4); }
 </style>

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

@@ -10,6 +10,8 @@ type $$ComponentProps = {
     disabled?: boolean;
     /** Whether to mask the content. */
     mask?: boolean;
+    /** Size variant controlling font-size. Icon and padding scale automatically. */
+    scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 };
 declare const IconButton: Component<$$ComponentProps, {}, "">;
 type IconButton = ReturnType<typeof IconButton>;

package/dist/components/Layout.svelte

@@ -12,7 +12,7 @@
 	 * Includes ToastContainer for toast notifications.
 	 */
 	let {
-		theme = lutra()?.[LutraContext.Theme]?.() ?? "system",
+		theme = lutra ? (lutra()?.[LutraContext.Theme]?.() ?? undefined) : undefined,
 		children,
 	}: { 
 		/** The theme to use. Leave empty for auto-detection. */

package/dist/components/Tabs.svelte

@@ -42,6 +42,7 @@
         underline,
         contained,
         rounded,
+        scale = 'md',
         selected = $bindable<{ label: string, href?: string, index: number } | null>(null)
     }: {
         /** Tab items to display. */
@@ -52,6 +53,8 @@
         contained?: boolean;
         /** Round the corners of the element if contained. */
         rounded?: boolean;
+        /** Size variant controlling font-size and padding. */
+        scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         /** The index of the selected tab (bindable). */
         selected?: { label: string, href?: string, index: number } | null;
     } = $props();
@@ -111,7 +114,7 @@
 
 <svelte:window onresize={() => { loaded = false; loaded = true; }} />
 
-<nav class="Tabs" {id} class:contained class:rounded>
+<nav class="Tabs {scale}" {id} class:contained class:rounded>
     <menu>
         {#each items as item, index}
             <li data-index={index} aria-current={item.active || activeIndex === index ? 'page' : undefined}>
@@ -221,4 +224,13 @@
         transition: all var(--transition-duration-fast) ease-out;
         opacity: 0;
     }
+
+    .Tabs.xs { font-size: var(--font-size-xs); }
+    .Tabs.xs :is(a, button) { padding: var(--space-xxs) var(--space-xxs); }
+    .Tabs.sm { font-size: var(--font-size-sm); }
+    .Tabs.sm :is(a, button) { padding: var(--space-xs) var(--space-xs); }
+    .Tabs.lg { font-size: 1em; }
+    .Tabs.lg :is(a, button) { padding: var(--space-md) var(--space-sm); }
+    .Tabs.xl { font-size: var(--font-size-h5); }
+    .Tabs.xl :is(a, button) { padding: var(--space-md) var(--space-md); }
 </style>

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

@@ -8,6 +8,8 @@ type $$ComponentProps = {
     contained?: boolean;
     /** Round the corners of the element if contained. */
     rounded?: boolean;
+    /** Size variant controlling font-size and padding. */
+    scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /** The index of the selected tab (bindable). */
     selected?: {
         label: string;

package/dist/components/Tag.svelte

@@ -24,6 +24,7 @@
         code,
         color = "default",
         shape = "pill",
+        scale = "md",
         onclick,
         href,
         target,
@@ -37,6 +38,8 @@
         color?: StatusColorOrString;
         /** The shape of the tag. */
         shape?: "rounded" | "pill" | "rectangle";
+        /** Size variant controlling font-size. Padding scales automatically via em units. */
+        scale?: "xs" | "sm" | "md" | "lg" | "xl";
         /** A function to run when the tag is clicked. */
         onclick?: (event: MouseEvent) => void;
         /** A URL to link to. */
@@ -84,19 +87,19 @@
 {/snippet}
 
 {#if href}
-    <a {href} {target} class:code class="Tag Link {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+'-background)'}; --textColor: {!isSet ? color : 'var(--status-'+color+'-color)'};" onclick={onclick}>
+    <a {href} {target} class:code class="Tag Link {shape} {scale}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+'-background)'}; --textColor: {!isSet ? color : 'var(--status-'+color+'-color)'};" onclick={onclick}>
         {@render _prefix()}
         {@render content()}
         {@render _suffix()}
     </a>
 {:else if onclick}
-    <button type="button" class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+'-background)'}; --textColor: {!isSet ? color : 'var(--status-'+color+'-color)'};" onclick={onclick}>
+    <button type="button" class:code class="Tag {shape} {scale}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+'-background)'}; --textColor: {!isSet ? color : 'var(--status-'+color+'-color)'};" onclick={onclick}>
         {@render _prefix()}
         {@render content()}
         {@render _suffix()}
     </button>
 {:else}
-    <span class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+'-background)'}; --textColor: {!isSet ? color : 'var(--status-'+color+'-color)'};">
+    <span class:code class="Tag {shape} {scale}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+'-background)'}; --textColor: {!isSet ? color : 'var(--status-'+color+'-color)'};">
         {@render _prefix()}
         {@render content()}
         {@render _suffix()}
@@ -157,4 +160,9 @@
             opacity: 0.65;
         }
     }
+
+    .Tag.xs { font-size: var(--font-size, 0.65em); }
+    .Tag.sm { font-size: var(--font-size, 0.75em); }
+    .Tag.lg { font-size: var(--font-size, 1em); }
+    .Tag.xl { font-size: var(--font-size, 1.15em); }
 </style>

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

@@ -7,6 +7,8 @@ type $$ComponentProps = {
     color?: StatusColorOrString;
     /** The shape of the tag. */
     shape?: "rounded" | "pill" | "rectangle";
+    /** Size variant controlling font-size. Padding scales automatically via em units. */
+    scale?: "xs" | "sm" | "md" | "lg" | "xl";
     /** A function to run when the tag is clicked. */
     onclick?: (event: MouseEvent) => void;
     /** A URL to link to. */

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export { default as AspectRatio } from './AspectRatio.svelte';
 export { default as Avatar } from './Avatar.svelte';
+export { default as Callout } from './Callout.svelte';
 export { default as Close } from './Close.svelte';
 export { default as ContextTip } from './ContextTip.svelte';
 export { default as DataList } from './DataList.svelte';

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export { default as AspectRatio } from './AspectRatio.svelte';
 export { default as Avatar } from './Avatar.svelte';
+export { default as Callout } from './Callout.svelte';
 export { default as Close } from './Close.svelte';
 export { default as ContextTip } from './ContextTip.svelte';
 export { default as DataList } from './DataList.svelte';

package/dist/css/1-props.css

@@ -122,7 +122,7 @@
 @property --link-color-disabled        { syntax: "*"; inherits: true; initial-value: #cccccc; }
 @property --link-color-loading         { syntax: "*"; inherits: true; initial-value: #7c3aed; }
 
-@property --link-icon-size             { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --link-icon-size             { syntax: "*"; inherits: true; initial-value: 24px; }
 @property --link-icon-order            { syntax: "<number>"; inherits: true; initial-value: 1; }
 
 /**
@@ -231,14 +231,14 @@
 @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-size      { syntax: "*"; inherits: true; initial-value: 16px; }
 @property --field-label-font-weight    { syntax: "<number>"; inherits: true; initial-value: 600; }
 
 @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-padding-inline       { syntax: "*"; inherits: true; initial-value: 8px; }
+@property --field-padding-block        { syntax: "*"; inherits: true; initial-value: 8px; }
 
-@property --field-icon-size            { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --field-icon-size            { syntax: "*"; 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; }
 
@@ -246,8 +246,8 @@
  * Checkbox and Radio
  */
 
-@property --checkbox-size { syntax: "<length>"; inherits: true; initial-value: 18px; }
-@property --checkbox-border-radius { syntax: "<length>"; inherits: true; initial-value: 4px; }
+@property --checkbox-size { syntax: "*"; inherits: true; initial-value: 18px; }
+@property --checkbox-border-radius { syntax: "*"; 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: "<color>"; inherits: true; initial-value: #d1d5db; }
@@ -258,13 +258,13 @@
  * Toggle
  */
 
-@property --toggle-width { syntax: "<length>"; inherits: true; initial-value: 44px; }
-@property --toggle-height { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --toggle-width { syntax: "*"; inherits: true; initial-value: 44px; }
+@property --toggle-height { syntax: "*"; 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-size { syntax: "*"; 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); }
 
@@ -356,14 +356,14 @@
 @property --button-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
 @property --button-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
 
-@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: "<length>"; inherits: true; initial-value: 8px; }
+@property --button-padding-inline { syntax: "*"; inherits: true; initial-value: 16px; }
+@property --button-padding-block { syntax: "*"; inherits: true; initial-value: 8px; }
+@property --button-padding { syntax: "*"; 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; }
 
-@property --button-icon-size { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --button-icon-size { syntax: "*"; inherits: true; initial-value: 24px; }
 @property --button-icon-order { syntax: "<number>"; inherits: true; initial-value: 1; }
 
 /**

package/dist/form/Button.svelte

@@ -18,7 +18,7 @@
         href,
         type = 'button',
         class: className,
-        size = 'md',
+        scale = 'md',
         kind = 'default',
         disabled = false,
         icon,
@@ -32,7 +32,7 @@
         /** 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. */
@@ -51,14 +51,14 @@
 </script>
 
 {#if href}
-    <a class="Button Link button {size} {kind} {className} {align}" {href} {onclick}>
+    <a class="Button Link button {scale} {kind} {className} {align}" {href} {onclick}>
         {#if icon}
             <Icon {icon} />
         {/if}
         {@render children()}
     </a>
 {:else}
-    <button class="Button button {size} {kind} {className} {align}" type={type} disabled={disabled || form?.state === 'loading'} {onclick}>
+    <button class="Button button {scale} {kind} {className} {align}" type={type} disabled={disabled || form?.state === 'loading'} {onclick}>
         {#if icon}
             <Icon {icon} />
         {/if}

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}
@@ -184,4 +187,9 @@
         color: var(--text-color-p-subtle);
         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/FormSection.svelte

@@ -80,7 +80,7 @@
     .FormSection.noTitle .FormSectionContent {
         grid-column: 1 / -1;
     }
-    @container (max-width: 800px) {
+    @container (max-width: 600px) {
         .FormSection {
             padding-block: calc(var(--fcc) * var(--form-padding-block));
             padding-inline: calc(var(--fcc) * var(--form-padding-inline));

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. */

package/dist/form/Toggle.svelte

@@ -28,6 +28,7 @@
         onchange,
         onfocus,
         required,
+        scale = 'md',
         title,
         value = $bindable(false),
         ...rest
@@ -54,6 +55,8 @@
         onfocus?: (e: FocusEvent) => void;
         /** Whether the toggle is required. */
         required?: boolean;
+        /** Size variant controlling font-size. Em-based tokens cascade automatically. */
+        scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         /** A string that defines the title of the toggle. */
         title?: string;
         /** The checked state of the toggle. */
@@ -88,6 +91,7 @@
     type="toggle"
     {help}
     {required}
+    {scale}
 >
     <input
         type="checkbox"

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

@@ -22,6 +22,8 @@ type $$ComponentProps = {
     onfocus?: (e: FocusEvent) => void;
     /** Whether the toggle is required. */
     required?: boolean;
+    /** Size variant controlling font-size. Em-based tokens cascade automatically. */
+    scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /** A string that defines the title of the toggle. */
     title?: string;
     /** The checked state of the toggle. */

package/dist/form/index.d.ts

@@ -10,9 +10,11 @@ export { default as Input } from './Input.svelte';
 export { default as InputLength } from './InputLength.svelte';
 export { default as Label } from './Label.svelte';
 export { default as LogoUpload } from './LogoUpload.svelte';
+export { default as SegmentedControl } from './SegmentedControl.svelte';
 export { default as Select } from './Select.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Toggle } from './Toggle.svelte';
+export * from './SegmentedControlTypes.js';
 export * from './types.js';
 export * from './form.js';
 export * from './client.svelte.js';

package/dist/form/index.js

@@ -10,9 +10,11 @@ export { default as Input } from './Input.svelte';
 export { default as InputLength } from './InputLength.svelte';
 export { default as Label } from './Label.svelte';
 export { default as LogoUpload } from './LogoUpload.svelte';
+export { default as SegmentedControl } from './SegmentedControl.svelte';
 export { default as Select } from './Select.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Toggle } from './Toggle.svelte';
+export * from './SegmentedControlTypes.js';
 export * from './types.js';
 export * from './form.js';
 export * from './client.svelte.js';

package/package.json

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