add docs for dropdowns

build/98.css

@@ -354,6 +354,7 @@ select {
   -webkit-appearance: none;
   -moz-appearance: none;
   position: relative;
+  padding-right: 32px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z' fill='black'/%3E %3C/svg%3E");
   background-position: top 2px right 2px;
   background-repeat: no-repeat;

docs/98.css

@@ -354,6 +354,7 @@ select {
   -webkit-appearance: none;
   -moz-appearance: none;
   position: relative;
+  padding-right: 32px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z' fill='black'/%3E %3C/svg%3E");
   background-position: top 2px right 2px;
   background-repeat: no-repeat;

docs/index.html

@@ -504,6 +504,57 @@
             — Microsoft Windows User Experience p. 175
           </footer>
         </blockquote>
+
+        <p>
+          Dropdowns can be rendered by using the <code>select</code> and <code>option</code>
+          elements.
+        </p>
+
+        <div class="example">
+    <select>
+  <option>5 - Incredible!</option>
+  <option>4 - Great!</option>
+  <option>3 - Pretty good</option>
+  <option>2 - Not so great</option>
+  <option>1 - Unfortunate</option>
+</select>
+    <details>
+      <summary>Show code</summary>
+      <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">select</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>5 - Incredible!<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>4 - Great!<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>3 - Pretty good<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>2 - Not so great<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>1 - Unfortunate<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span></code></pre>
+    </details>
+  </div>
+
+        <p>
+          By default, the first option will be selected. You can change this by
+          giving one of your <code>option</code> elements the <code>selected</code>
+          attribute.
+        </p>
+
+        <div class="example">
+    <select>
+  <option>5 - Incredible!</option>
+  <option>4 - Great!</option>
+  <option selected>3 - Pretty good</option>
+  <option>2 - Not so great</option>
+  <option>1 - Unfortunate</option>
+</select>
+    <details>
+      <summary>Show code</summary>
+      <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">select</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>5 - Incredible!<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>4 - Great!<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">selected</span>&gt;</span>3 - Pretty good<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>2 - Not so great<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>1 - Unfortunate<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span></code></pre>
+    </details>
+  </div>
       </div>
     </section>
 

docs/index.html.ejs

@@ -371,6 +371,37 @@
             — Microsoft Windows User Experience p. 175
           </footer>
         </blockquote>
+
+        <p>
+          Dropdowns can be rendered by using the <code>select</code> and <code>option</code>
+          elements.
+        </p>
+
+        <%- example(`
+          <select>
+            <option>5 - Incredible!</option>
+            <option>4 - Great!</option>
+            <option>3 - Pretty good</option>
+            <option>2 - Not so great</option>
+            <option>1 - Unfortunate</option>
+          </select>
+        `) %>
+
+        <p>
+          By default, the first option will be selected. You can change this by
+          giving one of your <code>option</code> elements the <code>selected</code>
+          attribute.
+        </p>
+
+        <%- example(`
+          <select>
+            <option>5 - Incredible!</option>
+            <option>4 - Great!</option>
+            <option selected>3 - Pretty good</option>
+            <option>2 - Not so great</option>
+            <option>1 - Unfortunate</option>
+          </select>
+        `) %>
       </div>
     </section>
 

style.css

@@ -326,6 +326,7 @@ select {
   -webkit-appearance: none;
   -moz-appearance: none;
   position: relative;
+  padding-right: 32px;
   background-image: svg-load("./icon/button-down.svg");
   background-position: top 2px right 2px;
   background-repeat: no-repeat;