lutra 0.1.68 → 0.1.70

package/dist/components/Tag.svelte

@@ -7,6 +7,8 @@
      * A tag is a small piece of information that can be used to categorize or label an item. You can pick between `rounded`, `pill` or `rectangle` shapes. The font size and padding are relative to the parent element by default.
      * Changing the font size without changing the padding will cause padding to be scaled with the font size. This can be changed by setting the `--padding` CSS prop.
      * You can pass a `href` to make the tag a link, or an `onclick` function to make it a button. If you pass a `href`, you can also pass a `target` to specify the target of the link.
+     * @cssprop --prefix-padding - The padding of the prefix content. (Default: var(--space-xxs))
+     * @cssprop --suffix-padding - The padding of the suffix content. (Default: var(--space-xxs))
      * @cssprop --font-size - The font size of the tag. (Default: 1em)
      * @cssprop --font-weight - The font weight of the tag. (Default: 500)
      * @cssprop --padding - The padding of the tag. (Default: 0.25em 0.5em)
@@ -26,6 +28,8 @@
         href,
         target,
         children,
+        prefix,
+        suffix
     }: { 
         /** Use a mono-spaced font for the tag. */
         code?: boolean;
@@ -41,6 +45,10 @@
         target?: string;
         /** The content of the tag. */
         children: Snippet;
+        /** Prefix content, to display before the tag. */
+        prefix?: string | Snippet;
+        /** Suffix content, to display after the tag. */
+        suffix?: string | Snippet;
     } = $props();
     let isSet = $derived(color ? isStatusColor(color) : true);
 </script>
@@ -51,30 +59,61 @@
     </em>
 {/snippet}
 
