@stackoverflow/stacks 1.3.0 → 1.3.1

package/lib/css/components/uploader.less

@@ -7,106 +7,91 @@
 //  visit https://stackoverflow.design/
 
 .s-uploader {
-    align-items: center;
-    background-color: var(--black-025);
-    border-radius: var(--br-lg);
-    display: flex;
-    min-height: var(--su-static128);
-    justify-content: center;
-    padding: var(--su8) var(--su16);
-    position: relative;
-    text-align: center;
-
-    // Add the dashed border as an SVG background mask
-    &:before {
-        --s-uploader-background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: var(--black-150);
-        -webkit-mask-image: var(--s-uploader-background-image);
-        mask-image: var(--s-uploader-background-image);
-        border-radius: var(--br-lg);
+    --_bg: var(--black-025);
+    --_bg-focus: var(--black-050);
+    --_bg-bc: var(--black-150);
+    --_focus-ring-color: var(--focus-ring);
 
-        .highcontrast-mode({
-            background-color: var(--black-400);
-        });
-    }
+    // Static custom properties (not redefined but repeated enough to warrant a custom property)
+    --_bg-b-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
 
-    &.has-error {
-        background-color: var(--red-050);
+    .highcontrast-mode({
+        --_bg-bc-hc: var(--black-400);
+    });
 
-        &:before {
-            background-color: var(--red-400);
+    &.is-active {
+        --_bg: var(--black-050);
+        --_bg-bc: var(--black-200);
+    }
 
-            .highcontrast-mode({
-                background-color: var(--red-400);
-            });
-        }
+    &.is-disabled {
+        opacity: var(--_o-disabled-static);
+    }
 
-        .s-link {
-            color: var(--red-900);
-        }
+    &.has-error {
+        --_bg: var(--red-050);
+        --_bg-focus: var(--red-100);
+        --_bg-bc: var(--red-400);
+        --_bg-bc-hc-state: var(--red-400);
+        --_focus-ring-color: var(--focus-ring-error);
+        --_link-fc: var(--red-900);
     }
 
     &.has-success {
-        background-color: var(--green-025);
-
-        &:before {
-            background-color: var(--green-400);
-
-            .highcontrast-mode({
-                background-color: var(--green-400);
-            });
-        }
-
-        .s-link {
-            color: var(--green-900);
-        }
+        --_bg: var(--green-025);
+        --_bg-focus: var(--green-050);
+        --_bg-bc: var(--green-400);
+        --_bg-bc-hc-state: var(--green-400);
+        --_focus-ring-color: var(--focus-ring-success);
+        --_link-fc: var(--green-900);
     }
 
     &.has-warning {
-        background-color: var(--yellow-050);
-
-        &:before {
-            background-color: var(--yellow-400);
-
-            .highcontrast-mode({
-                background-color: var(--yellow-400);
-            });
-        }
-
-        .s-link {
-            color: var(--yellow-900);
-        }
+        --_bg: var(--yellow-050);
+        --_bg-focus: var(--yellow-100);
+        --_bg-bc: var(--yellow-400);
+        --_bg-bc-hc-state: var(--yellow-400);
+        --_focus-ring-color: var(--focus-ring-warning);
+        --_link-fc: var(--yellow-900);
     }
 
-    &.is-active {
-        background-color: var(--black-050);
-
-        &:before {
-            background-color: var(--black-200);
-
-            .highcontrast-mode({
-                background-color: var(--black);
-            });
+    &.has-error,
+    &.has-success,
+    &.has-warning {
+        .s-link {
+            color: var(--_link-fc);
         }
     }
 
-    &.is-disabled {
-        opacity: 0.5;
-    }
-
     // This is to for safari shadow DOM
     // see https://github.com/StackExchange/Stacks/pull/690#issuecomment-861028193
     input[type="file"]::file-selector-button {
         cursor: pointer;
     }
-
+    .s-uploader--container {
+        align-items: center;
+        background-color: var(--_bg);
+        border-radius: var(--br-lg);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: var(--su-static128);
+        padding: var(--su8) var(--su16);
+        position: relative;
+        text-align: center;
+
+        // Add the dashed border as an SVG background mask
+        &:before {
+            -webkit-mask-image: var(--_bg-b-image);
+            mask-image: var(--_bg-b-image);
+            background-color: var(--_bg-bc-hc-state, var(--_bg-bc-hc, var(--_bg-bc)));
+            content: '';
+            border-radius: var(--br-lg);
+            display: block;
+            position: absolute;
+            inset: 0;
+        }
+    }
     .s-uploader--input {
         cursor: pointer;
         height: 100%;
@@ -114,13 +99,13 @@
         opacity: 0;
         position: absolute;
         width: 100%;
+        z-index: var(--zi-selected);
 
         &:focus:focus-visible + .s-uploader--container {
-            background-color: var(--black-050);
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
+            background-color: var(--_bg-focus);
+            box-shadow: 0 0 0 var(--su-static4) var(--_focus-ring-color);
         }
     }
-
     .s-uploader--preview {
         max-width: 100%;
         pointer-events: none;
@@ -185,8 +170,7 @@
                     object-fit: cover;
                 }
                 &:not(img) {
-                    --s-uploader--preview-document-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
-                    background-image: var(--s-uploader--preview-document-icon);
+                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
                     background-position: center;
                     background-repeat: no-repeat;
                 }
@@ -207,4 +191,6 @@
         top: var(--su8);
         z-index: var(--zi-active);
     }
+
+    position: relative;
 }

package/lib/css/exports/constants-colors.less

@@ -409,6 +409,10 @@
     --focus-ring-error: hsla(@red-h, 62%, 47%, 15%);
     --focus-ring-muted: hsla(@black-h, @black-s, 15%, 10%);
 
+    // Opacity
+    --_o-disabled: 0.5;
+    --_o-disabled-static: 0.5;
+
     // Shadows
     --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
     --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
@@ -605,6 +609,10 @@
     --focus-ring-error: hsla(@red-h, 62%, 52%, 30%);
     --focus-ring-muted: hsla(@black-h, @black-s, 100%, 10%);
 
+    // Opacity
+    --_o-disabled: 0.5;
+    --_o-disabled-static: 0.5;
+
     // Shadows
     --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
     --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
@@ -816,6 +824,9 @@
     --focus-ring-error: fade(@red-600, 90%);
     --focus-ring-muted: fade(@black-400, 95%);
 
+    // Opacity
+    --_o-disabled: 0.8;
+
     // Shadows
     --bs-sm: none;
     --bs-md: none;
@@ -972,6 +983,9 @@
     --fc-medium: var(--black-700);
     --fc-light: var(--black-500);
 
+    // Opacity
+    --_o-disabled: 0.8;
+
     // Shadows
     --bs-sm: none;
     --bs-md: none;

package/lib/css/stacks-dynamic.less

@@ -18,7 +18,6 @@
 @import "base/body.less";
 
 //  --  COMPONENTS
-@import "components/banners.less";
 @import "components/buttons.less";
 @import "components/links.less";
 @import "components/link-previews.less";

package/lib/css/stacks-static.less

@@ -20,13 +20,14 @@
 @import "components/activity-indicator.less";
 @import "components/avatars.less";
 @import "components/badges.less";
-@import "components/blank-states.less";
+@import "components/empty-states.less";
 @import "components/breadcrumbs.less";
 @import "components/button-groups.less";
 @import "components/cards.less";
 @import "components/code-blocks.less";
-@import "components/collapsible.less";
+@import "components/expandable.less";
 @import "components/inputs.less";
+@import "components/labels.less";
 @import "components/menu.less";
 @import "components/modals.less";
 @import "components/navigation.less";

package/lib/ts/controllers/s-expandable-control.ts

@@ -1,7 +1,7 @@
 import * as Stacks from '../stacks';
 
 // Radio buttons only trigger a change event when they're *checked*, but not when
-// they're *unchecked*. Therefore, if we have an active `s-collapsible-control` in
+// they're *unchecked*. Therefore, if we have an active `s-expandable-control` in
 // the document, we listen for change events on *all* radio buttons and find any
 // other radio buttons in the same `name` group, triggering a custom event on all
 // of them so the controller can re-evaluate.
@@ -20,7 +20,7 @@ function globalChangeListener(e: UIEvent) {
             if (other === e.target) {
                 return;
             }
-            var customEvent;
+            let customEvent;
             try {
                 customEvent = new Event(RADIO_OFF_EVENT);
             } catch (ex) {
@@ -32,7 +32,7 @@ function globalChangeListener(e: UIEvent) {
         });
 }
 
-var refCount = 0;
+let refCount = 0;
 function globalChangeListenerRequired(required: boolean) {
     if (required) {
         refCount++;
@@ -52,16 +52,16 @@ export class ExpandableController extends Stacks.StacksController {
     private events!: string[];
     private isCheckable!: boolean;
     private isRadio!: boolean;
-    private lastKeydownClickTimestamp: number = 0;
+    private lastKeydownClickTimestamp = 0;
 
     initialize() {
         if (this.element.nodeName === "INPUT" && ["radio", "checkbox"].indexOf((<HTMLInputElement>this.element).type) >= 0) {
-            this.isCollapsed = this._isCollapsedForCheckable;
+            this.isCollapsed = this._isCollapsedForCheckable.bind(this);
             this.events = ["change", RADIO_OFF_EVENT];
             this.isCheckable = true;
             this.isRadio = (<HTMLInputElement>this.element).type === "radio";
         } else {
-            this.isCollapsed = this._isCollapsedForClickable;
+            this.isCollapsed = this._isCollapsedForClickable.bind(this);
             this.events = ["click", "keydown"];
         }
         this.listener = this.listener.bind(this);
@@ -71,7 +71,7 @@ export class ExpandableController extends Stacks.StacksController {
     // for non-checkable elements, the initial source of truth is the collapsed/expanded
     // state of the controlled element (unless the element doesn't exist)
     _isCollapsedForClickable() {
-        var cc = this.controlledCollapsibles;
+        const cc = this.controlledExpandables;
         // the element is considered collapsed if *any* target element is collapsed
         return cc.length > 0 ? !cc.every(element => element.classList.contains("is-expanded")) : this.element.getAttribute("aria-expanded") === "false";
     };
@@ -82,7 +82,7 @@ export class ExpandableController extends Stacks.StacksController {
     };
 
 
-    get controlledCollapsibles() {
+    get controlledExpandables() {
         const attr = this.element.getAttribute("aria-controls");
         if (!attr) {
             throw `[aria-controls="targetId1 ... targetIdN"] attribute required`;
@@ -104,8 +104,8 @@ export class ExpandableController extends Stacks.StacksController {
         if (!this.data.has("toggle-class")) {
             return;
         }
-        var cl = this.element.classList;
-        var toggleClass = this.data.get("toggle-class");
+        const cl = this.element.classList;
+        const toggleClass = this.data.get("toggle-class");
         if (!toggleClass) {
             throw "couldn't find toggle class"
         }
@@ -115,7 +115,7 @@ export class ExpandableController extends Stacks.StacksController {
     };
 
     listener(e: Event) {
-        var newCollapsed;
+        let newCollapsed;
         if (this.isCheckable) {
             newCollapsed = !(<HTMLInputElement>this.element).checked;
         } else {
@@ -142,7 +142,7 @@ export class ExpandableController extends Stacks.StacksController {
             }
         }
         this.element.setAttribute("aria-expanded", newCollapsed ? "false" : "true");
-        for (let controlledElement of this.controlledCollapsibles) {
+        for (const controlledElement of this.controlledExpandables) {
             controlledElement.classList.toggle("is-expanded", !newCollapsed);
         }
         this._dispatchShowHideEvent(!newCollapsed);
@@ -151,7 +151,7 @@ export class ExpandableController extends Stacks.StacksController {
 
     connect() {
         this.events.forEach(e => {
-            this.element.addEventListener(e, this.listener);
+            this.element.addEventListener(e, this.listener.bind(this));
         }, this);
 
         if (this.isRadio) {
@@ -159,15 +159,19 @@ export class ExpandableController extends Stacks.StacksController {
         }
 
         // synchronize state -- in all cases, this means setting the correct `aria-expanded`
-        // attribute; for checkable controls this also means setting the `is-collapsed` class
-        this.element.setAttribute("aria-expanded", this.isCollapsed() ? "false" : "true");
+        // attribute; for checkable controls this also means setting the `is-collapsed` class.
+        // Note: aria-expanded is currently an invalid attribute on radio elements
+        // Support for aria-expanded is being debated by the W3C https://github.com/w3c/aria/issues/1404 as recently as June 2022
+        if (!this.isRadio) {
+            this.element.setAttribute("aria-expanded", this.isCollapsed() ? "false" : "true");
+        }
         if (this.isCheckable) {
-            var cc = this.controlledCollapsibles;
+            const cc = this.controlledExpandables;
             if (cc.length) {
-                var expected = !this.isCollapsed();
+                const expected = !this.isCollapsed();
                 // if any element does not match the expected state, set them all to the expected state
                 if (cc.some(element => element.classList.contains("is-expanded") !== expected)) {
-                    for (let controlledElement of this.controlledCollapsibles) {
+                    for (const controlledElement of this.controlledExpandables) {
                         controlledElement.classList.toggle("is-expanded", expected);
                     }
                     this._dispatchShowHideEvent(expected);
@@ -179,7 +183,7 @@ export class ExpandableController extends Stacks.StacksController {
 
     disconnect() {
         this.events.forEach(e => {
-            this.element.removeEventListener(e, this.listener);
+            this.element.removeEventListener(e, this.listener.bind(this));
         }, this);
 
         if (this.isRadio) {

package/lib/ts/controllers/s-modal.ts

@@ -6,12 +6,12 @@ export class ModalController extends Stacks.StacksController {
     private modalTarget!: HTMLElement;
     private initialFocusTargets!: HTMLElement[];
 
-    private _boundClickFn!: any;
-    private _boundKeypressFn!: any;
+    private _boundClickFn!: (event: MouseEvent) => void;
+    private _boundKeypressFn!: (event: KeyboardEvent) => void;
 
     private returnElement!: HTMLElement;
 
-    private _boundTabTrap!: any;
+    private _boundTabTrap!: (event: KeyboardEvent) => void;
 
     connect () {
         this.validate();
@@ -50,7 +50,7 @@ export class ModalController extends Stacks.StacksController {
      */
     private validate() {
         // check for returnElement support
-        var returnElementSelector = this.data.get("return-element");
+        const returnElementSelector = this.data.get("return-element");
         if (returnElementSelector) {
             this.returnElement = <HTMLElement>document.querySelector(returnElementSelector);
 
@@ -65,8 +65,8 @@ export class ModalController extends Stacks.StacksController {
      * @param show Optional parameter that force shows/hides the element or toggles it if left undefined
      */
     private _toggle (show?: boolean | undefined, dispatcher: Event|Element|null = null) {
-        var toShow = show;
-        var isVisible = this.modalTarget.getAttribute("aria-hidden") === "false";
+        let toShow = show;
+        const isVisible = this.modalTarget.getAttribute("aria-hidden") === "false";
 
         // if we're letting the class toggle, we need to figure out if the popover is visible manually
         if (typeof toShow === "undefined") {
@@ -78,10 +78,10 @@ export class ModalController extends Stacks.StacksController {
             return;
         }
 
-        let dispatchingElement = this.getDispatcher(dispatcher);
+        const dispatchingElement = this.getDispatcher(dispatcher);
 
         // show/hide events trigger before toggling the class
-        var triggeredEvent = this.triggerEvent(toShow ? "show" : "hide", {
+        const triggeredEvent = this.triggerEvent(toShow ? "show" : "hide", {
             returnElement: this.returnElement,
             dispatcher: this.getDispatcher(dispatchingElement)
         }, this.modalTarget);
@@ -105,7 +105,7 @@ export class ModalController extends Stacks.StacksController {
         }
 
         // check for transitionend support
-        var supportsTransitionEnd = (<HTMLElement>this.modalTarget).ontransitionend !== undefined;
+        const supportsTransitionEnd = (this.modalTarget).ontransitionend !== undefined;
 
         // shown/hidden events trigger after toggling the class
         if (supportsTransitionEnd) {
@@ -182,7 +182,7 @@ export class ModalController extends Stacks.StacksController {
      */
     private focusInsideModal() {
         this.modalTarget.addEventListener("s-modal:shown", () => {
-            var initialFocus = this.firstVisible(this.initialFocusTargets) ?? this.firstVisible(this.getAllTabbables());
+            const initialFocus = this.firstVisible(this.initialFocusTargets) ?? this.firstVisible(this.getAllTabbables());
             initialFocus?.focus();
         }, {once: true });
     }
@@ -194,7 +194,7 @@ export class ModalController extends Stacks.StacksController {
 
         // If somehow the user has tabbed out of the modal or if focus started outside the modal, push them to the first item.
         if (!this.modalTarget.contains(<Element>e.target)) {
-            var focusTarget = this.firstVisible(this.getAllTabbables());
+            const focusTarget = this.firstVisible(this.getAllTabbables());
             if (focusTarget) {
                 e.preventDefault();
                 focusTarget.focus();
@@ -205,10 +205,10 @@ export class ModalController extends Stacks.StacksController {
 
         // If we observe a tab keydown and we're on an edge, cycle the focus to the other side.
         if (e.key === "Tab") {
-            var tabbables = this.getAllTabbables();
+            const tabbables = this.getAllTabbables();
 
-            var firstTabbable = this.firstVisible(tabbables);
-            var lastTabbable = this.lastVisible(tabbables);
+            const firstTabbable = this.firstVisible(tabbables);
+            const lastTabbable = this.lastVisible(tabbables);
 
             if (firstTabbable && lastTabbable) {
                 if (firstTabbable === lastTabbable) {
@@ -252,7 +252,7 @@ export class ModalController extends Stacks.StacksController {
      * Forces the popover to hide if a user clicks outside of it or its reference element
      */
     private hideOnOutsideClick (e: Event) {
-        var target = <Node>e.target;
+        const target = <Node>e.target;
         // check if the document was clicked inside either the toggle element or the modal itself
         // note: .contains also returns true if the node itself matches the target element
         if (!this.modalTarget.querySelector(".s-modal--dialog")!.contains(target) && document.body.contains(target)) {
@@ -311,7 +311,7 @@ export function hideModal(element: HTMLElement) {
  * @param show whether to force show/hide the modal; toggles the modal if left undefined
  */
 function toggleModal(element: HTMLElement, show?: boolean | undefined) {
-    var controller = Stacks.application.getControllerForElementAndIdentifier(element, "s-modal") as ModalController;
+    const controller = Stacks.application.getControllerForElementAndIdentifier(element, "s-modal") as ModalController;
 
     if (!controller) {
         throw "Unable to get s-modal controller from element";

package/lib/ts/controllers/s-navigation-tablist.ts

@@ -2,8 +2,8 @@ import * as Stacks from "../stacks";
 
 export class TabListController extends Stacks.StacksController {
 
-    private boundSelectTab: any; // (event: MouseEvent) => void;
-    private boundHandleKeydown: any // (event: KeyboardEvent) => void;
+    private boundSelectTab!: (event: MouseEvent) => void;
+    private boundHandleKeydown!: (event: KeyboardEvent) => void;
 
     connect() {
         super.connect();
@@ -11,7 +11,7 @@ export class TabListController extends Stacks.StacksController {
         this.boundSelectTab = this.selectTab.bind(this);
         this.boundHandleKeydown = this.handleKeydown.bind(this);
 
-        for (let tab of this.tabTargets) {
+        for (const tab of this.tabTargets) {
             tab.addEventListener("click", this.boundSelectTab);
             tab.addEventListener("keydown", this.boundHandleKeydown);
         }
@@ -20,7 +20,7 @@ export class TabListController extends Stacks.StacksController {
     disconnect() {
         super.disconnect();
 
-        for (let tab of this.tabTargets) {
+        for (const tab of this.tabTargets) {
             tab.removeEventListener("click", this.boundSelectTab);
             tab.removeEventListener("keydown", this.boundHandleKeydown);
         }
@@ -29,8 +29,8 @@ export class TabListController extends Stacks.StacksController {
     /**
      * Gets all tabs within the controller.
      */
-    get tabTargets() {
-        return <HTMLElement[]>Array.from(this.element.querySelectorAll("[role=tab]"));
+    get tabTargets(): HTMLElement[] {
+        return Array.from(this.element.querySelectorAll("[role=tab]"));
     }
 
     /**
@@ -47,8 +47,8 @@ export class TabListController extends Stacks.StacksController {
     handleKeydown(event: KeyboardEvent) {
         let tabElement = <HTMLElement>event.currentTarget;
 
-        var tabs = this.tabTargets;
-        var tabIndex = tabs.indexOf(tabElement);
+        const tabs = this.tabTargets;
+        let tabIndex = tabs.indexOf(tabElement);
 
         if (event.key === "ArrowRight") {
             tabIndex++;
@@ -62,7 +62,7 @@ export class TabListController extends Stacks.StacksController {
         if (tabIndex < 0) { tabIndex = tabs.length - 1; }
         if (tabIndex >= tabs.length) { tabIndex = 0; }
 
-        tabElement = <HTMLElement>tabs[tabIndex];
+        tabElement = tabs[tabIndex];
         this.switchToTab(tabElement);
 
         // Focus the newly selected tab so it can receive keyboard events.
@@ -75,7 +75,7 @@ export class TabListController extends Stacks.StacksController {
      */
     private switchToTab(newTab: HTMLElement) {
 
-        var oldTab = this.selectedTab;
+        const oldTab = this.selectedTab;
         if (oldTab === newTab) { return; }
 
         if (this.triggerEvent("select", { oldTab, newTab }).defaultPrevented) { return; }
@@ -98,9 +98,9 @@ export class TabListController extends Stacks.StacksController {
      * is not a valid tab, all tabs will be unselected.
      */
     public set selectedTab(selectedTab: HTMLElement | null) {
-        for (let tab of this.tabTargets) {
-            let panelId = tab.getAttribute('aria-controls');
-            let panel = panelId ? document.getElementById(panelId) : null;
+        for (const tab of this.tabTargets) {
+            const panelId = tab.getAttribute('aria-controls');
+            const panel = panelId ? document.getElementById(panelId) : null;
 
             if (tab === selectedTab) {
                 tab.classList.add('is-selected');