@widgetic/editor 4.0.11 → 4.1.0

package/dist/components/ic/ColorPickerInputController.svelte

@@ -70,6 +70,14 @@
   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();
 
   
 
@@ -1190,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()
@@ -1243,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);
@@ -1317,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"
@@ -1366,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()}
@@ -1376,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}
@@ -1410,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>
@@ -1421,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;"
                     >
@@ -1446,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">
@@ -1467,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

@@ -30,6 +30,15 @@
   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;
@@ -93,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
       }
@@ -337,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;
     }
@@ -349,7 +364,8 @@
     if (e.key === 'ArrowLeft') {
       if (input.selectionStart === 0) {
         e.preventDefault();
-        focusPreviousField(field);
+        if ($textDirection === 'rtl') focusNextField(field);
+        else focusPreviousField(field);
       }
       return;
     }
@@ -403,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}
@@ -416,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>

package/dist/components/ic/DatePickerInputController.svelte

@@ -38,6 +38,12 @@
   // Svelte imports
   import { onMount, onDestroy } from 'svelte';
   import { listenForScroll } from '../../utils/shadowDom';
+  import { useEditorLanguage } from '../../i18n/language';
+  import type { EditorMessageKey } from '../../i18n/messages';
+  import type { Translate } from '@widgetic/design-system/i18n';
+
+  // The words of the editor in the language of the page, and the language itself (how a month and a date are written).
+  const { t, locale } = useEditorLanguage();
 
   // Shadcn UI Components
   import { Button, Select } from '@widgetic/design-system/components';
@@ -66,12 +72,12 @@
   let placeholder = today(getLocalTimeZone());
   let currentValue: CalendarDate | undefined;
 
-  // Month and year options setup
-  const monthFmt = new DateFormatter('en-US', { month: 'long' });
-  const monthOptions = [
-    "January", "February", "March", "April", "May", "June",
-    "July", "August", "September", "October", "November", "December"
-  ].map((month, i) => ({ value: String(i + 1), label: month }));
+  // Month and year options setup: the names of the months are written by the language of the page
+  $: monthFmt = new DateFormatter($locale, { month: 'long' });
+  $: monthOptions = Array.from({ length: 12 }, (_, monthIndex) => ({
+    value: String(monthIndex + 1),
+    label: monthFmt.format(new Date(2021, monthIndex, 1))
+  }));
 
   const yearOptions = Array.from({ length: 100 }, (_, i) => {
     const year = String(new Date().getFullYear() - i);
@@ -141,15 +147,15 @@
    * @param date - The date to format
    * @returns Formatted date string
    */
-  function formatDate(date: CalendarDate | undefined): string {
-    if (!date || !(date instanceof CalendarDate)) return 'Pick a date';
+  function formatDate(date: CalendarDate | undefined, languageTag: string, translate: Translate<EditorMessageKey>): string {
+    if (!date || !(date instanceof CalendarDate)) return translate('editor.date.pick');
     try {
       // Convert to JavaScript Date for localized formatting
       const jsDate = new Date(date.year, date.month - 1, date.day);
-      return jsDate.toLocaleDateString('en-US', { dateStyle: 'long' });
+      return jsDate.toLocaleDateString(languageTag, { dateStyle: 'long' });
     } catch (error) {
       console.error('Error formatting date:', error);
-      return 'Pick a date';
+      return translate('editor.date.pick');
     }
   }
 
@@ -233,7 +239,7 @@
       <InputControllerHeader {label} />
     </div>
     
-    <div class="absolute right-0">
+    <div class="absolute end-0">
       <div 
         class="h-[48px] w-[185px] rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green"
         on:focusin={onFocus}
@@ -244,9 +250,9 @@
               <Button
                 id="date-picker"
                 variant="ghost"
-                class="w-full h-full justify-between text-left border-0 bg-transparent hover:bg-transparent focus:bg-transparent p-0 group"
+                class="w-full h-full justify-between text-start border-0 bg-transparent hover:bg-transparent focus:bg-transparent p-0 group"
               >
-                <span class="subtext text-grey7 {!currentValue ? 'text-grey3' : ''}">{formatDate(currentValue)}</span>
+                <span class="subtext text-grey7 {!currentValue ? 'text-grey3' : ''}">{formatDate(currentValue, $locale, $t)}</span>
                 <IconCalendar class="w-[20px] h-[20px] text-grey5 transition-colors duration-200 group-hover:text-grey7" />
               </Button>
             </div>
@@ -280,8 +286,8 @@
                     }
                   }}
                 >
