chromium/ash/webui/common/resources/sea_pen/sea_pen_template_query_element.html

<style include="common cros-button-style sea-pen">
  #container {
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
    margin-block-start: 32px;
    padding-inline: 40px;
    transition: height 300ms cubic-bezier(0, 0, 0, 1);
  }

  #placeholder {
    height: 40px;
  }

  #template {
    align-items: start;
    color: var(--cros-text-color-primary);
    display: flex;
    flex-flow: row wrap;
    font: var(--cros-display-6_regular-font);
    justify-content: center;
    row-gap: 8px;
  }

  #template .unselected {
    border-bottom-color: var(--cros-text-color-disabled);
    color: var(--cros-text-color-disabled);
  }

  .chip-container {
    cursor: pointer;
    display: grid;
    grid-template-areas: 'chip';
  }

  .chip-container[disabled] {
    cursor: text;
  }

  .chip-container[disabled] > .chip-text {
    pointer-events: none;
  }

  .template-text {
    padding: 0 4px;
  }

  .chip-text {
    border: 2px solid transparent;
    border-radius: 8px;
    bottom: 2px;
    grid-area: chip;
    position: relative;
  }

  .chip-text:hover {
    background-color: var(--cros-sys-hover_on_subtle);
  }

  .chip-text:focus-visible {
    background-color: var(--cros-sys-ripple_primary);
    outline: 2px solid var(--cros-sys-focus_ring);
  }

  #thumbnailsLoadingText {
    color: var(--cros-sys-on_primary_container);
    font: var(--cros-annotation-1-font);
  }

  cr-button {
    font: var(--cros-button-2-font);
    padding: 0px 12px;
  }

  .dropdown-check {
    margin-inline-end: 16px;
  }

  button:not([aria-selected='true']) iron-icon.dropdown-check {
    visibility: hidden;
  }

  button {
    font: var(--cros-button-2-font);
    padding: 8px 32px 8px 16px;
  }

  #freeformInfo {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding-bottom: 24px;
    white-space: pre;
  }

</style>
<div id="container" class="main">
  <template is="dom-if" if="[[seaPenUseExptTemplateEnabled_]]">
    <div id="nextTemplate">Using the experimental theme (if available)</div>
  </template>
  <template is="dom-if" if="[[shouldShowOptions_(options_)]]"
      on-dom-change="onSeaPenOptionsDomChanged_">
    <sea-pen-options
        class="fade-in-200ms"
        options="[[options_]]"
        selected-chip="[[selectedChip_]]"
        selected-options="{{selectedOptions_}}"
        on-sea-pen-option-escape="onOptionSelectionDone">
    </sea-pen-options>
  </template>
  <div id="template">
    <template is="dom-repeat" items="[[templateTokens_]]" as="token">
      <template is="dom-if" if="[[isChip_(token)]]">
        <div class$="chip-container [[getChipClassName_(token, selectedChip_)]]"
            disabled$="[[thumbnailsLoading_]]">
          <template is="dom-if" if="[[!thumbnailsLoading_]]" restamp>
            <sea-pen-chip-text
                aria-label$="[[token.translation]]"
                aria-description$="[[getTemplateAriaLabel_(templateTokens_)]]"
                text-animation-enabled="[[shouldEnableTextAnimation(selectedChip_, token)]]"
                chip-text="[[token.translation]]"
                class="chip-text"
                tabindex="0"
                on-click="onClickChip_"
                on-keypress="onClickChip_"
                role="combobox">
              <span aria-hidden="true">[[token.translation]]</span>
            </sea-pen-chip-text>
          </template>
          <template is="dom-if" if="[[thumbnailsLoading_]]" restamp>
            <div class="chip-text">
              [[token.translation]]
            </div>
          </template>
        </div>
      </template>
      <template is="dom-if" if="[[!isChip_(token)]]">
        <div class$="template-text [[getTextClassName_(selectedChip_)]]">
          [[token]]
        </div>
      </template>
    </template>
  </div>
  <div id="searchButtons">
    <template is="dom-if" if="[[thumbnailsLoading_]]">
      <span id="thumbnailsLoadingText" aria-description$="[[getTemplateAriaLabel_(templateTokens_)]]" aria-live="polite">
        [[i18n('seaPenThumbnailsLoading')]]
      </span>
    </template>
    <template is="dom-if" if="[[!thumbnailsLoading_]]" restamp>
      <cr-button
          id="inspire"
          on-click="onClickInspire_"
          on-mouseleave="stopInspireIconAnimation_"
          on-mouseenter="startInspireIconAnimation_">
        <cros-lottie-renderer
            id="inspireMeAnimation"
            slot="prefix-icon"
            asset-url="chrome://resources/ash/common/sea_pen/lightbulb_icon.json"
            loop
            dynamic
            aria-hidden>
        </cros-lottie-renderer>
        <iron-icon id="inspireIcon" icon="sea-pen:inspire" slot="prefix-icon"></iron-icon>
        <p>[[i18n('seaPenInspireMeButton')]]</p>
      </cr-button>
      <cr-button
          id="searchButton"
          class="action-button"
          on-click="onClickSearchButton_">
        <iron-icon icon$="[[searchButtonIcon_]]" slot="prefix-icon">
        </iron-icon>
        <p>[[searchButtonText_]]</p>
      </cr-button>
    </template>
  </div>
  <template is="dom-if" if="[[shouldShowFreeformNavigationInfo_()]]">
    <div id="freeformInfo"
        inner-h-t-m-l="[[i18nAdvanced('seaPenFreeformNavigationDescription')]]">
    </div>
  </template>
</div>