@selvajs/ui 6.6.0-beta.2 → 6.6.0-beta.20

package/README.md

@@ -57,9 +57,6 @@ In your `app.css`:
 @import '@selvajs/ui/styles/base.css';
 ```
 
-Themes are available under `@selvajs/ui/styles/themes/*` — `selva`, `neutral`, `ocean`, and
-`cyberpunk`.
-
 ## Schema types
 
 Types generated from `packages/schemas/ui-schema.json` are published by `@selvajs/schemas`, not

package/dist/components/ErrorScreen.svelte

@@ -3,6 +3,7 @@
 	import * as Card from './primitives/card/index.js';
 	import { Button } from './primitives/button/index.js';
 	import Callout from './primitives/Callout.svelte';
+	import { getLocaleContext } from '../i18n/localeContext.svelte.js';
 
 	interface Props {
 		status?: number;
@@ -12,9 +13,12 @@
 	}
 
 	let { status = 500, message, details, homeLink = '/' }: Props = $props();
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 </script>
 
-<div class="p-4 flex min-h-screen items-center justify-center bg-background">
+<div class="p-4 flex min-h-dvh items-center justify-center bg-background">
 	<Card.Root class="max-w-md w-full">
 		<Card.Header>
 			<div class="gap-4 flex flex-col items-center text-center">
@@ -26,7 +30,7 @@
 		</Card.Header>
 		<Card.Content>
 			<div class="gap-4 flex flex-col">
-				<Callout tone="danger" title="Error">
+				<Callout tone="danger" title={t.errorTitle}>
 					{#if message}{message}{/if}
 				</Callout>
 				{#if details}
@@ -37,7 +41,7 @@
 			</div>
 		</Card.Content>
 		<Card.Footer>
-			<Button variant="outline" href={homeLink} rel="external" class="w-full">Go Home</Button>
+			<Button variant="outline" href={homeLink} rel="external" class="w-full">{t.goHome}</Button>
 		</Card.Footer>
 	</Card.Root>
 </div>