@widgetic/editor 4.0.10 → 4.1.0

package/dist/components/editors/PropsEditor.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { ContentSchemaView, DesignSchemaView } from '../../schemaViews.js';
+import type { MediaLibraryProvider } from '@widgetic/file-browser';
 /**
      * STYLES from Widgetic Design System
      * Note: props-editor.css global rules (body, *) moved to app.css (standalone only).
@@ -28,8 +29,8 @@ declare const PropsEditor: $$__sveltets_2_IsomorphicComponent<{
     designSchema?: DesignSchemaView | null;
     contentSchema?: ContentSchemaView | undefined;
     itemTemplate?: any;
-    designTabTitle?: string;
-    contentTabTitle?: string;
+    designTabTitle?: string | undefined;
+    contentTabTitle?: string | undefined;
     defaultTab?: "design" | "content";
     defaultOpen?: boolean;
     showDragHandle?: boolean;
@@ -40,11 +41,17 @@ declare const PropsEditor: $$__sveltets_2_IsomorphicComponent<{
     /** Optional content below the shared toolbar, before property fields. */ headerContent?: any;
     headerClass?: string;
     dragHandleClass?: string;
-    title?: string;
+    title?: string | undefined;
     /** Hide the default missing-schema message for header-only editors. */ showSchemaError?: boolean;
     /** Optional layout wrapper moved by this editor's built-in drag and position API. */ positionTarget?: any;
     initialDesignValues?: Record<string, any>;
     initialContentValues?: Record<string, any>;
