<main>
  <div class="wrapper">
    <article class="flow">
      <figure class="callout">
        <p>Use the inputs to modify the <code>text-overflow</code> property.</p>
      </figure>
      <div class="controls">
        <div>
          <label for="switcher">text-overflow:</label>
          <select id="switcher">
            <option value="clip">clip</option>
            <option value="ellipsis">ellipsis</option>
<!--             <option value="clip ellipsis">clip ellipsis</option> -->
<!--             <option value="fade">fade</option> -->
<!--             <option value=" [..]">custom string "[..]"</option> -->
          </select>
        </div>
        <div>
          <label for="direction">text direction:</label>
          <select id="direction">
            <option value="ltr">ltr</option>
            <option value="rtl">rtl</option>
          </select>
        </div>
      </div>
      <div class="container" id="container">
        <form class="login">
          <label for="username">User Name</label>
          <input class="demo-text" value="StrawberryRhubarbPieSeason" required name="login[username]" type="text"/>
          <label for="password">Password</label>
          <input class="password" value="verysecure_password" required name="login[password]" type="password" />
        </form>
      </div>
    </article>
  </div>
</main>

:root {
  --var-text-overflow: 'clip';
  --var-text-direction: 'ltr';
}

.demo-text {
  text-overflow: var(--var-text-overflow);
  direction: var(--var-text-direction);
  overflow: hidden;
  white-space: nowrap;
}





.container {  
  background-color: var(--color-primary-x-light);
  padding: 1em 3em;
  max-width: 300px;
}

.login {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
}

.controls {
  display: inline-grid;
  grid-template-columns: minmax(150px, max-content) 1fr;
  gap: 0 1rem;
  align-items: center;
}

let root = document.documentElement;
let textOverflow= document.getElementById("switcher");
textOverflow.addEventListener("change", function (evt) {
  root.style.setProperty('--var-text-overflow', evt.target.value);
});

let textDirection= document.getElementById("direction");
textDirection.addEventListener("change", function (evt) {
  root.style.setProperty('--var-text-direction', evt.target.value);
});