includio-cms 0.24.1 → 0.26.0

package/dist/components/ui/field/field.stories.svelte

@@ -1,21 +1,107 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Field, FieldLabel, FieldContent, FieldDescription } from './index.js';
+	import {
+		Field,
+		FieldLabel,
+		FieldContent,
+		FieldControl,
+		FieldDescription,
+		FieldError,
+	} from './index.js';
 	import { Input } from '../input/index.js';
 
 	const { Story } = defineMeta({
 		title: 'UI/Forms/Field',
 		component: Field,
 		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Wrapper formularza spinający label, kontrolkę, opis i błąd w jeden ARIA-poprawny pakiet. Używaj `Field.Root` dla każdego pola w `<form>`.',
+				},
+			},
+		},
 	});
 </script>
 
-<Story name="Label + Input + Hint">
-	<div style="max-width:280px;">
-		<Field>
-			<FieldLabel>Ocena <span style="color:var(--destructive);">*</span></FieldLabel>
-			<FieldContent><Input type="number" value="82" min={0} max={100} step={2} /></FieldContent>
-			<FieldDescription>Zakres: 0–100 · Krok: 2</FieldDescription>
-		</Field>
-	</div>
+<Story name="Auto-wired (label + description + input)">
+	{#snippet template()}
+		<div style="max-width:320px;">
+			<Field>
+				<FieldLabel>Tytuł wpisu</FieldLabel>
+				<FieldControl>
+					{#snippet child(props)}
+						<Input {...props} placeholder="Wpisz tytuł…" />
+					{/snippet}
+				</FieldControl>
+				<FieldDescription>Krótki, konkretny — pojawi się na liście wpisów.</FieldDescription>
+			</Field>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Required + auto aria-required">
+	{#snippet template()}
+		<div style="max-width:320px;">
+			<Field required>
+				<FieldLabel>Email</FieldLabel>
+				<FieldControl>
+					{#snippet child(props)}
+						<Input {...props} type="email" placeholder="ty@przykład.pl" />
+					{/snippet}
+				</FieldControl>
+				<FieldDescription>Na ten adres wyślemy potwierdzenie.</FieldDescription>
+			</Field>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Error state (auto aria-invalid + describedby)">
+	{#snippet template()}
+		<div style="max-width:320px;">
+			<Field required>
+				<FieldLabel>Email</FieldLabel>
+				<FieldControl>
+					{#snippet child(props)}
+						<Input {...props} type="email" value="kowalski" />
+					{/snippet}
+				</FieldControl>
+				<FieldDescription>Na ten adres wyślemy potwierdzenie.</FieldDescription>
+				<FieldError>Sprawdź email — wygląda jakby brakowało @ i domeny.</FieldError>
+			</Field>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Number with hint">
+	{#snippet template()}
+		<div style="max-width:280px;">
+			<Field required>
+				<FieldLabel>Ocena</FieldLabel>
+				<FieldContent>
+					<FieldControl>
+						{#snippet child(props)}
+							<Input {...props} type="number" value="82" min={0} max={100} step={2} />
+						{/snippet}
+					</FieldControl>
+				</FieldContent>
+				<FieldDescription>Zakres: 0–100 · Krok: 2</FieldDescription>
+			</Field>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Empty / minimal">
+	{#snippet template()}
+		<div style="max-width:280px;">
+			<Field>
+				<FieldLabel>Tytuł</FieldLabel>
+				<FieldControl>
+					{#snippet child(props)}
+						<Input {...props} placeholder="Wpisz tytuł…" />
+					{/snippet}
+				</FieldControl>
+			</Field>
+		</div>
+	{/snippet}
 </Story>

package/dist/components/ui/field/field.svelte

@@ -29,16 +29,72 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
+	import { setFieldContext, type FieldA11yProps } from "./field-context.svelte.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		orientation = "vertical",
+		id: idProp,
+		required = false,
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		orientation?: FieldOrientation;
+		id?: string;
+		required?: boolean;
 	} = $props();
+
+	const autoId = $props.id();
+	const baseId = $derived(idProp ?? autoId);
+	const inputId = $derived(`${baseId}-control`);
+	const descriptionId = $derived(`${baseId}-description`);
+	const errorId = $derived(`${baseId}-error`);
+
+	let descriptionRefs = $state(0);
+	let errorRefs = $state(0);
+
+	const ctx = setFieldContext({
+		get inputId() {
+			return inputId;
+		},
+		get descriptionId() {
+			return descriptionId;
+		},
+		get errorId() {
+			return errorId;
+		},
+		get required() {
+			return required;
+		},
+		get hasDescription() {
+			return descriptionRefs > 0;
+		},
+		get hasError() {
+			return errorRefs > 0;
+		},
+		get invalid() {
+			return errorRefs > 0;
+		},
+		registerDescription: () => void descriptionRefs++,
+		unregisterDescription: () => void descriptionRefs--,
+		registerError: () => void errorRefs++,
+		unregisterError: () => void errorRefs--,
+		getControlProps(): FieldA11yProps {
+			const describedBy = [
+				descriptionRefs > 0 ? descriptionId : null,
+				errorRefs > 0 ? errorId : null,
+			]
+				.filter(Boolean)
+				.join(" ");
+			return {
+				id: inputId,
+				"aria-describedby": describedBy || undefined,
+				"aria-invalid": errorRefs > 0 ? "true" : undefined,
+				"aria-required": required ? "true" : undefined,
+			};
+		},
+	});
 </script>
 
 <div
@@ -46,6 +102,7 @@
 	role="group"
 	data-slot="field"
 	data-orientation={orientation}
+	data-invalid={ctx.invalid || undefined}
 	class={cn(fieldVariants({ orientation }), className)}
 	{...restProps}
 >

package/dist/components/ui/field/field.svelte.d.ts

@@ -23,6 +23,8 @@ import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     orientation?: FieldOrientation;
+    id?: string;
+    required?: boolean;
 };
 declare const Field: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Field = ReturnType<typeof Field>;

package/dist/components/ui/field/index.d.ts

@@ -3,9 +3,11 @@ import Set from "./field-set.svelte";
 import Legend from "./field-legend.svelte";
 import Group from "./field-group.svelte";
 import Content from "./field-content.svelte";
+import Control from "./field-control.svelte";
 import Label from "./field-label.svelte";
 import Title from "./field-title.svelte";
 import Description from "./field-description.svelte";
 import Separator from "./field-separator.svelte";
 import Error from "./field-error.svelte";
-export { Field, Set, Legend, Group, Content, Label, Title, Description, Separator, Error, Set as FieldSet, Legend as FieldLegend, Group as FieldGroup, Content as FieldContent, Label as FieldLabel, Title as FieldTitle, Description as FieldDescription, Separator as FieldSeparator, Error as FieldError, };
+export { getFieldContext, setFieldContext, type FieldA11yProps, type FieldContext, } from "./field-context.svelte.js";
+export { Field, Set, Legend, Group, Content, Control, Label, Title, Description, Separator, Error, Set as FieldSet, Legend as FieldLegend, Group as FieldGroup, Content as FieldContent, Control as FieldControl, Label as FieldLabel, Title as FieldTitle, Description as FieldDescription, Separator as FieldSeparator, Error as FieldError, };

package/dist/components/ui/field/index.js

@@ -3,11 +3,13 @@ import Set from "./field-set.svelte";
 import Legend from "./field-legend.svelte";
 import Group from "./field-group.svelte";
 import Content from "./field-content.svelte";
+import Control from "./field-control.svelte";
 import Label from "./field-label.svelte";
 import Title from "./field-title.svelte";
 import Description from "./field-description.svelte";
 import Separator from "./field-separator.svelte";
 import Error from "./field-error.svelte";
-export { Field, Set, Legend, Group, Content, Label, Title, Description, Separator, Error, 
+export { getFieldContext, setFieldContext, } from "./field-context.svelte.js";
+export { Field, Set, Legend, Group, Content, Control, Label, Title, Description, Separator, Error, 
 //
-Set as FieldSet, Legend as FieldLegend, Group as FieldGroup, Content as FieldContent, Label as FieldLabel, Title as FieldTitle, Description as FieldDescription, Separator as FieldSeparator, Error as FieldError, };
+Set as FieldSet, Legend as FieldLegend, Group as FieldGroup, Content as FieldContent, Control as FieldControl, Label as FieldLabel, Title as FieldTitle, Description as FieldDescription, Separator as FieldSeparator, Error as FieldError, };

package/dist/components/ui/form/form-field-errors.svelte

@@ -22,7 +22,7 @@
 		{#if childrenProp}
 			{@render childrenProp({ errors, errorProps })}
 		{:else}
-			{#each errors as error (error)}
+			{#each errors as error, i (i)}
 				<div {...errorProps} class={cn(errorClasses)}>{error}</div>
 			{/each}
 		{/if}

package/dist/components/ui/form/form.stories.svelte

@@ -0,0 +1,25 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DemoForm from '../../../../stories/_fixtures/demo-form.svelte';
+
+	// superForm + zod4Client używa WeakMap do cache walidatorów; Storybook MockProvider
+	// invalidates the schema reference między decoratorami w vitest-browser ("Invalid value
+	// used as weak map key"). Stories działają w dev (`pnpm storybook`), test runner pada.
+	// Odłożone do S10 (real browser via MCP).
+	const { Story } = defineMeta({
+		title: 'UI/Forms/Form',
+		component: DemoForm,
+		tags: ['autodocs', 'no-test'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Wzorzec formularza z `sveltekit-superforms` + `formsnap`. Walidacja Valibot, błędy renderowane przez `Field.Error`, focus na pierwszy błąd po submit.',
+				},
+			},
+		},
+	});
+</script>
+
+<Story name="formsnap + superForm (demo)" args={{ autoSubmit: false }} />
+
+<Story name="With initial errors (autoSubmit)" args={{ autoSubmit: true }} />

package/dist/components/ui/form/form.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Form;
+type Form = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Form: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ui/input/input.stories.svelte

@@ -6,6 +6,32 @@
 		title: 'UI/Forms/Input',
 		component: Input,
 		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Pole tekstowe. Zawsze wewnątrz `Field.Root` — wtedy `aria-describedby` (opis + błąd) i `aria-invalid` zostaną dopięte automatycznie.',
+				},
+			},
+		},
+		argTypes: {
+			type: {
+				control: 'select',
+				options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
+				description: 'Typ HTML inputu (wpływa na klawiaturę mobilną i walidację).',
+			},
+			placeholder: {
+				control: 'text',
+				description: 'Tekst zachęty — NIE używaj zamiast labela.',
+			},
+			disabled: {
+				control: 'boolean',
+				description: 'Blokada z pełną nieaktywnością.',
+			},
+			readOnly: {
+				control: 'boolean',
+				description: 'Pole tylko do odczytu (skopiowanie tak, edycja nie).',
+			},
+		},
 	});
 </script>
 

package/dist/components/ui/input-group/input-group-input.svelte.d.ts

@@ -2,7 +2,7 @@ declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/e
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "image" | "url" | "text" | "date" | "radio" | "color" | "button" | "checkbox" | "search" | (string & {}) | "email" | "password" | "time" | "hidden" | "reset" | "submit" | "tel" | "datetime-local" | "month" | "range" | "week";
+    type?: "number" | "image" | "url" | "text" | "date" | "radio" | "color" | "button" | "checkbox" | "search" | (string & {}) | "email" | "tel" | "password" | "time" | "hidden" | "reset" | "submit" | "datetime-local" | "month" | "range" | "week";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;

package/dist/components/ui/input-group/input-group.stories.svelte

@@ -0,0 +1,43 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import * as InputGroup from './index.js';
+	import { Root as InputGroupRoot } from './index.js';
+	import { Label } from '../label/index.js';
+
+	const { Story } = defineMeta({
+		title: 'UI/Forms/InputGroup',
+		component: InputGroupRoot,
+		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Złożenie inputu z dodatkami (prefix, suffix, akcje). Składaj `InputGroupRoot > InputGroupAddon > InputGroupInput`.',
+				},
+			},
+		},
+	});
+</script>
+
+<Story name="Prefix addon">
+	<div class="space-y-2" style="width:320px;">
+		<Label for="ig-amount">Kwota</Label>
+		<InputGroup.Root>
+			<InputGroup.Addon align="inline-start">
+				<InputGroup.Text>PLN</InputGroup.Text>
+			</InputGroup.Addon>
+			<InputGroup.Input id="ig-amount" type="number" placeholder="0.00" />
+		</InputGroup.Root>
+	</div>
+</Story>
+
+<Story name="Suffix button">
+	<div class="space-y-2" style="width:320px;">
+		<Label for="ig-search">Szukaj</Label>
+		<InputGroup.Root>
+			<InputGroup.Input id="ig-search" placeholder="Wpisz frazę…" />
+			<InputGroup.Addon align="inline-end">
+				<InputGroup.Button>Szukaj</InputGroup.Button>
+			</InputGroup.Addon>
+		</InputGroup.Root>
+	</div>
+</Story>

package/dist/components/ui/input-group/input-group.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default InputGroup;
+type InputGroup = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const InputGroup: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import * as InputGroup from './index.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ui/item/item.stories.svelte

@@ -0,0 +1,61 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import * as Item from './index.js';
+	import { Root as ItemRoot } from './index.js';
+
+	const { Story } = defineMeta({
+		title: 'UI/Data/Item',
+		component: ItemRoot,
+		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Komponowalny rekord listy (avatar + treść + akcja). Zastępuje custom `<li>` z manualnym layoutem. Używaj w sidebarze, listach pickerów, dropdownach.',
+				},
+			},
+		},
+	});
+</script>
+
+<Story name="Default">
+	<Item.Root>
+		<Item.Content>
+			<Item.Title>Zamówienie #ZAM-2026-0001</Item.Title>
+			<Item.Description>Jan Kowalski · 123,00 PLN</Item.Description>
+		</Item.Content>
+	</Item.Root>
+</Story>
+
+<Story name="Outline + actions">
+	<Item.Root variant="outline">
+		<Item.Content>
+			<Item.Title>Wpis "Pierwszy"</Item.Title>
+			<Item.Description>Zaktualizowany 15 stycznia 2026</Item.Description>
+		</Item.Content>
+		<Item.Actions>
+			<button>Edytuj</button>
+		</Item.Actions>
+	</Item.Root>
+</Story>
+
+<Story name="Group with separators">
+	<Item.Group>
+		<Item.Root variant="muted">
+			<Item.Content>
+				<Item.Title>Pierwszy element</Item.Title>
+			</Item.Content>
+		</Item.Root>
+		<Item.Separator />
+		<Item.Root variant="muted">
+			<Item.Content>
+				<Item.Title>Drugi element</Item.Title>
+			</Item.Content>
+		</Item.Root>
+		<Item.Separator />
+		<Item.Root variant="muted">
+			<Item.Content>
+				<Item.Title>Trzeci element</Item.Title>
+			</Item.Content>
+		</Item.Root>
+	</Item.Group>
+</Story>