+    /**
+         * Where the file controls (images, video, audio, documents) get their files from. Without it they show the
+         * Widgetic account's uploads, as they always have (configured with `setFileBrowserUploadConfig`). With a
+         * `MediaLibraryProvider` they list, upload, rename and delete through its functions instead, so a partner's own
+         * storage (a CMS, an S3 bucket, a DAM) can be used with no Widgetic storage at all.
+         */ mediaLibrary?: MediaLibraryProvider | undefined;
     updateDesignValue?: (propertyId: string, value: any) => void;
     setPosition?: (left: number, top: number) => void;
     getPosition?: () => {

package/dist/components/ic/AngleInputController.svelte

@@ -234,7 +234,7 @@
       <InputControllerHeader {label} {helpText} />
     </div>
     
-    <div class="absolute right-0 h-[48px] flex items-center">
+    <div class="absolute end-0 h-[48px] flex items-center">
       <div class="flex items-center justify-end gap-2">
         <!-- Circle Indicator -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->

package/dist/components/ic/BrowserInputController.svelte

@@ -35,12 +35,17 @@
   import { Portal, Tooltip } from '@widgetic/design-system/components';
   import { ThumbHashImage } from "@widgetic/design-system/components";
   import { FileBrowser, setFileBrowserUploadConfig, persistentSelectStore } from '@widgetic/file-browser';
+  import { useEditorMediaLibrary } from '../../mediaLibraryContext';
+  import { useEditorLanguage } from '../../i18n/language';
+  import type { EditorMessageKey } from '../../i18n/messages';
+  import type { Translate } from '@widgetic/design-system/i18n';
   import X from '../icons/x.svelte';
   // console.log("BrowserInputController - Tooltip:", Tooltip);
   
 
   // utils imports
   import MediaManager from '../../utils/MediaManager';
+  import { queryInTreeOf } from '../../utils/shadowDom';
 
   // Static asset imports (bundled via Vite, works when imported as library)
   import icAudio from '../../assets/icons/ic-browser/audio.svg?url';
@@ -65,10 +70,20 @@
     (portalTarget instanceof HTMLElement &&
       portalTarget.id === 'props-editor-file-browser-portal');
   export let config: BrowserInputControllerProps['config'] = {};
+
+  // The media library the editor above was given (a partner's own storage, for instance), read through a getter
+  // because it reaches this component through context.
+  const getEditorMediaLibrary = useEditorMediaLibrary();
+
+  // The words of the editor in the language of the page, and the share of them that belongs to the File Browser inside it.
+  const { t, fileBrowser: fileBrowserLanguage } = useEditorLanguage();
   
   // Extract allowed file types from config or default to all files
   const fileTypes = config.fileTypes || ['*'];
   
+  // The control's own element, to find the editor's panel from (see getPortalHost)
+  let controllerElement: HTMLDivElement | undefined;
+
   // Media element references for audio/video playback
   let audioElement: HTMLAudioElement | null = null;
   let videoElement: HTMLVideoElement | null = null;
@@ -166,6 +181,9 @@
   /** Only embedded iframe mode (URL params) sets upload config here; standalone uses parent +page sync. */
   function syncFileBrowserUploadConfigIfEmbedded() {
     if (typeof window === 'undefined') return;
+    // With a media library the File Browser takes its files from it and never reads the upload configuration, and the
+    // address of the page this editor sits in (which can be a partner's) is none of the editor's business.
+    if (getEditorMediaLibrary()) return;
     const params = new URLSearchParams(window.location.search);
     const apiUrl = params.get('apiUrl');
     const token = params.get('token');
@@ -187,7 +205,9 @@
   function getPortalHost(): HTMLElement | null {
     if (portalTarget instanceof HTMLElement) return portalTarget;
     if (typeof document === 'undefined') return null;
-    return document.getElementById('props-editor-file-browser-portal');
+    // Looked for in the tree this control is in: inside a module that is a shadow root, which `document` cannot see into
+    const portalHost = queryInTreeOf(controllerElement, '#props-editor-file-browser-portal');
+    return portalHost instanceof HTMLElement ? portalHost : null;
   }
 
   function setPortalHostInteractive(active: boolean) {
@@ -377,15 +397,15 @@
   $: if (videoElement) setupMediaElement(videoElement);
 
   // Add placeholder text logic
-  function getAddToEditorLabelSingular(fileTypes: string[]): string {
-    if (!fileTypes || fileTypes.includes('*')) return 'Use file';
+  function getAddToEditorLabelSingular(fileTypes: string[], translate: Translate<EditorMessageKey>): string {
+    if (!fileTypes || fileTypes.includes('*')) return translate('editor.file.useFile');
     const type = fileTypes[0].split('/')[0];
     switch (type) {
-      case 'image': return 'Use image';
-      case 'video': return 'Use video';
-      case 'audio': return 'Use audio';
-      case 'document': return 'Use document';
-      default: return 'Use file';
+      case 'image': return translate('editor.file.useImage');
+      case 'video': return translate('editor.file.useVideo');
+      case 'audio': return translate('editor.file.useAudio');
+      case 'document': return translate('editor.file.useDocument');
+      default: return translate('editor.file.useFile');
     }
   }
 
@@ -405,15 +425,15 @@
     }
   }
 
-  function getPlaceholderText(fileTypes: string[]): string {
-    if (!fileTypes || fileTypes.includes('*')) return 'Add file...';
+  function getPlaceholderText(fileTypes: string[], translate: Translate<EditorMessageKey>): string {
+    if (!fileTypes || fileTypes.includes('*')) return translate('editor.file.addFile');
     const type = fileTypes[0].split('/')[0];
     switch (type) {
-      case 'image': return 'Add image...';
-      case 'video': return 'Add video...';
-      case 'audio': return 'Add audio...';
-      case 'document': return 'Add docs...';
-      default: return 'Add file...';
+      case 'image': return translate('editor.file.addImage');
+      case 'video': return translate('editor.file.addVideo');
+      case 'audio': return translate('editor.file.addAudio');
+      case 'document': return translate('editor.file.addDocument');
+      default: return translate('editor.file.addFile');
     }
   }
 
@@ -429,7 +449,7 @@
 
   $: fileBrowserFilter = getInitialFileBrowserFilter(fileTypes);
   $: fileBrowserRestrictUpload = fileBrowserFilter !== 'all';
-  $: fileBrowserAddToEditorLabelSingular = getAddToEditorLabelSingular(fileTypes);
+  $: fileBrowserAddToEditorLabelSingular = getAddToEditorLabelSingular(fileTypes, $t);
 
   function handleContentRemoval(e: MouseEvent) {
     e.stopPropagation();
@@ -461,13 +481,13 @@
 </script>
 
 <!-- Main container with updated styling -->
-<div class="flex flex-col gap-2 widgetic-colors">
+<div bind:this={controllerElement} class="flex flex-col gap-2 widgetic-colors">
   <div class="flex items-center w-full relative">
     <div class="flex-1 min-w-0">
       <InputControllerHeader label={header?.label || label} helpText={header?.helpText} />
     </div>
     
-    <div class="absolute right-0">
+    <div class="absolute end-0">
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -482,12 +502,12 @@
         <!-- File name or placeholder -->
         <div class="browser-input-controller-label flex-1 min-w-0 px-4 flex items-center h-full">
           <span class="subtext {value ? 'text-grey7' : 'text-grey3'} truncate inline-block">
-            {value ? getFileName(value) : getPlaceholderText(fileTypes)}
+            {value ? getFileName(value) : getPlaceholderText(fileTypes, $t)}
           </span>
         </div>
 
         <!-- Preview area -->
-        <div class="flex-none h-full flex items-center pr-[16px]">
+        <div class="flex-none h-full flex items-center pe-[16px]">
           {#if isChecking}
             <!-- Loading state -->
             <div class="w-8 h-7 bg-gray-100 rounded-lg"></div>
@@ -564,7 +584,7 @@
                 >
                   <img 
                     src={isPlaying ? icPlayerPause : icPlayerPlay}
-                    alt={isPlaying ? "Pause" : "Play"}
+                    alt={isPlaying ? $t('editor.file.pause') : $t('editor.file.play')}
                     class="w-5 h-5 {isPlaying ? 'opacity-0 hover:opacity-100' : 'opacity-100'} transition-opacity"
                   />
                 </div>
@@ -600,7 +620,7 @@
                 >
                   <img 
                     src={isPlaying ? icPlayerPause : icPlayerPlay}
-                    alt={isPlaying ? "Pause" : "Play"}
+                    alt={isPlaying ? $t('editor.file.pause') : $t('editor.file.play')}
                     class="w-5 h-5"
                   />
                 </div>
@@ -629,14 +649,14 @@
             <!-- Error state -->
             <img 
               src={icError} 
-              alt="File not found" 
+              alt={$t('editor.file.notFound')} 
               class="w-8 h-7 object-contain" 
             />
           {:else}
             <!-- Empty state -->
             <img 
               src={icFolder} 
-              alt="Empty folder" 
+              alt={$t('editor.file.emptyFolder')} 
               class="w-8 h-7 object-contain" 
             />
           {/if}
@@ -645,9 +665,9 @@
           {#if value}
             <button
               type="button"
-              class="browser-ic-clear-btn absolute top-[-4px] right-[-4px] w-4 h-4 rounded-full hover:bg-grey2 transition-colors flex items-center justify-center"
+              class="browser-ic-clear-btn absolute top-[-4px] end-[-4px] w-4 h-4 rounded-full hover:bg-grey2 transition-colors flex items-center justify-center"
               on:click={handleContentRemoval}
-              aria-label="Clear file"
+              aria-label={$t('editor.file.clear')}
             >
               <div class="w-4 h-4 flex items-center justify-center">
                 <X class="w-4! h-4!" />
@@ -685,31 +705,38 @@
         class:rounded-large={!fillEditorPanel}
         class:shadow-2xl={!fillEditorPanel}
       >
-        <div class="browser-input-file-browser-header relative flex h-[48px] shrink-0 items-center border-b border-grey2 pl-4 pr-8">
-          <span class="body-medium text-grey7">Select file</span>
+        <div class="browser-input-file-browser-header relative flex h-[48px] shrink-0 items-center border-b border-grey2 ps-4 pe-8">
+          <span class="body-medium text-grey7">{$t('editor.file.dialogTitle')}</span>
           <button
             type="button"
             class="browser-input-file-browser-close inline-flex h-6 w-6 items-center justify-center p-0"
-            style="position:absolute;top:4px;right:4px;"
+            style="position:absolute;top:4px;inset-inline-end:4px;"
             on:click={closeFileBrowser}
-            aria-label="Close file browser"
+            aria-label={$t('editor.file.closeDialog')}
           >
             <X class="h-6! w-6!" />
           </button>
         </div>
 
         <div class="browser-input-file-browser-body flex min-h-0 flex-1 flex-col overflow-hidden">
+          <!-- With a media library the File Browser keeps nothing about this visit (the filter it was left on, the
+               folder it was left in) in the page's localStorage: that storage belongs to the page this editor sits in,
+               which can be a partner's. Without one (the Widgetic site) it remembers them, as it always did. -->
           <FileBrowser
             class="h-full min-h-0 flex-1"
             instanceId={`props-editor-browser-input-${fileBrowserFilter}`}
             initialFilter={fileBrowserFilter}
             restrictUpload={fileBrowserRestrictUpload}
             useDemoContent={false}
+            mediaLibrary={getEditorMediaLibrary()}
+            persistHistory={!getEditorMediaLibrary()}
             allowSelecting={true}
             showAddToEditor={true}
             maxSelections={1}
             activeFileId={getCurrentFileId()}
             addToEditorLabel={fileBrowserAddToEditorLabelSingular}
+            locale={$fileBrowserLanguage.locale ?? undefined}
+            messages={$fileBrowserLanguage.messages ?? null}
             on:select={handleFileBrowserSelect}
           />
         </div>
@@ -722,7 +749,7 @@
   .browser-input-file-browser-close {
     position: absolute;
     top: 4px;
-    right: 4px;
+    inset-inline-end: 4px;
   }
 
   .browser-input-file-browser-dialog-animate {

package/dist/components/ic/ColorPickerInputController.svelte

@@ -69,6 +69,15 @@
   import { colorNames } from '../../utils/colorNames';
   import { getColorSuggestions, getNextSuggestion, type AutocompleteResult } from '../../utils/colorAutocomplete';
   import { recentColorsUtil } from '../../utils/recentColors';
+  import { listenForScroll, lockPointerStyle } from '../../utils/shadowDom';
+  import { useEditorLanguage } from '../../i18n/language';
+  import { useTextDirection } from '@widgetic/design-system/components/textDirection';
+
+  // The words of the editor in the language of the page.
+  const { t } = useEditorLanguage();
+
+  // The way the screen is read: the pop-up opens from the end of the field, which is its left edge on a right to left screen.
+  const textDirection = useTextDirection();
 
   
 
@@ -544,8 +553,10 @@
    * @param event - Scroll event
    */
   function handleScroll(event: Event) {
-    // Don't close if scrolling happens within allowed elements
-    if ((event.target as HTMLElement).closest('[data-allow-scroll="true"]')) {
+    // Don't close if scrolling happens within allowed elements. The page itself scrolling has the document as its
+    // target (it has no closest()), so only an element can be one of the allowed ones.
+    const scrollTarget = event.target;
+    if (scrollTarget instanceof Element && scrollTarget.closest('[data-allow-scroll="true"]')) {
       return;
     }
 
@@ -557,6 +568,9 @@
     }
   }
 
+  // Puts the pointer back after an opacity drag, however the drag ends (the picker can be removed in the middle of one).
+  let releaseOpacityPointerStyle: (() => void) | null = null;
+
   /**
    * Manages opacity slider interactions
    * - Handles mouse drag events
@@ -567,7 +581,12 @@
    */
   function handleOpacityMouseDown(event: MouseEvent) {
     isDragging = true;
-    document.body.style.cursor = 'grabbing';
+    // The cursor is shown on the host of the shadow root the picker is in, and on <body> only on a normal page: the
+    // <body> of a customer's page is not the editor's to change.
+    releaseOpacityPointerStyle?.();
+    releaseOpacityPointerStyle = lockPointerStyle(event.currentTarget ?? event.target, 'grabbing', {
+      blockTextSelection: false
+    });
     updateOpacity(event);
     
     const handleMouseMove = (e: MouseEvent) => {
@@ -578,7 +597,8 @@
     
     const handleMouseUp = () => {
       isDragging = false;
-      document.body.style.cursor = '';
+      releaseOpacityPointerStyle?.();
+      releaseOpacityPointerStyle = null;
       window.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('mouseup', handleMouseUp);
     };
@@ -947,6 +967,10 @@
     }
   }
 
+  // Stops listening for scrolling (the page and, inside a module, the module's own panels: a scroll never leaves a
+  // shadow root, so a listener on the window alone does not hear about those)
+  let stopListeningForScroll: () => void = () => {};
+
   // Sets up event listeners when the component mounts
   onMount(() => {
     initializeColor();
@@ -954,17 +978,19 @@
     window.addEventListener('mousemove', handleGlobalMouseMove);
     window.addEventListener('keydown', handlePopupKeyDown);
     window.addEventListener('keyup', handlePopupKeyUp);
-    window.addEventListener('scroll', handleScroll, true);
+    stopListeningForScroll = listenForScroll(inputRef, handleScroll);
     window.addEventListener('widgetic:close-color-pickers', onCloseOtherPickers as EventListener);
   });
 
   // Cleans up event listeners when the component is destroyed
   onDestroy(() => {
+    releaseOpacityPointerStyle?.();
+    releaseOpacityPointerStyle = null;
     window.removeEventListener('mouseup', handleGlobalMouseUp);
     window.removeEventListener('mousemove', handleGlobalMouseMove);
     window.removeEventListener('keydown', handlePopupKeyDown);
     window.removeEventListener('keyup', handlePopupKeyUp);
-    window.removeEventListener('scroll', handleScroll, true);
+    stopListeningForScroll();
     window.removeEventListener('widgetic:close-color-pickers', onCloseOtherPickers as EventListener);
   });
 
@@ -1172,11 +1198,16 @@
     const top = openAbove
       ? Math.round(rect.top - popoverHeight - 4)
       : Math.round(rect.bottom + 4);
-    // Align popup's right edge with the right edge of the full input container
+    // Align the popup's end edge with the end edge of the full input container: the right edge on a left to right screen,
+    // the left edge on a right to left one (the popup itself is a drawing, drawn left to right, and opens toward the inside)
     const inputContainer = triggerRef.closest('.color-input-main-container') as HTMLElement | null;
-    const rightRef = inputContainer ? inputContainer.getBoundingClientRect().right : rect.right;
-    const right = Math.round(window.innerWidth - rightRef);
-    popoverStyle = `top: ${top}px; right: ${right}px;`;
+    const containerRect = inputContainer ? inputContainer.getBoundingClientRect() : rect;
+    if ($textDirection === 'rtl') {
+      popoverStyle = `top: ${top}px; left: ${Math.round(containerRect.left)}px;`; // rtl-ok: the end edge of a right to left field is its left edge
+    } else {
+      const right = Math.round(window.innerWidth - containerRect.right);
+      popoverStyle = `top: ${top}px; right: ${right}px;`; // rtl-ok: the end edge of a left to right field is its right edge
+    }
   }
 
   // Position is calculated in handleToggle after tick()
@@ -1225,17 +1256,19 @@
     </div>
     
     <!-- Input Controller Container -->
-    <div class="input-controller-ct absolute right-0">
+    <div class="input-controller-ct absolute end-0">
       <div class="color-input-main-container rounded-large flex items-center transition-colors duration-200"
         style="height: 48px; width: 185px; background: hsl(var(--grey1)); {showRing ? 'border: 1px solid hsl(var(--grey2));' : ''}">
-        <div class="flex items-center w-full justify-between" style="padding-right: 12px;">
+        <div class="flex items-center w-full justify-between" style="padding-inline-end: 12px;">
           
           <!-- Hex Input Container -->
           <div class="hex-input-container flex-1" bind:this={inputRef}>
+            <!-- A colour code (#FF00AA) is read left to right on every screen: in a right to left line its "#" would end up at the wrong end -->
             <Input
               bind:this={inputComponent}
               type="text"
-              class="h-9 border-0 bg-transparent subtext text-grey7 placeholder:text-grey3 focus-visible:ring-0 focus-visible:ring-offset-0 pl-4"
+              dir="ltr"
+              class="h-9 border-0 bg-transparent subtext text-grey7 placeholder:text-grey3 focus-visible:ring-0 focus-visible:ring-offset-0 ps-4"
               value={hexInput}
               onfocus={(e) => {
                 dispatch('focus', e);
@@ -1299,7 +1332,7 @@
                           z-index: 99999;
                           max-height: 12rem;
                           top: {inputRect.bottom + 4}px;
-                          left: {inputRect.left}px;
+                          left: {inputRect.left}px; /* rtl-ok: the list is as wide as the field it opens from, so its left edge is the field's */
                           width: {inputRect.width}px;
                         "
                         data-allow-scroll="true"
@@ -1348,7 +1381,8 @@
                   
                   <!-- svelte-ignore a11y_no_static_element_interactions -->
                   <!-- svelte-ignore a11y_click_events_have_key_events -->
-                  <div class="color-picker-popover-content w-auto pt-2 pb-2 pl-2 pr-0 widgetic-colors widgetic-radius modal-shadow"
+                  <div class="color-picker-popover-content w-auto pt-2 pb-2 ps-2 pe-0 widgetic-colors widgetic-radius modal-shadow"
+                    dir="ltr"
                     style="{popoverStyle} border: 1px solid hsl(var(--grey2)); z-index: 2;"
                     onmousedown={(e) => e.stopPropagation()}
                     onclick={(e) => e.stopPropagation()}
@@ -1358,7 +1392,7 @@
                     
                       <!-- Recent Colors Container -->
                       {#if saveRecentColors && (isShiftPressed || isSpacePressed)}
-                        <div class="recent-colors-container" style="width: {pickerSize + sliderWidth + 14}px; margin-left: 10px; padding-top: 11px; padding-bottom: 8px;">
+                        <div class="recent-colors-container" style="width: {pickerSize + sliderWidth + 14}px; margin-inline-start: 10px; padding-top: 11px; padding-bottom: 8px;">
                           {#if recentColors.length > 0}
                             <div class="recent-colors-grid" style="display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; gap: {swatchGap}px;">
                               {#each recentColors.slice(0, 5) as {color, alpha}, i}
@@ -1392,7 +1426,7 @@
                             </div>
                           {:else}
                             <div class="text-sm text-gray-500 text-center py-2">
-                              No recent colors
+                              {$t('editor.color.noRecent')}
                             </div>
                           {/if}
                       </div>
@@ -1403,7 +1437,7 @@
                     <div
                       class="color-picker-wrapper relative flex flex-col"
                       role="application"
-                      aria-label="Color picker"
+                      aria-label={$t('editor.color.picker')}
                       onmousedown={handleDragStart}
                       style="padding: 0;"
                     >
@@ -1428,7 +1462,7 @@
                         <div
                           bind:this={opacitySliderRef}
                           class="relative cursor-pointer opacity-slider"
-                          style="width: {pickerSize}px; height: {sliderWidth}px; margin-left: 10px;"
+                          style="width: {pickerSize}px; height: {sliderWidth}px; margin-inline-start: 10px;"
                           onmousedown={handleOpacityMouseDown}
                         >
                           <div class="absolute inset-0 overflow-hidden">
@@ -1449,13 +1483,13 @@
                           </div>
                         </div>
                         <!-- Opacity number input — square, matching swatch size -->
-                        <div class="opacity-number-ct flex items-center justify-center" style="width: {swatchSize + 6}px; min-width: {swatchSize + 6}px; height: {swatchSize}px; margin-left: 8px;">
+                        <div class="opacity-number-ct flex items-center justify-center" style="width: {swatchSize + 6}px; min-width: {swatchSize + 6}px; height: {swatchSize}px; margin-inline-start: 8px;">
                           <Input
                             type="number"
                             min="0"
                             max="100"
                             class="w-full h-full text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none ring-0 focus:ring-0 shadow-none widgetic-colors subtext"
-                            style="border: 1px solid hsl(var(--forest-green)); color: hsl(var(--grey7)); padding-left: 8px; padding-right: 0;"
+                            style="border: 1px solid hsl(var(--forest-green)); color: hsl(var(--grey7)); padding-inline-start: 8px; padding-inline-end: 0;"
                             value={opacityPercentage}
                             oninput={(e) => {
                               e.stopPropagation();

package/dist/components/ic/DateFieldInputController.svelte

@@ -29,6 +29,16 @@
 <script lang="ts">
   import { onMount, tick } from 'svelte';
   import InputControllerHeader from './InputControllerHeader.svelte';
+  import { activeElementIn } from '../../utils/shadowDom';
+  import { useEditorLanguage } from '../../i18n/language';
+  import type { EditorMessageKey } from '../../i18n/messages';
+  import { useTextDirection } from '@widgetic/design-system/components/textDirection';
+
+  // The words of the editor in the language of the page.
+  const { t } = useEditorLanguage();
+
+  // The way the screen is read: the row of fields turns around with it, and so do the keys that move from one field to the next.
+  const textDirection = useTextDirection();
 
   // Constants
   const MIN_DAY = 1;
@@ -92,27 +102,30 @@
     }
   });
 
-  // Get field configuration
+  // Get field configuration. The hint in a box and its name for a screen reader are messages (`hintKey`, `labelKey`).
   function getFieldConfig(field: 'day' | 'month' | 'year') {
-    const configs = {
+    const configs: Record<'day' | 'month' | 'year', { min: number; max: number; hintKey: EditorMessageKey; labelKey: EditorMessageKey; width: string; maxLength: number }> = {
       day: {
         min: MIN_DAY,
         max: MAX_DAY,
-        placeholder: 'DD',
+        hintKey: 'editor.dateField.dayHint',
+        labelKey: 'editor.dateField.dayLabel',
         width: '40px',
         maxLength: 2
       },
       month: {
         min: MIN_MONTH,
         max: MAX_MONTH,
-        placeholder: 'MM',
+        hintKey: 'editor.dateField.monthHint',
+        labelKey: 'editor.dateField.monthLabel',
         width: '40px',
         maxLength: 2
       },
       year: {
         min: MIN_YEAR,
         max: MAX_YEAR,
-        placeholder: 'YYYY',
+        hintKey: 'editor.dateField.yearHint',
+        labelKey: 'editor.dateField.yearLabel',
         width: '60px',
         maxLength: 4
       }
@@ -311,9 +324,12 @@
     
     // Reset focused field after a short delay to allow for focus changes
     setTimeout(() => {
-      if (!document.activeElement || 
-          !(document.activeElement instanceof HTMLInputElement) || 
-          !Object.values(inputRefs).includes(document.activeElement)) {
+      // The focused element of the tree this control is in: inside a module `document.activeElement` is the module's
+      // host element, which is never one of the fields
+      const focusedElement = activeElementIn(input);
+      if (!focusedElement || 
+          !(focusedElement instanceof HTMLInputElement) || 
+          !Object.values(inputRefs).includes(focusedElement)) {
         focusedField = null;
       }
     }, 100);
@@ -333,11 +349,14 @@
       return;
     }
     
-    // Handle arrow navigation
+    // Handle arrow navigation. The digits of a field run left to right on every screen, so the key that leaves a field at the
+    // right end of its digits is ArrowRight on every screen, and what lies on that side is the next field on a left to right
+    // screen and the one before it on a right to left one (where the row of fields starts on the right).
     if (e.key === 'ArrowRight') {
       if (input.selectionStart === input.value.length) {
         e.preventDefault();
-        focusNextField(field);
+        if ($textDirection === 'rtl') focusPreviousField(field);
+        else focusNextField(field);
       }
       return;
     }
@@ -345,7 +364,8 @@
     if (e.key === 'ArrowLeft') {
       if (input.selectionStart === 0) {
         e.preventDefault();
-        focusPreviousField(field);
+        if ($textDirection === 'rtl') focusNextField(field);
+        else focusPreviousField(field);
       }
       return;
     }
@@ -399,7 +419,7 @@
       <InputControllerHeader {label} {helpText} />
     </div>
     
-    <div class="absolute right-0">
+    <div class="absolute end-0">
       <div class="h-[48px] w-[185px] rounded-large border border-grey2 bg-grey1 flex items-center transition-colors duration-200 hover:border-forest-green">
         <div class="flex items-center justify-between px-4 w-full">
           {#each fieldOrder as field}
@@ -412,14 +432,14 @@
                 pattern="[0-9]*"
                 bind:this={inputRefs[field]}
                 value={field === 'day' ? day : field === 'month' ? month : year}
-                placeholder={config.placeholder}
+                placeholder={$t(config.hintKey)}
                 on:input={field === 'day' ? handleDayInput : field === 'month' ? handleMonthInput : handleYearInput}
                 on:change={handleChange}
                 on:focus={() => handleFocus(field)}
                 on:blur={() => handleBlur(field)}
                 on:keydown={(e) => handleKeyDown(field, e)}
                 class={getFieldClasses(field).input}
-                aria-label={`${field} input`}
+                aria-label={$t(config.labelKey)}
                 maxlength={config.maxLength}
               />
             </div>