lutra 0.1.69 → 0.1.73

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/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/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/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/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,7 +1,9 @@
 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';
 export { default as Dialog } from './Dialog.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as IconButton } from './IconButton.svelte';
@@ -22,6 +24,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

@@ -1,7 +1,9 @@
 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';
 export { default as Dialog } from './Dialog.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as IconButton } from './IconButton.svelte';
@@ -23,6 +25,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';