@classic-homes/theme-svelte 1.10.0 → 1.10.1

package/dist/__tests__/header-search.test.js

@@ -63,6 +63,20 @@ describe('HeaderSearch', () => {
         await openSearch({ showIcons: true });
         expect(screen.getByRole('option', { name: /Dashboard/ }).querySelector('svg')).not.toBeNull();
     });
+    it('switches secondary text and icon to the accent foreground on the active row', async () => {
+        const { user } = await openSearch({ showIcons: true });
+        const dashboard = screen.getByRole('option', { name: /Dashboard/ });
+        const quartz = screen.getByRole('option', { name: /Quartz countertop/ });
+        // Active row: icon and category follow the accent foreground.
+        expect(dashboard.querySelector('svg')).toHaveClass('text-accent-foreground/80');
+        // Inactive row: description and category stay muted.
+        expect(within(quartz).getByText('Kitchen')).toHaveClass('text-muted-foreground');
+        expect(within(quartz).getByText('Selection')).toHaveClass('text-muted-foreground');
+        await user.hover(quartz);
+        expect(within(quartz).getByText('Kitchen')).toHaveClass('text-accent-foreground/80');
+        expect(within(quartz).getByText('Selection')).toHaveClass('text-accent-foreground/80');
+        expect(dashboard.querySelector('svg')).toHaveClass('text-muted-foreground');
+    });
     it('caps the results list at the given height', async () => {
         await openSearch({ resultsMaxHeight: '60vh' });
         const listbox = screen.getByRole('listbox');

package/dist/lib/components/HeaderSearch.svelte

@@ -348,6 +348,12 @@
                 {/if}
                 {#each section.items as item, itemIndex (item.id)}
                   {@const index = section.offset + itemIndex}
+                  {@const active = index === selectedIndex}
+                  <!-- Secondary text follows the row: muted normally, a softened
+                       accent foreground on the accent background. -->
+                  {@const secondary = active
+                    ? 'text-accent-foreground/80'
+                    : 'text-muted-foreground'}
                   <button
                     type="button"
                     id={optionId(index)}
@@ -356,33 +362,31 @@
                     onmousemove={() => (selectedIndex = index)}
                     class={cn(
                       'flex w-full cursor-pointer items-start gap-3 rounded-md px-3 py-2 text-left text-sm',
-                      index === selectedIndex
-                        ? 'bg-accent text-accent-foreground'
-                        : 'hover:bg-accent-hover'
+                      active ? 'bg-accent text-accent-foreground' : 'hover:bg-accent-hover'
                     )}
                     role="option"
-                    aria-selected={index === selectedIndex}
+                    aria-selected={active}
                   >
                     {#if renderResult}
-                      {@render renderResult(item, index === selectedIndex)}
+                      {@render renderResult(item, active)}
                     {:else}
                       {#if showIcons && item.icon}
                         <Icon
                           name={item.icon as IconName}
                           size={16}
-                          class="mt-0.5 shrink-0 text-muted-foreground"
+                          class={cn('mt-0.5 shrink-0', secondary)}
                         />
                       {/if}
                       <div class="min-w-0 flex-1">
                         <div class="truncate font-medium">{item.title}</div>
                         {#if item.description}
-                          <div class="truncate text-xs text-muted-foreground">
+                          <div class={cn('truncate text-xs', secondary)}>
                             {item.description}
                           </div>
                         {/if}
                       </div>
                       {#if item.category}
-                        <span class="shrink-0 text-xs text-muted-foreground">
+                        <span class={cn('shrink-0 text-xs', secondary)}>
                           {item.category}
                         </span>
                       {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",