Add help icon

docs/components/window/titlebar.ejs

@@ -39,7 +39,7 @@
     <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(`
@@ -62,11 +62,21 @@
           <button aria-label="Close"></button>
         </div>
       </div>
+
+      <br>
+
+      <div class="title-bar">
+        <div class="title-bar-text">A help Title Bar</div>
+        <div class="title-bar-controls">
+          <button aria-label="Help"></button>
+          <button aria-label="Close"></button>
+        </div>
+      </div>
     `) %>
 
     <p>
       Alternatively, you can use the <code>is-close</code>, <code>is-minimize</code>,
-      <code>is-maximize</code>, <code>is-restore</code> classes to target the respective
+      <code>is-maximize</code>, <code>is-restore</code>, <code>is-help</code> classes to target the respective
       controls for your styling preference.
     </p>
 

gui/_window.scss

@@ -332,6 +332,13 @@
         }
       }
 
+      &[aria-label="Help"],
+      &.is-help {
+        &::before {
+          background: url("./icon/help.png") no-repeat center;
+        }
+      }
+
       &[aria-label="Restore"],
       &.is-restore {
         &::before {
@@ -431,6 +438,31 @@
           }
         }
 
+        &[aria-label="Help"],
+        &.is-help {
+          background: url("./icon/help.png") no-repeat center,
+            var(--control-background);
+          &::before {
+            content: "";
+            box-shadow: 0 0 7px 3px #5dc4f0, var(--control-inset-shadow);
+            background: url("./icon/help.png") no-repeat center,
+              var(--control-background-hovered);
+            opacity: 0;
+            transition: opacity 0.3s linear;
+          }
+
+          &:hover::before,
+          &:focus-visible::before {
+            opacity: 1;
+            transition: opacity 0.1s linear;
+          }
+
+          &:active::before {
+            background: url("./icon/help.png") no-repeat center,
+              var(--control-background-active);
+          }
+        }
+
         &[aria-label="Restore"],
         &.is-restore {
           background: url("./icon/restore.png") no-repeat center,