@widgetic/design-system 0.5.14 → 0.5.16

package/dist/components/modals/Portal.svelte

@@ -1,6 +1,8 @@
 <!-- Portal component for mounting elements outside their normal DOM hierarchy -->
 <script lang="ts">
     import { onMount, onDestroy } from 'svelte';
+    import { readable, type Readable } from 'svelte/store';
+    import { useOptionalTextDirection, type TextDirection } from '../textDirection.js';
 
     /**
      * Component props
@@ -26,6 +28,11 @@
     // show logs
     let showLogs = false;
 
+    // The content leaves the element that carries the direction of its screen, and a pop-up in a layer of the page would read
+    // the direction of the page instead. When a screen above gave one, the portal says it again on its own element (and says
+    // nothing on a page whose screens never did, so the page's own `dir` stays).
+    const screenDirection: Readable<TextDirection | undefined> = useOptionalTextDirection() ?? readable<TextDirection | undefined>(undefined);
+
     onMount(() => {
         // if(showLogs) console.log('DS Portal target:', target);
         // If target is an HTML element, use it directly
@@ -85,6 +92,7 @@
 <!-- Portal Container -->
 <div bind:this={portal} 
     class="{className ? `${className} ` : ''}portal-contents{clickThrough ? ' click-through' : ''}" 
+    dir={$screenDirection}
     style={style}
     bind:clientWidth
     bind:clientHeight
@@ -97,7 +105,7 @@
     .portal-contents {
         position: absolute;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         width: 100%;
         height: 100%;
         z-index: 99999999;

package/dist/components/modals/README.md

@@ -22,6 +22,7 @@ The `ActionModal` component is a reusable confirmation modal that can be used ac
 | `message` | string | `''` | Custom message for the modal (autogenerated if empty) |
 | `confirmLabel` | string | `'Confirm'` | Label for the confirm button |
 | `cancelLabel` | string | `'Cancel'` | Label for the cancel button |
+| `closeLabel` | string | `'Close modal'` | The words a screen reader says for the close button |
 | `width` | string | `'410px'` | Width of the modal |
 | `height` | string | `'168px'` | Height of the modal |
 | `modalId` | string | `'delete-confirmation-modal'` | ID for targeting the modal |
@@ -96,4 +97,36 @@ You can provide custom title and message for specific contexts:
   confirmLabel="Delete Permanently"
   on:confirm={handleDelete}
 />
-``` 
+``` 
+
+## Words in another language
+
+Every word a visitor can see or hear is a prop with an English default, so a page that shows the components in
+another language passes its own words and nothing else changes.
+
+| Component | Props with words |
+|-----------|------------------|
+| `BaseModal`, `ActionModal`, `RenameDialog`, `NewItemDialog` | `closeLabel` (screen reader name of the close button) |
+| `ActionModal`, `RenameDialog`, `NewItemDialog` | `confirmLabel`, `cancelLabel` |
+| `RenameDialog` | `messages`: `invalidTitle`, `enterName`, `enterDifferentName`, `enterValidName`, `tooShort`, `tooLong` (`{max}`), `renamed` (`{name}`), `failed` |
+| `NewItemDialog` | `messages`: `invalidTitle`, `required`, `invalidCharacters`, `tooLong` (`{max}`). The English defaults are built from `itemType` ("Folder name is required"). |
+| `Breadcrumbs` | `backLabel`, `forwardLabel`, `rootLabel`, `breadcrumbLabel` |
+| `PDFViewer` | `loadingLabel`, `failedLabel`, `pageLabel` (`{page}`, `{total}`), `previousPageLabel`, `nextPageLabel` |
+| `ToasterModal` (`components/toast`) | `containerAriaLabel` (the region that holds the toasts, "Notifications"; the library adds the key that moves focus to it), `closeButtonAriaLabel` ("Close toast"). The title and description of a toast are the words of whoever calls `showToast`. |
+
+A key of `messages` that is left out keeps its English text. A message can hold the values named next to it in
+curly braces: `tooLong: 'Der Name darf höchstens {max} Zeichen haben'`.
+
+```svelte
+<RenameDialog
+  bind:isOpen
+  itemName="Reisefotos"
+  confirmLabel="Umbenennen"
+  cancelLabel="Abbrechen"
+  closeLabel="Dialog schließen"
+  messages={{ enterName: 'Bitte einen Namen eingeben', tooLong: 'Höchstens {max} Zeichen' }}
+/>
+```
+
+`NewItemDialog` accepts names made of letters, numbers and spaces **of any script** ("Ordner für Müller",
+"写真", "Фото 2024"). Punctuation and symbols are still refused.

package/dist/components/modals/RenameDialog.svelte

@@ -7,6 +7,9 @@
   // import { toast } from '../ui/sonner';
   import { showToast } from '../toast';
   import BaseModal from './BaseModal.svelte';
+  // Words of the dialog and the helper that puts values into them
+  import type { RenameDialogMessages } from './messages';
+  import { fillMessage } from '../../utils/fillMessage';
 
   // Props
   let className = '';
@@ -21,6 +24,10 @@
   export let placeholder = '';
   export let confirmLabel = 'Rename';
   export let cancelLabel = 'Cancel';
+  // The words a screen reader says for the close button (see BaseModal)
+  export let closeLabel = 'Close modal';
+  // The words of the errors and toasts; a key that is left out keeps its English text (see ./messages)
+  export let messages: Partial<RenameDialogMessages> = {};
   export let width = '410px';
   export let height = '168px';
   export let target: string = 'rename-dialog'; // target for Portal
@@ -59,6 +66,18 @@
   // Computed placeholder based on itemType
   $: computedPlaceholder = placeholder || `${itemType} name...`;
 
+  // The words of the errors and toasts: the page's own, or English
+  $: text = {
+    invalidTitle: messages.invalidTitle ?? 'Invalid name',
+    enterName: messages.enterName ?? 'Please enter a name',
+    enterDifferentName: messages.enterDifferentName ?? 'Please enter a different name',
+    enterValidName: messages.enterValidName ?? 'Please enter a valid name',
+    tooShort: messages.tooShort ?? 'Name must be at least 1 character long',
+    tooLong: fillMessage(messages.tooLong ?? 'Name must be {max} characters or less', { max: maxLength }),
+    renamed: messages.renamed ?? 'Successfully renamed to {name}',
+    failed: messages.failed ?? 'Failed to rename item'
+  };
+
   // Function to focus and select the input text
   async function focusAndSelectInput() {
     // Wait for the DOM to update
@@ -95,17 +114,17 @@
     try {
       // Validate input
       if (!inputValue.trim() || inputValue.length < 1) {
-        showToast('error', 'Invalid name', { description: 'Name must be at least 1 character long' });
+        showToast('error', text.invalidTitle, { description: text.tooShort });
         return;
       }
 
       if (inputValue.length > maxLength) {
-        showToast('error', 'Invalid name', { description: `Name must be ${maxLength} characters or less` });
+        showToast('error', text.invalidTitle, { description: text.tooLong });
         return;
       }
 
       if (inputValue === itemName) {
-        showToast('error', 'Invalid name', { description: 'Please enter a different name' });
+        showToast('error', text.invalidTitle, { description: text.enterDifferentName });
         return;
       }
 
@@ -124,17 +143,17 @@
         // with a more generic approach
         try {
           // Simulate success
-          showToast('success', `Successfully renamed to ${inputValue}`);
+          showToast('success', fillMessage(text.renamed, { name: inputValue }));
           dispatch('rename', { itemId, newName: inputValue, oldName: itemName });
           isOpen = false;
         } catch (error) {
           console.error('Error during rename:', error);
-          showToast('error', 'Failed to rename item');
+          showToast('error', text.failed);
         }
       }
     } catch (error) {
       console.error('Error during rename:', error);
-      showToast('error', 'Failed to rename item');
+      showToast('error', text.failed);
     }
   }
 
@@ -172,6 +191,7 @@
   width={width}
   height={height}
   titlePadding="small"
+  {closeLabel}
   {modalType}
   {modalData}
   on:restore={handleRestore}
@@ -224,9 +244,9 @@
       />
       {#if !isValid && hasAttemptedSubmit}
         <div class="text-xs text-[hsl(var(--error))] mt-1">
-          {inputValue.trim().length === 0 ? 'Please enter a name' : 
-           inputValue === itemName ? 'Please enter a different name' : 
-           'Please enter a valid name'}
+          {inputValue.trim().length === 0 ? text.enterName : 
+           inputValue === itemName ? text.enterDifferentName : 
+           text.enterValidName}
         </div>
       {/if}
     </div>

package/dist/components/modals/RenameDialog.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { RenameDialogMessages } from './messages';
 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;
@@ -22,6 +23,8 @@ declare const RenameDialog: $$__sveltets_2_IsomorphicComponent<{
     placeholder?: string;
     confirmLabel?: string;
     cancelLabel?: string;
+    closeLabel?: string;
+    messages?: Partial<RenameDialogMessages>;
     width?: string;
     height?: string;
     target?: string;

package/dist/components/modals/messages.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The words the dialogs say besides their title, placeholder and button labels.
+ *
+ * Every key is optional: a key that is left out keeps its English text. A message can hold named values in curly
+ * braces, for example `Name must be {max} characters or less`; the dialog says which ones it fills in (see
+ * `fillMessage` in utils).
+ * A page that shows the dialogs in another language passes its own words, for example
+ * `<RenameDialog messages={{ enterName: 'Bitte einen Namen eingeben' }} />`.
+ */
+/** Words of RenameDialog. */
+export interface RenameDialogMessages {
+    /** Heading of the toast shown for a name that cannot be used. */
+    invalidTitle: string;
+    /** Under the field when it is empty. */
+    enterName: string;
+    /** Under the field and in the toast when the name has not changed. */
+    enterDifferentName: string;
+    /** Under the field when the name cannot be used for another reason. */
+    enterValidName: string;
+    /** Toast text for an empty name. */
+    tooShort: string;
+    /** Toast text for a name that is too long. Values: `{max}`, the longest name allowed. */
+    tooLong: string;
+    /** Toast when the dialog did the rename itself. Values: `{name}`, the new name. */
+    renamed: string;
+    /** Toast when the dialog did the rename itself and it failed. */
+    failed: string;
+}
+/** Words of NewItemDialog. The English defaults are built from the dialog's `itemType` ("Folder name is required"). */
+export interface NewItemDialogMessages {
+    /** Heading of the toast shown for a name that cannot be used. */
+    invalidTitle: string;
+    /** Under the field when it is empty. */
+    required: string;
+    /** Under the field when the name has a character the dialog does not accept. */
+    invalidCharacters: string;
+    /** Under the field and in the toast when the name is too long. Values: `{max}`, the longest name allowed. */
+    tooLong: string;
+}

