@widgetic/editor 4.0.11 → 4.1.0

package/dist/components/ic/FontInputController.svelte

@@ -74,6 +74,11 @@
   import { SearchInput } from '@widgetic/design-system/components';
   import CategoryTabs from './shared/CategoryTabs.svelte';
   import { RecentItemsSection, ItemGrid } from './shared';
+  import { useEditorLanguage } from '../../i18n/language';
+  import { categoryLabel, fontWeightLabel } from '../../i18n/labels';
+
+  // The words of the editor in the language of the page.
+  const { t } = useEditorLanguage();
 
 
   const FONT_FILTER_KEY = (id: string) => `font-specific-filter-state-${id}`;
@@ -1787,7 +1792,7 @@
               toggleDropdown(controllerId);
             }}
           >
-            <Popover.Trigger tabindex={-1} class="w-full h-full flex items-center border-0 bg-transparent hover:bg-transparent focus:bg-transparent pl-3 pr-[16px] group"
+            <Popover.Trigger tabindex={-1} class="w-full h-full flex items-center border-0 bg-transparent hover:bg-transparent focus:bg-transparent ps-3 pe-[16px] group"
               onmouseenter={() => {
                 // Preload fonts when hovering over the button
                 // This reduces the delay when actually clicking to open
@@ -1797,10 +1802,10 @@
               }}
             >
               <span
-                class="truncate flex-1 text-left subtext text-grey7"
+                class="truncate flex-1 text-start subtext text-grey7"
                 style="font-family: {cssQuotedString(resolvedFont?.family || 'system-ui')}, sans-serif; font-display: swap;"
               >
-                {resolvedFont?.family || "Select font..."}
+                {resolvedFont?.family || $t('editor.font.select')}
               </span>
               <IconCaretDownFilled class="w-5 h-5 shrink-0 text-grey5 group-hover:text-grey7" />
             </Popover.Trigger>
@@ -1816,11 +1821,11 @@
               <div class="flex flex-col h-full min-h-0 font-popover-content">
                 <!-- Title and upload icon -->
                 <div class="font-popover-header shrink-0 relative pt-6 pb-[11px] px-5">
-                  <div class="h5 text-grey7 widgetic-colors">Fonts</div>
+                  <div class="h5 text-grey7 widgetic-colors">{$t('editor.font.title')}</div>
                   <button 
                     type="button" 
                     tabindex="-1"
