Add title-bar restore icon (#83)

docs/index.html.ejs

@@ -532,9 +532,9 @@
         <p>
           We make use of <code>aria-label</code> to render the Close button, to let
           assistive technologies know the intent of this button. You may also use
-          "Minimize" and "Maximize" like so:
+          "Minimize", "Maximize", "Restore" and "Help" like so:
         </p>
-
+        
         <%- example(`
           <div class="title-bar">
             <div class="title-bar-text">A Title Bar</div>
@@ -545,7 +545,18 @@
             </div>
           </div>
 
-          <br>
+          <br />
+
+          <div class="title-bar">
+            <div class="title-bar-text">A Maximized Title Bar</div>
+            <div class="title-bar-controls">
+              <button aria-label="Minimize"></button>
+              <button aria-label="Restore"></button>
+              <button aria-label="Close"></button>
+            </div>
+          </div>
+
+          <br />
 
           <div class="title-bar">
             <div class="title-bar-text">A Helpful Bar</div>
@@ -553,7 +564,7 @@
               <button aria-label="Help"></button>
               <button aria-label="Close"></button>
             </div>
-          </div>
+          </div>          
         `) %>
 		<p>
           You can make a title bar "inactive" by adding <code>inactive</code> class,

icon/restore.svg

@@ -0,0 +1,10 @@
+<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" width="6" height="2" fill="black"/>
+<rect x="7" y="2" width="1" height="4" fill="black"/>
+<rect x="2" y="2" width="1" height="1" fill="black"/>
+<rect x="6" y="5" width="1" height="1" fill="black"/>
+<rect y="3" width="6" height="2" fill="black"/>
+<rect x="5" y="5" width="1" height="4" fill="black"/>
+<rect y="5" width="1" height="4" fill="black"/>
+<rect x="1" y="8" width="4" height="1" fill="black"/>
+</svg>

style.css

@@ -231,6 +231,12 @@ button::-moz-focus-inner {
   background-position: top 2px left 3px;
 }
 
+.title-bar-controls button[aria-label="Restore"] {
+  background-image: svg-load("./icon/restore.svg");
+  background-repeat: no-repeat;
+  background-position: top 2px left 3px;
+}
+
 .title-bar-controls button[aria-label="Help"] {
   background-image: svg-load("./icon/help.svg");
   background-repeat: no-repeat;