package/dist/components/modals/messages.js

@@ -0,0 +1,10 @@
+/**
+ * The words the dialogs say besides their title, placeholder and button labels.
+ *
+ * Every key is optional: a key that is left out keeps its English text. A message can hold named values in curly
+ * braces, for example `Name must be {max} characters or less`; the dialog says which ones it fills in (see
+ * `fillMessage` in utils).
+ * A page that shows the dialogs in another language passes its own words, for example
+ * `<RenameDialog messages={{ enterName: 'Bitte einen Namen eingeben' }} />`.
+ */
+export {};

package/dist/components/navigation/Breadcrumbs.svelte

@@ -12,7 +12,8 @@
   import { IconArrowLeft, IconArrowRight } from '@tabler/icons-svelte';
 
   // Types Import
-  import type { BreadcrumbsProps } from './types.ts';
+  import type { BreadcrumbsProps } from './types.js';
+  import { dirForUserText, useTextDirection } from '../textDirection.js';
 
   // Environment Import
   // import { browser } from '$app/environment';
@@ -36,6 +37,11 @@
   export let showNavigationButtons: BreadcrumbsProps['showNavigationButtons'] = true;  
   export let canGoBack: BreadcrumbsProps['canGoBack'] = false;
   export let canGoForward: BreadcrumbsProps['canGoForward'] = false;