-                    class="absolute right-6 top-[26px] bg-transparent border-0 cursor-pointer p-0 rounded-full hover:bg-grey3 transition-all duration-300"
+                    class="absolute end-6 top-[26px] bg-transparent border-0 cursor-pointer p-0 rounded-full hover:bg-grey3 transition-all duration-300"
                     onclick={() => {
                       try {
                         openFileBrowser();
@@ -1840,7 +1845,7 @@
                 <!-- Search input -->
                 <div class="font-popover-search shrink-0 relative px-4">
                   <SearchInput
-                    placeholder="Search fonts..."
+                    placeholder={$t('editor.font.search')}
                     bind:value={searchTerm}
                     onInput={(e: Event) => {
                       // Use debounced search only for typing
@@ -1868,6 +1873,7 @@
                       categories={filterOptions}
                       activeCategory={currentFilter}
                       onCategorySelect={handleFilterChange}
+                      getCategoryLabel={(category) => categoryLabel(category, $t)}
                       filterVisible={!searchTerm}
                     />
                   </div>
@@ -1884,14 +1890,13 @@
                   }}
                   id={`font-list-${controllerId}`}
                   role="listbox"
-                  aria-label="Font list"
+                  aria-label={$t('editor.font.list')}
                 >
                   <div class="space-y-0">
                     <!-- Recently used section - only show when not searching -->
                     {#if recentFonts.length > 0 && !searchTerm}
                       <RecentItemsSection
                         recentItems={recentFonts}
-                        title="Recently used"
                         onItemSelect={handleFontSelect}
                         onItemDelete={handleFontDelete}
                         isItemSelected={isFontSelected}
@@ -1912,9 +1917,9 @@
                         <div id="font-header-{controllerId}" class="sticky top-0 -mt-2 bg-white z-10 pt-2 {isScrolled ? 'border-b border-grey2' : 'border-b border-transparent'} transition-border">
                           <h3 class="subtext text-grey7 pb-2 flex items-center">
                             {#if isInitialLoading}
-                              <div class="w-4 h-4 border-2 border-t-sage-green border-r-sage-green border-b-grey2 border-l-grey2 rounded-full animate-spin mr-2"></div>
+                              <div class="w-4 h-4 border-2 border-t-sage-green border-e-sage-green border-b-grey2 border-s-grey2 rounded-full animate-spin me-2"></div>
                             {/if}
-                            {searchTerm ? 'Search results' : 'More'}
+                            {searchTerm ? $t('editor.list.searchResults') : $t('editor.list.more')}
                           </h3>
                         </div>
                       {/if}
@@ -1924,13 +1929,13 @@
                           {#if isInitialLoading}
                             <!-- Show compact loading indicator while fonts are loading -->
                             <div class="flex items-center">
-                              <div class="text-grey5 subtext mr-2">Loading fonts</div>
-                              <div class="w-4 h-4 border-2 border-t-sage-green border-r-sage-green border-b-grey2 border-l-grey2 rounded-full animate-spin"></div>
+                              <div class="text-grey5 subtext me-2">{$t('editor.font.loading')}</div>
+                              <div class="w-4 h-4 border-2 border-t-sage-green border-e-sage-green border-b-grey2 border-s-grey2 rounded-full animate-spin"></div>
                             </div>
                           {:else}
                             <!-- Only show empty state when loading is complete and no fonts were found -->
                             <EmptyState 
-                              message={searchTerm ? 'No fonts found' : 'No fonts available'} 
+                              message={searchTerm ? $t('editor.font.noneFound') : $t('editor.font.noneAvailable')} 
                               height="auto"
                             />
                           {/if}
@@ -1953,7 +1958,7 @@
                               style="color: {isFontSelected(font) ? '#ffffff' : 'hsl(var(--grey7))'};"
                             >
                               <div class="flex items-center flex-1 min-w-0 group">
-                                <Check class="mr-2 h-6 w-6 flex-shrink-0 {isFontSelected(font) ? 'text-white' : 'text-sage-green opacity-0'}"/>
+                                <Check class="me-2 h-6 w-6 flex-shrink-0 {isFontSelected(font) ? 'text-white' : 'text-sage-green opacity-0'}"/>
                                 <span 
                                   class="text-[24px] truncate {index === activeSearchIndex && searchTerm ? 'font-medium' : ''}"
                                   style="font-family: {cssQuotedString(font.family)}, sans-serif; font-display: swap; color: inherit; -webkit-text-fill-color: currentColor;"
@@ -1965,7 +1970,7 @@
                                   <div
                                     role="button"
                                     tabindex="-1"
-                                    class="ml-auto transition-opacity {resolvedFont?.family === font.family ? 'opacity-0 pointer-events-none' : 'opacity-0 group-hover:opacity-100'}"
+                                    class="ms-auto transition-opacity {resolvedFont?.family === font.family ? 'opacity-0 pointer-events-none' : 'opacity-0 group-hover:opacity-100'}"
                                     onclick={(e) => {
                                       e.stopPropagation();
                                       e.preventDefault();
@@ -1974,11 +1979,11 @@
                                   >
                                     <img 
                                       src={icTrash} 
-                                      alt="Remove font" 
+                                      alt={$t('editor.font.remove')} 
                                       class="w-4 h-4 text-grey5 hover:text-error"
                                       draggable="false"
                                     />
-                                    <span class="sr-only">Remove font</span>
+                                    <span class="sr-only">{$t('editor.font.remove')}</span>
                                   </div>
                                 {/if}
                               </div>
@@ -1997,7 +2002,7 @@
 
     <div class="font-weight-row flex items-center justify-between w-full min-w-0 gap-2" style="min-height: 48px;">
       <div class="font-weight-label-ct flex-1 min-w-0">
-        <InputControllerHeader label={label ? 'Font Weight' : ''} />
+        <InputControllerHeader label={label ? $t('editor.font.weight') : ''} />
       </div>
       <div class="font-weight-input-ct h-12 shrink-0 rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green" style="width: 185px; max-width: 185px; min-width: 185px;">
           <Popover.Root 
@@ -2009,15 +2014,15 @@
               }
             }}
           >
-            <Popover.Trigger tabindex={-1} class="w-full h-full flex items-center border-0 bg-transparent hover:bg-transparent focus:bg-transparent pl-3 pr-[16px] group">
-              <span class="truncate flex-1 text-left subtext text-grey7">
-                {displayWeight || 'Regular'}
+            <Popover.Trigger tabindex={-1} class="w-full h-full flex items-center border-0 bg-transparent hover:bg-transparent focus:bg-transparent ps-3 pe-[16px] group">
+              <span class="truncate flex-1 text-start subtext text-grey7">
+                {fontWeightLabel(displayWeight || 'Regular', $t)}
               </span>
               <IconCaretDownFilled class="w-5 h-5 shrink-0 text-grey5 group-hover:text-grey7" />
             </Popover.Trigger>
             <Popover.Content class="font-input-popover p-0 w-[150px]" portalProps={{ to: fontPickerPortalHost }}>
               <Command.Root>
-                <Command.List>
+                <Command.List aria-label={$t('editor.font.weightList')}>
                   <Command.Group>
                     {#each availableWeights as weight}
                       <Command.Item
@@ -2026,9 +2031,9 @@
                         class="px-2 py-2"
                       >
                         <Check 
-                          class="mr-1 h-4 w-4 {displayWeight === weight ? 'opacity-100' : 'opacity-0'}"
+                          class="me-1 h-4 w-4 {displayWeight === weight ? 'opacity-100' : 'opacity-0'}"
                         />
-                        <span class="truncate">{weight}</span>
+                        <span class="truncate">{fontWeightLabel(weight, $t)}</span>
                       </Command.Item>
                     {/each}
                   </Command.Group>
@@ -2064,7 +2069,7 @@
     width: 185px !important;
     max-width: 185px !important;
     min-width: 185px !important;
-    margin-left: auto;
+    margin-inline-start: auto;
     flex-shrink: 0;
     position: relative;
   }
@@ -2211,12 +2216,12 @@
 
   /* Style for checkmark icon */
   :global(.checkmark-icon) {
-    margin-left: 12px !important;
+    margin-inline-start: 12px !important;
   }
 
   /* Style for font item padding */
   :global(.font-item) {
-    padding-left: 48px !important;
+    padding-inline-start: 48px !important;
   }
 
   /* Style for font item height */

package/dist/components/ic/InputControllerHeader.svelte

@@ -12,6 +12,10 @@ import { Tooltip, Portal } from '@widgetic/design-system/components';
 // Lucide Icons from design-system
 import { Info } from '@widgetic/design-system/icons';
 
+// The way the screen is read: the tip opens at the end of the line, beside the icon
+import { sideAtEnd, useTextDirection } from '@widgetic/design-system/components/textDirection';
+const textDirection = useTextDirection();
+
 // Component props
 let className = '';
 export { className as class };
@@ -106,7 +110,7 @@ onDestroy(() => {
             {#if showHelp && !isScrolling}
               <Portal target="editor-tooltips">
                 <Tooltip.Content 
-                  side="right"
+                  side={sideAtEnd($textDirection)}
                   sideOffset={5}
                   align="center"
                   alignOffset={-1}

package/dist/components/ic/NumberControls.svelte

@@ -232,10 +232,10 @@
         oninput={handleInput}
         onblur={handleBlur}
         readonly={isLocked}
-        class="w-full h-full border-0 bg-transparent subtext text-grey7 placeholder:text-grey3 focus-visible:ring-0 focus-visible:ring-offset-0 pl-4 {customInputClass}"
+        class="w-full h-full border-0 bg-transparent subtext text-grey7 placeholder:text-grey3 focus-visible:ring-0 focus-visible:ring-offset-0 ps-4 {customInputClass}"
       />
       {#if suffix}
-        <span class="subtext text-grey7 pointer-events-none -ml-1">
+        <span class="subtext text-grey7 pointer-events-none -ms-1">
           {suffix}
         </span>
       {/if}
@@ -279,10 +279,10 @@
 
 <style>
   :global([id^="number-input-"]) {
-    text-align: left;
+    text-align: start;
     appearance: textfield;
     -moz-appearance: textfield;
-    padding-right: 0 !important;
+    padding-inline-end: 0 !important;
   }
   
   :global([id^="number-input-"]::-webkit-outer-spin-button),

package/dist/components/ic/NumberInputController.svelte

@@ -373,7 +373,7 @@
       <InputControllerHeader {label} helpText={helpText} />
     </div>
     
-    <div class="absolute right-0">
+    <div class="absolute end-0">
       <NumberControls
         {value}
         {onChange}
@@ -393,7 +393,7 @@
 
 <style>
   :global(#number-input) {
-    text-align: left;
+    text-align: start;
     appearance: textfield;
     -moz-appearance: textfield;
   }

package/dist/components/ic/PositionInputController.svelte

@@ -38,6 +38,10 @@
 
   // The cursor of a drag is shown on the module's element, not on the body of the customer's page
   import { lockPointerStyle } from '../../utils/shadowDom';
+  import { useEditorLanguage } from '../../i18n/language';
+
+  // The words of the editor in the language of the page.
+  const { t } = useEditorLanguage();
   
   /**
    * Core state and configuration props
@@ -191,6 +195,7 @@
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div 
     bind:this={joystickContainer}
+    dir="ltr"
     class="relative w-[185px] h-[185px] bg-grey1 rounded-large border border-grey2 joystick-container transition-colors duration-200 hover:border-forest-green"
     class:overflow-hidden={shouldMaskThumb}
     on:mouseenter={handleMouseEnter}
@@ -208,22 +213,22 @@
     <div
       bind:this={joystickHandle}
       class="absolute w-[24px] h-[24px] bg-white rounded-full -translate-x-1/2 -translate-y-1/2 border-2 border-grey5 z-10 {isDragging ? 'border-grey7 scale-110' : 'hover:border-grey7 hover:scale-110 transition-all duration-150'}"
-      style="left: {position.x}%; top: {position.y}%"
+      style="left: {position.x}%; top: {position.y}%; /* rtl-ok: x counts from the left edge of the pad, which is a left to right island */"
     />
 
     <!-- Percentage display with dynamic positioning -->
     <div 
-      class="absolute left-4 right-4 flex justify-between items-center transition-all duration-300 ease-in-out"
+      class="absolute start-4 end-4 flex justify-between items-center transition-all duration-300 ease-in-out"
       class:bottom-2={!shouldShowAtTop}
       class:top-2={shouldShowAtTop}
       style="opacity: {isDragging ? 0.5 : 1}"
     >
       <div class="flex items-center gap-2 w-[50px]">
-        <span class="caption text-grey7 w-[12px]">X:</span>
+        <span class="caption text-grey7 w-[12px]">{$t('editor.position.x')}</span>
         <span class="subtext text-grey7 w-[32px]">{formattedX}%</span>
       </div>
       <div class="flex items-center gap-2 w-[50px]">
-        <span class="caption text-grey7 w-[12px]">Y:</span>
+        <span class="caption text-grey7 w-[12px]">{$t('editor.position.y')}</span>
         <span class="subtext text-grey7 w-[32px]">{formattedY}%</span>
       </div>
     </div>

package/dist/components/ic/RangeCalendarInputController.svelte

@@ -47,6 +47,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 { formatLocaleShortDate, type Translate } from '@widgetic/design-system/i18n';
+
+  // The words of the editor in the language of the page, and the language itself (how the calendar writes its months).
+  const { t, locale } = useEditorLanguage();
 
   // Shadcn UI Components
   import { Button, RangeCalendar } from '@widgetic/design-system/components';
@@ -110,26 +116,26 @@
    * @param range - The date range to format
    * @returns Formatted date range string
    */
-  function formatDateRange(range: DateRange | undefined): string {
-    if (!range || !range.start || !range.end) return "Pick a date range";
-    
+  function formatDateRange(
+    range: DateRange | undefined,
+    languageTag: string,
+    translate: Translate<EditorMessageKey>,
+  ): string {
+    if (!range || !range.start || !range.end) return translate('editor.date.pickRange');
+
     try {
       const formatDate = (date: DateValue) => {
         if (!(date instanceof CalendarDate)) {
-          console.warn('Invalid date object:', date);
-          return 'Invalid date';
+          console.warn('[Editor] Invalid date object in range control:', date);
+          return translate('editor.date.invalid');
         }
-        // Format as DD/MM/YY
-        const day = date.day.toString().padStart(2, '0');
-        const month = date.month.toString().padStart(2, '0');
-        const year = date.year.toString().slice(-2);
-        return `${day}/${month}/${year}`;
+        return formatLocaleShortDate({ year: date.year, month: date.month, day: date.day }, languageTag);
       };
 
       return `${formatDate(range.start)} - ${formatDate(range.end)}`;
     } catch (error) {
-      console.error('Error formatting date range:', error);
-      return "Pick a date range";
+      console.warn('[Editor] Error formatting date range:', error);
+      return translate('editor.date.pickRange');
     }
   }
 
@@ -201,7 +207,7 @@
       <InputControllerHeader {label} helpText={helpText} />
     </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}
@@ -212,16 +218,20 @@
               <Button
                 id="range-calendar"
                 variant="ghost"
-                class="w-full h-full justify-start text-left border-0 bg-transparent hover:bg-transparent focus:bg-transparent p-0"
+                class="w-full h-full justify-start text-start border-0 bg-transparent hover:bg-transparent focus:bg-transparent p-0"
               >
-                <span class="subtext text-grey7 {!currentValue ? 'text-grey3' : ''}">{formatDateRange(currentValue)}</span>
+                <span class="subtext text-grey7 {!currentValue ? 'text-grey3' : ''}">{formatDateRange(currentValue, $locale, $t)}</span>
               </Button>
             </div>
           </Popover.Trigger>
           
           <Popover.Content class="w-auto p-0 z-50" align="start" sideOffset={4}>
             <RangeCalendar
-              {...currentValue}
+              value={currentValue}
+              locale={$locale}
+              calendarLabel={$t('editor.date.rangeCalendarLabel')}
+              previousLabel={$t('editor.date.previousMonth')}
+              nextLabel={$t('editor.date.nextMonth')}
               onValueChange={(v: BitsDateRange) => {
                 handleSelect(v)
               }}

package/dist/components/ic/RoundedCornersInputController.svelte

@@ -29,6 +29,10 @@
   import Unlock from '../icons/unlocked.svelte';
   import type { InputControllerConfig } from './index';
   import { activeElementIn } from '../../utils/shadowDom';
+  import { useEditorLanguage } from '../../i18n/language';
+
+  // The words of the editor in the language of the page.
+  const { t } = useEditorLanguage();
 
   // Constants
   const MIN_RADIUS = 0;
@@ -199,20 +203,21 @@
     }
   }
 
+  // The outer corner of the picture of the box that each of the four fields draws. The corners of a box are named by
+  // their place on the screen, whatever way the screen is read, so these stay physical.
+  const CORNER_ROUNDING = {
+    topLeft: 'rounded-tl-[15px]', // rtl-ok: the corner of the picture of a box
+    topRight: 'rounded-tr-[15px]', // rtl-ok: the corner of the picture of a box
+    bottomLeft: 'rounded-bl-[15px]', // rtl-ok: the corner of the picture of a box
+    bottomRight: 'rounded-br-[15px]' // rtl-ok: the corner of the picture of a box
+  } as const;
+
   // Get corner-specific CSS classes
   function getCornerClasses(corner: keyof typeof value) {
-    const isTopLeft = corner === 'topLeft';
-    const isTopRight = corner === 'topRight';
-    const isBottomLeft = corner === 'bottomLeft';
-    const isBottomRight = corner === 'bottomRight';
-    
     return {
       container: `
         relative 
-        ${isTopLeft ? 'rounded-tl-[15px]' : ''} 
-        ${isTopRight ? 'rounded-tr-[15px]' : ''} 
-        ${isBottomLeft ? 'rounded-bl-[15px]' : ''} 
-        ${isBottomRight ? 'rounded-br-[15px]' : ''}
+        ${CORNER_ROUNDING[corner]}
         ${focusedCorner === corner ? 'bg-sage-green' : 'bg-grey1'}
         hover:bg-[${focusedCorner === corner ? 'hsl(var(--sage-green))' : 'hsl(var(--grey2))'}]
         transition-colors
@@ -290,13 +295,13 @@
 </script>
 
 <!-- Main corner radius grid component -->
-<div class="corners-container {className}" role="group" aria-label={label || 'Corner radius'} title={helpText}
+<div class="corners-container {className}" role="group" aria-label={label || $t('editor.corners.group')} title={helpText}
   on:mouseenter={handleMouseEnter}
   on:mouseleave={handleMouseLeave}
   on:focusin={onFocus}>
   
-  <!-- Corner radius grid -->
-  <div class="corners-grid">
+  <!-- Corner radius grid: four fields placed like the four corners of a box, top left first, so it is a left to right island -->
+  <div class="corners-grid" dir="ltr">
     <!-- Top Left -->
     <div class={getCornerClasses('topLeft').container}>
       <input
@@ -311,7 +316,7 @@
         on:blur={() => handleInputBlur('topLeft')}
         on:keydown={(e) => handleKeyDown('topLeft', e)}
         class={getCornerClasses('topLeft').input}
-        aria-label="Top left corner radius"
+        aria-label={$t('editor.corners.topLeft')}
         maxlength="3"
       />
     </div>
@@ -330,7 +335,7 @@
         on:blur={() => handleInputBlur('topRight')}
         on:keydown={(e) => handleKeyDown('topRight', e)}
         class={getCornerClasses('topRight').input}
-        aria-label="Top right corner radius"
+        aria-label={$t('editor.corners.topRight')}
         maxlength="3"
       />
     </div>
@@ -349,7 +354,7 @@
         on:blur={() => handleInputBlur('bottomLeft')}
         on:keydown={(e) => handleKeyDown('bottomLeft', e)}
         class={getCornerClasses('bottomLeft').input}
-        aria-label="Bottom left corner radius"
+        aria-label={$t('editor.corners.bottomLeft')}
         maxlength="3"
       />
     </div>
@@ -368,7 +373,7 @@
         on:blur={() => handleInputBlur('bottomRight')}
         on:keydown={(e) => handleKeyDown('bottomRight', e)}
         class={getCornerClasses('bottomRight').input}
-        aria-label="Bottom right corner radius"
+        aria-label={$t('editor.corners.bottomRight')}
         maxlength="3"
       />
     </div>
@@ -377,7 +382,7 @@
     <button
       class="lock-button"
       on:click={toggleLock}
-      aria-label={isLocked ? "Unlock corner radius values" : "Lock corner radius values"}
+      aria-label={isLocked ? $t('editor.corners.unlock') : $t('editor.corners.lock')}
       aria-pressed={isLocked}
     >
       <div class="flex items-center justify-center w-full h-full {isLocked ? 'text-sage-green' : 'text-grey7'}">

package/dist/components/ic/SliderInputController.svelte

@@ -42,7 +42,11 @@
    * Shadcn UI components from Widgetic design-system package
    */
   import { Slider } from '@widgetic/design-system/components';
+  import { useTextDirection } from '@widgetic/design-system/components/textDirection';
   import { InputControllerHeader } from './index';
+
+  // The way the screen is read: the slider of the design system starts at the right end on a right to left screen.
+  const textDirection = useTextDirection();
   
 
   /**
@@ -186,7 +190,8 @@
     if (!sliderElement) return;
 
     const rect = sliderElement.getBoundingClientRect();
-    const clickX = mouseEvent.clientX - rect.left;
+    // The distance from the end where the track starts: its left end, or its right end when the screen is read from the right
+    const clickX = $textDirection === 'rtl' ? rect.right - mouseEvent.clientX : mouseEvent.clientX - rect.left;
     const trackWidth = rect.width;
 
     // Calculate the percentage position of the click
@@ -331,7 +336,7 @@
     <!-- Main Container with subcomponents -->
     <div 
       class="slider-main-container flex items-center justify-between rounded-large transition-colors duration-200"
-      style="height: {height}px; padding-left: 16px; padding-right: 16px; gap: {elementsGap}px; border: 1px solid hsl(var(--grey2)); background: hsl(var(--grey1));"
+      style="height: {height}px; padding-inline-start: 16px; padding-inline-end: 16px; gap: {elementsGap}px; border: 1px solid hsl(var(--grey2)); background: hsl(var(--grey1));"
       onfocusin={onFocus}
       bind:this={sliderContainer}
     >

package/dist/components/ic/SwitchInputController.svelte

@@ -17,6 +17,10 @@
   // Shadcn UI Components
   import { Switch } from '@widgetic/design-system/components';
   import { InputControllerHeader } from './index';
+  import { useEditorLanguage } from '../../i18n/language';
+
+  // The words of the editor in the language of the page.
+  const { t } = useEditorLanguage();
 
   // Component props
   export let label: SwitchInputControllerProps['label'];
@@ -38,7 +42,7 @@
       <InputControllerHeader {label} />
     </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 -->
       <div 
@@ -48,7 +52,7 @@
         onclick={(e) => { if (e.target === e.currentTarget) toggle(); }}
       >
         <!-- Off text -->
-        <span class="subtext select-none pointer-events-none" style="color: hsl(var({!value ? '--grey7' : '--grey3'}));">Off</span>
+        <span class="subtext select-none pointer-events-none" style="color: hsl(var({!value ? '--grey7' : '--grey3'}));">{$t('editor.switch.off')}</span>
         
         <!-- Switch -->
         <div class="flex items-center justify-center pointer-events-none widgetic-colors">
@@ -62,7 +66,7 @@
         </div>
         
         <!-- On text -->
-        <span class="subtext select-none pointer-events-none" style="color: hsl(var({value ? '--grey7' : '--grey3'}));">On</span>
+        <span class="subtext select-none pointer-events-none" style="color: hsl(var({value ? '--grey7' : '--grey3'}));">{$t('editor.switch.on')}</span>
       </div>
     </div>
   </div>
@@ -116,4 +120,9 @@
     transform: translateX(20px) !important;
     border: 1px solid hsl(var(--grey6)) !important;
   }
+
+  /* The thumb starts at the end of the track that the line starts at: on a right to left screen it is at the right, and it travels to the left. */
+  :global(.switch-override:dir(rtl) > *[data-state="checked"]) {
+    transform: translateX(-20px) !important;
+  }
 </style>

package/dist/components/ic/TagsInputController.svelte

@@ -30,6 +30,14 @@
   import { onMount, onDestroy } from 'svelte';
   import InputControllerHeader from './InputControllerHeader.svelte';
   import { IconX } from '@widgetic/design-system/icons';
+  import { useEditorLanguage } from '../../i18n/language';
+  import { dirForUserText, 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: a tag is what a person typed, so on a right to left screen it is read by its own first letter.
+  const textDirection = useTextDirection();
 
   // Required props
   export let label: TagsInputControllerProps['label'];
@@ -44,11 +52,15 @@
   export { className as class };
 
   // Use config values with fallbacks
-  const placeholder = config.placeholder || 'Add tag...';
+  // The hint in the box: the one the widget gave, or the editor's own word in the language of the page.
+  $: placeholder = config.placeholder || $t('editor.tags.add');
   
   // Component state
   let inputElement: HTMLInputElement;
   let tagInputContainer: HTMLDivElement;
+  // What is typed in the box right now. An empty box has no first letter to be read by, and reads left to right by itself
+  // even on a right to left screen: so it takes the direction of the screen until something is typed (see fieldDirection.ts).
+  let typedTag = '';
 
   function handleTagRemove(tagToRemove: string) {
     const newTags = value.filter(tag => tag !== tagToRemove);
@@ -68,6 +80,7 @@
           onChange(newTags);
         }
         input.value = '';
+        typedTag = '';
       }
     }
   }
@@ -98,27 +111,29 @@
         on:focusin={onFocus}
       >
         <!-- Input field with specific padding -->
-        <div class="pt-[12px] pl-[16px] pr-[16px]">
+        <div class="pt-[12px] ps-[16px] pe-[16px]">
           <input
             bind:this={inputElement}
             type="text"
             autocomplete="off" 
+            dir={typedTag ? dirForUserText($textDirection) : undefined}
             class="w-full outline-none border-none bg-transparent subtext text-grey7 placeholder:text-grey3 placeholder:subtext"
             placeholder={placeholder}
+            on:input={(event) => (typedTag = event.currentTarget.value)}
             on:keydown={handleInputKeydown}
           />
         </div>
         
         <!-- Tags with specific padding -->
         {#if value && value.length > 0}
-          <div class="flex flex-wrap gap-1 pl-[16px] pr-[16px] pb-[16px] pt-[8px]">
+          <div class="flex flex-wrap gap-1 ps-[16px] pe-[16px] pb-[16px] pt-[8px]">
             {#each value as tag}
               <!-- svelte-ignore a11y_click_events_have_key_events -->
               <div 
                 class="tag-element bg-sage-green text-white border-none hover:bg-deep-forest-green cursor-pointer transition-colors flex items-center gap-1"
                 on:click|stopPropagation={() => handleTagRemove(tag)}
               >
-                <span class="tag uppercase truncate max-w-[115px]">{tag}</span>
+                <span class="tag uppercase truncate max-w-[115px]" dir={dirForUserText($textDirection)}>{tag}</span>
                 <IconX class="w-4 h-4 text-white flex-shrink-0" />
               </div>
             {/each}