@widgetic/editor 4.0.10 → 4.1.0

package/dist/components/ic/DatePickerInputController.svelte

@@ -37,6 +37,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 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';
@@ -65,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);
@@ -140,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');
     }
   }
 
@@ -209,25 +216,30 @@
     }
   }
 
-  // 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, { capture: true });
+    stopListeningForScroll = listenForScroll(controllerElement, handleScroll);
   });
 
   // Cleanup scroll event listener on destroy
   onDestroy(() => {
-    window.removeEventListener('scroll', handleScroll, true);
+    stopListeningForScroll();
   });
 </script>
 
 <!-- Date Picker 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} />
     </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}
@@ -238,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>
@@ -274,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 }}
@@ -309,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 }}
@@ -324,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

@@ -31,6 +31,11 @@
    * Required for component setup and cleanup
    */
   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';
@@ -49,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'] = {};
@@ -113,13 +119,18 @@
    * Lifecycle Hooks
    * Setup and cleanup of scroll event listeners
    */
+  // The control's own element, which says which tree (the page or a module's shadow root) to listen for scrolling in
+  // (a scroll never leaves a shadow root, so a listener on the window alone only hears about the page scrolling)
+  let controllerElement: HTMLDivElement | undefined;
+  let stopListeningForScroll: () => void = () => {};
+
   onMount(() => {
     // console.log('DropdownInputController: onMount:', value);
-    window.addEventListener('scroll', handleScroll, true);
+    stopListeningForScroll = listenForScroll(controllerElement, handleScroll);
   });
 
   onDestroy(() => {
-    window.removeEventListener('scroll', handleScroll, true);
+    stopListeningForScroll();
   });
 
   /**
@@ -147,20 +158,21 @@
   /**
    * The option label for the current selection. `value` accepts a bare string
    * or an option object; normalize once instead of re-narrowing at each read.
+   * A missing selection is the empty string, as the select expects.
    */
-  $: selectedValue = typeof value === 'string' ? value : value?.value;
+  $: 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 -->
-<div class="dropdown-ic flex flex-col gap-2 widgetic-colors">
+<div bind:this={controllerElement} class="dropdown-ic flex flex-col gap-2 widgetic-colors">
   <div class="flex items-center w-full relative">
     <div class="flex-1 min-w-0">
       <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));"
@@ -175,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