@stackoverflow/stacks 1.3.0 → 1.3.1

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

@@ -1,11 +1,11 @@
 import { createPopper, Placement } from '@popperjs/core';
+import type * as Popper from '@popperjs/core';
 import * as Stacks from "../stacks";
 
 type OutsideClickBehavior = "always" | "never" | "if-in-viewport" | "after-dismissal";
 
 export abstract class BasePopoverController extends Stacks.StacksController {
-    // @ts-ignore
-    private popper!: Popper;
+    private popper!: Popper.Instance;
 
     protected popoverElement!: HTMLElement;
 
@@ -87,6 +87,8 @@ export abstract class BasePopoverController extends Stacks.StacksController {
         this.hide();
         if (this.popper) {
             this.popper.destroy();
+            // eslint-disable-next-line
+            // @ts-ignore The operand of a 'delete' operator must be optional .ts(2790)
             delete this.popper;
         }
         super.disconnect();
@@ -105,7 +107,7 @@ export abstract class BasePopoverController extends Stacks.StacksController {
     show(dispatcher: Event|Element|null = null) {
         if (this.isVisible) { return; }
 
-        let dispatcherElement = this.getDispatcher(dispatcher);
+        const dispatcherElement = this.getDispatcher(dispatcher);
 
         if (this.triggerEvent("show", {
             dispatcher: dispatcherElement
@@ -115,7 +117,7 @@ export abstract class BasePopoverController extends Stacks.StacksController {
             this.initializePopper();
         }
 
-        this.popoverElement!.classList.add("is-visible");
+        this.popoverElement.classList.add("is-visible");
 
         // ensure the popper has been positioned correctly
         this.scheduleUpdate();
@@ -129,7 +131,7 @@ export abstract class BasePopoverController extends Stacks.StacksController {
     hide(dispatcher: Event|Element|null = null) {
         if (!this.isVisible) { return; }
 
-        let dispatcherElement = this.getDispatcher(dispatcher);
+        const dispatcherElement = this.getDispatcher(dispatcher);
 
         if (this.triggerEvent("hide", {
             dispatcher: dispatcherElement
@@ -140,6 +142,8 @@ export abstract class BasePopoverController extends Stacks.StacksController {
         if (this.popper) {
             // completely destroy the popper on hide; this is in line with Popper.js's performance recommendations
             this.popper.destroy();
+            // eslint-disable-next-line
+            // @ts-ignore The operand of a 'delete' operator must be optional .ts(2790)
             delete this.popper;
         }
 
@@ -182,7 +186,6 @@ export abstract class BasePopoverController extends Stacks.StacksController {
      * Initializes the Popper for this instance
      */
     private initializePopper() {
-        // @ts-ignore
         this.popper = createPopper(this.referenceElement, this.popoverElement, {
             placement: this.data.get("placement") as Placement || "bottom",
             modifiers: [
@@ -206,7 +209,7 @@ export abstract class BasePopoverController extends Stacks.StacksController {
      * Validates the popover settings and attempts to set necessary internal variables
      */
     private validate() {
-        var referenceSelector = this.data.get("reference-selector");
+        const referenceSelector = this.data.get("reference-selector");
 
         this.referenceElement = <HTMLElement>this.element;
 
@@ -221,7 +224,7 @@ export abstract class BasePopoverController extends Stacks.StacksController {
 
         const popoverId = this.referenceElement.getAttribute(this.popoverSelectorAttribute);
 
-        var popoverElement = null;
+        let popoverElement: HTMLElement | null = null;
 
         // if the popover is named, attempt to fetch it (and throw an error if it doesn't exist)
         if (popoverId) {
@@ -264,7 +267,7 @@ export abstract class BasePopoverController extends Stacks.StacksController {
      */
     protected scheduleUpdate() {
         if (this.popper && this.isVisible) {
-            this.popper.update();
+            void this.popper.update();
         }
     }
 }
@@ -274,8 +277,8 @@ export class PopoverController extends BasePopoverController {
 
     protected popoverSelectorAttribute = "aria-controls";
 
-    private boundHideOnOutsideClick!: any;
-    private boundHideOnEscapePress!: any;
+    private boundHideOnOutsideClick!: (event: MouseEvent) => void;
+    private boundHideOnEscapePress!:  (event: KeyboardEvent) => void;
 
     /**
      * Toggles optional classes and accessibility attributes in addition to BasePopoverController.shown
@@ -332,7 +335,7 @@ export class PopoverController extends BasePopoverController {
         const target = <Node>e.target;
         // check if the document was clicked inside either the reference element or the popover itself
         // note: .contains also returns true if the node itself matches the target element
-        if (this.shouldHideOnOutsideClick && !this.referenceElement.contains(target) && !this.popoverElement!.contains(target) && document.body.contains(target)) {
+        if (this.shouldHideOnOutsideClick && !this.referenceElement.contains(target) && !this.popoverElement.contains(target) && document.body.contains(target)) {
             this.hide(e);
         }
     };
@@ -349,7 +352,7 @@ export class PopoverController extends BasePopoverController {
 
         // check if the target was inside the popover element and refocus the triggering element
         // note: .contains also returns true if the node itself matches the target element
-        if (this.popoverElement!.contains(<Node>e.target)) {
+        if (this.popoverElement.contains(<Node>e.target)) {
             this.referenceElement.focus();
         }
 
@@ -364,8 +367,10 @@ export class PopoverController extends BasePopoverController {
         if (!this.data.has("toggle-class")) {
             return;
         }
-        var cl = this.referenceElement.classList;
-        this.data.get("toggle-class")!.split(/\s+/).forEach(function (cls: string) {
+
+        const toggleClass = this.data.get("toggle-class") || "";
+        const cl = this.referenceElement.classList;
+        toggleClass.split(/\s+/).forEach(function (cls: string) {
             cl.toggle(cls, show);
         });
     }
@@ -375,7 +380,9 @@ export class PopoverController extends BasePopoverController {
      * @param {boolean=} show - A boolean indicating whether this is being triggered by a show or hide.
      */
     private toggleAccessibilityAttributes(show?: boolean) {
-        this.referenceElement.ariaExpanded = show?.toString() || this.referenceElement.ariaExpanded || 'false';
+        const expandedValue = show?.toString() || this.referenceElement.ariaExpanded || "false";
+        this.referenceElement.ariaExpanded = expandedValue;
+        this.referenceElement.setAttribute("aria-expanded", expandedValue);
     }
 }
 
@@ -453,6 +460,7 @@ export function attachPopover(element: Element, popover: Element | string, optio
     }
 
     if (typeof popover === 'string') {
+        // eslint-disable-next-line no-unsanitized/method
         const elements = document.createRange().createContextualFragment(popover).children;
         if (elements.length !== 1) {
             throw "popover should contain a single element";
@@ -461,7 +469,7 @@ export function attachPopover(element: Element, popover: Element | string, optio
     }
 
     const existingId = referenceElement.getAttribute("aria-controls");
-    var popoverId = popover.id;
+    let popoverId = popover.id;
 
     if (!popover.classList.contains('s-popover')) {
         throw `popover should have the "s-popover" class but had class="${popover.className}"`;
@@ -557,7 +565,7 @@ function getPopover(element: Element): GetPopoverResult {
  * @param include Whether to add the controllerName value
  */
 function toggleController(el: Element, controllerName: string, include: boolean) {
-    var controllers = new Set(el.getAttribute('data-controller')?.split(/\s+/));
+    const controllers = new Set(el.getAttribute('data-controller')?.split(/\s+/));
     if (include) {
         controllers.add(controllerName);
     } else {

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

@@ -9,14 +9,15 @@ export class TableController extends Stacks.StacksController {
         if (["asc", "desc", "none"].indexOf(direction) < 0) {
             throw "direction must be one of asc, desc, or none"
         }
-        var controller = this;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const controller = this;
         this.columnTargets.forEach(function (target) {
-            var isCurrrent = target === headElem;
+            const isCurrrent = target === headElem;
 
             target.classList.toggle("is-sorted", isCurrrent && direction !== "none");
 
             target.querySelectorAll(".js-sorting-indicator").forEach(function (icon) {
-                var visible = isCurrrent ? direction : "none";
+                const visible = isCurrrent ? direction : "none";
                 icon.classList.toggle("d-none", !icon.classList.contains("js-sorting-indicator-" + visible));
             });
 
@@ -29,16 +30,17 @@ export class TableController extends Stacks.StacksController {
     };
 
     sort(evt: Event) {
-        var controller = this;
-        var colHead = evt.currentTarget;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const controller = this;
+        const colHead = evt.currentTarget;
         if (!(colHead instanceof HTMLTableCellElement)) {
             throw "invalid event target";
         }
-        var table = this.element as HTMLTableElement;
-        var tbody = table.tBodies[0];
+        const table = this.element as HTMLTableElement;
+        const tbody = table.tBodies[0];
 
         // the column slot number of the clicked header
-        var colno = getCellSlot(colHead);
+        const colno = getCellSlot(colHead);
 
         if (colno < 0) { // this shouldn't happen if the clicked element is actually a column head
             return;
@@ -46,23 +48,23 @@ export class TableController extends Stacks.StacksController {
 
         // an index of the <tbody>, so we can find out for each row which <td> element is
         // in the same column slot as the header
-        var slotIndex = buildIndex(tbody);
+        const slotIndex = buildIndex(tbody);
 
         // the default behavior when clicking a header is to sort by this column in ascending
         // direction, *unless* it is already sorted that way
-        var direction = this.getElementData(colHead, "sort-direction") === "asc" ? -1 : 1;
+        const direction = this.getElementData(colHead, "sort-direction") === "asc" ? -1 : 1;
 
-        var rows = Array.from(table.tBodies[0].rows);
+        const rows = Array.from(table.tBodies[0].rows);
 
         // if this is still false after traversing the data, that means all values are integers (or empty)
         // and thus we'll sort numerically.
-        var anyNonInt = false;
+        let anyNonInt = false;
 
         // data will be a list of tuples [value, rowNum], where value is what we're sorting by
-        var data: [string | number, number][] = [];
-        var firstBottomRow: HTMLTableRowElement;
+        const data: [string | number, number][] = [];
+        let firstBottomRow: HTMLTableRowElement;
         rows.forEach(function (row, index) {
-            var force = controller.getElementData(row, "sort-to");
+            const force = controller.getElementData(row, "sort-to");
             if (force === "top") {
                 return; // rows not added to the list will automatically end up at the top
             } else if (force === "bottom") {
@@ -71,7 +73,7 @@ export class TableController extends Stacks.StacksController {
                 }
                 return;
             }
-            var cell = slotIndex[index][colno];
+            const cell = slotIndex[index][colno];
             if (!cell) {
                 data.push(["", index]);
                 return;
@@ -79,10 +81,10 @@ export class TableController extends Stacks.StacksController {
 
             // unless the to-be-sorted-by value is explicitly provided on the element via this attribute,
             // the value we're using is the cell's text, trimmed of any whitespace
-            var explicit = controller.getElementData(cell, "sort-val");
-            var d = typeof explicit === "string" ? explicit : cell.textContent!.trim();
+            const explicit = controller.getElementData(cell, "sort-val");
+            const d = typeof explicit === "string" ? explicit : cell.textContent!.trim();
 
-            if ((d !== "") && (parseInt(d, 10) + "" !== d)) {
+            if ((d !== "") && (`${parseInt(d, 10)}` !== d)) {
                 anyNonInt = true;
             }
             data.push([d, index]);
@@ -114,7 +116,7 @@ export class TableController extends Stacks.StacksController {
 
         // this is the actual reordering of the table rows
         data.forEach(function (tup) {
-            var row = rows[tup[1]];
+            const row = rows[tup[1]];
             row.parentElement!.removeChild(row);
             if (firstBottomRow) {
                 tbody.insertBefore(row, firstBottomRow);
@@ -165,29 +167,29 @@ function getCellSlot(cell: HTMLTableCellElement): number {
 // If the second argument is given, it's a <td> or <th> that we're trying to find, and the algorithm
 // stops as soon as it has found it and the function returns its slot number.
 function buildIndexOrGetCellSlot(section: HTMLTableSectionElement, findCell?: HTMLTableCellElement) {
-    var index = [];
-    var curRow = section.children[0];
+    const index = [];
+    let curRow = section.children[0];
 
     // the elements of these two arrays are synchronized; the first array contains table cell elements,
     // the second one contains a number that indicates for how many more rows this elements will
     // exist (i.e. the value is initially one less than the cell's rowspan, and will be decreased for each row)
-    var growing: HTMLTableCellElement[] = [];
-    var growingRowsLeft: number[] = [];
+    const growing: HTMLTableCellElement[] = [];
+    const growingRowsLeft: number[] = [];
 
     // continue while we have actual <tr>'s left *or* we still have rowspan'ed elements that aren't done
     while (curRow || growingRowsLeft.some(function (e) { return e !== 0; })) {
-        var curIndexRow: HTMLTableCellElement[] = [];
+        const curIndexRow: HTMLTableCellElement[] = [];
         index.push(curIndexRow);
 
-        var curSlot = 0;
+        let curSlot = 0;
         if (curRow) {
-            for (var curCellInd = 0; curCellInd < curRow.children.length; curCellInd++) {
+            for (let curCellInd = 0; curCellInd < curRow.children.length; curCellInd++) {
                 while (growingRowsLeft[curSlot]) {
                     growingRowsLeft[curSlot]--;
                     curIndexRow[curSlot] = growing[curSlot];
                     curSlot++;
                 }
-                var cell = curRow.children[curCellInd];
+                const cell = curRow.children[curCellInd];
                 if (!(cell instanceof HTMLTableCellElement)) {
                     throw "invalid table"
                 }
@@ -197,7 +199,7 @@ function buildIndexOrGetCellSlot(section: HTMLTableSectionElement, findCell?: HT
                 if (cell === findCell) {
                     return curSlot;
                 }
-                var nextFreeSlot = curSlot + cell.colSpan;
+                const nextFreeSlot = curSlot + cell.colSpan;
                 for (; curSlot < nextFreeSlot; curSlot++) {
                     growingRowsLeft[curSlot] = cell.rowSpan - 1; // if any of these is already growing, the table is broken -- no guarantees of anything
                     growing[curSlot] = cell;

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

@@ -10,10 +10,12 @@ export class TooltipController extends BasePopoverController {
 
     protected popoverSelectorAttribute = "aria-describedby";
 
-    private boundScheduleShow!: any;
-    private boundHide!: any;
-    private boundHideIfWithin!: any;
-    private activeTimeout!: any;
+    private boundScheduleShow!: () => void;
+    private boundHide!: () => void;
+    private boundHideIfWithin!: () => void;
+    private boundHideOnEscapeKeyEvent!: () => void;
+    private boundClearActiveTimeout!: () => void;
+    private activeTimeout!: number;
 
     /**
      * Binds mouseover and mouseout events in addition to BasePopoverController.connect
@@ -27,12 +29,14 @@ export class TooltipController extends BasePopoverController {
         if (window.matchMedia("(hover: hover)").matches) {
             this.bindMouseEvents();
         }
+        this.bindKeyboardEvents();
     }
 
     /**
      * Unbinds mouse events in addition to BasePopoverController.disconnect
      */
     disconnect() {
+        this.unbindKeyboardEvents();
         this.unbindMouseEvents();
         super.disconnect();
     }
@@ -43,7 +47,7 @@ export class TooltipController extends BasePopoverController {
      */
     show(dispatcher: Event|Element|null = null) {
         // check and see if this controller coexists with a popover
-        var controller = Stacks.application.getControllerForElementAndIdentifier(this.element, "s-popover");
+        const controller = Stacks.application.getControllerForElementAndIdentifier(this.element, "s-popover");
 
         // if the controller exists and already has a visible popover, don't show the tooltip
         if (controller && (<PopoverController>controller).isVisible) {
@@ -64,11 +68,16 @@ export class TooltipController extends BasePopoverController {
     /**
      * Cancels the scheduled tooltip popover display and hides it if already displayed
      */
-    hide(dispatcher: Event | Element | null = null) {
+    scheduleHide(dispatcher: Event | Element | null = null) {
         window.clearTimeout(this.activeTimeout);
-        this.activeTimeout = null;
+        this.activeTimeout = window.setTimeout(() => super.hide(dispatcher), 100);
+    }
 
-        super.hide(dispatcher);
+    /**
+     * Cancels the activeTimeout
+     */
+     clearActiveTimeout() {
+        clearTimeout(this.activeTimeout);
     }
 
     /**
@@ -76,13 +85,14 @@ export class TooltipController extends BasePopoverController {
      */
     applyTitleAttributes() {
 
-        var content: Node;
+        let content: Node;
 
-        var htmlTitle = this.data.get("html-title");
+        const htmlTitle = this.data.get("html-title");
         if (htmlTitle) {
+            // eslint-disable-next-line no-unsanitized/method
             content = document.createRange().createContextualFragment(htmlTitle);
         } else {
-            var plainTitle = this.element.getAttribute("title");
+            const plainTitle = this.element.getAttribute("title");
             if (plainTitle) {
                 content = document.createTextNode(plainTitle);
             } else {
@@ -93,21 +103,20 @@ export class TooltipController extends BasePopoverController {
         this.data.delete("html-title");
         this.element.removeAttribute("title");
 
-        var popoverId = this.element.getAttribute("aria-describedby");
+        let popoverId = this.element.getAttribute("aria-describedby");
         if (!popoverId) {
             popoverId = TooltipController.generateId();
             this.element.setAttribute("aria-describedby", popoverId);
         }
 
-        var popover = document.getElementById(popoverId);
+        let popover = document.getElementById(popoverId);
         if (!popover) {
             popover = document.createElement("div");
             popover.id = popoverId;
-            popover.className = "s-popover s-popover__tooltip pe-none";
-            popover.setAttribute("aria-hidden", "true");
+            popover.className = "s-popover s-popover__tooltip";
             popover.setAttribute("role", "tooltip");
 
-            var parentNode = this.element.parentNode;
+            const parentNode = this.element.parentNode;
             if (parentNode) {
                 // insertBefore inserts at end if element.nextSibling is null.
                 parentNode.insertBefore(popover, this.element.nextSibling);
@@ -165,21 +174,49 @@ export class TooltipController extends BasePopoverController {
      */
     private hideIfWithin(event: Event) {
         if ((<Element>event.target!).contains(this.referenceElement)) {
-            this.hide();
+            this.scheduleHide();
+        }
+    }
+
+    private hideOnEscapeKeyEvent(event: KeyboardEvent) {
+        if (event.key === "Escape") {
+            this.scheduleHide();
         }
     }
+    /**
+     * Binds mouse events to show/hide on reference element hover
+     */
+     private bindKeyboardEvents() {
+        this.boundScheduleShow = this.boundScheduleShow || this.scheduleShow.bind(this);
+        this.boundHide = this.boundHide || this.scheduleHide.bind(this);
+        this.boundHideOnEscapeKeyEvent = this.boundHideOnEscapeKeyEvent || this.hideOnEscapeKeyEvent.bind(this);
+
+        this.referenceElement.addEventListener("focus", this.boundScheduleShow);
+        this.referenceElement.addEventListener("blur", this.boundHide);
+        document.addEventListener("keyup", this.boundHideOnEscapeKeyEvent);
+    }
+    /**
+     * Unbinds all mouse events
+     */
+     private unbindKeyboardEvents() {
+        this.referenceElement.removeEventListener("focus", this.boundScheduleShow);
+        this.referenceElement.removeEventListener("blur", this.boundHide);
+        document.removeEventListener("keyup", this.boundHideOnEscapeKeyEvent);
+    }
+
 
     /**
      * Binds mouse events to show/hide on reference element hover
      */
     private bindMouseEvents() {
         this.boundScheduleShow = this.boundScheduleShow || this.scheduleShow.bind(this);
-        this.boundHide = this.boundHide || this.hide.bind(this);
+        this.boundHide = this.boundHide || this.scheduleHide.bind(this);
+        this.boundClearActiveTimeout = this.boundClearActiveTimeout || this.clearActiveTimeout.bind(this);
 
         this.referenceElement.addEventListener("mouseover", this.boundScheduleShow);
         this.referenceElement.addEventListener("mouseout", this.boundHide);
-        this.referenceElement.addEventListener("focus", this.boundScheduleShow);
-        this.referenceElement.addEventListener("blur", this.boundHide);
+        this.popoverElement.addEventListener("mouseover", this.boundClearActiveTimeout);
+        this.popoverElement.addEventListener("mouseout", this.boundHide);
     }
 
     /**
@@ -190,6 +227,8 @@ export class TooltipController extends BasePopoverController {
         this.referenceElement.removeEventListener("mouseout", this.boundHide);
         this.referenceElement.removeEventListener("focus", this.boundScheduleShow);
         this.referenceElement.removeEventListener("blur", this.boundHide);
+        this.popoverElement.removeEventListener("mouseover", this.boundClearActiveTimeout);
+        this.popoverElement.removeEventListener("mouseout", this.boundHide);
     }
 
     /**
@@ -231,16 +270,16 @@ export function setTooltipText(element: Element, text: string, options?: Tooltip
  * @param options Options for rendering the tooltip.
  */
 function applyOptionsAndTitleAttributes(element: Element, options?: TooltipOptions) {
-
     if (options && options.placement) {
         element.setAttribute("data-s-tooltip-placement", options.placement);
     }
 
-    var controller = <TooltipController>Stacks.application.getControllerForElementAndIdentifier(element, "s-tooltip");
+    const controller = <TooltipController>Stacks.application.getControllerForElementAndIdentifier(element, "s-tooltip");
 
     if (controller) {
         controller.applyTitleAttributes();
     } else {
-        element.setAttribute("data-controller", element.getAttribute("data-controller") + " s-tooltip");
+        const dataController = element.getAttribute("data-controller");
+        element.setAttribute("data-controller", `${dataController ? dataController : ""} s-tooltip`);
     }
 }

package/lib/ts/stacks.ts

@@ -9,7 +9,7 @@ export class StacksApplication extends Stimulus.Application {
         const definitions = Array.isArray(head) ? head : [head, ...rest];
 
         for (const definition of definitions) {
-            var hasPrefix = /^s-/.test(definition.identifier);
+            const hasPrefix = /^s-/.test(definition.identifier);
             if (StacksApplication._initializing && !hasPrefix) {
                 throw "Stacks-created Stimulus controller names must start with \"s-\".";
             }
@@ -23,6 +23,7 @@ export class StacksApplication extends Stimulus.Application {
 
     static start(element?: Element, schema?: Stimulus.Schema): StacksApplication {
         const application = new StacksApplication(element, schema);
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         application.start();
         return application;
     }
@@ -46,13 +47,14 @@ export class StacksController extends Stimulus.Controller {
     };
     protected triggerEvent<T>(eventName: string, detail?: T, optionalElement?: Element) {
         const namespacedName = this.identifier + ":" + eventName;
-        var event : CustomEvent<T>;
+        let event : CustomEvent<T>;
         try {
             event = new CustomEvent(namespacedName, {bubbles: true, cancelable: true, detail: detail});
         } catch (ex) {
             // Internet Explorer
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             event = document.createEvent("CustomEvent");
-            event.initCustomEvent(namespacedName, true, true, detail!);
+            event.initCustomEvent(namespacedName, true, true, detail);
         }
         (optionalElement || this.element).dispatchEvent(event);
         return event;
@@ -66,11 +68,13 @@ export interface ControllerDefinition {
     targets?: string[];
 }
 export function createController(controllerDefinition: ControllerDefinition): typeof StacksController {
+    // eslint-disable-next-line no-prototype-builtins
     const Controller = controllerDefinition.hasOwnProperty("targets")
         ? class Controller extends StacksController { static targets = controllerDefinition.targets! }
         : class Controller extends StacksController {};
 
-    for (var prop in controllerDefinition) {
+    for (const prop in controllerDefinition) {
+        // eslint-disable-next-line no-prototype-builtins
         if (prop !== "targets" && controllerDefinition.hasOwnProperty(prop)) {
             Object.defineProperty(
                 Controller.prototype,

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "1.3.0",
+  "version": "1.3.1",
   "files": [
     "dist",
     "lib"
@@ -30,27 +30,27 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@popperjs/core": "^2.11.5",
+    "@popperjs/core": "^2.11.6",
     "stimulus": "^2.0.0"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^1.0.1",
+    "@11ty/eleventy": "^1.0.2",
     "@highlightjs/cdn-assets": "^11.6.0",
-    "@stackoverflow/stacks-editor": "^0.6.1",
-    "@stackoverflow/stacks-icons": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.31.0",
-    "@typescript-eslint/parser": "^5.31.0",
-    "backstopjs": "^6.1.0",
+    "@stackoverflow/stacks-editor": "^0.7.0",
+    "@stackoverflow/stacks-icons": "^3.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.35.1",
+    "@typescript-eslint/parser": "^5.35.1",
+    "backstopjs": "^6.1.1",
     "concurrently": "^7.3.0",
     "css-loader": "^6.7.1",
-    "cssnano": "^5.1.12",
+    "cssnano": "^5.1.13",
     "docsearch.js": "^2.6.3",
     "eleventy-plugin-highlightjs": "^1.1.0",
     "eleventy-plugin-nesting-toc": "^1.3.0",
-    "eslint": "^8.20.0",
+    "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-no-unsanitized": "^4.0.1",
-    "jquery": "^3.6.0",
+    "jquery": "^3.6.1",
     "less-loader": "^11.0.0",
     "list.js": "^2.3.1",
     "markdown-it": "^13.0.1",
@@ -58,13 +58,13 @@
     "postcss-less": "^6.0.0",
     "postcss-loader": "^7.0.1",
     "prettier": "^2.7.1",
-    "stylelint": "^14.9.1",
-    "stylelint-config-recommended": "^8.0.0",
-    "stylelint-config-standard": "^26.0.0",
-    "terser-webpack-plugin": "^5.3.3",
+    "stylelint": "^14.11.0",
+    "stylelint-config-recommended": "^9.0.0",
+    "stylelint-config-standard": "^28.0.0",
+    "terser-webpack-plugin": "^5.3.5",
     "ts-loader": "^9.3.1",
-    "typescript": "^4.7.4",
-    "webpack": "^5.73.0",
+    "typescript": "^4.8.2",
+    "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-merge": "^5.8.0"
   },