@widgetic/design-system 0.5.15 → 0.5.17

package/dist/components/shad-editor/icons/textalign.svelte

@@ -16,8 +16,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
 	import Button from '../../ui/button/button.svelte';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: TextalignProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -45,43 +47,43 @@
 						onclick={() => editor.chain().focus().setTextAlign('left').run()}
 						closeOnSelect={false}
 					>
-						<AlignLeft /> Align Left
+						<AlignLeft /> {$t('shadEditor.align.left')}
 						{#if editor.isActive({ textAlign: 'left' })}
-							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+							<Check class="absolute end-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item
 						onclick={() => editor.chain().focus().setTextAlign('center').run()}
 						closeOnSelect={false}
 					>
-						<AlignCenter /> Align Center
+						<AlignCenter /> {$t('shadEditor.align.center')}
 						{#if editor.isActive({ textAlign: 'center' })}
-							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+							<Check class="absolute end-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item
 						onclick={() => editor.chain().focus().setTextAlign('right').run()}
 						closeOnSelect={false}
 					>
-						<AlignRight /> Align Right
+						<AlignRight /> {$t('shadEditor.align.right')}
 						{#if editor.isActive({ textAlign: 'right' })}
-							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+							<Check class="absolute end-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item
 						onclick={() => editor.chain().focus().setTextAlign('justify').run()}
 						closeOnSelect={false}
 					>
-						<AlignJustify /> Align Justify
+						<AlignJustify /> {$t('shadEditor.align.justify')}
 						{#if editor.isActive({ textAlign: 'justify' })}
-							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+							<Check class="absolute end-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Text Alignment</p>
+			<p>{$t('shadEditor.align.tooltip')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/textcolor.svelte

@@ -17,8 +17,10 @@
 	import * as Popover from '../../ui/popover/index.js';
 	import { mode } from 'mode-watcher';
 	import ColorPicker from 'svelte-awesome-color-picker';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor, color = $bindable('') }: TextcolorProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -38,7 +40,7 @@
 				</Popover.Trigger>
 				<Popover.Content class="bg-popover shadow-lg *:my-2">
 					<div class="flex items-center justify-between">
-						<h1 class="text-[1.2rem] font-bold">Pick a text color</h1>
+						<h1 class="text-[1.2rem] font-bold">{$t('shadEditor.textColor.pick')}</h1>
 						<Popover.Close>
 							<X class="size-4 text-muted-foreground" />
 						</Popover.Close>
@@ -65,14 +67,14 @@
 							size="sm"
 							class="border-destructive text-destructive hover:bg-destructive hover:text-foreground"
 							onclick={() => editor.chain().focus().unsetColor().run()}
-							>Remove Color
+							>{$t('shadEditor.textColor.remove')}
 						</Button>
 					</div>
 				</Popover.Content>
 			</Popover.Root>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Text Color</p>
+			<p>{$t('shadEditor.textColor.tooltip')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/underline.svelte

@@ -9,8 +9,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { Button } from '../../ui/button/index.js';
 	import { cn } from '../../../utils.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: UnderlineProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -25,7 +27,7 @@
 			</Button>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Underline (⌘U)</p>
+			<p>{$t('shadEditor.toolbar.underline')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/undo.svelte

@@ -8,8 +8,10 @@
 	import { type Editor } from '@tiptap/core';
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { Button } from '../../ui/button/index.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: UndoProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -25,7 +27,7 @@
 			</Button>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Undo (⌘Z)</p>
+			<p>{$t('shadEditor.toolbar.undo')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/index.d.ts

@@ -1,4 +1,5 @@
 import ShadEditor from './shad-editor.svelte';
 export { ShadEditor };
+export { SHAD_EDITOR_MESSAGES, checkShadEditorMessages, type ShadEditorMessageKey } from './i18n/index.js';
 export { type Editor as TipTapEditor } from '@tiptap/core';
 export { type Level as TipTapEditorLevel } from '@tiptap/extension-heading';

package/dist/components/shad-editor/index.js

@@ -1,5 +1,7 @@
 import ShadEditor from './shad-editor.svelte';
 export { ShadEditor };
+// The words of the editor, so a page can translate them: the English catalog and a check of the page's own messages.
+export { SHAD_EDITOR_MESSAGES, checkShadEditorMessages } from './i18n/index.js';
 // export Editor and Level from '@tiptap';
 export {} from '@tiptap/core';
 export {} from '@tiptap/extension-heading';

package/dist/components/shad-editor/shad-editor.svelte

@@ -1,11 +1,23 @@
 <script lang="ts" module>
 	import type { Content } from '@tiptap/core';
+	import type { MessageOverrides } from '../../i18n/index.js';
 
 	export interface ShadEditorProps {
 		class?: string;
 		style?: string;
 		content?: Content;
 		showToolbar?: boolean;
+		/**
+		 * The language of the page: a BCP 47 tag (`de`, `pt-BR`) that sets how numbers are written. The words of the
+		 * editor are English until `messages` gives them in the page's language.
+		 */
+		locale?: string;
+		/**
+		 * The page's own words for the toolbar, the menus and the image bar: any key of `SHAD_EDITOR_MESSAGES`
+		 * (`'shadEditor.toolbar.bold': 'Fett (⌘B)'`). A key that is left out keeps its English text; `checkShadEditorMessages`
+		 * lists the keys that do not exist.
+		 */
+		messages?: MessageOverrides;
 	}
 </script>
 
@@ -39,6 +51,8 @@
 	import { ImageExtension } from './custom/Extentions/ImageExtention.js';
 	import { SvelteNodeViewRenderer } from 'svelte-tiptap';
 	import CodeExtended from './custom/code-extended.svelte';
+	import { provideI18n } from './i18n/context.js';
+	import { dirForUserText, useTextDirection } from '../textDirection.js';
 
 	// Lowlight
 	import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
@@ -52,7 +66,21 @@
 		update: { html: string };
 	}>();
 
-	let { class: className = '', style = '', content = $bindable(null), showToolbar = true }: ShadEditorProps = $props();
+	let { class: className = '', style = '', content = $bindable(null), showToolbar = true, locale, messages }: ShadEditorProps = $props();
+
+	// The words of the toolbar, the menus and the image bar, in the page's language. The parts below read them from
+	// Svelte's context; an image in the text gets them through the options of its extension, because TipTap mounts it
+	// outside this component's tree. A change of `locale` or `messages` reaches both without making the editor again.
+	// svelte-ignore state_referenced_locally
+	const language = provideI18n({ locale, messages });
+	$effect(() => {
+		language.update({ locale, messages });
+	});
+
+	// The way the screen around the editor is read. The words a visitor types are read by their own first letter on a right to
+	// left screen (`dir="auto"` on the text, see below), and the menu of an image in the text gets the direction through the
+	// options of its extension, like its words.
+	const textDirection = useTextDirection();
 
 	const lowlight = createLowlight(common);
 
@@ -131,7 +159,7 @@
 				TableRow,
 				TableHeader,
 				TableCell,
-				ImageExtension
+				ImageExtension.configure({ translate: language.t, textDirection })
 			],
 			autofocus: true,
 			onUpdate: ({ editor }) => {
@@ -153,5 +181,6 @@
 	{#if editor && showToolbar}
 		<EditorToolbar {editor} class='shad-editor-toolbar' />
 	{/if}
-	<div bind:this={element} spellcheck="false" class="shad-editor-content h-full w-full flex-1 overflow-auto"></div>
+	<!-- On a right to left screen the text reads in the direction of its own first letter: an Arabic paragraph runs from the right, an English one from the left, and an English one does not get its full stop in front. On a left to right screen no attribute is written. -->
+	<div bind:this={element} spellcheck="false" dir={dirForUserText($textDirection)} class="shad-editor-content h-full w-full flex-1 overflow-auto"></div>
 </div>

package/dist/components/shad-editor/shad-editor.svelte.d.ts

@@ -1,9 +1,21 @@
 import type { Content } from '@tiptap/core';
+import type { MessageOverrides } from '../../i18n/index.js';
 export interface ShadEditorProps {
     class?: string;
     style?: string;
     content?: Content;
     showToolbar?: boolean;
+    /**
+     * The language of the page: a BCP 47 tag (`de`, `pt-BR`) that sets how numbers are written. The words of the
+     * editor are English until `messages` gives them in the page's language.
+     */
+    locale?: string;
+    /**
+     * The page's own words for the toolbar, the menus and the image bar: any key of `SHAD_EDITOR_MESSAGES`
+     * (`'shadEditor.toolbar.bold': 'Fett (⌘B)'`). A key that is left out keeps its English text; `checkShadEditorMessages`
+     * lists the keys that do not exist.
+     */
+    messages?: MessageOverrides;
 }
 import './editor.css';
 import { Editor } from '@tiptap/core';

package/dist/components/textDirection.d.ts

@@ -0,0 +1,91 @@
+import { type Readable } from 'svelte/store';
+import type { TextDirection } from '../i18n/direction.ts';
+/**
+ * Which way the text of a screen runs, shared with the components below it through Svelte's context.
+ *
+ * Most of what a right to left screen needs is done by the browser and by the `dir` attribute on an element around the
+ * screen: a row of buttons turns around, a paragraph starts on the right, and the logical classes of the components
+ * (`ms-2`, `pe-4`, `start-0`, `text-start`) follow. What the browser cannot do is reach into a library that wants to be
+ * told: the scroll area and the menus of `bits-ui` write `dir="ltr"` on their own element unless they are given the
+ * direction, and that one attribute turns a whole screen left to right again from the inside. So the root component of a
+ * right to left screen says its direction once, and the components that wrap such a library read it here:
+ *
+ *   // in the root component of a package, with `direction` a store that follows the page's language
+ *   provideTextDirection(direction);
+ *   // in a component that wraps a library
+ *   const textDirection = useTextDirection();      then   <ScrollAreaPrimitive.Root dir={$textDirection} />
+ *
+ * A component with no provider above it is left to right, which is what every component here has always been, so a page
+ * that never says anything keeps the layout it has.
+ *
+ * A package whose root component has a `dir` prop that may be left out (the File Browser, the composition editor, the
+ * chat, the canvas) does not call `provideTextDirection` itself but `shareTextDirection`: a `dir` that is given is the
+ * direction of that screen, and without one the screen is drawn the way the screen around it is.
+ */
+/** The two ways text runs: the values of the `dir` attribute. Defined with the language helpers, where a language tag is turned into one. */
+export type { TextDirection };
+/**
+ * The two functions of Svelte that the context is made of. They only work while a component is being created, so a test
+ * hands in stand-ins; the components use the real ones by leaving this out.
+ */
+export interface TextDirectionContextApi {
+    getContext<Value>(key: unknown): Value | undefined;
+    setContext<Value>(key: unknown, value: Value): Value;
+}
+/** Anything that is not exactly `'rtl'` is left to right: a missing, blank or misspelled direction must not mirror a screen. */
+export declare function readTextDirection(value: unknown): TextDirection;
+/**
+ * The `dir` for text a visitor wrote: the name of a file, of a folder.
+ *
+ * On a right to left screen it is "auto": the browser reads the direction from the first letter that has one, so a Latin
+ * name ("2024 report.pdf") reads left to right inside the screen, with its ellipsis at the end of the name, and an
+ * Arabic one reads right to left. Without it a Latin name that starts with a digit or ends with a full stop is put in
+ * the wrong order, because the line around it runs right to left.
+ *
+ * On a left to right screen it is `undefined` (Svelte then writes no attribute), and that screen looks exactly as it
+ * always has.
+ */
+export declare function dirForUserText(direction: TextDirection): 'auto' | undefined;
+/**
+ * The `side` of a pop-up that opens at the start of the line: on the left of a left to right screen and on the right of a
+ * right to left one. The library names the sides of a pop-up by places on the screen, which do not turn around, so a tooltip
+ * that must open beside a control, on the side where the line begins, asks for it here.
+ *
+ *   <Tooltip.Content side={sideAtStart($textDirection)}>
+ */
+export declare function sideAtStart(direction: TextDirection): 'left' | 'right';
+/** The `side` of a pop-up that opens at the end of the line: on the right of a left to right screen, on the left of a right to left one. */
+export declare function sideAtEnd(direction: TextDirection): 'left' | 'right';
+/**
+ * Called by the root component of a screen while it is created: everything below it reads `direction`. It is a store, so
+ * a screen that is already open turns around when the page sets another language. Returns the store it was given.
+ */
+export declare function provideTextDirection(direction: Readable<TextDirection>, contextApi?: TextDirectionContextApi): Readable<TextDirection>;
+/**
+ * Called by the root component of a package that takes a `dir` prop which may be left out. `given` is a store that holds
+ * the prop. A `dir` that is given ('rtl' or 'ltr') is the direction of this screen, whatever the screen above it says
+ * (a left to right island inside a right to left screen is possible); with no `dir` (undefined or null) the screen is
+ * drawn the way the screen around it is, and left to right when there is none. A `dir` that is given but is not exactly
+ * 'rtl' is left to right, like everywhere else: a mistake never mirrors a screen. Everything below the component reads
+ * the answer from the context, and it follows when the prop changes or the screen above turns around. Returns the store
+ * of the answer, for the component's own decisions (a position worked out in pixels, an arrow key).
+ *
+ *   export let dir: TextDirection | undefined = undefined;
+ *   const givenDirection = writable(dir);
+ *   const textDirection = shareTextDirection(givenDirection);
+ *   $: givenDirection.set(dir);
+ */
+export declare function shareTextDirection(given: Readable<TextDirection | null | undefined>, contextApi?: TextDirectionContextApi): Readable<TextDirection>;
+/**
+ * Called by a component while it is created: the store of the direction a screen above it gave, or `undefined` when no
+ * screen did. For the few parts that must tell "left to right because the screen says so" from "left to right because
+ * nobody said anything": a part that draws outside the element of its screen (a pop-up in a layer of its own) writes the
+ * screen's direction onto itself, and writes nothing on a page that never asked for one, so the page's own `dir` stays.
+ * Never throws; outside a component it is `undefined`.
+ */
+export declare function useOptionalTextDirection(contextApi?: TextDirectionContextApi): Readable<TextDirection> | undefined;
+/**
+ * Called by a component while it is created: the store of the direction it is drawn in. Never throws; with no provider
+ * above it, or outside a component, it is left to right.
+ */
+export declare function useTextDirection(contextApi?: TextDirectionContextApi): Readable<TextDirection>;

package/dist/components/textDirection.js

@@ -0,0 +1,99 @@
+import { getContext, setContext } from 'svelte';
+import { derived, readable } from 'svelte/store';
+/**
+ * The key of the context. `Symbol.for` gives the same key to every copy of this file on a page, so a package that was
+ * built with its own copy of the design system still reads what the page's root component said.
+ */
+const TEXT_DIRECTION_CONTEXT_KEY = Symbol.for('@widgetic/design-system/text-direction');
+/** What a component gets when nothing above it said otherwise. */
+const LEFT_TO_RIGHT = readable('ltr');
+/** Anything that is not exactly `'rtl'` is left to right: a missing, blank or misspelled direction must not mirror a screen. */
+export function readTextDirection(value) {
+    return value === 'rtl' ? 'rtl' : 'ltr';
+}
+/**
+ * The `dir` for text a visitor wrote: the name of a file, of a folder.
+ *
+ * On a right to left screen it is "auto": the browser reads the direction from the first letter that has one, so a Latin
+ * name ("2024 report.pdf") reads left to right inside the screen, with its ellipsis at the end of the name, and an
+ * Arabic one reads right to left. Without it a Latin name that starts with a digit or ends with a full stop is put in
+ * the wrong order, because the line around it runs right to left.
+ *
+ * On a left to right screen it is `undefined` (Svelte then writes no attribute), and that screen looks exactly as it
+ * always has.
+ */
+export function dirForUserText(direction) {
+    return direction === 'rtl' ? 'auto' : undefined;
+}
+/**
+ * The `side` of a pop-up that opens at the start of the line: on the left of a left to right screen and on the right of a
+ * right to left one. The library names the sides of a pop-up by places on the screen, which do not turn around, so a tooltip
+ * that must open beside a control, on the side where the line begins, asks for it here.
+ *
+ *   <Tooltip.Content side={sideAtStart($textDirection)}>
+ */
+export function sideAtStart(direction) {
+    return direction === 'rtl' ? 'right' : 'left';
+}
+/** The `side` of a pop-up that opens at the end of the line: on the right of a left to right screen, on the left of a right to left one. */
+export function sideAtEnd(direction) {
+    return direction === 'rtl' ? 'left' : 'right';
+}
+/**
+ * Called by the root component of a screen while it is created: everything below it reads `direction`. It is a store, so
+ * a screen that is already open turns around when the page sets another language. Returns the store it was given.
+ */
+export function provideTextDirection(direction, contextApi = { getContext, setContext }) {
+    try {
+        contextApi.setContext(TEXT_DIRECTION_CONTEXT_KEY, direction);
+    }
+    catch (error) {
+        // Called outside a component (a helper, a test): nothing below can read it, and a screen must not fail for that.
+        console.warn('[widgetic-ui] The text direction could not be shared with the components below:', error);
+    }
+    return direction;
+}
+/**
+ * Called by the root component of a package that takes a `dir` prop which may be left out. `given` is a store that holds
+ * the prop. A `dir` that is given ('rtl' or 'ltr') is the direction of this screen, whatever the screen above it says
+ * (a left to right island inside a right to left screen is possible); with no `dir` (undefined or null) the screen is
+ * drawn the way the screen around it is, and left to right when there is none. A `dir` that is given but is not exactly
+ * 'rtl' is left to right, like everywhere else: a mistake never mirrors a screen. Everything below the component reads
+ * the answer from the context, and it follows when the prop changes or the screen above turns around. Returns the store
+ * of the answer, for the component's own decisions (a position worked out in pixels, an arrow key).
+ *
+ *   export let dir: TextDirection | undefined = undefined;
+ *   const givenDirection = writable(dir);
+ *   const textDirection = shareTextDirection(givenDirection);
+ *   $: givenDirection.set(dir);
+ */
+export function shareTextDirection(given, contextApi) {
+    const aboveThisScreen = useTextDirection(contextApi);
+    const direction = derived([aboveThisScreen, given], ([fromAbove, fromProp]) => fromProp === undefined || fromProp === null ? fromAbove : readTextDirection(fromProp));
+    return provideTextDirection(direction, contextApi);
+}
+/**
+ * Called by a component while it is created: the store of the direction a screen above it gave, or `undefined` when no
+ * screen did. For the few parts that must tell "left to right because the screen says so" from "left to right because
+ * nobody said anything": a part that draws outside the element of its screen (a pop-up in a layer of its own) writes the
+ * screen's direction onto itself, and writes nothing on a page that never asked for one, so the page's own `dir` stays.
+ * Never throws; outside a component it is `undefined`.
+ */
+export function useOptionalTextDirection(contextApi = { getContext, setContext }) {
+    try {
+        const provided = contextApi.getContext(TEXT_DIRECTION_CONTEXT_KEY);
+        if (provided !== undefined && provided !== null && typeof provided.subscribe === 'function')
+            return provided;
+    }
+    catch {
+        // Outside a component Svelte refuses to hand out a context: nothing above, then.
+    }
+    return undefined;
+}
+/**
+ * Called by a component while it is created: the store of the direction it is drawn in. Never throws; with no provider
+ * above it, or outside a component, it is left to right.
+ */
+export function useTextDirection(contextApi = { getContext, setContext }) {
+    return useOptionalTextDirection(contextApi) ?? LEFT_TO_RIGHT;
+}

package/dist/components/toast/ToasterModal.svelte

@@ -6,6 +6,9 @@ import { toast, Toaster } from '../ui/sonner';
 import Exclamation from '../../icons/Exclamation.svelte';
 import Checked from '../../icons/Checked.svelte';
 
+// Where the toasters are drawn (the page's document, or a shadow root): see ./toasterRoots.ts
+import { toastLookupRoots } from './toasterRoots';
+
 // Import Toast Types directly from the svelte-sonner module
 // import type { ToastTypes } from 'svelte-sonner';
 // Define the ToastTypes type
@@ -67,17 +70,21 @@ export function showToast(type: string = 'success', title: string, options: any
 
   // set style of the data-icon element
   setTimeout(() => {
-    // set the close button color
-    let closeButtonElement = document.querySelector('.' + toastMainClass + '-close-button') as HTMLElement; //console.log('closeButtonElement:', closeButtonElement);
-    // if(closeButtonElement) closeButtonElement.style.backgroundColor = 'hsl(var(' + options.closeBgFillColor + '))';
-
-    // set icon background fill color
-    let iconElement = document.querySelector('.' + toastMainClass + '> [data-icon] > svg') as HTMLElement; //console.log('iconElement:', iconElement);
-    if(iconElement) iconElement.style.color = 'hsl(var(' + options.iconBgFillColor + '))';
-
-    // set the title color
-    let titleElement = document.querySelector('.' + toastMainClass + '-title') as HTMLElement; //console.log('titleElement:', titleElement);
-    if(titleElement) titleElement.style.color = 'hsl(var(' + titleColor + '))';
+    // The elements are looked for in the root the toaster is drawn in: `document.querySelector` does not look inside
+    // a shadow root, so for a toaster in a module's shadow root the icon and the title kept the library's colours.
+    for (const lookupRoot of toastLookupRoots(document)) {
+      // set the close button color
+      let closeButtonElement = lookupRoot.querySelector('.' + toastMainClass + '-close-button') as HTMLElement; //console.log('closeButtonElement:', closeButtonElement);
+      // if(closeButtonElement) closeButtonElement.style.backgroundColor = 'hsl(var(' + options.closeBgFillColor + '))';
+
+      // set icon background fill color
+      let iconElement = lookupRoot.querySelector('.' + toastMainClass + '> [data-icon] > svg') as HTMLElement; //console.log('iconElement:', iconElement);
+      if(iconElement) iconElement.style.color = 'hsl(var(' + options.iconBgFillColor + '))';
+
+      // set the title color
+      let titleElement = lookupRoot.querySelector('.' + toastMainClass + '-title') as HTMLElement; //console.log('titleElement:', titleElement);
+      if(titleElement) titleElement.style.color = 'hsl(var(' + titleColor + '))';
+    }
   }, 20);
   
   // Call toast with custom styling
@@ -96,10 +103,38 @@ export function showToast(type: string = 'success', title: string, options: any
 
 </script>
 
+<script lang="ts">
+import { onMount } from 'svelte';
+import { registerToasterRoot } from './toasterRoots';
+import { useTextDirection } from '../textDirection.js';
+
+/**
+ * The words a screen reader hears: the region that holds the toasts ("Notifications", read with the key that moves
+ * focus to it) and the button that closes one ("Close toast"). A page in another language gives its own words;
+ * left out, the English ones of the library are used.
+ */
+export let containerAriaLabel: string | undefined = undefined;
+export let closeButtonAriaLabel: string | undefined = undefined;
+
+// An element with no size that is only here to ask which root (the page's document, or a shadow root) this toaster is
+// drawn in, so that `showToast` looks for the toast's icon and title there.
+let rootMarker: HTMLElement;
+onMount(() => registerToasterRoot(rootMarker.getRootNode() as Document | ShadowRoot));
+
+// The toaster reads the direction of the PAGE's <html> unless it is told, and a module on a left to right page that
+// speaks Arabic (or the other way around) must follow its own screen. The toasts sit in the corner at the end of the
+// line: the right in a left to right screen, the left in a right to left one.
+const textDirection = useTextDirection();
+</script>
+
 <!-- HTML Template -->
+<span hidden bind:this={rootMarker}></span>
 <Toaster
   theme="light"
-  position="bottom-right"
+  dir={$textDirection}
+  position={$textDirection === 'rtl' ? 'bottom-left' : 'bottom-right'}
+  {containerAriaLabel}
+  {closeButtonAriaLabel}
   richColors
   closeButton
   toastOptions={{
@@ -107,7 +142,7 @@ export function showToast(type: string = 'success', title: string, options: any
     classes: {
       toast: toastMainClass + " widgetic-colors widgetic-radius !bg-white !rounded-small !border !border-[hsl(var(--forest-green))] " +
                               "!min-w-[334px] !max-w-[450px] " +
-                              "!fixed !top-auto !bottom-[20px] !right-[20px] " + 
+                              "!fixed !top-auto !bottom-[20px] !end-[20px] " + 
                               "!flex !items-center !gap-[24px] !p-[16px] !px-[24px] " + 
                               // Icon Styling
                               "*:data-icon:!w-[24px] *:data-icon:!h-[24px] *:data-icon:!m-0 " + 
@@ -123,7 +158,7 @@ export function showToast(type: string = 'success', title: string, options: any
       // Cancel Button Styling
       cancelButton: "",
       // Close Button Styling
-      closeButton: toastMainClass + '-close-button !w-[16px] !h-[16px] !absolute !top-[-4px] !left-[-4px] z-10 ' + 
+      closeButton: toastMainClass + '-close-button !w-[16px] !h-[16px] !absolute !top-[-4px] !start-[-4px] z-10 ' + 
                                     '!flex !items-center !justify-center ' +
                                     '!bg-[hsl(var(--grey7))] !border !border-[hsl(var(--grey5))] !rounded-full !text-white ' +
                                     '[&_svg]:!text-white [&_svg]:!fill-white [&_svg]:!stroke-white'

package/dist/components/toast/ToasterModal.svelte.d.ts

@@ -14,7 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -23,7 +23,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ToasterModal: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ToasterModal: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * The words a screen reader hears: the region that holds the toasts ("Notifications", read with the key that moves
+     * focus to it) and the button that closes one ("Close toast"). A page in another language gives its own words;
+     * left out, the English ones of the library are used.
+     */ containerAriaLabel?: string | undefined;
+    closeButtonAriaLabel?: string | undefined;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 type ToasterModal = InstanceType<typeof ToasterModal>;

package/dist/components/toast/toasterRoots.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Where the toasters are drawn.
+ *
+ * `showToast` colours the icon and the title of a toast after the toast has been drawn, by looking for them in the
+ * tree. `document.querySelector` never looks inside a shadow root, so for a toaster that a module draws inside its
+ * shadow root that lookup found nothing and the toast kept the library's grey. A toaster says which root it is drawn
+ * in (the page's document, or a shadow root), and the lookup looks there.
+ */
+/** What a lookup needs of a root: the `document` of a page and a `ShadowRoot` both have it. */
+export interface ToastLookupRoot {
+    querySelector(selectors: string): Element | null;
+}
+/**
+ * Says that a toaster is drawn in `root`. Returns the function that says it is gone: call it when the toaster is
+ * removed. Calling it twice is the same as calling it once, so a toaster that is destroyed twice does not take another
+ * toaster's place in the count.
+ */
+export declare function registerToasterRoot(root: ToastLookupRoot): () => void;
+/**
+ * The roots to look for the elements of a toast in: every root a toaster is mounted in, or `fallbackRoot` (the page's
+ * `document`) when no toaster has said where it is, as before a toaster is mounted.
+ */
+export declare function toastLookupRoots(fallbackRoot: ToastLookupRoot): ToastLookupRoot[];

package/dist/components/toast/toasterRoots.js

@@ -0,0 +1,36 @@
+/**
+ * Where the toasters are drawn.
+ *
+ * `showToast` colours the icon and the title of a toast after the toast has been drawn, by looking for them in the
+ * tree. `document.querySelector` never looks inside a shadow root, so for a toaster that a module draws inside its
+ * shadow root that lookup found nothing and the toast kept the library's grey. A toaster says which root it is drawn
+ * in (the page's document, or a shadow root), and the lookup looks there.
+ */
+/** The roots toasters are mounted in, with how many toasters each has (two in one root are allowed, if odd). */
+const mountedRoots = new Map();
+/**
+ * Says that a toaster is drawn in `root`. Returns the function that says it is gone: call it when the toaster is
+ * removed. Calling it twice is the same as calling it once, so a toaster that is destroyed twice does not take another
+ * toaster's place in the count.
+ */
+export function registerToasterRoot(root) {
+    mountedRoots.set(root, (mountedRoots.get(root) ?? 0) + 1);
+    let isRegistered = true;
+    return () => {
+        if (!isRegistered)
+            return;
+        isRegistered = false;
+        const remaining = (mountedRoots.get(root) ?? 1) - 1;
+        if (remaining <= 0)
+            mountedRoots.delete(root);
+        else
+            mountedRoots.set(root, remaining);
+    };
+}
+/**
+ * The roots to look for the elements of a toast in: every root a toaster is mounted in, or `fallbackRoot` (the page's
+ * `document`) when no toaster has said where it is, as before a toaster is mounted.
+ */
+export function toastLookupRoots(fallbackRoot) {
+    return mountedRoots.size > 0 ? [...mountedRoots.keys()] : [fallbackRoot];
+}