@widgetic/editor 4.0.1 → 4.0.3

package/dist/components/ic/FontInputController.svelte

@@ -77,8 +77,11 @@
    * @prop {Function} toggleDropdown - Function to toggle dropdown state
    * @prop {Function} onFocus - Optional focus handler
    */
-  export let label: string;
-  export let value: { family: string; weight: string; category: string } | null = null;
+  export let label: string = '';
+  let className = '';
+  export { className as class };
+  export let style = '';
+  export let value: { family: string; weight: string; category: string } | string | null = null;
   export let onChange: ((newValue: { family: string; weight: string; category: string }) => void) | undefined = undefined;
   export let description: string | undefined = undefined;
   export let controllerId: string;
@@ -91,7 +94,7 @@
   
   // Font weight state - remove localStorage check on init
   let selectedWeight = `${controllerId}-Regular`;
-  let availableWeights: string[] = [];
+  let availableWeights: string[] = ['Regular', 'Medium', 'SemiBold', 'Bold'];
   
   // Font search and filter state
   let allFonts: FontItem[] = [];
@@ -103,6 +106,9 @@
 
   // Font loading optimization
   let fontListContainer: HTMLElement;
+  let familyTriggerEl: HTMLDivElement | undefined;
+  let familyPopoverStyle = '';
+  let familyPopoverSide: 'top' | 'bottom' = 'bottom';
   let fontObserver = new IntersectionObserver(() => {});
   
   // Initialize FontManager instance
@@ -120,6 +126,46 @@
   export let hideRecentFromList: boolean = false;
   export let hideTrashIcon: boolean = true;
 
