Resolve #70, bug fixes, and small visual adjustments

docs/components/window/body.ejs

@@ -42,7 +42,7 @@
           </div>
         </div>
         <div class="window-body has-space">
-          <menu role="tablist">
+          <menu role="tablist" aria-label="Window with Tabs">
             <button role="tab" aria-controls="music" aria-selected="true">Music</button>
             <button role="tab" aria-controls="dogs">Dogs</button>
             <button role="tab" aria-controls="food">Food</button>

docs/script.js

@@ -1,14 +1,112 @@
 // Tabs
-const tabButtons = document.querySelectorAll("[role=tab]");
+// Tabs > Sample Tabs
+const tabList = document.querySelector("[aria-label='Sample Tabs']");
+const tabButtons = tabList.querySelectorAll("[role=tab]");
 tabButtons.forEach((tabButton) => {
-  tabButton.addEventListener("click", (e) => {
+  tabButton.addEventListener("mousedown", (e) => {
     e.preventDefault();
     const tabContainer = e.target.parentElement.parentElement;
     const targetId = e.target.getAttribute("aria-controls");
     tabButtons.forEach((_tabButton) =>
       _tabButton.setAttribute("aria-selected", false)
     );
     tabButton.setAttribute("aria-selected", true);
+    tabButton.focus();
+    tabContainer
+      .querySelectorAll("[role=tabpanel]")
+      .forEach((tabPanel) => tabPanel.setAttribute("hidden", true));
+    tabContainer
+      .querySelector(`[role=tabpanel]#${targetId}`)
+      .removeAttribute("hidden");
+  });
+});
+tabButtons.forEach((tabButton) => {
+  tabButton.addEventListener("focus", (e) => {
+    e.preventDefault();
+    const tabContainer = e.target.parentElement.parentElement;
+    const targetId = e.target.getAttribute("aria-controls");
+    tabButtons.forEach((_tabButton) =>
+      _tabButton.setAttribute("aria-selected", false)
+    );
+    tabButton.setAttribute("aria-selected", true);
+    tabContainer
+      .querySelectorAll("[role=tabpanel]")
+      .forEach((tabPanel) => tabPanel.setAttribute("hidden", true));
+    tabContainer
+      .querySelector(`[role=tabpanel]#${targetId}`)
+      .removeAttribute("hidden");
+  });
+});
+
+// Tabs > Tabs Template
+const tabList_TabsTemp = document.querySelector("[aria-label='Tabs Template']");
+const tabButtons_TabsTemp = tabList_TabsTemp.querySelectorAll("[role=tab]");
+tabButtons_TabsTemp.forEach((tabButton) => {
+  tabButton.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    const tabContainer = e.target.parentElement.parentElement;
+    const targetId = e.target.getAttribute("aria-controls");
+    tabButtons_TabsTemp.forEach((_tabButton) =>
+      _tabButton.setAttribute("aria-selected", false)
+    );
+    tabButton.setAttribute("aria-selected", true);
+    tabButton.focus();
+    tabContainer
+      .querySelectorAll("[role=tabpanel]")
+      .forEach((tabPanel) => tabPanel.setAttribute("hidden", true));
+    tabContainer
+      .querySelector(`[role=tabpanel]#${targetId}`)
+      .removeAttribute("hidden");
+  });
+});
+tabButtons_TabsTemp.forEach((tabButton) => {
+  tabButton.addEventListener("focus", (e) => {
+    e.preventDefault();
+    const tabContainer = e.target.parentElement.parentElement;
+    const targetId = e.target.getAttribute("aria-controls");
+    tabButtons_TabsTemp.forEach((_tabButton) =>
+      _tabButton.setAttribute("aria-selected", false)
+    );
+    tabButton.setAttribute("aria-selected", true);
+    tabContainer
+      .querySelectorAll("[role=tabpanel]")
+      .forEach((tabPanel) => tabPanel.setAttribute("hidden", true));
+    tabContainer
+      .querySelector(`[role=tabpanel]#${targetId}`)
+      .removeAttribute("hidden");
+  });
+});
+
+// Window Body > Window with Tabs
+const tabList_WinWTabs = document.querySelector("[aria-label='Window with Tabs']");
+const tabButtons_WinWTabs = tabList_WinWTabs.querySelectorAll("[role=tab]");
+tabButtons_WinWTabs.forEach((tabButton) => {
+  tabButton.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    const tabContainer = e.target.parentElement.parentElement;
+    const targetId = e.target.getAttribute("aria-controls");
+    tabButtons_WinWTabs.forEach((_tabButton) =>
+      _tabButton.setAttribute("aria-selected", false)
+    );
+    tabButton.setAttribute("aria-selected", true);
+    tabButton.focus();
+    tabContainer
+      .querySelectorAll("[role=tabpanel]")
+      .forEach((tabPanel) => tabPanel.setAttribute("hidden", true));
+    tabContainer
+      .querySelector(`[role=tabpanel]#${targetId}`)
+      .removeAttribute("hidden");
+  });
+});
+tabButtons_WinWTabs.forEach((tabButton) => {
+  tabButton.addEventListener("focus", (e) => {
+    e.preventDefault();
+    const tabContainer = e.target.parentElement.parentElement;
+    const targetId = e.target.getAttribute("aria-controls");
+    tabButtons_WinWTabs.forEach((_tabButton) =>
+      _tabButton.setAttribute("aria-selected", false)
+    );
+    tabButton.setAttribute("aria-selected", true);
     tabContainer
       .querySelectorAll("[role=tabpanel]")
       .forEach((tabPanel) => tabPanel.setAttribute("hidden", true));
@@ -18,6 +116,7 @@ tabButtons.forEach((tabButton) => {
   });
 });
 
+
 // Copy code
 document.querySelectorAll(".copy").forEach((button) => {
   button.addEventListener("click", (e) => {
@@ -30,6 +129,7 @@ document.querySelectorAll(".copy").forEach((button) => {
   });
 });
 
+
 // Balloon
 document
   .querySelectorAll("input[type=text][aria-describedby]")

gui/_button.scss

@@ -27,7 +27,7 @@ button,
 
     &:active,
     &.active {
-      box-shadow: none;
+      box-shadow: var(--button-shadow-active);
       border-color: var(--button-border-color-active);
       background: var(--button-gradient-active);
     }

gui/_dropdown.scss

@@ -22,11 +22,16 @@ select:not([multiple]) {
       var(--button-gradient-hovered);
   }
 
-  &:focus {
+  &:active {
     outline: none;
     border-color: var(--button-border-color-active);
-    box-shadow: unset;
+    box-shadow: var(--button-shadow-active);
     background-image: url("./icon/button-down.svg"),
       var(--button-gradient-active);
   }
-}
+
+  &:focus {
+    outline: none;
+    /* box-shadow: inset 0 0 0 2px var(--button-shade-light-active); */
+  }
+}

gui/_progressbar.scss

@@ -8,43 +8,61 @@
   height: 15px;
   border: 1px solid var(--button-border-color);
   border-radius: var(--border-radius);
-  box-shadow: inset 0 0 2px #fff, 0 0 2px #aaa;
+  box-shadow: inset 0 0 0 1px #f3f3f388, 0 0 0 1px #eaeaea88;
   margin: 2px 0;
   overflow: hidden;
-  background: linear-gradient(
-      to right,
-      rgba(0, 0, 0, 0.1),
-      transparent 20%,
-      transparent 80%,
-      rgba(0, 0, 0, 0.1)
+  background: radial-gradient(
+      circle at 0 50%,
+      #0000001f 10px,
+      transparent 30px
+    ),
+    radial-gradient(
+      circle at 100% 50%,
+      #0000001f 10px,
+      transparent 30px
     ),
     linear-gradient(
       to bottom,
-      rgba(255, 255, 255, 0.6) 25%,
-      rgba(0, 0, 0, 0.05) 35%,
-      rgba(0, 0, 0, 0.05) 90%,
-      rgba(255, 255, 255, 0.2) 95%
+      #f3f3f3af,
+      #fcfcfcaf 20%,
+      #dbdbdbaf 46%,
+      #cacacaaf 46%,
+      #d5d5d5af
     ),
     #ddd;
 
   > div {
     overflow: hidden;
     height: 100%;
-    box-shadow: inset 0 0 1px #fff;
+    box-shadow: inset 0 0 0 1px #ffffff1f;
     background-color: var(--progress-color-normal);
     background-image: linear-gradient(
-        to right,
-        rgba(0, 0, 0, 0.2),
-        transparent 20%,
-        transparent 80%,
-        rgba(0, 0, 0, 0.2)
+        to bottom,
+        #f3f3f3af,
+        #fcfcfcaf 20%,
+        #dbdbdbaf 46%,
+        transparent 46%
+      ),
+      radial-gradient(
+        circle at 0 50%,
+        #0000002f 10px,
+        transparent 30px
+      ),
+      radial-gradient(
+        circle at 100% 50%,
+        #0000002f 10px,
+        transparent 30px
+      ),
+      linear-gradient(
+        to bottom,
+        transparent 65%,
+        #ffffff55
       ),
       linear-gradient(
         to bottom,
-        rgba(255, 255, 255, 0.6) 30%,
-        rgba(0, 0, 0, 0.05) 30%,
-        rgba(0, 0, 0, 0.05) 90%,
-        rgba(255, 255, 255, 0.2) 95%
+        transparent 46%,
+        #cacaca33 46%,
+        #d5d5d533
       );
   }
 
@@ -65,7 +83,7 @@
     background: linear-gradient(
       to right,
       transparent,
-      rgba(255, 255, 255, 0.5),
+      #ffffff80,
       transparent 40%
     );
   }
@@ -75,7 +93,8 @@
     background: linear-gradient(
       to right,
       transparent,
-      var(--progress-color-normal),
+      /* var(--progress-color-normal), */
+      #a1f7a2,
       transparent 35%
     );
   }

gui/_variables.scss

@@ -3,17 +3,18 @@
   --surface: #f0f0f0;
 
   --button-highlight: #fff;
-  --button-face: #eee;
-  --button-face-hover: #e5f4fd;
-  --button-face-active: #cee9f8;
+  --button-face: #f2f2f2;
+  --button-face-hover: #eaf6fd;
+  --button-face-active: #c4e5f6;
   --button-face-disabled: #f4f4f4;
-  --button-shade-light: #ddd;
+  --button-shade-light: #ebebeb;
   --button-shade-light-default: #c3dcea;
-  --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),
+  --button-shade-light-hovered: #bee6fd;
+  --button-shade-light-active: #98d1ef;
+  --button-shade-dark: #cfcfcf;
+  --button-shadow: inset 0 0 0 1px #ffffffcc,
     inset 0 1px 1px #fff;
+  --button-shadow-active: inset 1px 1px 0 #9eb0ba8f, inset -1px 1px 0 #9eb0ba8f;
   --button-border: 1px solid;
   --button-border-color: #8e8f8f;
   --button-border-color-default: #5586a3;
@@ -30,12 +31,15 @@
   --button-gradient-hovered: linear-gradient(
     to bottom,
     var(--button-face-hover) 45%,
-    var(--button-shade-light-hovered) 45%
+    var(--button-shade-light-hovered) 45%,
+    #a7d9f5
   );
   --button-gradient-active: linear-gradient(
     to bottom,
-    var(--button-face-active) 45%,
-    var(--button-shade-light-active) 45%
+    #e5f4fc,
+    var(--button-face-active) 30% 50%,
+    var(--button-shade-light-active) 50%,
+    #68b3db
   );
 
   --element-spacing: 8px;