package/dist/components/ui/item/item.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Item;
+type Item = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Item: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import * as Item from './index.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ui/label/label.stories.svelte

@@ -6,6 +6,13 @@
 		title: 'UI/Forms/Label',
 		component: Label,
 		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Etykieta pola. W `Field.Root` używana automatycznie. Poza Field — `for` musi pasować do `id` kontrolki, inaczej kliknięcie nie ufokusuje pola.',
+				},
+			},
+		},
 	});
 </script>
 

package/dist/components/ui/live-region/index.d.ts

@@ -0,0 +1 @@
+export { default as LiveRegion } from './live-region.svelte';

package/dist/components/ui/live-region/index.js

@@ -0,0 +1 @@
+export { default as LiveRegion } from './live-region.svelte';

package/dist/components/ui/live-region/live-region-demo.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { LiveRegion } from './index.js';
+
+	type Props = {
+		politeness?: 'polite' | 'assertive';
+		initial?: string;
+	};
+	let { politeness = 'polite', initial = '' }: Props = $props();
+
+	let message = $state(initial);
+	let counter = $state(0);
+
+	function announce() {
+		counter += 1;
+		message = `Ogłoszenie nr ${counter}`;
+	}
+</script>
+
+<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start;">
+	<button
+		type="button"
+		onclick={announce}
+		style="padding:8px 12px;border:1px solid currentColor;border-radius:8px;cursor:pointer;"
+	>
+		Ogłoś coś
+	</button>
+	<p style="margin:0;font-size:13px;color:var(--muted-foreground,#666);">
+		Komunikat (widoczny tu tylko do podglądu — w produkcji jest <code>sr-only</code>):
+	</p>
+	<output style="font-size:14px;min-height:1.5em;">{message}</output>
+	<LiveRegion {message} {politeness} />
+</div>