+  // words (tooltips and screen readers): a page that shows this in another language passes its own
+  export let backLabel: string = 'Back';
+  export let forwardLabel: string = 'Forward';
+  export let rootLabel: string = 'File browser';
+  export let breadcrumbLabel: string = 'breadcrumb';
   // event handlers
   export let onNavigate: BreadcrumbsProps['onNavigate'] = () => {};
   export let onBack: BreadcrumbsProps['onBack'] = () => {};
@@ -43,6 +49,11 @@
   // debug settings
   export let showDebugVisualizer: boolean = false;
 
+  // A name a visitor wrote keeps a direction of its own on a right to left screen (a Latin folder name reads left to
+  // right inside it); on a left to right screen no attribute is written and nothing changes.
+  const textDirection = useTextDirection();
+  $: nameDirection = dirForUserText($textDirection);
+
   /***
    * COMPONENT STATE VARIABLES
    **/
@@ -99,7 +110,7 @@
       navButtons: showNavigationButtons 
         ? navElement.querySelector('.nav-buttons')?.getBoundingClientRect() 
         : null,
-      rightContent: containerElement.querySelector('.pr-5, .right-content')?.getBoundingClientRect(),
+      rightContent: containerElement.querySelector('.pe-5, .pr-5, .right-content')?.getBoundingClientRect(),
       breadcrumbs: breadcrumbsContainer.getBoundingClientRect()
     };
 