+  function updateFamilyPopoverBox() {
+    if (!familyTriggerEl || typeof window === 'undefined') return;
+    const rect = familyTriggerEl.getBoundingClientRect();
+    const pad = 12;
+    const viewportH = window.visualViewport?.height ?? window.innerHeight;
+    const below = viewportH - rect.bottom - pad;
+    const above = rect.top - pad;
+    const openAbove = above > below;
+    familyPopoverSide = openAbove ? 'top' : 'bottom';
+    const available = Math.max(0, openAbove ? above : below);
+    const height = Math.min(565, available);
+    const width = Math.min(374, Math.max(240, window.innerWidth - 16));
+    familyPopoverStyle = `width: ${width}px; height: ${height}px; max-width: calc(100vw - 16px); max-height: ${height}px;`;
+  }
+
+  function handleFamilyPopoverViewportChange() {
+    if ($openDropdowns?.has(controllerId)) {
+      updateFamilyPopoverBox();
+    }
+  }
+
+  function coerceFontValue(raw: typeof value): { family: string; weight: string; category: string } | null {
+    if (!raw) return null;
+    if (typeof raw === 'object' && raw.family) {
+      return {
+        family: raw.family,
+        weight: raw.weight || 'Regular',
+        category: raw.category || 'Sans Serif',
+      };
+    }
+    if (typeof raw === 'string' && raw.trim()) {
+      const family = raw.split(',')[0].replace(/['"]/g, '').trim();
+      if (!family) return null;
+      return { family, weight: 'Regular', category: 'Sans Serif' };
+    }
+    return null;
+  }
+
+  $: resolvedFont = coerceFontValue(value);
+
   // Add scroll state tracking
   let isScrolled = false;
 
@@ -188,9 +234,12 @@
   onMount(async () => {
     try {
       if (browser) {
-        // If we have an initial value, use its weight
-        if (value?.weight) {
-          selectedWeight = `${controllerId}-${value.weight}`;
+        const coerced = coerceFontValue(value);
+        if (coerced?.weight) {
+          selectedWeight = `${controllerId}-${coerced.weight}`;
+        }
+        if (typeof value === 'string' && coerced && onChange) {
+          onChange(coerced);
         }
         
         // Load saved filter
@@ -328,13 +377,13 @@
         preloadedFonts = fontManagerInstance.getPreloadedFonts('Mine');
         
         if (preloadedFonts.length > 0) {
-          console.log(`✅ [FontInput:${controllerId}] Using preloaded custom fonts for Mine category:`, {
-            count: preloadedFonts.length,
-            fonts: preloadedFonts.slice(0, 3).map(f => f.family)
-          });
+          // console.log(`✅ [FontInput:${controllerId}] Using preloaded custom fonts for Mine category:`, {
+            // count: preloadedFonts.length,
+            // fonts: preloadedFonts.slice(0, 3).map(f => f.family)
+          // });
         } else {
           // If no preloaded fonts found, load them now
-          console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
+          // console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
           preloadedFonts = await fontManagerInstance.loadCustomFonts();
         }
         
@@ -399,13 +448,13 @@
               initialFonts = fontManagerInstance.getPreloadedFonts('Mine');
               
               if (initialFonts.length > 0) {
-                console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts:`, {
-                  count: initialFonts.length,
-                  fonts: initialFonts.slice(0, 3).map(f => f.family)
-                });
+                // console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts:`, {
+                  // count: initialFonts.length,
+                  // fonts: initialFonts.slice(0, 3).map(f => f.family)
+                // });
               } else {
                 // If no preloaded fonts, load them now
-                console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
+                // console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
                 initialFonts = await fontManagerInstance.loadCustomFonts();
               }
             } else if (currentFilter === 'All') {
@@ -515,14 +564,14 @@
       const preloadedCustomFonts = fontManagerInstance.getPreloadedFonts('Mine');
       
       if (preloadedCustomFonts.length > 0) {
-        console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts in initializeFonts:`, {
-          count: preloadedCustomFonts.length,
-          fonts: preloadedCustomFonts.slice(0, 3).map(f => f.family)
-        });
+        // console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts in initializeFonts:`, {
+          // count: preloadedCustomFonts.length,
+          // fonts: preloadedCustomFonts.slice(0, 3).map(f => f.family)
+        // });
         return preloadedCustomFonts;
       } else {
         // If no preloaded fonts, load them now
-        console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found in initializeFonts, loading them now...`);
+        // console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found in initializeFonts, loading them now...`);
         const customFonts = await fontManagerInstance.loadCustomFonts();
         return customFonts;
       }
@@ -892,16 +941,16 @@
           
           if (preloadedCustomFonts.length > 0) {
             // Use preloaded custom fonts
-            console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts for empty search:`, {
-              count: preloadedCustomFonts.length,
-              fonts: preloadedCustomFonts.slice(0, 3).map(f => f.family)
-            });
+            // console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts for empty search:`, {
+              // count: preloadedCustomFonts.length,
+              // fonts: preloadedCustomFonts.slice(0, 3).map(f => f.family)
+            // });
             allFonts = preloadedCustomFonts;
             filteredFonts = [];
             updateFilteredFonts();
           } else {
             // If no preloaded fonts, load them asynchronously
-            console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found for empty search, loading them now...`);
+            // console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found for empty search, loading them now...`);
             fontManagerInstance.loadCustomFonts().then(customFonts => {
               allFonts = customFonts || [];
               filteredFonts = [];
@@ -999,13 +1048,13 @@
                     
                     if (fonts.length === 0) {
                         // If no preloaded custom fonts found, load them
-                        console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
+                        // console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
                         fonts = await fontManagerInstance.loadCustomFonts();
                     } else {
-                        console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts:`, {
-                            count: fonts.length,
-                            fonts: fonts.slice(0, 3).map(f => f.family)
-                        });
+                        // console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts:`, {
+                            // count: fonts.length,
+                            // fonts: fonts.slice(0, 3).map(f => f.family)
+                        // });
                     }
                 } else {
                     // For other categories, first try to get preloaded fonts
@@ -1368,8 +1417,8 @@
     }
   }
 
-  $: if (value?.family) {
-    fetchFontWeights(value.family);
+  $: if (resolvedFont?.family) {
+    fetchFontWeights(resolvedFont.family);
   }
 
   /**
@@ -1453,6 +1502,8 @@
       capture: true,
       passive: true
     });
+    window.addEventListener('resize', handleFamilyPopoverViewportChange);
+    window.visualViewport?.addEventListener('resize', handleFamilyPopoverViewportChange);
 
     // Add touch listeners with passive option
     window.addEventListener('touchstart', () => {}, { passive: true });
@@ -1462,6 +1513,8 @@
   // Update onDestroy to remove all listeners
   onDestroy(() => {
     window.removeEventListener('scroll', handleGlobalScroll, true);
+    window.removeEventListener('resize', handleFamilyPopoverViewportChange);
+    window.visualViewport?.removeEventListener('resize', handleFamilyPopoverViewportChange);
     window.removeEventListener('touchstart', () => {});
     window.removeEventListener('touchmove', () => {});
     
@@ -1476,10 +1529,10 @@
       clearTimeout(initialLoadTimeout);
     }
     
-    console.log('🧹 [FontInput] Cleanup complete:', {
-      controllerId,
-      lastFilter: currentFilter
-    });
+    // console.log('🧹 [FontInput] Cleanup complete:', {
+      // controllerId,
+      // lastFilter: currentFilter
+    // });
   });
 
   // Add this function to the script section
@@ -1530,12 +1583,12 @@
       // Update filtered fonts
       updateFilteredFonts();
       
-      console.log('✅ [FontInput] Font removed:', {
-        fontFamily,
-        remainingFonts: allFonts.length,
-        filteredFonts: filteredFonts.length,
-        recentFonts: recentFonts.length
-      });
+      // console.log('✅ [FontInput] Font removed:', {
+        // fontFamily,
+        // remainingFonts: allFonts.length,
+        // filteredFonts: filteredFonts.length,
+        // recentFonts: recentFonts.length
+      // });
     } catch (error) {
       console.error('❌ [FontInput] Error removing font:', error);
     }
@@ -1547,11 +1600,12 @@
     if (browser) {
       localStorage.setItem(FONT_WEIGHT_KEY(controllerId), selectedWeight);
     }
+    const current = coerceFontValue(value);
     if (onChange) {
       onChange({
-        family: value?.family || '',
+        family: current?.family || '',
         weight: weight,
-        category: value?.category || ''
+        category: current?.category || 'Sans Serif'
       });
     }
   }
@@ -1587,7 +1641,7 @@
         <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;"
+            style="font-family: '${font.family}', sans-serif; font-display: swap; color: inherit; -webkit-text-fill-color: currentColor;"
           >
             ${font.family}
           </span>
@@ -1597,7 +1651,7 @@
   }
   
   function isFontSelected(font: FontItem) {
-    return value?.family === font.family;
+    return resolvedFont?.family === font.family;
   }
   
   function isCustomFont(font: FontItem) {
@@ -1617,34 +1671,34 @@
   }
 </script>
 
-<!-- Font Input Container -->
-<div class="flex flex-col widgetic-colors">
-  <!-- Font Family Section -->
-  <div class="flex flex-col gap-[8px]">
-    <div class="flex items-center w-full relative h-[48px]">
-      <div class="w-[185px] flex-shrink-0 ml-auto">
-        <InputControllerHeader 
-          label={label}
-          helpText={description}
-        />
-      </div>
-      
-      <div class="absolute right-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">
+<!-- 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 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 || ''} />
+        </div>
+        <div
+          class="font-family-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;"
+          bind:this={familyTriggerEl}
+        >
           <!-- Font Family Button -->
           <Popover.Root 
             open={$openDropdowns?.has(controllerId)}
             onOpenChange={(isOpen) => {
               if (isOpen !== $openDropdowns?.has(controllerId)) {
-                if (!isOpen && value?.family && !shouldSkipFont(value.family)) {
+                if (!isOpen && resolvedFont?.family && !shouldSkipFont(resolvedFont.family)) {
                   fontUtils.addRecentFont({
-                    family: value.family,
-                    category: normalizeCategory(value.category) as FontItem['category'],
-                    isCustom: fontManagerInstance?.isCustomFont(value.family) || false
+                    family: resolvedFont.family,
+                    category: normalizeCategory(resolvedFont.category) as FontItem['category'],
+                    isCustom: fontManagerInstance?.isCustomFont(resolvedFont.family) || false
                   });
                 } else if (isOpen) {
-                  // Reset active search index when opening the dropdown
                   activeSearchIndex = -1;
+                  void tick().then(() => {
+                    updateFamilyPopoverBox();
+                    requestAnimationFrame(updateFamilyPopoverBox);
+                  });
                   
                   // When opening, ensure we have fonts ready
                   if (filteredFonts.length === 0 && allFonts.length > 0) {
@@ -1665,7 +1719,7 @@
               }
             }}
           >
-            <Popover.Trigger 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 pl-3 pr-[16px] group"
               onmouseenter={() => {
                 // Preload fonts when hovering over the button
                 // This reduces the delay when actually clicking to open
@@ -1676,20 +1730,27 @@
             >
               <span
                 class="truncate flex-1 text-left subtext text-grey7"
-                style="font-family: '{value?.family || 'system-ui'}', sans-serif; font-display: swap;"
+                style="font-family: '{resolvedFont?.family || 'system-ui'}', sans-serif; font-display: swap;"
               >
-                {value?.family || "Select font..."}
+                {resolvedFont?.family || "Select font..."}
               </span>
               <IconCaretDownFilled class="w-5 h-5 shrink-0 text-grey5 group-hover:text-grey7" />
             </Popover.Trigger>
 
-            <Popover.Content class="font-input-popover w-[374px] h-[565px] !p-0 widgetic-colors widgetic-radius rounded-medium modal-shadow border border-grey2">
-              <div class="flex flex-col h-full font-popover-content">
+            <Popover.Content
+              collisionPadding={12}
+              side={familyPopoverSide}
+              sideOffset={4}
+              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="relative pt-6 pb-[11px] px-5">
+                <div class="font-popover-header shrink-0 relative pt-6 pb-[11px] px-5">
                   <div class="h5 text-grey7 widgetic-colors">Fonts</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"
                     onclick={() => {
                       try {
@@ -1708,7 +1769,7 @@
                 {/if}
 
                 <!-- Search input -->
-                <div class="relative px-4">
+                <div class="font-popover-search shrink-0 relative px-4">
                   <SearchInput
                     placeholder="Search fonts..."
                     bind:value={searchTerm}
@@ -1733,7 +1794,7 @@
                 </div>
                 <!-- Filter toggle group - sticky header -->
                 {#if !searchTerm}
-                  <div class="sticky top-0 bg-white z-10">
+                  <div class="font-popover-tabs shrink-0 sticky top-0 bg-white z-10">
                     <CategoryTabs
                       categories={filterOptions}
                       activeCategory={currentFilter}
@@ -1772,6 +1833,7 @@
                         displayMode="list"
                         hideTrashIcon={hideTrashIcon}
                         itemType="font"
+                        selectionToken={resolvedFont?.family || ''}
                       />
                     {/if}
 
@@ -1809,22 +1871,23 @@
                           {#each filteredFonts as font, index (`${font.family}-${searchTerm ? 'search' : currentFilter}-${index}`)}
                             <!-- svelte-ignore a11y_click_events_have_key_events -->
                             <div
-                              class="w-full py-1 px-4 cursor-pointer overflow-hidden relative rounded-small h-[42px] flex items-center
-                                {value?.family === font.family ? 'bg-sage-green text-white selected-item' : 
-                                index === activeSearchIndex && searchTerm ? 'bg-light-green text-sage-green' : 
+                              class="font-list-row w-full py-1 px-4 cursor-pointer overflow-hidden relative rounded-small h-[42px] flex items-center
+                                {isFontSelected(font) ? 'bg-sage-green selected-item' :
+                                index === activeSearchIndex && searchTerm ? 'bg-light-green' :
                                 'hover:bg-light-green'}"
                               data-font={font.family}
                               use:observeFont
                               onclick={() => handleFontSelect(font)}
                               onmouseenter={() => handleMouseEnter(index)}
                               role="button"
-                              tabindex="0"
+                              tabindex="-1"
+                              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 {value?.family === font.family ? 'text-white' : 'text-sage-green opacity-0'}"/>
+                                <Check class="mr-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;"
+                                  style="font-family: '{font.family}', sans-serif; font-display: swap; color: inherit; -webkit-text-fill-color: currentColor;"
                                 >
                                   {@html highlightMatch(font.family, searchTerm)}
                                 </span>
@@ -1861,15 +1924,13 @@
             </Popover.Content>
           </Popover.Root>
         </div>
-      </div>
-    </div>
+  </div>
 
-    <!-- Font Weight Section -->
-    <div class="flex items-center w-full relative h-[48px]">
-      <div class="w-[185px]"></div>
-      <div class="absolute right-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">
-          <!-- Font Weight Button -->
+    <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' : ''} />
+      </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 
             open={$openDropdowns?.has('weight-' + controllerId)}
             onOpenChange={(isOpen) => {
@@ -1878,35 +1939,35 @@
               }
             }}
           >
-            <Popover.Trigger 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 pl-3 pr-[16px] group">
               <span class="truncate flex-1 text-left subtext text-grey7">
-                {displayWeight}
+                {displayWeight || 'Regular'}
               </span>
               <IconCaretDownFilled class="w-5 h-5 shrink-0 text-grey5 group-hover:text-grey7" />
             </Popover.Trigger>
             <Popover.Content class="p-0 w-[150px]">
               <Command.Root>
-                <Command.Group>
-                  {#each availableWeights as weight}
-                    <Command.Item
-                      value={weight}
-                      onSelect={() => handleWeightSelect(weight)}
-                      class="px-2 py-2"
-                    >
-                      <Check 
-                        class="mr-1 h-4 w-4 {displayWeight === weight ? 'opacity-100' : 'opacity-0'}"
-                      />
-                      <span class="truncate">{weight}</span>
-                    </Command.Item>
-                  {/each}
-                </Command.Group>
+                <Command.List>
+                  <Command.Group>
+                    {#each availableWeights as weight}
+                      <Command.Item
+                        value={weight}
+                        onSelect={() => handleWeightSelect(weight)}
+                        class="px-2 py-2"
+                      >
+                        <Check 
+                          class="mr-1 h-4 w-4 {displayWeight === weight ? 'opacity-100' : 'opacity-0'}"
+                        />
+                        <span class="truncate">{weight}</span>
+                      </Command.Item>
+                    {/each}
+                  </Command.Group>
+                </Command.List>
               </Command.Root>
             </Popover.Content>
           </Popover.Root>
-        </div>
       </div>
     </div>
-  </div>
 
   {#if description}
     <p class="subtext text-grey5">{description}</p>
@@ -1914,6 +1975,30 @@
 </div>
 
 <style>
+  .font-family-row,
+  .font-weight-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .font-family-label-ct,
+  .font-weight-label-ct {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .font-family-input-ct,
+  .font-weight-input-ct {
+    width: 185px !important;
+    max-width: 185px !important;
+    min-width: 185px !important;
+    margin-left: auto;
+    flex-shrink: 0;
+    position: relative;
+  }
+
   /* Update button styles */
   :global(button.bg-transparent) {
     background: transparent !important;
@@ -1932,9 +2017,11 @@
     scrollbar-color: hsl(var(--grey3)) transparent;
   }
 
-  /* Ensure buttons take full width */
-  :global(.popover-trigger),
-  :global(.popover-trigger button) {
+  /* Trigger fills the 185px column only — do not leak width:100% to other ICs */
+  .font-family-input-ct :global(.popover-trigger),
+  .font-family-input-ct :global(.popover-trigger button),
+  .font-weight-input-ct :global(.popover-trigger),
+  .font-weight-input-ct :global(.popover-trigger button) {
     width: 100% !important;
     height: 100% !important;
   }
@@ -1953,12 +2040,28 @@
     background-color: hsl(var(--light-green)) !important;
   }
   
-  /* Optimize font popover rendering */
+  .font-family-input-ct :global(button:focus),
+  .font-family-input-ct :global(button:focus-visible),
+  .font-weight-input-ct :global(button:focus),
+  .font-weight-input-ct :global(button:focus-visible),
+  :global(.font-input-popover button:focus),
+  :global(.font-input-popover button:focus-visible),
+  :global(.font-list-row:focus),
+  :global(.font-list-row:focus-visible),
+  :global(.font-input-popover [data-item]:focus),
+  :global(.font-input-popover [data-item]:focus-visible) {
+    outline: none;
+    box-shadow: none;
+  }
+
+  /* Clamp to the viewport so the Fonts header and list stay on screen */
   :global(.font-input-popover) {
     z-index: 50;
     will-change: transform;
     transform: translateZ(0);
     backface-visibility: hidden;
+    max-width: calc(100vw - 16px) !important;
+    overflow: hidden;
   }
   
   :global(.font-popover-content) {
@@ -1998,14 +2101,20 @@
     z-index: 10; /* Ensure it appears above other content */
   }
 
-  /* Prevent hover effect on selected items */
-  :global(.selected-item:hover) {
-    background-color: hsl(var(--sage-green)) !important;
+  /* Selected row only — never leave white text on a white (deselected) row. */
+  :global(.font-list-row.selected-item),
+  :global([data-item].selected-item) {
     color: white !important;
   }
-  
-  /* Ensure text is white in selected items */
-  :global(.selected-item) {
+  :global(.font-list-row:not(.selected-item)),
+  :global([data-item]:not(.selected-item)) {
+    color: hsl(var(--grey7)) !important;
+  }
+
+  /* Prevent hover from keeping sage+white on a row that is no longer selected. */
+  :global(.font-list-row.selected-item:hover),
+  :global([data-item].selected-item:hover) {
+    background-color: hsl(var(--sage-green)) !important;
     color: white !important;
   }
 

package/dist/components/ic/FontInputController.svelte.d.ts

@@ -23,12 +23,14 @@ declare const FontInputController: $$__sveltets_2_IsomorphicComponent<{
        * @prop {any} openDropdowns - Store tracking open dropdown states
        * @prop {Function} toggleDropdown - Function to toggle dropdown state
        * @prop {Function} onFocus - Optional focus handler
-       */ label: string;
+       */ label?: string;
+    class?: string;
+    style?: string;
     value?: {
         family: string;
         weight: string;
         category: string;
-    } | null;
+    } | string | null;
     onChange?: ((newValue: {
         family: string;
         weight: string;