1  <script lang="ts">
 2      import SearchIcon from '@amp/web-app-components/assets/icons/search.svg';
 3      import type { HighlightedSearchSuggestion } from '../../utils/processTextSearchSuggestion';
 4  
 5      export let suggestion: HighlightedSearchSuggestion;
 6      $: autofillBefore = suggestion.autofillBefore;
 7      $: highlighted = suggestion.highlighted;
 8      $: autofillAfter = suggestion.autofillAfter;
 9  </script>
10  
11  <SearchIcon class="search-suggestion-svg" aria-hidden="true" />
12  <span class="suggestion">
13      <!--
14          These spans cannot be broken down onto separate lines until Svelte
15          supports trimming of whitespace on-demand: https://github.com/sveltejs/svelte/issues/189
16          TODO: rdar://101681389 (Onxy: Remove whitespace trimming workarounds)
17      -->
18  
19      <!-- prettier-ignore -->
20      <span data-testid="suggestion-autofill-before">{autofillBefore}</span><span
21          class="highlighted"
22          data-testid="suggestion-autofill-highlighted">{highlighted}</span
23      ><span data-testid="suggestion-autofill-after">{autofillAfter}</span>
24  </span>
25  
26  <style lang="scss">
27      @use 'amp/stylekit/core/mixins/line-clamp' as *;
28  
29      .suggestion {
30          color: var(--systemSecondary);
31          margin: 0 6px;
32          font: var(--title-2);
33  
34          @include line-clamp(var(--searchSuggestionClampedLines, 1));
35  
36          @media (--sidebar-visible) {
37              font: var(--callout);
38          }
39      }
40  
41      .highlighted {
42          color: var(--systemPrimary);
43      }
44  </style>