Enhancements

docs/components/balloon.ejs

@@ -20,6 +20,25 @@
       You will need to set up an event for the control to trigger the balloon.
     </p>
 
-    <%- example(`<input type="text" placeholder="Press Enter" aria-describedby="balloon-password" /><div role="tooltip" id="balloon-password" hidden>Press Backspace to dismiss</div>`) %>
+    <%- example(`
+    <input type="text" placeholder="Press Enter" aria-describedby="balloon-password" />
+    <div role="tooltip" id="balloon-password" hidden>Press Backspace to dismiss</div>
+    `) %>
+
+    <p>
+      To change the position of the balloon, which subsequently change the placement of its tail, combine
+      the respective vertical and horizontal classes:
+    <ul>
+      <li>Vertical: <code>.is-top</code> / <code>.is-bottom</code></li>
+      <li>Horizontal: <code>.is-left</code> / <code>.is-right</code></li>
+    </ul>
+
+    <%- example(`
+    <div role="tooltip">This balloon is positioned bottom right of the source control (default behavior).</div>
+    <div role="tooltip" class="is-bottom is-left">This balloon is positioned bottom left of the source control.</div>
+    <div role="tooltip" class="is-top is-left">This balloon is positioned top left of the source control.</div>
+    <div role="tooltip" class="is-top is-right">This balloon is positioned top right of the source control.</div>
+    `) %>
+    </p>
   </div>
 </section>

docs/components/searchbox.ejs

@@ -0,0 +1,34 @@
+<section class="component">
+  <h3 id="searchbox">SearchBox</h3>
+  <div>
+    <blockquote>
+      With a <em>Search box</em>, users can quickly locate specific objects or text within a large set of data by
+      filtering or highlighting matches.
+
+      <footer>&mdash; <a href="https://learn.microsoft.com/en-us/windows/win32/uxguide/ctrl-search-boxes">Microsoft
+          Windows User Experience - Search Boxes</a></footer>
+    </blockquote>
+
+    <p>
+      There are 2 variants of the search box available.
+    </p>
+
+    <p>
+      An <strong>instant search</strong>, where the results are displayed immediately as the user types, can be rendered
+      just by specifying a <code>type="search"</code> attribute on an <code>input</code> element:
+    </p>
+
+    <%- example(`<input type="search" placeholder="Search" />`) %>
+
+    <p>
+      A <strong>regular search</strong>, where a search is performed when the user clicks the search button, requires
+      a search input and a button wrapped inside a container a container element with the class <code>searchbox</code>.
+    </p>
+
+    <%- example(`
+    <div class="searchbox">
+      <input type="search" placeholder="Search" />
+      <button aria-label="search"></button>
+    </div>`) %>
+  </div>
+</section>

docs/docs.css

@@ -142,6 +142,10 @@ blockquote footer {
   width: 450px;
 }
 