-                  <Select.Trigger aria-label="Select month" class="w-[60%] month-year-dropdown-content">
-                    <span class="text-sm">{defaultMonth?.label || "Select month"}</span>
+                  <Select.Trigger aria-label={$t('editor.date.selectMonth')} class="w-[60%] month-year-dropdown-content">
+                    <span class="text-sm">{defaultMonth?.label || $t('editor.date.selectMonth')}</span>
                   </Select.Trigger>
                   <Select.Content class="max-h-[200px] overflow-y-auto month-year-dropdown-content">
                     {#each monthOptions as { value, label }}
@@ -315,8 +321,8 @@
                     }
                   }}
                 >
-                  <Select.Trigger aria-label="Select year" class="w-[40%] month-year-dropdown-content">
-                    <span class="text-sm">{defaultYear?.label || "Select year"}</span>
+                  <Select.Trigger aria-label={$t('editor.date.selectYear')} class="w-[40%] month-year-dropdown-content">
+                    <span class="text-sm">{defaultYear?.label || $t('editor.date.selectYear')}</span>
                   </Select.Trigger>
                   <Select.Content class="max-h-[200px] overflow-y-auto month-year-dropdown-content">
                     {#each yearOptions as { value, label }}
@@ -330,6 +336,10 @@
               <div class="calendar-no-header">
                 <Calendar
                   mode="single"
+                  locale={$locale}
+                  calendarLabel={$t('editor.date.calendarLabel')}
+                  previousLabel={$t('editor.date.previousMonth')}
+                  nextLabel={$t('editor.date.nextMonth')}
                   onValueChange={(date: DateValue | undefined) => {
                     // console.log('📅 [DatePicker] Calendar onValueChange:', { date, isCalendarDate: date instanceof CalendarDate });
                     if (date instanceof CalendarDate) {

package/dist/components/ic/DropdownInputController.svelte

@@ -32,6 +32,10 @@
    */
   import { onMount, onDestroy } from 'svelte';
   import { listenForScroll } from '../../utils/shadowDom';
+  import { useEditorLanguage } from '../../i18n/language';
+
+  // The words of the editor in the language of the page.
+  const { t } = useEditorLanguage();
 
   // Local Components imports
   import { InputControllerHeader } from './index';
@@ -50,7 +54,8 @@
    * External properties that configure the dropdown's behavior and appearance
    */
   export let label: DropdownInputControllerProps['label'];
-  export let defaultSelectedLabel: DropdownInputControllerProps['defaultSelectedLabel'] = "Select an option";
+  /** What the button says while nothing is chosen. Without one, the editor's own word, in the language of the page. */
+  export let defaultSelectedLabel: DropdownInputControllerProps['defaultSelectedLabel'] = undefined;
   export let value: DropdownInputControllerProps['value'];
   export let onChange: DropdownInputControllerProps['onChange'];
   export let config: DropdownInputControllerProps['config'] = {};
@@ -157,7 +162,7 @@
    */
   $: selectedValue = typeof value === 'string' ? value : (value?.value ?? '');
   $: triggerContent =
-    options.find((o) => o.value === selectedValue)?.label ?? defaultSelectedLabel;
+    options.find((o) => o.value === selectedValue)?.label ?? defaultSelectedLabel ?? $t('editor.dropdown.select');
 </script>
 
 <!-- Dropdown Container -->
@@ -167,7 +172,7 @@
       <InputControllerHeader {label} />
     </div>
     
-    <div class="absolute right-0">
+    <div class="absolute end-0">
       <div 
         class="dropdown-main-container rounded-large flex items-center transition-colors duration-200 group"
         style="height: 48px; width: 185px; border: 1px solid hsl(var(--grey2)); background: hsl(var(--grey1));"
@@ -182,10 +187,10 @@
         >
           <Select.Trigger 
             class="dropdown-ic-trigger h-full w-full border-0 bg-transparent subtext hover:bg-transparent focus:bg-transparent data-[state=open]:bg-transparent" 
-            style="padding-left: 16px; padding-right: 16px; color: hsl(var(--grey7));"
+            style="padding-inline-start: 16px; padding-inline-end: 16px; color: hsl(var(--grey7));"
             id={controllerId}
           >
-            <span class="truncate flex-1 text-left subtext" style="color: hsl(var(--grey7));">
+            <span class="truncate flex-1 text-start subtext" style="color: hsl(var(--grey7));">
               {triggerContent}
             </span>
             <IconCaretDownFilled class="dropdown-ic-trigger-icon" style="width: 20px; height: 20px; color: hsl(var(--grey5));"/>

package/dist/components/ic/DropdownInputController.svelte.d.ts

@@ -39,7 +39,7 @@ declare const DropdownInputController: $$__sveltets_2_IsomorphicComponent<{
        * Component Props
        * External properties that configure the dropdown's behavior and appearance
        */ label: DropdownInputControllerProps["label"];
-    defaultSelectedLabel?: DropdownInputControllerProps["defaultSelectedLabel"];
+    /** What the button says while nothing is chosen. Without one, the editor's own word, in the language of the page. */ defaultSelectedLabel?: DropdownInputControllerProps["defaultSelectedLabel"];
     value: DropdownInputControllerProps["value"];
     onChange: DropdownInputControllerProps["onChange"];
     config?: DropdownInputControllerProps["config"];

package/dist/components/ic/FixedPositionInputController.svelte

@@ -40,6 +40,11 @@
 <script lang="ts">
   // Svelte imports
   import { onDestroy } from 'svelte';
+  import { useEditorLanguage } from '../../i18n/language';
+  import { fixedPositionLabel } from '../../i18n/labels';
+
+  // The words of the editor in the language of the page.
+  const { t } = useEditorLanguage();
 
   // Import icons from Tabler
   import { 
@@ -259,10 +264,10 @@
 
   function getCornerRounding(pos: Position): string {
     switch (pos) {
-      case 'top-left': return 'rounded-tl-[15px]';
-      case 'top-right': return 'rounded-tr-[15px]';
-      case 'bottom-left': return 'rounded-bl-[15px]';
-      case 'bottom-right': return 'rounded-br-[15px]';
+      case 'top-left': return 'rounded-tl-[15px]'; // rtl-ok: the corner of the picture of a screen
+      case 'top-right': return 'rounded-tr-[15px]'; // rtl-ok: the corner of the picture of a screen
+      case 'bottom-left': return 'rounded-bl-[15px]'; // rtl-ok: the corner of the picture of a screen
+      case 'bottom-right': return 'rounded-br-[15px]'; // rtl-ok: the corner of the picture of a screen
       default: return '';
     }
   }
@@ -270,9 +275,10 @@
 
 <!-- Container with relative positioning for overlay -->
 <div class="relative widgetic-colors">
-  <!-- Grid component -->
+  <!-- Grid component: the nine places of a screen, top left to bottom right, are a picture of the screen, so it is a left to right island -->
   <div 
     class="fixed-position-grid grid grid-cols-3 gap-[1px] w-fit bg-white rounded-large relative"
+    dir="ltr"
     {id}
   >
     {#each positions as position}
@@ -284,7 +290,7 @@
         }"
         on:click={() => handlePositionClick(position)}
         on:focus={onFocus}
-        aria-label={`Set position to ${position}`}
+        aria-label={$t('editor.fixedPosition.set', { position: fixedPositionLabel(position, $t) })}
         aria-pressed={position === value}
       >
         <svelte:component