@@ -179,7 +190,7 @@
 <nav 
   bind:this={navElement} 
   bind:clientHeight
-  aria-label="breadcrumb" 
+  aria-label={breadcrumbLabel}
   class="{className ? className + ' ' : ''}breadcrumbs-component flex items-center widgetic-colors h-[56px] bg-white border-b relative w-full"
   style={style}
 >
@@ -188,58 +199,52 @@
     <Tooltip.Provider delayDuration={300}>
       <div class="nav-buttons flex items-center shrink-0">
         <Tooltip.Root open={showBackTooltip}>
-          <Tooltip.Trigger class="inline-flex focus:outline-none">
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div
-              class="breadcrumbs-nav-button flex items-center justify-center w-6 h-6"
-              style="cursor: {canGoBack && !isLoading ? 'pointer' : 'default'};"
-              class:opacity-50={!canGoBack || isLoading}
-              on:mouseenter={() => { showBackTooltip = true; }}
-              on:mouseleave={() => { showBackTooltip = false; }}
-              on:click={canGoBack && !isLoading ? onBack : undefined}
-              role="button"
-              tabindex={canGoBack && !isLoading ? 0 : -1}
-            >
-              <IconArrowLeft
-                class="w-6 h-6 text-[hsl(var(--grey6))]"
-                style="min-width: 24px; min-height: 24px;"
-              />
-            </div>
-          </Tooltip.Trigger>
+          <button
+            type="button"
+            class="breadcrumbs-nav-button inline-flex items-center justify-center w-6 h-6 border-0 bg-transparent p-0 focus:outline-none"
+            style="cursor: {canGoBack && !isLoading ? 'pointer' : 'default'}; opacity: {canGoBack && !isLoading ? 1 : 0.35};"
+            aria-label={backLabel}
+            aria-disabled={!canGoBack || isLoading}
+            on:mouseenter={() => { showBackTooltip = true; }}
+            on:mouseleave={() => { showBackTooltip = false; }}
+            on:click={() => { if (!isLoading) onBack(); }}
+          >
+            <IconArrowLeft
+              class="w-6 h-6 text-[hsl(var(--grey6))] rtl:-scale-x-100"
+              style="min-width: 24px; min-height: 24px;"
+            />
+          </button>
           {#if showBackTooltip}
             <!-- Portaled to <body>: the header row around this nav is overflow-hidden, which
                  otherwise clips the tooltip at the header's bottom edge. -->
             <Tooltip.Portal>
               <Tooltip.Content side="bottom" sideOffset={6} class="bg-[hsl(var(--dark))] text-white caption px-2 py-1 rounded-md z-[200000]">
-                Back
+                {backLabel}
               </Tooltip.Content>
             </Tooltip.Portal>
           {/if}
         </Tooltip.Root>
 
         <Tooltip.Root open={showForwardTooltip}>
-          <Tooltip.Trigger class="inline-flex focus:outline-none">
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div
-              class="breadcrumbs-nav-button flex items-center justify-center w-6 h-6 ml-4"
-              style="cursor: {canGoForward && !isLoading ? 'pointer' : 'default'};"
-              class:opacity-50={!canGoForward || isLoading}
-              on:mouseenter={() => { showForwardTooltip = true; }}
-              on:mouseleave={() => { showForwardTooltip = false; }}
-              on:click={canGoForward && !isLoading ? onForward : undefined}
-              role="button"
-              tabindex={canGoForward && !isLoading ? 0 : -1}
-            >
-              <IconArrowRight
-                class="w-6 h-6 text-[hsl(var(--grey6))]"
-                style="min-width: 24px; min-height: 24px;"
-              />
-            </div>
-          </Tooltip.Trigger>
+          <button
+            type="button"
+            class="breadcrumbs-nav-button ms-4 inline-flex items-center justify-center w-6 h-6 border-0 bg-transparent p-0 focus:outline-none"
+            style="cursor: {canGoForward && !isLoading ? 'pointer' : 'default'}; opacity: {canGoForward && !isLoading ? 1 : 0.35};"
+            aria-label={forwardLabel}
+            aria-disabled={!canGoForward || isLoading}
+            on:mouseenter={() => { showForwardTooltip = true; }}
+            on:mouseleave={() => { showForwardTooltip = false; }}
+            on:click={() => { if (!isLoading) onForward(); }}
+          >
+            <IconArrowRight
+              class="w-6 h-6 text-[hsl(var(--grey6))] rtl:-scale-x-100"
+              style="min-width: 24px; min-height: 24px;"
+            />
+          </button>
           {#if showForwardTooltip}
             <Tooltip.Portal>
               <Tooltip.Content side="bottom" sideOffset={6} class="bg-[hsl(var(--dark))] text-white caption px-2 py-1 rounded-md z-[200000]">
-                Forward
+                {forwardLabel}
               </Tooltip.Content>
             </Tooltip.Portal>
           {/if}
@@ -249,8 +254,8 @@
   {/if}
 
   <!-- BREADCRUMBS CONTAINER -->
-  <div bind:this={breadcrumbsContainer} class="flex-1 pl-[18px] overflow-hidden min-w-0">
-    <Breadcrumb.Root>
+  <div bind:this={breadcrumbsContainer} class="flex-1 ps-[18px] overflow-hidden min-w-0">
+    <Breadcrumb.Root aria-label={breadcrumbLabel}>
       <Breadcrumb.List class="inline-flex items-center min-w-0 breadcrumbs-list">
         <div class="inline-flex items-center min-w-0 min-h-[24px]">
           <!-- Root Breadcrumb Item -->
@@ -265,7 +270,7 @@
               on:click={(e) => handleClick(e, -1)}
               on:keydown={(e) => handleKeyDown(e, -1)}
             >
-              File browser
+              {rootLabel}
             </span>
           </Breadcrumb.Item>
 
@@ -285,7 +290,7 @@
                     {#each currentPath.slice(0, -itemsToShow + 1) as _, index}
                       <DropdownMenu.Item>
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <span
+                        <span dir={nameDirection}
                           role="link"
                           tabindex="0"
                           class="block w-full cursor-pointer"
@@ -304,12 +309,12 @@
                 <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
                 <Breadcrumb.Item class="shrink-0">
                   {#if index === itemsToShow - 2}
-                    <span class="h5 text-[hsl(var(--grey3))]">
+                    <span dir={nameDirection} class="h5 text-[hsl(var(--grey3))]">
                       {currentPathNames[currentPath.length - 1]}
                     </span>
                   {:else}
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <span
+                    <span dir={nameDirection}
                       role="link"
                       tabindex="0"
                       class="h5 text-[hsl(var(--grey6))] transition-colors hover:text-[hsl(var(--grey7))] hover:underline hover:decoration-[hsl(var(--grey7))] cursor-pointer"
@@ -328,12 +333,12 @@
                 <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
                 <Breadcrumb.Item class="shrink-0">
                   {#if index === currentPath.length - 1}
-                    <span class="h5 text-[hsl(var(--grey3))]">
+                    <span dir={nameDirection} class="h5 text-[hsl(var(--grey3))]">
                       {currentPathNames[index]}
                     </span>
                   {:else}
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <span
+                    <span dir={nameDirection}
                       role="link"
                       tabindex="0"
                       class="h5 text-[hsl(var(--grey6))] transition-colors hover:text-[hsl(var(--grey7))] hover:underline hover:decoration-[hsl(var(--grey7))] cursor-pointer"
@@ -355,7 +360,7 @@
   </div>
 
   {#if showDebugVisualizer}
-    <div class="absolute bottom-1 right-1 text-xs text-blue-600 bg-white px-1 rounded shadow-2xs">
+    <div class="absolute bottom-1 end-1 text-xs text-blue-600 bg-white px-1 rounded shadow-2xs">
       Available width: {Math.round(availableWidth)}px
       <br>
       Items to show: {itemsToShow}

package/dist/components/navigation/Breadcrumbs.svelte.d.ts

@@ -24,6 +24,10 @@ declare const Breadcrumbs: $$__sveltets_2_IsomorphicComponent<{
     showNavigationButtons?: BreadcrumbsProps["showNavigationButtons"];
     canGoBack?: BreadcrumbsProps["canGoBack"];
     canGoForward?: BreadcrumbsProps["canGoForward"];
+    backLabel?: string;
+    forwardLabel?: string;
+    rootLabel?: string;
+    breadcrumbLabel?: string;
     onNavigate?: BreadcrumbsProps["onNavigate"];
     onBack?: BreadcrumbsProps["onBack"];
     onForward?: BreadcrumbsProps["onForward"];

package/dist/components/navigation/types.d.ts

@@ -9,4 +9,12 @@ export interface BreadcrumbsProps {
     onForward: () => void;
     showNavigationButtons?: boolean;
     showDebugVisualizer?: boolean;
+    /** Tooltip and screen reader name of the back button. Default: "Back". */
+    backLabel?: string;
+    /** Tooltip and screen reader name of the forward button. Default: "Forward". */
+    forwardLabel?: string;
+    /** Name of the first item of the path. Default: "File browser". */
+    rootLabel?: string;
+    /** Screen reader name of the navigation. Default: "breadcrumb". */
+    breadcrumbLabel?: string;
 }

package/dist/components/pdf/PDFViewer.svelte

@@ -43,6 +43,9 @@
 
   // Import PDF cache store
   import { pdfCache } from '../../stores/pdfCache'; 
+
+  // Puts the page numbers into the words of the page counter
+  import { fillMessage } from '../../utils/fillMessage';
   
   // Component props
   // class and style props
@@ -52,6 +55,12 @@
   // data props
   export let url = '';
   export let enableCacheClearing: boolean = true; // Flag to enable/disable cache clearing shortcut
+  // words: a page that shows the viewer in another language passes its own
+  export let loadingLabel: string = 'Loading PDF...';
+  export let failedLabel: string = 'Failed to load PDF';
+  export let pageLabel: string = 'Page {page} of {total}'; // {total} is "?" until the page count is known
+  export let previousPageLabel: string = 'Previous page';
+  export let nextPageLabel: string = 'Next page';
 
   // Consts
   const initialContainerWidth = 500;  // Default width during loading  
@@ -531,11 +540,11 @@
   <!-- Always render loading or error state on top of content -->
   {#if !mounted || loading || (!isCanvasReady && !error)}
     <div class="text-[hsl(var(--grey5))] p-6 absolute z-10 widgetic-colors flex items-center justify-center inset-0">
-      Loading PDF...
+      {loadingLabel}
     </div>
   {:else if error}
     <div class="pdf-error-overlay bg-[hsl(var(--grey1))] text-[hsl(var(--grey2))] inset-4 px-4 absolute z-10 flex flex-col items-center justify-center">
-      <p class="text-[hsl(var(--error))] mb-2">Failed to load PDF</p>
+      <p class="text-[hsl(var(--error))] mb-2">{failedLabel}</p>
       <p class="text-[hsl(var(--grey5))] text-sm">{error}</p>
     </div>
   {/if}
@@ -546,18 +555,18 @@
     <!-- Page Navigation Bar -->
     <div class="page-navigation-bar flex items-center justify-center h-[54px] widgetic-colors border-b border-[hsl(var(--grey2))] w-full">
       <div class="flex items-center gap-3 w-full max-w-[200px] justify-between px-0">
-        <button class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onPrevPage} disabled={pageNum <= 1}>
+        <button class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onPrevPage} disabled={pageNum <= 1} aria-label={previousPageLabel}>
           <IconChevronLeft
-            class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
+            class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))] rtl:-scale-x-100"
             style="height: 20px !important; min-width: 20px !important; max-width: 20px !important; max-height: 20px !important;"
           />
         </button>
         
-        <span class="subtext text-[hsl(var(--grey7))]">Page {pageNum} of {pageCount || '?'}</span>
+        <span class="subtext text-[hsl(var(--grey7))]">{fillMessage(pageLabel, { page: pageNum, total: pageCount || '?' })}</span>
         
-        <button class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onNextPage} disabled={pageNum >= pageCount}>
+        <button class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onNextPage} disabled={pageNum >= pageCount} aria-label={nextPageLabel}>
           <IconChevronRight
-            class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
+            class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))] rtl:-scale-x-100"
             style="height: 20px !important; min-width: 20px !important; max-width: 20px !important; max-height: 20px !important;"
           />
         </button>
