@widgetic/editor 4.0.10 → 4.1.0

package/dist/components/ic/PositionInputController.svelte

@@ -35,6 +35,13 @@
 
   // Component config
   import type { InputControllerConfig } from './index';
+
+  // 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
@@ -58,6 +65,8 @@
   let joystickHandle: HTMLDivElement;
   let isDragging = false;
   let isHovering = false;
+  // Puts back the cursor the page had before the drag (does nothing when no drag is going on)
+  let releasePointerStyle: () => void = () => {};
 
   /**
    * Reactive position state
@@ -125,8 +134,9 @@
     updatePosition(event.clientX, event.clientY);
     document.addEventListener('mousemove', handleMouseMove);
     document.addEventListener('mouseup', handleMouseUp);
-    document.body.style.cursor = 'grabbing';
-    document.body.classList.add('position-dragging');
+    // A second press before the first one was let go must not leave the first lock behind
+    releasePointerStyle();
+    releasePointerStyle = lockPointerStyle(joystickContainer, 'grabbing');
   }
 
   function handleMouseMove(event: MouseEvent) {
@@ -139,9 +149,7 @@
     onDragStateChange(false);
     document.removeEventListener('mousemove', handleMouseMove);
     document.removeEventListener('mouseup', handleMouseUp);
-    document.body.style.cursor = '';
-    document.body.classList.remove('position-dragging');
-    document.body.style.userSelect = '';
+    releasePointerStyle();
   }
 
   /**
@@ -177,17 +185,17 @@
   });
 
   onDestroy(() => {
-    document.body.classList.remove('position-dragging');
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
+    // Only undoes what this drag did (it used to clear the cursor and the text selection of the whole page)
+    releasePointerStyle();
   });
 </script>
 
-<div class="position-input-controller widgetic-colors">
+<div class="position-input-controller widgetic-colors" class:position-input-controller-dragging={isDragging}>
   <!-- Joystick UI -->
   <!-- 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}
@@ -205,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>
@@ -228,8 +236,8 @@
 </div>
 
 <style>
-  /* Make the selector more specific by targeting only elements within position-input-controller */
-  :global(body.position-dragging .position-input-controller *) {
+  /* While dragging, everything inside the controller shows the grabbing cursor (this used to be a class on the page's body) */
+  .position-input-controller-dragging :global(*) {
     cursor: grabbing !important;
     user-select: none !important;
     -webkit-user-select: none !important;

package/dist/components/ic/RangeCalendarInputController.svelte

@@ -46,6 +46,13 @@
 <script lang="ts">
   // 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';
@@ -109,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');
     }
   }
 
@@ -177,25 +184,30 @@
     closeDropdown();
   }
 
-  // Setup scroll event listener on mount
+  // The control's own element, which says which tree (the page or a module's shadow root) to listen for scrolling in
+  let controllerElement: HTMLDivElement | undefined;
+  let stopListeningForScroll: () => void = () => {};
+
+  // Setup scroll event listener on mount (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)
   onMount(() => {
-    window.addEventListener('scroll', handleScroll, true);
+    stopListeningForScroll = listenForScroll(controllerElement, handleScroll);
   });
 
   // Cleanup scroll event listener on destroy
   onDestroy(() => {
-    window.removeEventListener('scroll', handleScroll, true);
+    stopListeningForScroll();
   });
 </script>
 
 <!-- Range Calendar Container -->
-<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} 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}
@@ -206,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

@@ -28,6 +28,11 @@
   import Lock from '../icons/locked.svelte';
   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;
@@ -63,19 +68,22 @@
     
     if (isLocked) {
       // When locked, update all corners to the same value
-      onChange({
+      value = {
         topLeft: newValue,
         topRight: newValue,
         bottomRight: newValue,
         bottomLeft: newValue
-      });
+      };
     } else {
       // When unlocked, update only the specified corner
-      onChange({
+      value = {
         ...value,
         [corner]: newValue
-      });
+      };
     }
+    // The fields show the change at once, in every corner it reached: the parent hands the value back only when it
+    // builds this control again, and until then the corners that were changed together kept showing the old number
+    onChange(value);
   }
 
   // Handler for input changes
@@ -167,9 +175,12 @@
     
     // Reset focused corner if we're not focusing another input immediately
     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 corners
+      const focusedElement = activeElementIn(input);
+      if (!focusedElement || 
+          !(focusedElement instanceof HTMLInputElement) || 
+          !Object.values(inputRefs).includes(focusedElement)) {
         focusedCorner = null;
       }
     }, 0);
@@ -182,29 +193,31 @@
     // If locking, normalize all values to the first focused corner or top-left
     if (isLocked && focusedCorner) {
       const referenceValue = value[focusedCorner];
-      onChange({
+      value = {
         topLeft: referenceValue,
         topRight: referenceValue,
         bottomRight: referenceValue,
         bottomLeft: referenceValue
-      });
+      };
+      onChange(value);
     }
   }
 
+  // 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
@@ -282,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
@@ -303,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>
@@ -322,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>
@@ -341,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>
@@ -360,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>
@@ -369,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}