package/dist/components/ui/live-region/live-region-demo.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    politeness?: 'polite' | 'assertive';
+    initial?: string;
+};
+declare const LiveRegionDemo: import("svelte").Component<Props, {}, "">;
+type LiveRegionDemo = ReturnType<typeof LiveRegionDemo>;
+export default LiveRegionDemo;

package/dist/components/ui/live-region/live-region.stories.svelte

@@ -0,0 +1,23 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import LiveRegionDemo from './live-region-demo.svelte';
+
+	const { Story } = defineMeta({
+		title: 'UI/Feedback/LiveRegion',
+		component: LiveRegionDemo,
+		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Niewidoczna strefa ARIA `aria-live` dla zapowiedzi (zapis, błąd, dodanie elementu). `polite` — czeka na pauzę; `assertive` — przerywa. Używaj `polite` chyba że krytyczne.',
+				},
+			},
+		},
+	});
+</script>
+
+<Story name="Polite (default)" args={{ politeness: 'polite' }} />
+
+<Story name="Assertive" args={{ politeness: 'assertive' }} />
+
+<Story name="With initial message" args={{ politeness: 'polite', initial: 'Załadowano 12 wyników' }} />

package/dist/components/ui/live-region/live-region.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default LiveRegion;
+type LiveRegion = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const LiveRegion: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ui/live-region/live-region.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	type Props = {
+		message?: string;
+		politeness?: 'polite' | 'assertive';
+		class?: string;
+	};
+	let { message = '', politeness = 'polite', class: className = '' }: Props = $props();
+</script>
+
+<div class="sr-only {className}" role="status" aria-live={politeness}>
+	{message}
+</div>

package/dist/components/ui/live-region/live-region.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    message?: string;
+    politeness?: 'polite' | 'assertive';
+    class?: string;
+};
+declare const LiveRegion: import("svelte").Component<Props, {}, "">;
+type LiveRegion = ReturnType<typeof LiveRegion>;
+export default LiveRegion;