@@ -591,7 +600,7 @@
     content: '';
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
     border: 1px solid hsl(var(--grey2));

package/dist/components/pdf/PDFViewer.svelte.d.ts

@@ -16,6 +16,11 @@ declare const PDFViewer: $$__sveltets_2_IsomorphicComponent<{
     style?: string;
     url?: string;
     enableCacheClearing?: boolean;
+    loadingLabel?: string;
+    failedLabel?: string;
+    pageLabel?: string;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
 }, {
     error: CustomEvent<{
         message: string;

package/dist/components/search-input/SearchInput.svelte

@@ -62,7 +62,7 @@
   <div class="group relative w-full">
     <div class="relative overflow-hidden rounded-small border border-[hsl(var(--grey2))] bg-[hsl(var(--grey1))] transition-colors duration-200 hover:border-[hsl(var(--grey2))]">
       <div class="relative w-full flex items-center">
-        <div class="absolute left-2 flex items-center pointer-events-none">
+        <div class="absolute start-2 flex items-center pointer-events-none">
           <IconSearch class="h-5 w-5 text-[hsl(var(--grey5))] transition-colors duration-300 {value ? 'text-[hsl(var(--grey7))]' : 'group-hover:text-[hsl(var(--grey7))] group-focus-within:text-[hsl(var(--grey7))]'}" />
         </div>
         <input 
@@ -79,7 +79,7 @@
             onKeydown(e);
           }}
           onpaste={onPaste}