+{#snippet _prefix()}
+    {#if prefix}
+        <span class="Prefix">
+            {#if typeof prefix === 'string'}
+                {prefix}
+            {:else}
+                {@render prefix()}
+            {/if}
+        </span>
+    {/if}
+{/snippet}
+
+{#snippet _suffix()}
+    {#if suffix}
+        <span class="Suffix">
+            {#if typeof suffix === 'string'}
+                {suffix}
+            {:else}
+                {@render suffix()}
+            {/if}
+        </span>
+    {/if}
+{/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}>
+        {@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}>
+        {@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)'};">
+        {@render _prefix()}
         {@render content()}
+        {@render _suffix()}
     </span>
 {/if}
 
 <style>
     .Tag {
         display: inline-flex;
+        align-items: center;
         padding: var(--padding, 0.5em 0.5em);
-        font-weight: var(--font-weight, 500);
+        font-weight: var(--font-weight, var(--font-weight-normal));
         background: var(--bgColor);
-        border-radius: var(--border-radius);
+        border-radius: var(--border-radius-base);
         font-size: var(--font-size, 0.85em);
         vertical-align: var(--vertical-align, baseline);
-        border: 1px solid color-mix(in srgb, var(--bgColor) 95%, var(--mix-target, black) 5%);
+        border: var(--border-size-thin) solid color-mix(in oklch, var(--bgColor) 95%, var(--mix-target, black) 5%);
     }
     .Tag.rectangle {
         border-radius: 0;
@@ -87,26 +126,27 @@
         padding: var(--padding, 0.15em 0.35em);
         font-size: 1em;
         line-height: 1em;
-        background: var(--bg, var(--bg-subtle));
-        color: var(--textColor);
-        border: var(--border, var(--border-subtle));
+        background: var(--code-background);
+        color: var(--textColor, var(--code-color));
+        border: var(--code-border-size) var(--code-border-style) var(--code-border-color);
     }
     em {
         font-style: normal;
-        left: 50%;
         text-box: trim-both cap alphabetic;
-        position: relative;
-        display: block;
-        transform: translateX(-50%);
+    }
+    .Prefix {
+        padding-inline-end: var(--prefix-padding, var(--space-xxs));
+    }
+    .Suffix {
+        padding-inline-start: var(--suffix-padding, var(--space-xxs));
     }
     a:hover, button:hover {
-        --bgColor2: color-mix(in srgb, var(--bgColor) 87%, white 13%);
-        background-color: var(--bgColor2);
+        background-color: color-mix(in oklch, var(--bgColor) 87%, white 13%);
         cursor: pointer;
     }
     @media (prefers-contrast: more) {
         .Tag {
-            border: 1px solid color-mix(in srgb, var(--bgColor) 50%, var(--mix-target, black) 50%);
+            border: var(--border-size-thin) solid color-mix(in oklch, var(--bgColor) 50%, var(--mix-target, black) 50%);
         }
         em {
             opacity: 0.99;

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

@@ -15,6 +15,10 @@ type $$ComponentProps = {
     target?: string;
     /** The content of the tag. */
     children: Snippet;
+    /** Prefix content, to display before the tag. */
+    prefix?: string | Snippet;
+    /** Suffix content, to display after the tag. */
+    suffix?: string | Snippet;
 };
 declare const Tag: import("svelte").Component<$$ComponentProps, {}, "">;
 type Tag = ReturnType<typeof Tag>;

package/dist/components/Theme.svelte

@@ -1,104 +1,131 @@
 <script lang="ts">
-	import { browser } from "$app/environment";
-    import { onMount, setContext, type Snippet } from "svelte";
-    import { defaultConfig, type LutraConfig, type LutraRootConfig } from "../config.js";
-    import { getContextItem, LutraContext, type LutraTheme } from "../types.js";
-
-    /**
-     * @description
-     * A theme component. It is used to set the theme of the app in the root of the layout. You can also use it to set the theme of a specific section of the app.
-     */
-
-    // Destructuring props with default values
-    let {
-        theme,
-        config,
-        children
-    }: {
-        /**
-         * The theme to use. Leave undefined to use the system theme.
-         */
-        theme?: LutraTheme;
-        /**
-         * Lutra config. Leave undefined to use the default config.
-         */
-        config?: LutraRootConfig;
-        children: Snippet
-    } = $props();
-
-    // Determine if this is the root theme context
-    const root = getContextItem(LutraContext.Theme) === undefined;
-
-    // Retrieve existing configuration from context if available
-    const existingConfig = getContextItem(LutraContext.Config);
-
-    let _theme = $state(theme);
-
-    // If no config is provided, use the existing one from context or default to the defaultConfig
-    if(!config) {
-        config = existingConfig || defaultConfig;
-    }
-
-    // Set the configuration in the context for child components to access
-    setContext(LutraContext.Config, config);
-
-    // Retrieve existing theme from context if available
-    let existingTheme = getContextItem(LutraContext.Theme);
-
-    function getTheme() {
-        if(browser) {
-            return localStorage.getItem('lutra.theme') || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
-        }
-        // TODO: Implement Sec-CH-Prefers-Color-Scheme header getting from context
-        return getContextItem(LutraContext.SecChPrefersColorScheme) || 'light';
-    }
-
-    // If no theme is provided, determine it from localStorage or system preferences
-    if(!theme) {
-        _theme = existingTheme || getTheme();
-    } else if(theme === 'invert') {
-        _theme = (existingTheme || getTheme()) === 'light' ? 'dark' : 'light';
-    }
-
-    onMount(() => {
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        mediaQuery.addEventListener('change', (e) => {
-            if(browser && root && !theme && !existingTheme && !localStorage.getItem('lutra.theme')) {
-                _theme = e.matches ? 'dark' : 'light';
-            } else if(root && theme === "invert") {
-                _theme = existingTheme === 'light' ? 'dark' : 'light';
-            } else if(root && !theme) {
-                _theme = existingTheme || getTheme();
-            }
-        });
-    });
-
-    // Set the theme in the context for child components to access
-    setContext(LutraContext.Theme, theme);
+	import { BROWSER } from 'esm-env';
+	import { setContext, type Snippet } from "svelte";
+	import { getContextItem, LutraContext, type LutraTheme } from "../types.js";
+	import { theme as themeState } from "../state/theme.svelte.js";
+
+	/**
+	 * @description
+	 * Provides light/dark theming at the root layout level, and can override the theme for nested sections.
+	 * At the root level, sets the `color-scheme` on the document and manages the `theme-color` meta tag.
+	 * Nested instances can invert or force a specific theme via `color-scheme` scoping.
+	 * @example
+	 * <Theme theme="dark">
+	 *     <p>This section is always dark.</p>
+	 * </Theme>
+	 */
+
+	let {
+		theme,
+		themeColor,
+		children
+	}: {
+		/** The theme to use. Leave undefined to use the system theme. */
+		theme?: LutraTheme;
+		/**
+		 * Theme color for the theme-color meta tag. Only used in the root theme.
+		 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
+		 */
+		themeColor?: {
+			light?: string;
+			dark?: string;
+		};
+		children: Snippet
+	} = $props();
+
+	const isRoot = getContextItem(LutraContext.Theme)?.() === undefined;
+
+	const parentTheme = isRoot ? undefined : getContextItem(LutraContext.Theme);
+
+	/** Effective theme for root, derived reactively from theme state. */
+	const rootTheme = $derived.by(() => {
+		if (!theme || theme === "system") return themeState.current;
+		if (theme === "invert") return themeState.current === "light" ? "dark" : "light";
+		return theme as "light" | "dark";
+	});
+
+	/** Effective theme for nested (non-root) Theme components. */
+	const nestedTheme = $derived.by(() => {
+		if (isRoot) return undefined;
+		const parent = parentTheme?.() as "light" | "dark" | undefined;
+		if (!theme || theme === "system") return parent;
+		if (theme === "invert") return parent === "light" ? "dark" : "light";
+		return theme as "light" | "dark";
+	});
+
+	setContext(
+		LutraContext.Theme,
+		isRoot ? () => rootTheme : () => nestedTheme
+	);
+
+	if (isRoot) {
+		$effect(() => {
+			document.documentElement.classList.remove("light", "dark");
+			document.documentElement.classList.add(rootTheme);
+		});
+	}
 </script>
 
 <svelte:head>
-    {#if !root}
-        <meta name="theme-color" content="{theme === 'dark' ? (config?.themeColor?.dark || '#000') : (config?.themeColor?.light || '#fff')}" />
-    {/if}
+	{#if isRoot}
+		{#if BROWSER && rootTheme === "dark"}
+			<meta name="theme-color" content={themeColor?.dark || "#000"} />
+		{:else if BROWSER && rootTheme === "light"}
+			<meta name="theme-color" content={themeColor?.light || "#fff"} />
+		{:else}
+			<meta name="theme-color" media="(prefers-color-scheme: light)" content={themeColor?.light || "#fff"} />
+			<meta name="theme-color" media="(prefers-color-scheme: dark)" content={themeColor?.dark || "#000"} />
+		{/if}
+		<script>
+			{
+				const theme = localStorage.getItem('lutra.theme');
+
+				document.documentElement.classList.add(
+					!theme || theme === 'system'
+						? window.matchMedia('(prefers-color-scheme: dark)').matches
+							? 'dark'
+							: 'light'
+						: theme
+				);
+			}
+		</script>
+	{/if}
 </svelte:head>
 
-<div class="Theme {_theme}" class:root>
-    {@render children()}
+<div
+	class="Theme"
+	class:light={!isRoot && nestedTheme === "light" && (theme !== "invert" || BROWSER)}
+	class:dark={!isRoot && nestedTheme === "dark" && (theme !== "invert" || BROWSER)}
+	class:invert={!isRoot && theme === "invert"}
+	class:isRoot
+>
+	{@render children()}
 </div>
 
 <style>
-    @layer base {
-        .Theme {
-            display: contents;
-            color-scheme: light dark;
-        }
-        .Theme.light {
-            color-scheme: only light;
-        }
-        .Theme.dark {
-            color-scheme: only dark;
-        }
-    }
+	.Theme {
+		display: contents;
+	}
+	.Theme.light {
+		color-scheme: only light;
+	}
+	.Theme.dark {
+		color-scheme: only dark;
+	}
+	/* CSS-only inversion fallback (SSR / no-JS).
+	   Active only when JS has not yet added .light/.dark to the element. */
+	:global(html:not(.light):not(.dark)) .invert:not(.light):not(.dark) {
+		@media (prefers-color-scheme: dark) {
+			color-scheme: only light;
+		}
+		@media (prefers-color-scheme: light) {
+			color-scheme: only dark;
+		}
+	}
+	:global(html.dark) .invert:not(.light):not(.dark) {
+		color-scheme: only light;
+	}
+	:global(html.light) .invert:not(.light):not(.dark) {
+		color-scheme: only dark;
+	}
 </style>
-

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

@@ -1,15 +1,16 @@
 import { type Snippet } from "svelte";
-import { type LutraRootConfig } from "../config.js";
 import { type LutraTheme } from "../types.js";
 type $$ComponentProps = {
-    /**
-     * The theme to use. Leave undefined to use the system theme.
-     */
+    /** The theme to use. Leave undefined to use the system theme. */
     theme?: LutraTheme;
     /**
-     * Lutra config. Leave undefined to use the default config.
+     * Theme color for the theme-color meta tag. Only used in the root theme.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
      */
-    config?: LutraRootConfig;
+    themeColor?: {
+        light?: string;
+        dark?: string;
+    };
     children: Snippet;
 };
 declare const Theme: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/Toast.svelte

@@ -5,9 +5,12 @@
 	import { removeToast } from "./toasts.svelte.js";
 
 	/**
-	 * A styled toast/notification card.
-	 * Uses the same surface styling system as Popover and Modal.
-	 * Typically used via addToast() but can be used standalone.
+	 * @description
+	 * A styled toast/notification card. Uses the shared surface styling system (background, border, shadow).
+	 * Typically created via `addToast()` but can be used standalone. Automatically adapts its grid layout
+	 * based on whether an icon and/or actions are present.
+	 * @example
+	 * <Toast title="Saved" content="Your changes have been saved." />
 	 */
 	let {
 		id,
@@ -42,7 +45,7 @@
 	}
 </script>
 
-<div class="Toast" class:has-icon={!!icon} class:has-actions={!!actions}>
+<div class="Toast">
 	{#if !actions}
 		<Close position="top right" onclick={handleClose} />
 	{/if}
@@ -55,7 +58,7 @@
 	
 	<div class="Content">
 		{#if title}
-			<strong class="Title">{title}</strong>
+			<h5 class="Title">{title}</h5>
 		{/if}
 		{#if content}
 			<p class="Text">{content}</p>
@@ -95,15 +98,15 @@
 		}
 	}
 
-	.Toast.has-icon {
+	.Toast:has(> .Icon) {
 		grid-template-columns: auto 1fr;
 	}
 
-	.Toast.has-actions {
+	.Toast:has(> .Actions) {
 		grid-template-columns: 1fr auto;
 	}
 
-	.Toast.has-icon.has-actions {
+	.Toast:has(> .Icon):has(> .Actions) {
 		grid-template-columns: auto 1fr auto;
 	}
 

package/dist/components/Tooltip.svelte

@@ -28,7 +28,12 @@
      * Displays on hover (with delay) or focus (immediate).
      * Supports "warming" - if a tooltip was recently shown, new tooltips appear instantly.
      * @supports prefers-reduced-motion
-     * @cssprop --delay - Hover delay before showing (default: 0.5s)
+     * @cssprop --delay - Hover delay before showing. (Default: 0.4s)
+     * @cssprop --tooltip-offset - Gap between the anchor and the tooltip. (Default: var(--space-xs))
+     * @cssprop --tooltip-padding-block - Block padding of the tooltip. (Default: var(--space-xxs))
+     * @cssprop --tooltip-padding-inline - Inline padding of the tooltip. (Default: var(--space-xs))
+     * @cssprop --tooltip-font-size - Font size of the tooltip. (Default: max(0.75rem, 11px))
+     * @cssprop --tooltip-max-width - Maximum width of the tooltip. (Default: 25ch)
      */
     let {
         children,
@@ -99,17 +104,18 @@
         position: fixed;
         position-area: block-start center;
         position-try-fallbacks: flip-block;
-        margin-block-end: 0.5rem;
+        margin-block-end: var(--tooltip-offset, var(--space-xs));
         background: var(--tooltip-background, var(--surface-background));
         border: var(--tooltip-border, var(--surface-border));
         border-radius: var(--tooltip-border-radius, var(--surface-border-radius));
         box-shadow: var(--tooltip-shadow, var(--surface-shadow));
-        padding: 0.35rem 0.5rem;
-        font-size: max(0.75rem, 11px);
-        line-height: 1.35;
-        font-weight: 500;
+        padding-block: var(--tooltip-padding-block, var(--space-xxs));
+        padding-inline: var(--tooltip-padding-inline, var(--space-xs));
+        font-size: var(--tooltip-font-size, max(0.75rem, 11px));
+        line-height: var(--font-line-height-tight);
+        font-weight: var(--font-weight-normal);
         color: var(--tooltip-color, var(--text-color-p));
-        max-width: 25ch;
+        max-width: var(--tooltip-max-width, 25ch);
         width: max-content;
         text-align: center;
         opacity: 0;
@@ -117,12 +123,12 @@
     }
 
     .TooltipContent :global(code) {
-        font-weight: 600;
+        font-weight: var(--font-weight-medium);
     }
 
     .TooltipContent :global(strong),
     .TooltipContent :global(b) {
-        font-weight: 700;
+        font-weight: var(--font-weight-semibold);
     }
 
     .TooltipTrigger {
@@ -140,7 +146,8 @@
     }
 
 
-    .Tooltip:has(.TooltipTrigger:focus-visible) .TooltipContent {
+    .Tooltip:has(.TooltipTrigger :focus-visible) .TooltipContent,
+    .Tooltip:focus-within .TooltipContent {
         opacity: 1;
         transition-delay: 0s;
     }

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';