@widgetic/editor 4.0.10 → 4.1.0

package/dist/components/ic/TextAreaInputController.svelte

@@ -68,9 +68,16 @@
   // Import Shad Editor
   import { ShadEditor, type TipTapEditor, type TipTapEditorLevel } from '@widgetic/design-system/shad-editor';
 
+  // The words of the editor in the language of the page, and the share of them that belongs to the rich text editor below.
+  import { useEditorLanguage } from '../../i18n/language';
+  import type { EditorMessageKey } from '../../i18n/messages';
+
   // Add local ColorPickerInputController import
   import ColorPickerInputController from './ColorPickerInputController.svelte';
 
+  // Looking things up and listening for scrolling in the tree the editor is in (a module has a shadow root)
+  import { isEventInside, listenForScroll, queryAllInTreeOf, queryInTreeOf } from '../../utils/shadowDom';
+
   // Add this constant for the decoration type
   const TRANSITION_DURATION = 250;
 
@@ -91,6 +98,8 @@
   // Use config values with fallbacks
   const textColor = $derived(config.textColor || '#1a1a1a');
 
+  const { t, shadEditor: shadEditorLanguage } = useEditorLanguage();
+
   /**
    * State Variables
    */  
@@ -108,7 +117,7 @@
   // Add type definition for formats
   type FormatType = 'bold' | 'italic' | 'underline' | 'link';
   type ActiveFormats = Record<FormatType, boolean>;
-  type FormatMapping = Record<FormatType, { value: string; icon: any }>;
+  type FormatMapping = Record<FormatType, { value: string; icon: any; messageKey: EditorMessageKey }>;
 
   let activeFormats = $state<ActiveFormats>({
     bold: false,
@@ -118,10 +127,10 @@
   });
 
   const formatMapping: FormatMapping = {
-    bold: { value: 'b', icon: IconBold },
-    italic: { value: 'i', icon: IconItalic },
-    underline: { value: 'u', icon: IconUnderline },
-    link: { value: 'link', icon: IconLink }
+    bold: { value: 'b', icon: IconBold, messageKey: 'editor.textArea.toggleBold' },
+    italic: { value: 'i', icon: IconItalic, messageKey: 'editor.textArea.toggleItalic' },
+    underline: { value: 'u', icon: IconUnderline, messageKey: 'editor.textArea.toggleUnderline' },
+    link: { value: 'link', icon: IconLink, messageKey: 'editor.textArea.toggleLink' }
   };
 
   let currentTextStyle = $state('text'); // Track current text style
@@ -130,17 +139,23 @@
   let currentColor = $derived(textColor);
   let selectedTextRange: { from: number, to: number } | null = $state(null);
 
-  const textOptions = [
-    { value: 'text', label: 'Paragraph', icon: IconPilcrow },
-    { value: 'h1', label: 'H1' },
-    { value: 'h2', label: 'H2' },
-    { value: 'h3', label: 'H3' }
+  // Each option is shown by its message (`messageKey`), in the language of the page.
+  const textOptions: { value: string; messageKey: EditorMessageKey; icon?: any }[] = [
+    { value: 'text', messageKey: 'editor.textArea.paragraph', icon: IconPilcrow },
+    { value: 'h1', messageKey: 'editor.textArea.heading1' },
+    { value: 'h2', messageKey: 'editor.textArea.heading2' },
+    { value: 'h3', messageKey: 'editor.textArea.heading3' }
   ];
 
-  const listOptions = [
-    { value: 'bulletList', label: 'Bullet List', icon: IconList },
-    { value: 'orderedList', label: 'Numbered List', icon: IconListNumbers },
-    { value: 'checkList', label: 'Check List', icon: IconListCheck }
+  /** The message of the style the toolbar button shows: the plain text's when the style is none of the options. */
+  let currentTextStyleMessageKey = $derived<EditorMessageKey>(
+    textOptions.find((option) => option.value === currentTextStyle)?.messageKey ?? 'editor.textArea.text'
+  );
+
+  const listOptions: { value: string; messageKey: EditorMessageKey; icon?: any }[] = [
+    { value: 'bulletList', messageKey: 'editor.textArea.bulletList', icon: IconList },
+    { value: 'orderedList', messageKey: 'editor.textArea.numberedList', icon: IconListNumbers },
+    { value: 'checkList', messageKey: 'editor.textArea.checkList', icon: IconListCheck }
   ];
 
   const content = writable(value);
@@ -392,7 +407,7 @@
           break;
         case 'link':
           if (isAdding) {
-            const href = window.prompt('Enter URL');
+            const href = window.prompt($t('editor.textArea.enterUrl'));
             if (href) {
               chain.setLink({ href }).run();
             }
@@ -533,7 +548,9 @@
       });
       
       updateActiveFormats();
+      // Choosing from either menu (text style or list style) closes it: the list style menu used to stay open.
       textStyleDropdownOpen = false;
+      listStyleDropdownOpen = false;
     } catch (error) {
       console.error('Error changing text style:', error);
     }