-          class="w-full h-[38px] border-0 bg-transparent focus:outline-hidden focus:ring-0 focus-visible:ring-0 pl-9 pr-8 subtext 
+          class="w-full h-[38px] border-0 bg-transparent focus:outline-hidden focus:ring-0 focus-visible:ring-0 ps-9 pe-8 subtext 
                 transition-all duration-300 
                 {value ? 'text-[hsl(var(--grey7))]' : 'text-[hsl(var(--grey3))] placeholder:text-[hsl(var(--grey3))] placeholder:transition-colors placeholder:duration-300 group-hover:text-[hsl(var(--grey7))] group-hover:placeholder:text-[hsl(var(--grey7))] group-focus-within:text-[hsl(var(--grey7))] group-focus-within:placeholder:text-[hsl(var(--grey7)))'} 
                 {inputClass}"
@@ -87,7 +87,7 @@
         {#if value}
           <button
             type="button"
-            class="absolute right-2 h-6 w-6 inline-flex items-center justify-center rounded-full hover:bg-[hsl(var(--grey2))] transition-all duration-300 widgetic-colors"
+            class="absolute end-2 h-6 w-6 inline-flex items-center justify-center rounded-full hover:bg-[hsl(var(--grey2))] transition-all duration-300 widgetic-colors"
             onclick={onClear}
           >
             <X class="h-4 w-4 text-[hsl(var(--grey7))] transition-colors duration-300 hover:text-[hsl(var(--grey7))] widgetic-colors" />

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

@@ -7,13 +7,16 @@
 	import { mode } from 'mode-watcher';
 	let { hex = $bindable() }: ColorpickerProps = $props();
 	import ColorPicker from 'svelte-awesome-color-picker';
+	import { useI18n } from './i18n/context.js';
+
+	const { t } = useI18n();
 </script>
 
 <div class:dark={$mode === 'dark'}>
 	<ColorPicker
 		bind:hex
 		sliderDirection="vertical"
-		label="Pick a color"
+		label={$t('shadEditor.colorPicker.label')}
 		isTextInput={false}
 		isAlpha
 		--picker-indicator-size="1rem"

package/dist/components/shad-editor/custom/Extentions/ImageExtention.d.ts

@@ -1 +1,20 @@
-export declare const ImageExtension: import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any>;
+import { type ImageOptions } from '@tiptap/extension-image';
+import type { Readable } from 'svelte/store';
+import type { Translate } from '../../../../i18n/index.js';
+import type { ShadEditorMessageKey } from '../../i18n/messages.js';
+import type { TextDirection } from '../../../textDirection.js';
+export interface ImageExtensionOptions {
+    /**
+     * The words of the editor (`language.t` of the editor component). A node view is mounted by TipTap outside the
+     * editor's component tree, where Svelte's context does not reach, so the words travel in the options of the extension.
+     * English when left out.
+     */
+    translate: Readable<Translate<ShadEditorMessageKey>> | null;
+    /**
+     * The way the screen around the editor is read (`textDirection` of the editor component). It travels in the options for
+     * the same reason as `translate`: the menu of the image bar is drawn by a component TipTap mounts outside the editor's
+     * tree, so it would not find the direction in Svelte's context. Left to right when left out.
+     */
+    textDirection: Readable<TextDirection> | null;
+}
+export declare const ImageExtension: import("@tiptap/core").Node<ImageOptions & ImageExtensionOptions, any>;