@widgetic/editor 4.0.10 → 4.1.0

package/dist/components/ic/FontInputController.svelte

@@ -63,6 +63,9 @@
   import FontManager, { mapGoogleVariantIdsToWeightNames } from '../../utils/FontManager';
   
   import { shouldSkipFont } from '../../utils/skipFonts';
+  import { escapeHtml, cssQuotedString } from '../../utils/htmlSafety';
+  import { acquirePortalHost, releasePortalHost, listenForScroll, queryInTreeOf } from '../../utils/shadowDom';
+  import { readEditorStorageValue, writeEditorStorageValue } from '../../utils/editorStorage';
   import type { Writable } from 'svelte/store';
 
   import { InputControllerHeader } from './index';
@@ -71,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}`;
@@ -125,6 +133,8 @@
 
   // Font loading optimization
   let fontListContainer: HTMLElement;
+  // The control's own element: it says which tree (the page or a module's shadow root) to listen for scrolling in
+  let controllerElement: HTMLDivElement | undefined;
   let familyTriggerEl: HTMLDivElement | undefined;
   let familyPopoverStyle = '';
   let familyPopoverSide: 'top' | 'bottom' = 'bottom';
@@ -191,6 +201,15 @@
   // Add a timeout to track long-running initial loads
   let initialLoadTimeout: ReturnType<typeof setTimeout> | null = null;
 
+  /**
+   * The sticky header of the font list. It is looked up in the tree the list lives in (inside a module that is a
+   * shadow root, which `document.querySelector` cannot see into), and the id is escaped so that one with dots or
+   * brackets in it is found too.
+   */
+  function findStickyHeader(): Element | null {
+    return queryInTreeOf(fontListContainer, `#${CSS.escape(`font-header-${controllerId}`)}`);
+  }
+
   // Function to update scroll state
   function updateScrollState() {
     if (fontListContainer) {
@@ -199,7 +218,7 @@
       
       // If we're transitioning from scrolled to not scrolled, remove transition
       if (wasScrolled && !isScrolled) {
-        const stickyHeader = document.querySelector(`#font-header-${controllerId}`);
+        const stickyHeader = findStickyHeader();
         if (stickyHeader) {
           stickyHeader.classList.remove('transition-border');
           // Force a reflow to ensure the transition class removal takes effect
@@ -207,7 +226,7 @@
         }
       } else if (!wasScrolled && isScrolled) {
         // Add transition class when starting to scroll
-        const stickyHeader = document.querySelector(`#font-header-${controllerId}`);
+        const stickyHeader = findStickyHeader();
         if (stickyHeader) {
           stickyHeader.classList.add('transition-border');
         }
@@ -252,22 +271,20 @@
 
   let fontPickerReadyAt = 0;
 
+  /**
+   * The layer the font popovers are drawn in: one of their own, above everything else, in the tree this input lives
+   * in. On a page that is a node at the end of the body; inside a module it is a node in the module's portal layer,
+   * because a popover drawn in the customer's body would lose the module's styles and leave a node behind in the
+   * customer's page. The input has to be on the page to tell which tree it is in, so until it is (a short moment,
+   * and a popover is never open by then) the popovers go where the design system's portal configuration sends them.
+   */
+  let fontPickerPortalHost: HTMLElement | undefined;
+
   function ensureFontPickerPortal() {
-    if (!browser) return;
-    const portalId = 'widgetic-font-picker-portal';
-    if (document.getElementById(portalId)) return;
-    const host = document.createElement('div');
-    host.id = portalId;
-    host.style.position = 'relative';
-    host.style.zIndex = '100000000';
-    document.body.appendChild(host);
+    if (!browser || fontPickerPortalHost) return;
+    fontPickerPortalHost = acquirePortalHost(familyTriggerEl, 'widgetic-font-picker-portal') ?? undefined;
   }
 
-  // The font popover looks up this node while it is created. onMount is too
-  // late: the child portal mounts first and throws if the host is missing,
-  // which takes the whole details panel (including chat) down with it.
-  ensureFontPickerPortal();
-
   onMount(async () => {
     try {
       if (browser) {
@@ -282,13 +299,13 @@
         }
         
         // Load saved filter
-        const savedFilter = localStorage.getItem(FONT_FILTER_KEY(controllerId));
+        const savedFilter = readEditorStorageValue(FONT_FILTER_KEY(controllerId));
         if (savedFilter) {
           currentFilter = savedFilter as FilterType;
         }
 
         // Load saved weight
-        const savedWeight = localStorage.getItem(FONT_WEIGHT_KEY(controllerId));
+        const savedWeight = readEditorStorageValue(FONT_WEIGHT_KEY(controllerId));
         if (savedWeight) {
           selectedWeight = savedWeight;
         }
@@ -790,7 +807,7 @@
 
         selectedWeight = `${controllerId}-${newWeight}`;
         if (browser) {
-          localStorage.setItem(FONT_WEIGHT_KEY(controllerId), selectedWeight);
+          writeEditorStorageValue(FONT_WEIGHT_KEY(controllerId), selectedWeight);
         }
 
         // Load the full font when selected
@@ -852,7 +869,7 @@
     if (!searchTerm && value) {
       lastActiveFilter = currentFilter;
       currentFilter = 'All';
-      localStorage.setItem(FONT_FILTER_KEY(controllerId), 'All');
+      writeEditorStorageValue(FONT_FILTER_KEY(controllerId), 'All');
     }
     
     // Apply filtering with the new search term
@@ -1064,7 +1081,7 @@
         currentFilter = filter;
         
         if (browser) {
-            localStorage.setItem(FONT_FILTER_KEY(controllerId), filter);
+            writeEditorStorageValue(FONT_FILTER_KEY(controllerId), filter);
         }
         
         if (fontManagerInstance) {
@@ -1482,7 +1499,8 @@
    * @param term Search term
    * @returns HTML string with highlighted match
    * 
-   * Note: Returns safe HTML as we're only wrapping with <strong>
+   * Note: The result goes to {@html}, so every piece of the font name is escaped as it is put in (a name such as
+   * `<img src=x onerror=...>` must show as text, not run in the page the editor is on).
    */
   function highlightMatch(name: string, term: string) {
     // Check if this font is the selected one
@@ -1491,8 +1509,8 @@
     if (!term) {
       // If no search term, just return the name with appropriate color
       return isSelected 
-        ? `<span style="color: white">${name}</span>` 
-        : `<span style="color: hsl(var(--grey7))">${name}</span>`;
+        ? `<span style="color: white">${escapeHtml(name)}</span>` 
+        : `<span style="color: hsl(var(--grey7))">${escapeHtml(name)}</span>`;
     }
     
     const nameLower = name.toLowerCase();
@@ -1501,9 +1519,9 @@
     // If the name contains the search term, highlight that part
     if (nameLower.includes(termLower)) {
       const index = nameLower.indexOf(termLower);
-      const beforeMatch = name.slice(0, index);
-      const match = name.slice(index, index + termLower.length);
-      const afterMatch = name.slice(index + termLower.length);
+      const beforeMatch = escapeHtml(name.slice(0, index));
+      const match = escapeHtml(name.slice(index, index + termLower.length));
+      const afterMatch = escapeHtml(name.slice(index + termLower.length));
       
       if (isSelected) {
         // For selected items: text is white, highlight is grey7
@@ -1516,8 +1534,8 @@
     
     // Default case - just return the name with appropriate color
     return isSelected
-      ? `<span style="color: white">${name}</span>`
-      : `<span style="color: hsl(var(--grey7))">${name}</span>`;
+      ? `<span style="color: white">${escapeHtml(name)}</span>`
+      : `<span style="color: hsl(var(--grey7))">${escapeHtml(name)}</span>`;
   }
 
   /**
@@ -1550,28 +1568,31 @@
     }
   }
 
-  // Update onMount to add scroll and touch listeners with passive option
+  // Stops listening for scrolling (the page and, inside a module, the module's own panels: a scroll never leaves a
+  // shadow root, so a listener on the window alone does not hear about those)
+  let stopListeningForScroll: () => void = () => {};
+
+  // Update onMount to add the scroll listener with passive option
   onMount(() => {
     // Add scroll listener with passive option
-    window.addEventListener('scroll', handleGlobalScroll, {
-      capture: true,
-      passive: true
-    });
+    stopListeningForScroll = listenForScroll(controllerElement, handleGlobalScroll, { passive: true });
     window.addEventListener('resize', handleFamilyPopoverViewportChange);
     window.visualViewport?.addEventListener('resize', handleFamilyPopoverViewportChange);
 
-    // Add touch listeners with passive option
-    window.addEventListener('touchstart', () => {}, { passive: true });
-    window.addEventListener('touchmove', () => {}, { passive: true });
+    // (Two touchstart/touchmove listeners that did nothing used to be added to the window here, and could never be
+    // removed: each input left two more on the customer's page every time it was shown. They did nothing, so they are
+    // gone.)
   });
 
   // Update onDestroy to remove all listeners
   onDestroy(() => {
-    window.removeEventListener('scroll', handleGlobalScroll, true);
+    stopListeningForScroll();
     window.removeEventListener('resize', handleFamilyPopoverViewportChange);
     window.visualViewport?.removeEventListener('resize', handleFamilyPopoverViewportChange);
-    window.removeEventListener('touchstart', () => {});
-    window.removeEventListener('touchmove', () => {});
+
+    // Give the popover layer back (the last input to leave removes it from the page).
+    releasePortalHost(fontPickerPortalHost);
+    fontPickerPortalHost = undefined;
     
     if (fontObserver) {
       fontObserver.disconnect();
@@ -1653,7 +1674,7 @@
   function handleWeightSelect(weight: string) {
     selectedWeight = `${controllerId}-${weight}`;
     if (browser) {
-      localStorage.setItem(FONT_WEIGHT_KEY(controllerId), selectedWeight);
+      writeEditorStorageValue(FONT_WEIGHT_KEY(controllerId), selectedWeight);
     }
     const current = coerceFontValue(value);
     if (onChange) {
@@ -1679,7 +1700,8 @@
     }
 
     // Ensure the selected item is visible
-    const selectedElement = fontListContainer?.querySelector(`[data-font="${filteredFonts[activeSearchIndex].family}"]`);
+    // (The family goes through CSS.escape: a name with a quote in it must not end the selector.)
+    const selectedElement = fontListContainer?.querySelector(`[data-font="${CSS.escape(filteredFonts[activeSearchIndex].family)}"]`);
     selectedElement?.scrollIntoView({ block: 'nearest' });
   }
 
@@ -1691,14 +1713,16 @@
 
   // Functions for RecentItemsSection
   function renderFontItem(font: FontItem) {
+    // The result is used as HTML by RecentItemsSection: the family is quoted for CSS and escaped for HTML where it is
+    // a rule, and escaped for HTML where it is the text.
     return {
       html: `
         <div class="flex items-center flex-1 min-w-0">
           <span 
             class="text-[24px] truncate"
-            style="font-family: '${font.family}', sans-serif; font-display: swap; color: inherit; -webkit-text-fill-color: currentColor;"
+            style="font-family: ${escapeHtml(cssQuotedString(font.family))}, sans-serif; font-display: swap; color: inherit; -webkit-text-fill-color: currentColor;"
           >
-            ${font.family}
+            ${escapeHtml(font.family)}
           </span>
         </div>
       `
@@ -1727,7 +1751,7 @@
 </script>
 
 <!-- Dual IC: header zone always on the left (even if label is empty); 185px inputs on the right. -->
-<div class="font-ic flex flex-col gap-2 w-full min-w-0 widgetic-colors {className}" style={style}>
+<div bind:this={controllerElement} class="font-ic flex flex-col gap-2 w-full min-w-0 widgetic-colors {className}" style={style}>
   <div class="font-family-row flex items-center justify-between w-full min-w-0 gap-2" style="min-height: 48px;">
         <div class="font-family-label-ct flex-1 min-w-0">
           <InputControllerHeader label={label || ''} />
@@ -1768,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
@@ -1778,10 +1802,10 @@
               }}
             >
               <span
-                class="truncate flex-1 text-left subtext text-grey7"
-                style="font-family: '{resolvedFont?.family || 'system-ui'}', sans-serif; font-display: swap;"
+                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>
@@ -1790,18 +1814,18 @@
               collisionPadding={12}
               side={familyPopoverSide}
               sideOffset={4}
-              portalProps={{ to: '#widgetic-font-picker-portal' }}
+              portalProps={{ to: fontPickerPortalHost }}
               class="font-input-popover !p-0 widgetic-colors widgetic-radius rounded-medium modal-shadow border border-grey2"
               style={familyPopoverStyle}
             >
               <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();
@@ -1821,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
@@ -1835,7 +1859,7 @@
                       // Restore the previous filter when clearing search
                       currentFilter = lastActiveFilter;
                       if (browser) {
-                        localStorage.setItem(FONT_FILTER_KEY(controllerId), lastActiveFilter);
+                        writeEditorStorageValue(FONT_FILTER_KEY(controllerId), lastActiveFilter);
                       }
                       
                       // ... rest of your onClear code ...
@@ -1849,6 +1873,7 @@
                       categories={filterOptions}
                       activeCategory={currentFilter}
                       onCategorySelect={handleFilterChange}
+                      getCategoryLabel={(category) => categoryLabel(category, $t)}
                       filterVisible={!searchTerm}
                     />
                   </div>
@@ -1865,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}
@@ -1893,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}
@@ -1905,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}
@@ -1934,10 +1958,10 @@
                               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: '{font.family}', sans-serif; font-display: swap; color: inherit; -webkit-text-fill-color: currentColor;"
+                                  style="font-family: {cssQuotedString(font.family)}, sans-serif; font-display: swap; color: inherit; -webkit-text-fill-color: currentColor;"
                                 >
                                   {@html highlightMatch(font.family, searchTerm)}
                                 </span>
@@ -1946,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();
@@ -1955,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>
@@ -1978,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 
@@ -1990,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: '#widgetic-font-picker-portal' }}>
+            <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
@@ -2007,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>
@@ -2045,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;
   }
@@ -2192,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

@@ -2,6 +2,9 @@
 // Svelte imports
 import { onDestroy, onMount } from 'svelte';
 
+// Shared listener for "the user is scrolling" (one per tree, not one per header)
+import { onScrollActivity } from '../../utils/scrollActivity';
+
 // Shadcn UI Components from design-system
 import { Tooltip, Portal } from '@widgetic/design-system/components';
 // console.log("InputControllerHeader - Tooltip:", Tooltip);
@@ -9,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 };
@@ -58,23 +65,23 @@ function handleMouseLeave() {
   clearTimeout(tooltipTimeout);
 }
 
+let headerElement: HTMLElement | undefined;
+let stopListeningForScrolling: () => void = () => {};
+
 onMount(() => {
-  // Add listeners to both window and all scrollable parents
-  window.addEventListener('scroll', handleScroll, { capture: true, passive: true });
-  document.addEventListener('wheel', handleScroll, { capture: true, passive: true });
-  document.addEventListener('touchmove', handleScroll, { capture: true, passive: true });
+  // The listeners for scrolling are shared by all the headers in the same tree (the page or the module's shadow
+  // root): every header used to add three of its own to the window and the document.
+  stopListeningForScrolling = onScrollActivity(headerElement, handleScroll);
 });
 
 onDestroy(() => {
-  window.removeEventListener('scroll', handleScroll, { capture: true });
-  document.removeEventListener('wheel', handleScroll, { capture: true });
-  document.removeEventListener('touchmove', handleScroll, { capture: true });
+  stopListeningForScrolling();
   clearTimeout(scrollTimeout);
   clearTimeout(tooltipTimeout);
 });
 </script>
 
-<div class="input-controller-header widgetic-colors {className ? className + ' ' : ''}flex group" {style}>
+<div bind:this={headerElement} class="input-controller-header widgetic-colors {className ? className + ' ' : ''}flex group" {style}>
   <div class="header-label-ct flex-1 min-w-0 flex items-center h-full">
     <div class="tooltip-group flex items-center max-w-full" style="gap: 8px;">
       <span class="subtext cursor-default select-none truncate !text-base" style="color: hsl(var(--grey5));">
@@ -103,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

@@ -203,11 +203,13 @@
    * Blur Event Handler
    * Validates and normalizes input when focus is lost
    */
-  function handleBlur() {
+  function handleBlur(event: FocusEvent) {
     // console.log('handleBlur:', { value, isEditing, min, max });
     
     isEditing = false;
-    const input = document.getElementById('number-input') as HTMLInputElement;
+    // The input that lost the focus. (It used to be looked up by the id "number-input" in the whole document, which is
+    // another input when there are several, and nothing inside a module's shadow root.)
+    const input = event.currentTarget as HTMLInputElement;
     
     // Handle empty or invalid input
     if (input.value === '' || input.value === '-') {
@@ -371,7 +373,7 @@
       <InputControllerHeader {label} helpText={helpText} />
     </div>
     
-    <div class="absolute right-0">
+    <div class="absolute end-0">
       <NumberControls
         {value}
         {onChange}
@@ -391,7 +393,7 @@
 
 <style>
   :global(#number-input) {
-    text-align: left;
+    text-align: start;
     appearance: textfield;
     -moz-appearance: textfield;
   }