@@ -843,8 +860,11 @@
     if (isDestroyed) return;
     const handleClickOutside = (event: MouseEvent) => {
       if (isDestroyed) return;
-      const colorSelectModal = document.querySelector('[data-radix-popper-content-wrapper]');
-      const isClickingColorSelect = colorSelectModal?.contains(event.target as Node);
+      // Looked for in the tree this editor is in (inside a module, `document` has none of the editor's elements and may
+      // have a popover of the customer's page), and checked with the event's path (the target the document sees is the
+      // module's host)
+      const colorSelectModals = queryAllInTreeOf(toolbarRef, '[data-radix-popper-content-wrapper]');
+      const isClickingColorSelect = colorSelectModals.some((colorSelectModal) => isEventInside(event, colorSelectModal));
       
       // Don't do anything if clicking within the color select modal
       if (isClickingColorSelect) {
@@ -941,9 +961,11 @@
   function handleEditorBlur(relatedTarget: Node | null) {
     if (!editorInstance) return;
     
-    const colorSelectModal = document.querySelector('[data-radix-popper-content-wrapper]');
-    const popoverContent = document.querySelector('[role="dialog"]');
-    const commandMenu = document.querySelector('[cmdk-root]');
+    // Looked for in the tree the editor is in: `document` does not see inside a module's shadow root, and may have a
+    // dialog of the customer's page
+    const colorSelectModal = queryInTreeOf(toolbarRef, '[data-radix-popper-content-wrapper]');
+    const popoverContent = queryInTreeOf(toolbarRef, '[role="dialog"]');
+    const commandMenu = queryInTreeOf(toolbarRef, '[cmdk-root]');
     
     const isClickingInside = toolbarRef?.contains(relatedTarget) || 
                             editorInstance.view.dom.contains(relatedTarget as Node) ||
@@ -1030,12 +1052,15 @@
   }
 
   // Add to lifecycle management
+  // (listens to the page and, inside a module, to the module's own panels too: a scroll never leaves a shadow root)
+  let stopListeningForScroll: () => void = () => {};
+
   onMount(() => {
-    window.addEventListener('scroll', handleScroll, true);
+    stopListeningForScroll = listenForScroll(toolbarRef, handleScroll);
   });
 
   onDestroy(() => {
-    window.removeEventListener('scroll', handleScroll, true);
+    stopListeningForScroll();
   });
 
   // Add cleanup function
@@ -1103,17 +1128,17 @@
     <!-- Toolbar at the top -->
     <div 
       bind:this={toolbarRef}
-      class="toolbar-container sticky top-0 left-0 right-0 h-[56px] bg-grey1 z-10 border-b border-grey2 overflow-visible select-none"
+      class="toolbar-container sticky top-0 start-0 end-0 h-[56px] bg-grey1 z-10 border-b border-grey2 overflow-visible select-none"
       on:mousedown={handleToolbarInteraction}
       on:click={handleToolbarInteraction}
       on:keydown={handleToolbarKeyDown}
       role="toolbar"
-      aria-label="Text formatting toolbar"
+      aria-label={$t('editor.textArea.toolbar')}
       tabindex="-1"
     >
       <div class="toolbar-items-row relative flex items-center h-full w-full">
         <!-- Format cluster centered; close stays on the right -->
-        <div class={`toolbar-items-container absolute inset-y-0 left-0 right-10 flex items-center justify-center gap-2 transition-transform duration-200 ease-out ${
+        <div class={`toolbar-items-container absolute inset-y-0 start-0 end-10 flex items-center justify-center gap-2 transition-transform duration-200 ease-out ${
           isColorPickerAnimating ? 'translate-y-[-200%]' : 
           showColorPicker ? 'translate-y-[-200%]' : 
           'translate-y-0'
@@ -1151,10 +1176,10 @@
               handleToggleChange(value);
             }}
           >
-            {#each Object.entries(formatMapping) as [format, { value, icon: Icon }] (format)}
+            {#each Object.entries(formatMapping) as [format, { value, icon: Icon, messageKey }] (format)}
               <ToggleGroup.Item 
                 {value}
-                aria-label={`Toggle ${format}`}
+                aria-label={$t(messageKey)}
                 data-state={activeFormats[format as FormatType] ? 'on' : 'off'}
                 class="toolbar-button shrink-0 !h-8 !w-8 !min-w-8 !p-0 {activeFormats[format as FormatType] ? 'bg-muted' : ''}"
               >
@@ -1199,7 +1224,7 @@
                     {#if currentTextStyle === 'text'}
                       <IconPilcrow class="h-3.5 w-3.5 shrink-0" />
                     {:else}
-                      <span class="text-xs">{textOptions.find(opt => opt.value === currentTextStyle)?.label || 'Text'}</span>
+                      <span class="text-xs">{$t(currentTextStyleMessageKey)}</span>
                     {/if}
                     <ChevronDown class="h-3 w-3 shrink-0" />
                   </div>
@@ -1210,7 +1235,7 @@
                 class="w-[200px] p-0"
               >
                 <Command.Root>
-                  <Command.List>
+                  <Command.List aria-label={$t('editor.textArea.textStyles')}>
                     {#each textOptions as option}
                       <Command.Item
                         value={option.value}
@@ -1226,10 +1251,10 @@
                             {#if option.icon}
                               <option.icon class="h-4 w-4" />
                             {/if}
-                            <span>{option.label}</span>
+                            <span>{$t(option.messageKey)}</span>
                           </div>
                         {:else}
-                          <span>{option.label}</span>
+                          <span>{$t(option.messageKey)}</span>
                         {/if}
                         {#if option.value === currentTextStyle}
                           <div class="h-4 w-4">✓</div>
@@ -1283,7 +1308,7 @@
                 class="style-dropdown-container w-[300px] p-0"
               >
                 <Command.Root>
-                  <Command.List>
+                  <Command.List aria-label={$t('editor.textArea.listStyles')}>
                     {#each listOptions as option}
                       <Command.Item
                         value={option.value}
@@ -1298,7 +1323,7 @@
                           {#if option.icon}
                             <option.icon class="h-4 w-4" />
                           {/if}
-                          <span>{option.label}</span>
+                          <span>{$t(option.messageKey)}</span>
                         </div>
                         {#if option.value === currentTextStyle}
                           <div class="h-4 w-4">✓</div>
@@ -1315,7 +1340,7 @@
         {#if onClose && !showColorPicker && !isColorPickerAnimating}
           <Button
             variant="ghost"
-            class="toolbar-close-button ml-auto shrink-0 p-0 hover:bg-transparent h-8 w-8 mr-2 z-10"
+            class="toolbar-close-button ms-auto shrink-0 p-0 hover:bg-transparent h-8 w-8 me-2 z-10"
             onclick={(e) => {
               e.stopPropagation();
               e.preventDefault();
@@ -1389,6 +1414,8 @@
       <ShadEditor
         bind:content={value}
         showToolbar={false}
+        locale={$shadEditorLanguage.locale ?? undefined}
+        messages={$shadEditorLanguage.messages ?? undefined}
         class="shad-editor subtext {editorClass} {showColorPicker || textStyleDropdownOpen ? 'color-picking-active' : ''} {editorHasFocus ? 'editor-focused' : ''} {isSelectionActive ? 'selection-active' : ''}"
         on:mount={handleEditorMount}
         on:update={handleEditorUpdate}
@@ -1433,18 +1460,18 @@
   /* Keep scrollbar styles */
   :global(.ProseMirror::-webkit-scrollbar) {
     width: 6px;
-    margin-right: 2px;
+    margin-inline-end: 2px;
   }
 
   :global(.ProseMirror::-webkit-scrollbar-track) {
     background-color: transparent;
-    margin-right: 2px;
+    margin-inline-end: 2px;
   }
 
   :global(.ProseMirror::-webkit-scrollbar-thumb) {
     background-color: hsl(var(--border)) !important;
     border-radius: 3px;
-    margin-right: 2px;
+    margin-inline-end: 2px;
   }
 
   :global(.ProseMirror::-webkit-scrollbar-thumb:hover) {
@@ -1471,7 +1498,7 @@
   :global(.ProseMirror ul),
   :global(.ProseMirror ol),
   :global(.ProseMirror [data-type="taskList"]) {
-    padding-left: 1.5rem;
+    padding-inline-start: 1.5rem;
     margin: 0;
     line-height: 1.4;
   }
@@ -1479,21 +1506,21 @@
   :global(.ProseMirror li),
   :global(.ProseMirror [data-type="taskItem"]) {
     position: relative;
-    padding-left: 0.5rem;
+    padding-inline-start: 0.5rem;
     margin: 0;
   }
 
   /* Task list specific styles */
   :global(.ProseMirror [data-type="taskList"]) {
     list-style: none;
-    padding-left: 0rem !important;
+    padding-inline-start: 0rem !important;
   }
 
   :global(.ProseMirror [data-type="taskItem"]) {
     display: flex;
     align-items: flex-start;
-    padding-left: 0 !important;
-    margin-left: 0 !important;
+    padding-inline-start: 0 !important;
+    margin-inline-start: 0 !important;
     gap: 0.5rem;
   }
 
@@ -1786,11 +1813,12 @@
     gap: 8px !important;
     height: 100% !important;
     position: absolute !important;
-    inset: 0 2.5rem 0 0 !important;
+    inset-block: 0 !important;
+    inset-inline: 0 2.5rem !important;
   }
 
   :global(.text-area #text-style-trigger) {
-    margin-right: 0 !important;
+    margin-inline-end: 0 !important;
   }
 
   /* Color the brush icon based on selected color */
@@ -1803,12 +1831,12 @@
   }
   /* Button spacing */
   :global(.text-area .color-picker-preview-button) {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
+    margin-inline-start: 0 !important;
+    margin-inline-end: 0 !important;
   }
 
   :global(.text-area .text-formatting-toggle-group) {
-    margin-right: 0 !important;
+    margin-inline-end: 0 !important;
     display: flex !important;
     gap: 8px !important;
   }
@@ -1818,7 +1846,7 @@
   }
 
   :global(.text-area .text-formatting-toggle-group button:not(:last-child)) {
-    margin-right: 0 !important;
+    margin-inline-end: 0 !important;
   }
 
   :global(.text-area #text-style-trigger),
@@ -1861,7 +1889,7 @@
 
   :global(.text-area .toolbar-text-style-ct),
   :global(.text-area .toolbar-list-style-ct) {
-    margin-left: 0 !important;
+    margin-inline-start: 0 !important;
   }
 
   /* Update the color picker button to show selected color */
@@ -1902,8 +1930,8 @@
     width: 44px !important;
     min-width: 44px !important;
     max-width: 44px !important;
-    margin-left: 0 !important;
-    padding-left: 0 !important;
+    margin-inline-start: 0 !important;
+    padding-inline-start: 0 !important;
   }
 
   /* Update color picker container styles */

package/dist/components/ic/TextAreaPreviewInputController.svelte

@@ -16,9 +16,15 @@
 <script lang="ts">
   import { Portal } from '@widgetic/design-system/components';
   import { IconArrowsDiagonal } from '@widgetic/design-system/icons';
+  import { dirForUserText, useTextDirection } from '@widgetic/design-system/components/textDirection';
   import { onMount, onDestroy } from 'svelte';
   
   import { TextAreaInputController } from './index';
+  import { createPreviewHtml } from '../../utils/richTextPreview';
+  import { escapeHtml } from '../../utils/htmlSafety';
+
+  // The way the screen is read: the text in the preview is what a person wrote, so on a right to left screen it is read by its own first letter.
+  const textDirection = useTextDirection();
 
   /**
    * Component props
@@ -42,7 +48,7 @@
   $: isShowingPlaceholder = !value && placeholder;
 
   // Create a preview version of the text that preserves formatting
-  $: previewText = value ? createPreviewText(value) : placeholder;
+  $: previewText = value ? createPreviewText(value) : escapeHtml(placeholder);
 
   // Add this to track the current color
   let currentColor = '#1a1a1a'; // Default color
@@ -53,6 +59,10 @@
   // Add this to store the background rect ref
   let backgroundRectRef: HTMLDivElement;
 
+  // The box the text editor is shown in. The editor is found through it: a search of the whole `document` finds nothing
+  // inside a module's shadow root, and finds the customer's own text editor (and focuses it) when the page has one.
+  let portalContentRef: HTMLDivElement | undefined;
+
   // Add these near the top with other state declarations
   let isClosing = false;
 
@@ -60,73 +70,16 @@
    * Methods
    */
   function createPreviewText(text: string) {
-    if (!text) return '';
-
-    let html = text;
-    if (!html.includes('<') && html.includes('&lt;')) {
-      const decoded = document.createElement('textarea');
-      decoded.innerHTML = html;
-      html = decoded.value;
+    // The text is rich text somebody typed or pasted, and this editor can run inside a customer's page: the preview is
+    // not a copy of that HTML. It is built by a renderer that escapes every text and keeps only the tags and styles on
+    // its lists (see richTextPreview.ts). Block wrappers (p, div, br) are flattened there, so marks render inside the
+    // compact clamp box.
+    try {
+      return createPreviewHtml(text);
+    } catch (error) {
+      console.error('[TextAreaPreview] Could not build the preview of the text:', error);
+      return escapeHtml(text);
     }
-
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-
-    function processNode(node: Node): string {
-      if (node.nodeType === Node.TEXT_NODE) {
-        return node.textContent || '';
-      }
-
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        const element = node as Element;
-        let tag = element.tagName.toLowerCase();
-        const attributes: Record<string, string> = {};
-        const children = Array.from(node.childNodes)
-          .map(child => processNode(child))
-          .join('');
-
-        // Flatten block wrappers so marks render inside the compact clamp box
-        if (tag === 'p' || tag === 'div' || tag === 'br') {
-          return tag === 'br' ? ' ' : `${children} `;
-        }
-
-        const style = element.getAttribute('style');
-        if (style) {
-          const colorMatch = style.match(/color:\s*([^;]+)/);
-          if (colorMatch) {
-            attributes.style = `--color: ${colorMatch[1]}; ${style}`;
-          } else {
-            attributes.style = style;
-          }
-        }
-
-        const textStyle = element.getAttribute('data-text-style');
-        if (textStyle) {
-          attributes['data-text-style'] = textStyle;
-          attributes.class = (attributes.class || '') + ' preserve-color';
-        }
-
-        if (tag.match(/^h[1-4]$/)) {
-          tag = 'span';
-          attributes.class = (attributes.class || '') + ' tiptap-heading';
-        }
-
-        let startTag = `<${tag}`;
-        for (const [key, attrValue] of Object.entries(attributes)) {
-          startTag += ` ${key}="${attrValue.trim()}"`;
-        }
-        startTag += '>';
-
-        return `${startTag}${children}</${tag}>`;
-      }
-
-      return '';
-    }
-
-    return Array.from(doc.body.childNodes)
-      .map(node => processNode(node))
-      .join('')
-      .trim();
   }
 
   function handleFullEditorChange(html: string) {
@@ -141,7 +94,7 @@
 
   $: if (isShowingTextArea) {
     setTimeout(() => {
-      const editor = document.querySelector('.ProseMirror');
+      const editor = portalContentRef?.querySelector('.ProseMirror');
       if (editor instanceof HTMLElement) {
         editor.focus();
       }
@@ -213,7 +166,7 @@
     isClosing = true;
 
     // Add animation end handler
-    const content = document.querySelector('.text-area-portal-content') as HTMLDivElement;
+    const content = portalContentRef;
     const overlay = content?.previousElementSibling as HTMLDivElement;
 
     const handleAnimationEnd = () => {
@@ -246,15 +199,16 @@
       role="button"
       tabindex="0"
     >
-      <div class="textarea-ic-preview-copy min-w-0 overflow-hidden pr-10 pt-[13px] pb-4 pl-4">
+      <div class="textarea-ic-preview-copy min-w-0 overflow-hidden pe-10 pt-[13px] pb-4 ps-4">
         <div 
           class="textarea-ic-preview-html break-words text-grey7 text-sm leading-5" 
           class:text-grey3={isShowingPlaceholder}
+          dir={dirForUserText($textDirection)}
         >
           {@html previewText}
         </div>
       </div>
-      <div class="textarea-ic-expand-icon absolute top-[14px] right-[12px]">
+      <div class="textarea-ic-expand-icon absolute top-[14px] end-[12px]">
         <IconArrowsDiagonal 
           class="w-5 h-5 text-grey5 group-hover:text-grey7 transition-colors duration-200" 
         />
@@ -271,7 +225,7 @@
   {#if isShowingTextArea}
   <Portal 
     target={portalTarget}
-    class="text-area-portal absolute top-0 left-0 w-full h-full"
+    class="text-area-portal absolute top-0 start-0 w-full h-full"
   >
     <!-- Blocking overlay -->
     <div 
@@ -280,6 +234,7 @@
     ></div>
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div 
+      bind:this={portalContentRef}
       class="text-area-portal-content absolute mt-4 mx-6 mb-6 inset-0 {isClosing ? 'scale-out-animation' : 'scale-in-animation'}"
       style="z-index: 51; transform: translateZ(0); backface-visibility: hidden;"
       on:mouseenter={handlePortalMouseEnter}

package/dist/components/ic/TextInputController.svelte

@@ -16,6 +16,8 @@
 <script lang="ts">
   // Import Shadcn UI components from Widgetic design-system package
   import { Input } from '@widgetic/design-system/components';
+  import { useTextDirection } from '@widgetic/design-system/components/textDirection';
+  import { directionOfFieldValue } from '../../utils/fieldDirection';
   import { InputControllerHeader } from './index';
 
   // Component props
@@ -35,6 +37,18 @@
   export let description: TextInputControllerProps['description'] = undefined;
   export let onFocus: TextInputControllerProps['onFocus'] = () => {};
 
+  // The way the screen is read. What a visitor types reads by its own first letter on a right to left screen; an address
+  // (an email, a link) is read left to right on every screen. A left to right screen is written no attribute, as it always was.
+  // (The `type` is the name of the kind of field in the schema, `textInput` for a plain text field: see fieldDirection.ts.)
+  const textDirection = useTextDirection();
+  // What is in the field right now: the value the page gave it, then what is typed (only an empty field has no first letter).
+  let typedText = '';
+  $: typedText = value ?? '';
+  $: hasTypedValue = typedText.length > 0;
+  let valueDirection: 'auto' | 'ltr' | undefined;
+  // (An empty field takes the direction of the screen, so that its hint and its caret start at the start of the line.)
+  $: valueDirection = directionOfFieldValue(type, $textDirection, hasTypedValue);
+
   /**
    * Methods
    */
@@ -56,7 +70,7 @@
       <InputControllerHeader {label} />
     </div>
     
-    <div class="absolute right-0">
+    <div class="absolute end-0">
       <div 
         class="h-[48px] w-[185px] rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green"
         on:focusin={onFocus}
@@ -66,9 +80,11 @@
           {type}
           {value}
           {placeholder}
+          dir={valueDirection}
           onfocus={onFocus}
           oninput={(e) => {
             const newValue = e.currentTarget.value;
+            typedText = newValue;
             if (validate(newValue)) {
               onChange(newValue);
             }

package/dist/components/ic/TimeInputController.svelte

@@ -29,6 +29,7 @@
   import { Portal } from '@widgetic/design-system/components';
   import InputControllerHeader from './InputControllerHeader.svelte';
   import type { InputControllerConfig } from './index';
+  import { isEventInside, listenForScroll } from '../../utils/shadowDom';
 
   export let label: TimeInputControllerProps['label'];
   export let value: TimeInputControllerProps['value'] = "00:00";
@@ -239,6 +240,7 @@
         if (dropdownContainer && timeButton) {
           const rect = timeButton.getBoundingClientRect();
           dropdownContainer.style.top = `${rect.bottom + 4}px`;
+          // rtl-ok: the list is as wide as the button it opens from, so the left edge of the button is both of its edges
           dropdownContainer.style.left = `${rect.left}px`;
           isDropdownPositioned = true;
         }
@@ -256,7 +258,9 @@
   }
   
   function handleClickOutside(event: MouseEvent) {
-    if (dropdownContainer && !dropdownContainer.contains(event.target as Node)) {
+    // Seen from the document, a click inside a shadow root has the module's host as its target, so the click's path
+    // is what says whether it was inside the dropdown
+    if (dropdownContainer && !isEventInside(event, dropdownContainer)) {
       closeDropdown();
     }
   }
@@ -290,11 +294,14 @@
     }
   }
 
+  // Stops the scroll listener (it listens to the page and, in a module, to the module's own panels)
+  let stopListeningForScroll: () => void = () => {};
+
   // Update onMount to add scroll listener with capture phase
   onMount(() => {
     parseTimeFromValue(value);
     updateValue();
-    window.addEventListener('scroll', handleScroll, { capture: true });
+    stopListeningForScroll = listenForScroll(clockContainer, handleScroll);
   });
   
   // Update onDestroy to remove scroll listener
@@ -302,7 +309,7 @@
     document.removeEventListener('mousemove', handleMouseMove);
     document.removeEventListener('mouseup', handleMouseUp);
     document.removeEventListener('click', handleClickOutside);
-    window.removeEventListener('scroll', handleScroll, true);
+    stopListeningForScroll();
   });
 
   // Watch for external value changes
@@ -333,7 +340,7 @@
       <InputControllerHeader {label} {helpText} />
     </div>
     
-    <div class="absolute right-0 h-[48px] flex items-center">
+    <div class="absolute end-0 h-[48px] flex items-center">
       <div class="flex items-center justify-end gap-2">
         <!-- Clock Face -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->