Text Controller

The Text Controller Object uses a Dropdown Component to display text controls that are available for the application.

Demonstration
Markup
<div class="o-text-controller bg-scale-1 w-full mx-3" data-js="text-controller" id="aria-c-text-controller">
  <div class="o-text-controller__inner">
    <div>
      <div class="text-end">
        <button aria-controls="aria-c-text-controller" aria-expanded="false" class="btn btn-primary btn-small" data-dialog="close" data-js="dialog">
          <svg aria-hidden="true" class="icon-wnyc-ui">
            <use href="#feather-x"></use>
          </svg>
          <span>Close</span>
          <span class="sr-only">and return to site</span>
        </button>
      </div>
      <p class="h4 block w-full m-0 py-2 text-alt">Translate Text</p>
      <div class="o-text-controller__options">
        <div class="o-text-controller__languages">
          <div>
            <ul>
              <li>
                <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/index">
                  <span>English</span>
                </a>
              </li>
              <li>
                <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/es">
                  <span>Español</span>
                </a>
              </li>
              <li>
                <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/ru">
                  <span>Русский</span>
                </a>
              </li>
              <li>
                <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/ko">
                  <span>한국어</span>
                </a>
              </li>
              <li>
                <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/ar">
                  <span>العربية</span>
                </a>
              </li>
              <li>
                <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/ht">
                  <span>Kreyol</span>
                </a>
              </li>
              <li>
                <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/zh-hant">
                  <span>繁體中文</span>
                </a>
              </li>
              <li>
                <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/fr">
                  <span>Français</span>
                </a>
              </li>
              <li>
                <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/pl">
                  <span>polski</span>
                </a>
              </li>
              <li>
                <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/ur">
                  <span>اردو</span>
                </a>
              </li>
              <li>
                <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/bn">
                  <span>বাংলা</span>
                </a>
              </li>
            </ul>
          </div>
          <p>
            <svg class="icon-logo-google-translate" role="img">
              <title>Powered by Google Translate</title>
              <use href="#logo-google-translate"></use>
            </svg>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>