+[role="tooltip"]:not([id]) {
+  margin: 2em 0;
+}
+
 @media (max-width: 480px) {
   aside {
     display: none;

docs/index.html.ejs

@@ -79,6 +79,7 @@
     <%- include('components/optionbutton') -%>
     <%- include('components/progressbar') -%>
     <%- include('components/scrollbar') -%>
+    <%- include('components/searchbox') -%>
     <%- include('components/slider') -%>
     <%- include('components/spinner') -%>
     <%- include('components/tabs') -%>

docs/script.js

@@ -40,6 +40,7 @@ document
       if (e.key === "Enter") {
         tooltip.removeAttribute("hidden");
         tooltip.style.top = input.offsetTop + input.offsetHeight + 15 + "px";
+        tooltip.style.zIndex = 1;
       }
       if (e.key === "Backspace") {
         tooltip.setAttribute("hidden", true);

docs/sections/navigation.ejs

@@ -31,6 +31,7 @@
           <li><a href="#radio">OptionButton</a></li>
           <li><a href="#progressbar">ProgressBar</a></li>
           <li><a href="#scrollbar">Scrollbar</a></li>
+          <li><a href="#searchbox">SearchBox</a></li>
           <li><a href="#slider">Slider</a></li>
           <li><a href="#spinner">Spinner</a></li>
           <li><a href="#tabs">Tabs</a></li>

gui/_balloon.scss

@@ -1,6 +1,9 @@
 :root {
   --balloon-border-color: rgba(0, 0, 0, 0.4);
+  --balloon-tail-top: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 1.5V19.5H18.5L0.5 1.5Z' fill='%23fff' stroke='%23fff'/%3E%3Cpath d='M1 19.5H0.5V1.5L18.5 19.5H18' stroke='%23939393'/%3E%3C/svg%3E");
+  --balloon-tail-bottom: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 1.5V19.5H18.5L0.5 1.5Z' fill='%23ddd' stroke='%23ddd'/%3E%3Cpath d='M1 19.5H0.5V1.5L18.5 19.5H18' stroke='%23939393'/%3E%3C/svg%3E");
   --balloon-tail-size: 18px;
+  --balloon-tail-offset: 1em;
 }
 
 [role="tooltip"] {
@@ -14,14 +17,42 @@
   &::before {
     content: "";
     position: absolute;
-    background: url("./icon/balloon-tail.svg");
+    background: var(--balloon-tail-top);
     width: var(--balloon-tail-size);
     height: var(--balloon-tail-size);
     top: -var(--balloon-tail-size);
-    left: 1em;
+    left: var(--balloon-tail-offset);
   }
 
   &[id] {
     position: absolute;
   }
+
+  &.is-top {
+    &::before {
+      background: var(--balloon-tail-bottom);
+      bottom: -var(--balloon-tail-size);
+      top: unset;
+      transform: scale(-1);
+    }
+
+    &.is-right {
+      &::before {
+        transform: scaleY(-1);
+      }
+    }
+  }
+
+  &.is-left {
+    &::before {
+      left: unset;
+      right: var(--balloon-tail-offset);
+    }
+
+    &.is-bottom {
+      &::before {
+        transform: scaleX(-1);
+      }
+    }
+  }
 }

gui/_button.scss

@@ -11,12 +11,7 @@ button,
   min-height: 23px;
   padding: 0 12px;
   text-align: center;
-  background: linear-gradient(
-    to bottom,
-    var(--button-face) 45%,
-    var(--button-shade-light) 45%,
-    var(--button-shade-dark)
-  );
+  background: var(--button-gradient);
 
   &:disabled {
     background: var(--button-face-disabled);
@@ -27,22 +22,14 @@ button,
   &:not(:disabled) {
     &:hover {
       border-color: var(--button-border-color-hovered);
-      background: linear-gradient(
-        to bottom,
-        var(--button-face-hover) 45%,
-        var(--button-shade-light-hovered) 45%
-      );
+      background: var(--button-gradient-hovered);
     }
 
     &:active,
     &.active {
       box-shadow: none;
       border-color: var(--button-border-color-active);
-      background: linear-gradient(
-        to bottom,
-        var(--button-face-active) 45%,
-        var(--button-shade-light-active) 45%
-      );
+      background: var(--button-gradient-active);
     }
   }
 

gui/_dropdown.scss

@@ -12,35 +12,21 @@ select:not([multiple]) {
   appearance: none;
   position: relative;
   padding-right: 30px;
-  background: url("./icon/button-down.svg"),
-    linear-gradient(
-      to bottom,
-      var(--button-face) 45%,
-      var(--button-shade-light) 45%,
-      var(--button-shade-dark)
-    );
+  background: url("./icon/button-down.svg"), var(--button-gradient);
   background-position: center right;
   background-repeat: no-repeat;
 
   &:hover {
     border-color: var(--button-border-color-hovered);
     background-image: url("./icon/button-down.svg"),
-      linear-gradient(
-        to bottom,
-        var(--button-face-hover) 45%,
-        var(--button-shade-light-hovered) 45%
-      );
+      var(--button-gradient-hovered);
   }
 
   &:focus {
     outline: none;
     border-color: var(--button-border-color-active);
     box-shadow: unset;
     background-image: url("./icon/button-down.svg"),
-      linear-gradient(
-        to bottom,
-        var(--button-face-active) 45%,
-        var(--button-shade-light-active) 45%
-      );
+      var(--button-gradient-active);
   }
 }

gui/_searchbox.scss

@@ -0,0 +1,63 @@
+:root {
+  --search-icon: url("./icon/search.svg");
+  --search-button: var(--search-icon) no-repeat center;
+}
+
+[type="search"] {
+  height: 24px;
+  font: var(--font);
+  padding: 3px 6px;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  background-color: var(--button-highlight);
+  box-shadow: inset 1px 1px 0 var(--button-border-color), inset -1px -1px 0 #ccc;
+  box-sizing: border-box;
+  min-width: 187px;
+
+  &:placeholder-shown {
+    background-size: 14px;
+    background-position: calc(100% - 8px) center;
+    background-image: var(--search-icon);
+    background-repeat: no-repeat;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    font-style: italic;
+  }
+
+  .searchbox & {
+    padding-right: 26px;
+
+    & + [aria-label="search"] {
+      position: absolute;
+      top: 1px;
+      right: 1px;
+      border-radius: 0;
+      padding: 0;
+      min-width: 26px;
+      min-height: 22px;
+      background: var(--search-button), var(--button-gradient);
+      background-size: 14px;
+
+      &:hover {
+        background: var(--search-button), var(--button-gradient-hovered);
+        background-size: 14px;
+      }
+
+      &:active {
+        background: var(--search-button), var(--button-gradient-active);
+        background-size: 14px;
+        box-shadow: inset 1px 1px 2px #37698f;
+      }
+    }
+  }
+}
+
+.searchbox {
+  position: relative;
+  display: inline-block;
+}

gui/_variables.scss

@@ -12,14 +12,31 @@
   --button-shade-light-hovered: #b3e0f9;
   --button-shade-light-active: #86c6e8;
   --button-shade-dark: #bbb;
-  --button-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.8), inset 0 1px 1px #fff;
+  --button-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.8),
+    inset 0 1px 1px #fff;
   --button-border: 1px solid;
   --button-border-color: #8e8f8f;
   --button-border-color-default: #5586a3;
   --button-border-color-hovered: #3c7fb1;
   --button-border-color-active: #6d91ab;
   --button-border-color-disabled: #aeb2b5;
   --button-text-color-disabled: #838383;
+  --button-gradient: linear-gradient(
+    to bottom,
+    var(--button-face) 45%,
+    var(--button-shade-light) 45%,
+    var(--button-shade-dark)
+  );
+  --button-gradient-hovered: linear-gradient(
+    to bottom,
+    var(--button-face-hover) 45%,
+    var(--button-shade-light-hovered) 45%
+  );
+  --button-gradient-active: linear-gradient(
+    to bottom,
+    var(--button-face-active) 45%,
+    var(--button-shade-light-active) 45%
+  );
 
   --element-spacing: 8px;
   --grouped-element-spacing: 6px;

gui/index.scss

@@ -17,6 +17,7 @@
 @import "_menu.scss";
 @import "_progressbar.scss";
 @import "_radiobutton.scss";
+@import "_searchbox.scss";
 @import "_slider.scss";
 @import "_spinner.scss";
 @import "_tabs.scss";