abledom 0.6.5 → 0.7.0

package/dist/index.js

@@ -56,6 +56,11 @@ var ValidationRule = class {
     __publicField(this, "_window");
     __publicField(this, "_exceptions", []);
     __publicField(this, "_onIssue");
+    /**
+     * A short friendly group name for grouping issues in the UI.
+     * If undefined, the issue will not be grouped.
+     */
+    __publicField(this, "groupName");
   }
   static init(instance, window, onIssue) {
     instance._window = window;
@@ -100,7 +105,7 @@ var ValidationRule = class {
 };
 
 // inline-file:/Users/marata/tmp/abledom/src/ui/ui.css
-var ui_default = "#abledom-report {\n  bottom: 20px;\n  display: flex;\n  flex-direction: column;\n  left: 10px;\n  max-height: 80%;\n  max-width: 60%;\n  padding: 4px 8px;\n  position: fixed;\n  z-index: 100500;\n}\n\n#abledom-report :focus-visible {\n  outline: 3px solid red;\n  mix-blend-mode: difference;\n}\n\n#abledom-report.abledom-align-left {\n  left: 10px;\n  right: auto;\n}\n\n#abledom-report.abledom-align-right {\n  left: auto;\n  right: 10px;\n}\n\n#abledom-report.abledom-align-bottom {\n  bottom: 20px;\n  top: auto;\n}\n\n#abledom-report.abledom-align-top {\n  /* flex-direction: column-reverse; */\n  bottom: auto;\n  top: 10px;\n}\n\n.abledom-menu-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-block;\n  margin: 2px auto 2px 0;\n}\n\n#abledom-report.abledom-align-right .abledom-menu-container {\n  margin: 2px 0 2px auto;\n}\n\n.abledom-menu {\n  background-color: rgba(140, 10, 121, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n\n.abledom-menu .issues-count {\n  margin: 0 8px;\n  display: inline-block;\n}\n\n.abledom-menu .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-menu .align-button {\n  border-right-color: rgba(0, 0, 0, 0.4);\n  border-radius: 0;\n  margin: 0;\n}\n\n.abledom-menu .align-button:active,\n#abledom-report .pressed {\n  background: linear-gradient(\n    180deg,\n    rgba(130, 130, 130, 1) 0%,\n    rgba(180, 180, 180, 1) 100%\n  );\n}\n\n.abledom-menu .align-button-first {\n  border-top-left-radius: 6px;\n  border-bottom-left-radius: 6px;\n  margin-left: 8px;\n}\n.abledom-menu .align-button-last {\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n  border-right-color: rgba(255, 255, 255, 0.4);\n}\n\n.abledom-issues-container {\n  overflow: auto;\n  max-height: calc(100vh - 100px);\n}\n\n#abledom-report.abledom-align-right .abledom-issues-container {\n  text-align: right;\n}\n\n.abledom-issue-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-flex;\n  margin: 2px 0;\n}\n\n.abledom-issue {\n  background-color: rgba(164, 2, 2, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n.abledom-issue_warning {\n  background-color: rgba(163, 82, 1, 0.7);\n}\n.abledom-issue_info {\n  background-color: rgba(0, 0, 255, 0.7);\n}\n\n.abledom-issue .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-issue .button:hover {\n  opacity: 0.7;\n}\n\n.abledom-issue .button.close {\n  background: none;\n  border-color: transparent;\n  color: #fff;\n  margin: 0;\n}\n";
+var ui_default = "#abledom-report {\n  bottom: 20px;\n  display: flex;\n  flex-direction: column;\n  left: 10px;\n  max-height: 80%;\n  max-width: 60%;\n  padding: 4px 8px;\n  position: fixed;\n  z-index: 100500;\n}\n\n#abledom-report :focus-visible {\n  mix-blend-mode: difference;\n  outline: 3px solid red;\n}\n\n#abledom-report.abledom-align-left {\n  left: 10px;\n  right: auto;\n}\n\n#abledom-report.abledom-align-right {\n  left: auto;\n  right: 10px;\n}\n\n#abledom-report.abledom-align-bottom {\n  bottom: 20px;\n  top: auto;\n}\n\n#abledom-report.abledom-align-top {\n  /* flex-direction: column-reverse; */\n  bottom: auto;\n  top: 10px;\n}\n\n.abledom-menu-container {\n  margin: 2px auto 2px 0;\n  padding: 8px 0;\n}\n\n#abledom-report.abledom-align-right .abledom-menu-container {\n  margin: 2px 0 2px auto;\n}\n\n.abledom-menu-wrapper {\n  backdrop-filter: blur(3px);\n  border-radius: 20px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n}\n\n.abledom-menu {\n  background-color: rgba(140, 10, 121, 0.7);\n  border-radius: 20px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 6px;\n  position: relative;\n}\n\n.abledom-menu .issues-count {\n  cursor: pointer;\n  display: inline-block;\n  margin: 0 8px;\n}\n\n.abledom-menu-container .controls-wrapper {\n  display: none;\n  left: calc(100% - 28px);\n  position: absolute;\n  top: -9px;\n}\n\n.abledom-menu .controls-wrapper {\n  padding: 8px;\n}\n\n.abledom-menu .controls {\n  background: #fff;\n  border-radius: 4px;\n  border: 1px solid #ddd;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);\n  display: flex;\n  margin-left: 30px;\n  padding: 6px;\n}\n\n.abledom-menu-container:hover .controls-wrapper {\n  display: block;\n}\n\n#abledom-report.abledom-align-right .controls-wrapper {\n  left: auto;\n  right: calc(100% - 28px);\n}\n\n#abledom-report.abledom-align-right .controls {\n  left: auto;\n  margin: 0 30px 0 0;\n  right: calc(100%);\n}\n\n.abledom-menu .button {\n  all: unset;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  color: #000;\n  cursor: pointer;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-menu .align-button {\n  border-radius: 0;\n  border-right-color: rgba(0, 0, 0, 0.4);\n  margin: 0;\n}\n\n.abledom-menu .align-button:active,\n#abledom-report .pressed {\n  background: linear-gradient(\n    180deg,\n    rgba(130, 130, 130, 1) 0%,\n    rgba(180, 180, 180, 1) 100%\n  );\n}\n\n.abledom-menu .align-button-first {\n  border-bottom-left-radius: 6px;\n  border-top-left-radius: 6px;\n  margin-left: 8px;\n}\n.abledom-menu .align-button-last {\n  border-bottom-right-radius: 6px;\n  border-right-color: rgba(255, 255, 255, 0.4);\n  border-top-right-radius: 6px;\n}\n\n.abledom-issues-container {\n  max-height: calc(100vh - 100px);\n  overflow: auto;\n}\n\n#abledom-report.abledom-align-right .abledom-issues-container {\n  text-align: right;\n}\n\n.abledom-issue-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-flex;\n  margin-top: 5px;\n}\n\n.abledom-issue-group-issues {\n  border-bottom-left-radius: 10px;\n  border-left: 3px solid rgba(164, 2, 2, 0.7);\n  margin-left: 15px;\n  padding-left: 10px;\n}\n\n#abledom-report.abledom-align-right .abledom-issue-group-issues {\n  border-bottom-right-radius: 10px;\n  border-left: none;\n  border-right: 3px solid rgba(164, 2, 2, 0.7);\n  margin-left: 0;\n  margin-right: 15px;\n  padding-left: 0;\n  padding-right: 10px;\n}\n\n.abledom-issue-group-title {\n  background-color: rgba(164, 2, 2, 0.7);\n  color: white;\n}\n\n.abledom-issue-group-count {\n  font-size: 14px;\n  margin: 0 4px;\n  opacity: 0.8;\n}\n\n.abledom-issue {\n  border-radius: 8px;\n  color: #fff;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n  text-align: left;\n}\n.abledom-issue_warning {\n  background-color: rgba(163, 82, 1, 0.7);\n}\n.abledom-issue_info {\n  background-color: rgba(0, 0, 255, 0.7);\n}\n\n.abledom-issue-group {\n  margin: 5px 0 0 0;\n}\n\n.abledom-issue-group-issues .abledom-issue {\n  background-color: rgba(198, 198, 198, 0.7);\n  border: 1px solid #ccc;\n  color: #000;\n}\n\n.abledom-issue-group-issues .abledom-issue .button.close,\n.abledom-issue-group-issues .abledom-issue .button.help {\n  color: #000;\n}\n\n.abledom-issue .button {\n  all: unset;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  color: #000;\n  cursor: pointer;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-issue .button:hover {\n  opacity: 0.7;\n}\n\n.abledom-issue .button.close {\n  background: none;\n  border-color: transparent;\n  color: #fff;\n  margin: 0;\n}\n\n.abledom-issue .button.help {\n  background: none;\n  border-color: transparent;\n  color: #fff;\n  margin: 0 0 0 2px;\n}\n\n.abledom-issue-group-count {\n  background-color: #444;\n  border-radius: 10px;\n  border: 1px solid black;\n  box-sizing: border-box;\n  color: #fff;\n  display: inline-block;\n  height: 20px;\n  min-width: 20px;\n  padding: 0 5px;\n  text-align: center;\n}\n\n.abledom-issue .button.toggle {\n  display: flex;\n  line-height: 20px;\n}\n\n.abledom-issue .button.toggle svg:nth-child(1) {\n  display: none;\n}\n\n.abledom-issue .button.toggle.collapsed svg:nth-child(1) {\n  display: inline;\n}\n.abledom-issue .button.toggle.collapsed svg:nth-child(2) {\n  display: none;\n}\n";
 
 // inline-file:/Users/marata/tmp/abledom/src/ui/highlighter.css
 var highlighter_default = ".abledom-highlight {\n  background-color: yellow;\n  box-sizing: border-box;\n  display: none;\n  opacity: 0.6;\n  position: fixed;\n  z-index: 100499;\n}\n\n.abledom-highlight-border1 {\n  border-top: 2px solid red;\n  border-bottom: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  top: -2px;\n  width: calc(100% + 20px);\n  height: calc(100% + 4px);\n  margin: 0 -10px;\n}\n\n.abledom-highlight-border2 {\n  border-left: 2px solid red;\n  border-right: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  width: calc(100% + 4px);\n  left: -2px;\n  height: calc(100% + 20px);\n  margin: -10px 0;\n}\n";
@@ -113,27 +118,29 @@ var DOMBuilder = class {
     this._doc = parent.ownerDocument;
     this._stack = [parent];
   }
-  openTag(tagName, attributes, callback, namespace) {
+  openTag(tagName, attributes, callback, namespace, skip) {
     var _a, _b;
     const parent = this._stack[0];
-    const element = namespace ? (_a = this._doc) == null ? void 0 : _a.createElementNS(namespace, tagName) : (_b = this._doc) == null ? void 0 : _b.createElement(tagName);
-    if (parent && element) {
-      element.__abledomui = true;
-      if (attributes) {
-        for (const [key, value] of Object.entries(attributes)) {
-          if (key === "class") {
-            element.className = value;
-          } else if (key === "style") {
-            element.style.cssText = value;
-          } else {
-            element.setAttribute(key, value);
+    const element = skip ? null : namespace ? (_a = this._doc) == null ? void 0 : _a.createElementNS(namespace, tagName) : (_b = this._doc) == null ? void 0 : _b.createElement(tagName);
+    if (parent !== void 0) {
+      if (parent && element) {
+        element.__abledomui = true;
+        if (attributes) {
+          for (const [key, value] of Object.entries(attributes)) {
+            if (key === "class") {
+              element.className = value;
+            } else if (key === "style") {
+              element.style.cssText = value;
+            } else {
+              element.setAttribute(key, value);
+            }
           }
         }
+        if (callback) {
+          callback(element);
+        }
+        parent.appendChild(element);
       }
-      if (callback) {
-        callback(element);
-      }
-      parent.appendChild(element);
       this._stack.unshift(element);
     }
     return this;
@@ -155,7 +162,8 @@ var DOMBuilder = class {
     return this;
   }
   element(callback) {
-    callback(this._stack[0]);
+    const el = this._stack[0];
+    el && callback(el);
     return this;
   }
 };
@@ -328,8 +336,31 @@ var alignbottomleft_default = (function buildSVG12(parent) {
   return parent.firstElementChild;
 });
 
+// inline-file:/Users/marata/tmp/abledom/src/ui/chevrondown.svg
+var chevrondown_default = (function buildSVG13(parent) {
+  const builder = new DOMBuilder(parent);
+  builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
+  builder.openTag("polyline", { "points": "6 9 12 15 18 9" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.closeTag();
+  return parent.firstElementChild;
+});
+
+// inline-file:/Users/marata/tmp/abledom/src/ui/chevronright.svg
+var chevronright_default = (function buildSVG14(parent) {
+  const builder = new DOMBuilder(parent);
+  builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
+  builder.openTag("polyline", { "points": "9 6 15 12 9 18" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.closeTag();
+  return parent.firstElementChild;
+});
+
 // src/ui/ui.ts
 var pressedClass = "pressed";
+function getIssueTypeClass(type) {
+  return type === 2 /* Warning */ ? " abledom-issue_warning" : type === 3 /* Info */ ? " abledom-issue_info" : "";
+}
 var IssueUI = class {
   constructor(win, core, rule, issuesUI) {
     __publicField(this, "_core");
@@ -337,6 +368,7 @@ var IssueUI = class {
     __publicField(this, "_wrapper");
     __publicField(this, "_rule");
     __publicField(this, "_onToggle");
+    __publicField(this, "_appended", false);
     __publicField(this, "isHidden", false);
     this._core = core;
     this._rule = rule;
@@ -345,35 +377,62 @@ var IssueUI = class {
       this._wrapper = win.document.createElement(
         "div"
       );
+      this._wrapper.__ableDOMIssueUI = this;
+      this._wrapper.className = "abledom-issue-container-wrapper";
     }
     issuesUI.addIssue(this);
   }
   static setOnToggle(instance, onToggle) {
     instance._onToggle = onToggle;
   }
-  static getElement(instance) {
-    return instance._wrapper;
+  static setAppended(instance) {
+    instance._appended = true;
   }
   update(issue) {
-    const rule = this._rule;
     const wrapper = this._wrapper;
-    const element = issue.element;
     if (!wrapper) {
       return;
     }
+    this._appendToIssueContainer(issue);
     wrapper.__abledomui = true;
     wrapper.textContent = "";
+    this._renderIssueContent(wrapper, issue);
+  }
+  _appendToIssueContainer(issue) {
+    var _a, _b, _c;
+    if (!this._appended) {
+      return;
+    }
+    const wrapper = this._wrapper;
+    const rule = this._rule;
+    if (!wrapper) {
+      return;
+    }
+    const issueContainer = (_a = this._issuesUI) == null ? void 0 : _a.getIssueContainer(
+      rule.type,
+      rule.groupName,
+      issue.help
+    );
+    if (!issueContainer || wrapper.parentElement === issueContainer) {
+      return;
+    }
+    issueContainer.appendChild(wrapper);
+    if (!this.isHidden) {
+      if ((_b = issueContainer.parentElement) == null ? void 0 : _b.classList.contains("abledom-issue-group")) {
+        issueContainer.parentElement.style.display = "block";
+      }
+    } else {
+      this.toggle(false, true);
+    }
+    (_c = this._issuesUI) == null ? void 0 : _c.syncGroupIssueCounts();
+  }
+  _renderIssueContent(wrapper, issue) {
+    const rule = this._rule;
+    const element = issue.element;
     new DOMBuilder(wrapper).openTag("div", { class: "abledom-issue-container" }, (container) => {
-      container.onmouseenter = () => {
-        var _a;
-        element && ((_a = this._issuesUI) == null ? void 0 : _a.highlight(element));
-      };
-      container.onmouseleave = () => {
-        var _a;
-        (_a = this._issuesUI) == null ? void 0 : _a.highlight(null);
-      };
+      this._bindIssueContainerHover(container, element);
     }).openTag("div", {
-      class: `abledom-issue${rule.type === 2 /* Warning */ ? " abledom-issue_warning" : rule.type === 3 /* Info */ ? " abledom-issue_info" : ""}`
+      class: `abledom-issue${getIssueTypeClass(rule.type)}`
     }).openTag(
       "button",
       {
@@ -381,21 +440,7 @@ var IssueUI = class {
         title: "Log to Console"
       },
       (logButton) => {
-        logButton.onclick = () => {
-          const { id, message, element: element2, rel, help, ...extra } = issue;
-          this._core.log(
-            "AbleDOM: ",
-            "\nid:",
-            id,
-            "\nmessage:",
-            message,
-            "\nelement:",
-            element2,
-            ...rel ? ["\nrelative:", rel] : [],
-            ...help ? ["\nhelp:", help] : [],
-            ...Object.keys(extra).length > 0 ? ["\nextra:", extra] : []
-          );
-        };
+        this._bindLogButton(logButton, issue);
       }
     ).element(log_default).closeTag().openTag(
       "button",
@@ -405,16 +450,10 @@ var IssueUI = class {
         title: "Scroll element into view"
       },
       (revealButton) => {
-        const element2 = issue.element;
-        if (element2) {
-          revealButton.onclick = () => {
-            var _a;
-            (_a = this._issuesUI) == null ? void 0 : _a.highlight(element2, true);
-          };
-        } else {
-          revealButton.style.display = "none";
-        }
-      }
+        this._bindRevealButton(revealButton, issue);
+      },
+      void 0,
+      !issue.element
     ).element(reveal_default).closeTag().openTag(
       "button",
       {
@@ -422,33 +461,21 @@ var IssueUI = class {
         title: "Report bug"
       },
       (bugReportButton) => {
-        var _a, _b;
-        const bugReport = (_a = this._issuesUI) == null ? void 0 : _a.bugReport;
-        if (bugReport == null ? void 0 : bugReport.isVisible(issue)) {
-          const title = (_b = bugReport.getTitle) == null ? void 0 : _b.call(bugReport, issue);
-          if (title) {
-            bugReportButton.title = title;
-          }
-          bugReportButton.onclick = () => {
-            bugReport.onClick(issue);
-          };
-        } else {
-          bugReportButton.style.display = "none";
-        }
+        this._bindBugReportButton(bugReportButton, issue);
       }
     ).element(bug_default).closeTag().text(issue.message).openTag(
       "a",
       {
-        class: "button close",
+        class: "button help",
         href: issue.help || "/",
         title: "Open help",
         target: "_blank"
       },
       (help) => {
-        if (!issue.help) {
-          help.style.display = "none";
-        }
-      }
+        this._bindHelpLink(help, issue.help);
+      },
+      void 0,
+      !!rule.groupName
     ).element(help_default).closeTag().openTag(
       "button",
       {
@@ -456,27 +483,116 @@ var IssueUI = class {
         title: "Hide"
       },
       (closeButton) => {
-        closeButton.onclick = () => {
-          var _a;
-          this.toggle(false);
-          (_a = this._issuesUI) == null ? void 0 : _a.highlight(null);
-        };
+        this._bindCloseButton(closeButton);
       }
     ).element(close_default).closeTag().closeTag().closeTag();
   }
+  _bindIssueContainerHover(container, element) {
+    container.onmouseenter = () => {
+      var _a;
+      element && ((_a = this._issuesUI) == null ? void 0 : _a.highlight(element));
+    };
+    container.onmouseleave = () => {
+      var _a;
+      (_a = this._issuesUI) == null ? void 0 : _a.highlight(null);
+    };
+  }
+  _bindLogButton(button, issue) {
+    button.onclick = () => {
+      const { id, message, element, rel, help, ...extra } = issue;
+      this._core.log(
+        "AbleDOM: ",
+        "\nid:",
+        id,
+        "\nmessage:",
+        message,
+        "\nelement:",
+        element,
+        ...rel ? ["\nrelative:", rel] : [],
+        ...help ? ["\nhelp:", help] : [],
+        ...Object.keys(extra).length > 0 ? ["\nextra:", extra] : []
+      );
+    };
+  }
+  _bindRevealButton(button, issue) {
+    const element = issue.element;
+    if (element) {
+      button.onclick = () => {
+        var _a;
+        (_a = this._issuesUI) == null ? void 0 : _a.highlight(element, true);
+      };
+    }
+  }
+  _bindBugReportButton(button, issue) {
+    var _a, _b;
+    const bugReport = (_a = this._issuesUI) == null ? void 0 : _a.bugReport;
+    if (bugReport == null ? void 0 : bugReport.isVisible(issue)) {
+      const title = (_b = bugReport.getTitle) == null ? void 0 : _b.call(bugReport, issue);
+      if (title) {
+        button.title = title;
+      }
+      button.onclick = () => {
+        bugReport.onClick(issue);
+      };
+    } else {
+      button.style.display = "none";
+    }
+  }
+  _bindHelpLink(help, issueHelp) {
+    if (!issueHelp) {
+      help.style.display = "none";
+    }
+  }
+  _bindCloseButton(button) {
+    button.onclick = () => {
+      var _a;
+      this.toggle(false);
+      (_a = this._issuesUI) == null ? void 0 : _a.highlight(null);
+    };
+  }
   toggle(show, initial = false) {
     var _a;
     if (!this._wrapper) {
       return;
     }
-    this.isHidden = !show;
+    if (show === void 0) {
+      this.isHidden = !this.isHidden;
+      show = !this.isHidden;
+    } else {
+      this.isHidden = !show;
+    }
     if (!initial) {
-      (_a = this._onToggle) == null ? void 0 : _a.call(this, this, show);
-      if (!this._rule.anchored && !show) {
+      (_a = this._onToggle) == null ? void 0 : _a.call(this, this, !this.isHidden);
+      if (!this._rule.anchored && this.isHidden) {
         this.dispose();
       }
     }
     this._wrapper.style.display = show ? "block" : "none";
+    this._syncGroupVisibility(!!show);
+  }
+  _syncGroupVisibility(show) {
+    const wrapper = this._wrapper;
+    if (!wrapper) {
+      return;
+    }
+    const potentiallyGroupIssuesElement = wrapper.parentElement;
+    const potentiallyGroupElement = potentiallyGroupIssuesElement == null ? void 0 : potentiallyGroupIssuesElement.parentElement;
+    if (!potentiallyGroupIssuesElement || !(potentiallyGroupElement == null ? void 0 : potentiallyGroupElement.classList.contains("abledom-issue-group"))) {
+      return;
+    }
+    if (show) {
+      potentiallyGroupElement.style.display = "block";
+      return;
+    }
+    if (potentiallyGroupElement.style.display !== "none" && Array.prototype.every.call(
+      potentiallyGroupIssuesElement.children,
+      (el) => {
+        var _a;
+        return el.__ableDOMIssueUI ? (_a = el.__ableDOMIssueUI) == null ? void 0 : _a.isHidden : true;
+      }
+    )) {
+      potentiallyGroupElement.style.display = "none";
+    }
   }
   dispose() {
     var _a, _b;
@@ -500,6 +616,8 @@ var IssuesUI = class {
     __publicField(this, "_alignBottomRightButton");
     __publicField(this, "_isMuted", false);
     __publicField(this, "_issues", /* @__PURE__ */ new Set());
+    __publicField(this, "_issueGroupContainers", {});
+    __publicField(this, "_issueGroupCountElements", {});
     __publicField(this, "_getHighlighter");
     __publicField(this, "bugReport");
     __publicField(this, "headless");
@@ -511,31 +629,54 @@ var IssuesUI = class {
       return;
     }
     const doc = win.document;
-    const container = this._container = doc.createElement("div");
+    const container = this._container = this._createRootContainer(doc);
+    this._issuesContainer = this._createIssuesContainer(doc, container);
+    const menuElement = this._menuElement = this._createMenuContainer(
+      doc,
+      container
+    );
+    this._buildMenu(menuElement);
+    doc.body.appendChild(container);
+  }
+  _createRootContainer(doc) {
+    const container = doc.createElement("div");
     container.__abledomui = true;
     container.id = "abledom-report";
     const style = doc.createElement("style");
     style.type = "text/css";
     style.appendChild(doc.createTextNode(ui_default));
     container.appendChild(style);
-    const issuesContainer = this._issuesContainer = doc.createElement("div");
+    return container;
+  }
+  _createIssuesContainer(doc, container) {
+    const issuesContainer = doc.createElement(
+      "div"
+    );
     issuesContainer.__abledomui = true;
     issuesContainer.className = "abledom-issues-container";
     container.appendChild(issuesContainer);
-    const menuElement = this._menuElement = doc.createElement("div");
+    return issuesContainer;
+  }
+  _createMenuContainer(doc, container) {
+    const menuElement = doc.createElement(
+      "div"
+    );
     menuElement.__abledomui = true;
     menuElement.className = "abledom-menu-container";
     container.appendChild(menuElement);
-    new DOMBuilder(menuElement).openTag("div", { class: "abledom-menu" }).openTag(
+    return menuElement;
+  }
+  _buildMenu(menuElement) {
+    new DOMBuilder(menuElement).openTag("div", { class: "abledom-menu-wrapper" }).openTag("div", { class: "abledom-menu" }).openTag(
       "span",
       {
         class: "issues-count",
         title: "Number of issues"
       },
       (issueCountElement) => {
-        this._issueCountElement = issueCountElement;
+        this._bindIssueCountElement(issueCountElement);
       }
-    ).closeTag().openTag(
+    ).closeTag().openTag("div", { class: "controls-wrapper" }).openTag("div", { class: "controls" }).openTag(
       "button",
       {
         class: "button",
@@ -543,9 +684,7 @@ var IssuesUI = class {
       },
       (showAllButton) => {
         this._showAllButton = showAllButton;
-        showAllButton.onclick = () => {
-          this.showAll();
-        };
+        this._bindToggleAllButton(showAllButton, true);
       }
     ).element(showall_default).closeTag().openTag(
       "button",
@@ -555,9 +694,7 @@ var IssuesUI = class {
       },
       (hideAllButton) => {
         this._hideAllButton = hideAllButton;
-        hideAllButton.onclick = () => {
-          this.hideAll();
-        };
+        this._bindToggleAllButton(hideAllButton, false);
       }
     ).element(hideall_default).closeTag().openTag(
       "button",
@@ -566,14 +703,7 @@ var IssuesUI = class {
         title: "Mute newly appearing issues"
       },
       (muteButton) => {
-        muteButton.onclick = () => {
-          const isMuted = this._isMuted = muteButton.classList.toggle(pressedClass);
-          if (isMuted) {
-            muteButton.setAttribute("title", "Unmute newly appearing issues");
-          } else {
-            muteButton.setAttribute("title", "Mute newly appearing issues");
-          }
-        };
+        this._bindMuteButton(muteButton);
       }
     ).element(muteall_default).closeTag().openTag(
       "button",
@@ -583,9 +713,10 @@ var IssuesUI = class {
       },
       (alignBottomLeftButton) => {
         this._alignBottomLeftButton = alignBottomLeftButton;
-        alignBottomLeftButton.onclick = () => {
-          this.setUIAlignment("bottom-left" /* BottomLeft */);
-        };
+        this._bindAlignmentButton(
+          alignBottomLeftButton,
+          "bottom-left" /* BottomLeft */
+        );
       }
     ).element(alignbottomleft_default).closeTag().openTag(
       "button",
@@ -595,9 +726,7 @@ var IssuesUI = class {
       },
       (alignTopLeftButton) => {
         this._alignTopLeftButton = alignTopLeftButton;
-        alignTopLeftButton.onclick = () => {
-          this.setUIAlignment("top-left" /* TopLeft */);
-        };
+        this._bindAlignmentButton(alignTopLeftButton, "top-left" /* TopLeft */);
       }
     ).element(aligntopleft_default).closeTag().openTag(
       "button",
@@ -607,9 +736,7 @@ var IssuesUI = class {
       },
       (alignTopRightButton) => {
         this._alignTopRightButton = alignTopRightButton;
-        alignTopRightButton.onclick = () => {
-          this.setUIAlignment("top-right" /* TopRight */);
-        };
+        this._bindAlignmentButton(alignTopRightButton, "top-right" /* TopRight */);
       }
     ).element(aligntopright_default).closeTag().openTag(
       "button",
@@ -619,55 +746,89 @@ var IssuesUI = class {
       },
       (alignBottomRightButton) => {
         this._alignBottomRightButton = alignBottomRightButton;
-        alignBottomRightButton.onclick = () => {
-          this.setUIAlignment("bottom-right" /* BottomRight */);
-        };
+        this._bindAlignmentButton(
+          alignBottomRightButton,
+          "bottom-right" /* BottomRight */
+        );
       }
-    ).element(alignbottomright_default).closeTag().closeTag();
-    doc.body.appendChild(container);
+    ).element(alignbottomright_default).closeTag().closeTag().closeTag().closeTag().closeTag();
+  }
+  _bindToggleAllButton(button, show) {
+    button.onclick = () => {
+      this.toggleAll(show);
+    };
+  }
+  _bindIssueCountElement(element) {
+    this._issueCountElement = element;
+    element.onclick = () => {
+      this.toggleAll();
+    };
+  }
+  _bindMuteButton(button) {
+    button.onclick = () => {
+      const isMuted = this._isMuted = button.classList.toggle(pressedClass);
+      button.setAttribute(
+        "title",
+        isMuted ? "Unmute newly appearing issues" : "Mute newly appearing issues"
+      );
+    };
+  }
+  _bindAlignmentButton(button, alignment) {
+    button.onclick = () => {
+      this.setUIAlignment(alignment);
+    };
   }
   setUIAlignment(alignment) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (!this._container || !this._issuesContainer || !this._menuElement) {
       return;
     }
-    (_a = this._alignBottomLeftButton) == null ? void 0 : _a.classList.remove(pressedClass);
-    (_b = this._alignBottomRightButton) == null ? void 0 : _b.classList.remove(pressedClass);
-    (_c = this._alignTopLeftButton) == null ? void 0 : _c.classList.remove(pressedClass);
-    (_d = this._alignTopRightButton) == null ? void 0 : _d.classList.remove(pressedClass);
+    this._clearAlignmentButtons();
     this._container.classList.remove(
       "abledom-align-left",
       "abledom-align-right",
       "abledom-align-top",
       "abledom-align-bottom"
     );
+    const { containerClasses, issuesFirst, activeButton } = this._getAlignmentLayout(alignment);
+    activeButton == null ? void 0 : activeButton.classList.add(pressedClass);
+    this._container.classList.add(...containerClasses);
+    this._container.insertBefore(
+      this._issuesContainer,
+      issuesFirst ? this._menuElement : null
+    );
+  }
+  _clearAlignmentButtons() {
+    var _a, _b, _c, _d;
+    (_a = this._alignBottomLeftButton) == null ? void 0 : _a.classList.remove(pressedClass);
+    (_b = this._alignBottomRightButton) == null ? void 0 : _b.classList.remove(pressedClass);
+    (_c = this._alignTopLeftButton) == null ? void 0 : _c.classList.remove(pressedClass);
+    (_d = this._alignTopRightButton) == null ? void 0 : _d.classList.remove(pressedClass);
+  }
+  _getAlignmentLayout(alignment) {
     let containerClasses = [];
     let issuesFirst = false;
+    let activeButton;
     switch (alignment) {
       case "bottom-left" /* BottomLeft */:
         containerClasses = ["abledom-align-left", "abledom-align-bottom"];
         issuesFirst = true;
-        (_e = this._alignBottomLeftButton) == null ? void 0 : _e.classList.add(pressedClass);
+        activeButton = this._alignBottomLeftButton;
         break;
       case "bottom-right" /* BottomRight */:
         containerClasses = ["abledom-align-right", "abledom-align-bottom"];
         issuesFirst = true;
-        (_f = this._alignBottomRightButton) == null ? void 0 : _f.classList.add(pressedClass);
+        activeButton = this._alignBottomRightButton;
         break;
       case "top-left" /* TopLeft */:
         containerClasses = ["abledom-align-left", "abledom-align-top"];
-        (_g = this._alignTopLeftButton) == null ? void 0 : _g.classList.add(pressedClass);
+        activeButton = this._alignTopLeftButton;
         break;
       case "top-right" /* TopRight */:
         containerClasses = ["abledom-align-right", "abledom-align-top"];
-        (_h = this._alignTopRightButton) == null ? void 0 : _h.classList.add(pressedClass);
+        activeButton = this._alignTopRightButton;
         break;
     }
-    this._container.classList.add(...containerClasses);
-    this._container.insertBefore(
-      this._issuesContainer,
-      issuesFirst ? this._menuElement : null
-    );
+    return { containerClasses, issuesFirst, activeButton };
   }
   _setIssuesCount(count) {
     if (!this._menuElement) {
@@ -675,11 +836,19 @@ var IssuesUI = class {
     }
     const countElement = this._issueCountElement;
     if (countElement && count > 0) {
-      countElement.textContent = "";
-      new DOMBuilder(countElement).openTag("strong").text(`${count}`).closeTag().text(` issue${count > 1 ? "s" : ""}`);
-      this._menuElement.style.display = "block";
+      this._renderIssueCountText(countElement, count);
+      this._setMenuVisibility(true);
     } else {
-      this._menuElement.style.display = "none";
+      this._setMenuVisibility(false);
+    }
+  }
+  _renderIssueCountText(countElement, count) {
+    countElement.textContent = "";
+    new DOMBuilder(countElement).openTag("strong").text(`${count}`).closeTag().text(` issue${count > 1 ? "s" : ""}`);
+  }
+  _setMenuVisibility(visible) {
+    if (this._menuElement) {
+      this._menuElement.style.display = visible ? "block" : "none";
     }
   }
   _setShowHideButtonsVisibility() {
@@ -688,9 +857,14 @@ var IssuesUI = class {
     if (!showAllButton || !hideAllButton) {
       return;
     }
+    const { allHidden, allVisible } = this._getIssueVisibilityState();
+    hideAllButton.style.display = allHidden ? "none" : "";
+    showAllButton.style.display = allVisible ? "none" : "";
+  }
+  _getIssueVisibilityState() {
     let allHidden = true;
     let allVisible = true;
-    for (let issue of this._issues) {
+    for (const issue of this._issues) {
       if (issue.isHidden) {
         allVisible = false;
       } else {
@@ -700,8 +874,11 @@ var IssuesUI = class {
         break;
       }
     }
-    hideAllButton.style.display = allHidden ? "none" : "block";
-    showAllButton.style.display = allVisible ? "none" : "block";
+    return { allHidden, allVisible };
+  }
+  _syncMenuState() {
+    this._setIssuesCount(this._issues.size);
+    this._setShowHideButtonsVisibility();
   }
   addIssue(issue) {
     if (this._issues.has(issue)) {
@@ -717,32 +894,134 @@ var IssuesUI = class {
     if (this._isMuted) {
       issue.toggle(false, true);
     }
-    const issueUIWraper = IssueUI.getElement(issue);
-    issueUIWraper && this._issuesContainer.appendChild(issueUIWraper);
+    IssueUI.setAppended(issue);
     IssueUI.setOnToggle(issue, () => {
       this._setShowHideButtonsVisibility();
     });
-    this._setIssuesCount(this._issues.size);
-    this._setShowHideButtonsVisibility();
+    this._syncMenuState();
+  }
+  getIssueContainer(type, groupName, helpLink) {
+    if (!this._issuesContainer) {
+      throw new Error("IssuesUI is not initialized");
+    }
+    if (!groupName) {
+      return this._issuesContainer;
+    }
+    let groupContainer = this._issueGroupContainers[groupName];
+    if (!groupContainer) {
+      groupContainer = this._createIssueGroup(groupName, type, helpLink);
+    }
+    return groupContainer;
+  }
+  syncGroupIssueCounts() {
+    this._updateGroupIssueCounts();
+  }
+  _createIssueGroup(groupName, type, helpLink) {
+    if (!this._issuesContainer) {
+      throw new Error("IssuesUI is not initialized");
+    }
+    let groupContainer;
+    new DOMBuilder(this._issuesContainer).openTag("div", { class: "abledom-issue-group" }).openTag("div", {
+      class: `abledom-issue-group-title abledom-issue${getIssueTypeClass(type)}`
+    }).openTag(
+      "button",
+      {
+        class: "button toggle collapsed",
+        title: "Toggle group"
+      },
+      (toggleButton) => {
+        this._bindGroupToggleButton(toggleButton, () => groupContainer);
+      }
+    ).element(chevronright_default).element(chevrondown_default).openTag("span", { class: "abledom-issue-group-count" }, (countEl) => {
+      this._issueGroupCountElements[groupName] = countEl;
+    }).closeTag().closeTag().text(groupName).openTag(
+      "a",
+      {
+        class: "button help",
+        href: helpLink || "/",
+        title: "Open help",
+        target: "_blank"
+      },
+      (help) => {
+        this._hideHelpLinkIfMissing(help, helpLink);
+      }
+    ).element(help_default).closeTag().openTag(
+      "button",
+      {
+        class: "button close",
+        title: "Hide"
+      },
+      (closeButton) => {
+        this._bindGroupCloseButton(closeButton, () => groupContainer);
+      }
+    ).element(close_default).closeTag().closeTag().openTag("div", { class: "abledom-issue-group-issues" }, (element) => {
+      this._issueGroupContainers[groupName] = groupContainer = element;
+      groupContainer.style.display = "none";
+    }).closeTag().closeTag();
+    if (!groupContainer) {
+      throw new Error("Issue group container was not created");
+    }
+    return groupContainer;
+  }
+  _bindGroupToggleButton(button, getGroupContainer) {
+    let isCollapsed = true;
+    button.onclick = () => {
+      isCollapsed = !isCollapsed;
+      button.classList.toggle("collapsed", isCollapsed);
+      const groupContainer = getGroupContainer();
+      if (groupContainer) {
+        groupContainer.style.display = isCollapsed ? "none" : "";
+      }
+    };
+  }
+  _bindGroupCloseButton(button, getGroupContainer) {
+    button.onclick = () => {
+      const groupContainer = getGroupContainer();
+      if (groupContainer) {
+        Array.prototype.forEach.call(
+          groupContainer.children,
+          (el) => {
+            var _a;
+            (_a = el.__ableDOMIssueUI) == null ? void 0 : _a.toggle(false);
+          }
+        );
+        this._setShowHideButtonsVisibility();
+      }
+      this.highlight(null);
+    };
+  }
+  _hideHelpLinkIfMissing(help, helpLink) {
+    if (!helpLink) {
+      help.style.display = "none";
+    }
+  }
+  _updateGroupIssueCounts() {
+    for (const [groupName, container] of Object.entries(
+      this._issueGroupContainers
+    )) {
+      const countElement = this._issueGroupCountElements[groupName];
+      if (container && countElement) {
+        const count = container.children.length;
+        countElement.textContent = `${count}`;
+      }
+    }
   }
   removeIssue(issue) {
     if (!this._issues.has(issue)) {
       return;
     }
     this._issues.delete(issue);
-    this._setIssuesCount(this._issues.size);
-    this._setShowHideButtonsVisibility();
+    this._syncMenuState();
+    this._updateGroupIssueCounts();
     this.highlight(null);
   }
-  hideAll() {
-    this._issues.forEach((issue) => {
-      issue.toggle(false);
-    });
-    this._setShowHideButtonsVisibility();
-  }
-  showAll() {
+  toggleAll(show) {
+    if (show === void 0) {
+      const { allVisible } = this._getIssueVisibilityState();
+      show = !allVisible;
+    }
     this._issues.forEach((issue) => {
-      issue.toggle(true);
+      issue.toggle(show);
     });
     this._setShowHideButtonsVisibility();
   }
@@ -836,20 +1115,12 @@ var ElementHighlighter = class {
         delete this._cancelAutoHideTimer;
       };
     }
+    this._unobserve();
     this._intersectionObserver = new IntersectionObserver(([entry]) => {
-      if (entry) {
-        const rect = entry.boundingClientRect;
-        const body = win.document.body;
-        const style = container.style;
-        if (container.parentElement !== body) {
-          body.appendChild(container);
-        }
-        style.width = `${rect.width}px`;
-        style.height = `${rect.height}px`;
-        style.top = `${rect.top}px`;
-        style.left = `${rect.left}px`;
-        container.style.display = "block";
+      if (!entry) {
+        return;
       }
+      this._renderHighlightRect(entry.boundingClientRect, win.document.body);
     });
     this._intersectionObserver.observe(element);
   }
@@ -864,6 +1135,21 @@ var ElementHighlighter = class {
     delete this._container;
     delete this._window;
   }
+  _renderHighlightRect(rect, body) {
+    const container = this._container;
+    if (!container) {
+      return;
+    }
+    if (container.parentElement !== body) {
+      body.appendChild(container);
+    }
+    const style = container.style;
+    style.width = `${rect.width}px`;
+    style.height = `${rect.height}px`;
+    style.top = `${rect.top}px`;
+    style.left = `${rect.left}px`;
+    style.display = "block";
+  }
   _hide() {
     this._container && (this._container.style.display = "none");
   }
@@ -1589,6 +1875,7 @@ var AtomicRule = class extends ValidationRule {
     __publicField(this, "type", 1 /* Error */);
     __publicField(this, "name", "atomic");
     __publicField(this, "anchored", true);
+    __publicField(this, "groupName", "Atomic violation");
   }
   accept(element) {
     return matchesSelector(element, focusableElementSelector);
@@ -1653,6 +1940,7 @@ var FocusableElementLabelRule = class extends ValidationRule {
     __publicField(this, "type", 1 /* Error */);
     __publicField(this, "name", "FocusableElementLabelRule");
     __publicField(this, "anchored", true);
+    __publicField(this, "groupName", "Missing text label");
   }
   _isAriaHidden(element) {
     return element.ownerDocument.evaluate(
@@ -1828,6 +2116,7 @@ var ContrastRule = class extends ValidationRule {
     __publicField(this, "type", 1 /* Error */);
     __publicField(this, "name", "ContrastRule");
     __publicField(this, "anchored", true);
+    __publicField(this, "groupName", "Insufficient color contrast");
   }
   accept(element) {
     if (!isElementVisible(element)) {
@@ -1917,6 +2206,7 @@ var ExistingIdRule = class extends ValidationRule {
     __publicField(this, "type", 1 /* Error */);
     __publicField(this, "name", "existing-id");
     __publicField(this, "anchored", true);
+    __publicField(this, "groupName", "Referenced element not found");
   }
   accept(element) {
     return element.hasAttribute("aria-labelledby") || element.hasAttribute("aria-describedby") || element.tagName === "LABEL" && !!element.htmlFor;
@@ -1956,6 +2246,7 @@ var FocusLostRule = class extends ValidationRule {
     __publicField(this, "type", 1 /* Error */);
     __publicField(this, "name", "focus-lost");
     __publicField(this, "anchored", false);
+    __publicField(this, "groupName", "Focus lost");
     __publicField(this, "_focusLostTimeout", 2e3);
     // For now reporting lost focus after 2 seconds of it being lost.
     __publicField(this, "_clearScheduledFocusLost");
@@ -2065,6 +2356,7 @@ var BadFocusRule = class extends ValidationRule {
     __publicField(this, "type", 1 /* Error */);
     __publicField(this, "name", "bad-focus");
     __publicField(this, "anchored", false);
+    __publicField(this, "groupName", "Bad focus");
     __publicField(this, "_lastFocusStack");
     __publicField(this, "_lastBlurStack");
     __publicField(this, "_clearCheckTimer");
@@ -2116,6 +2408,7 @@ var FindElementRule = class extends ValidationRule {
     __publicField(this, "type", 2 /* Warning */);
     __publicField(this, "name", "find-element");
     __publicField(this, "anchored", true);
+    __publicField(this, "groupName", "Element found");
     __publicField(this, "_conditions", {});
   }
   addCondition(name, condition) {
@@ -2164,6 +2457,7 @@ var RequiredParentRule = class extends ValidationRule {
     __publicField(this, "type", 1 /* Error */);
     __publicField(this, "name", "aria-required-parent");
     __publicField(this, "anchored", true);
+    __publicField(this, "groupName", "Missing required parent");
     __publicField(this, "parentRequirements", /* @__PURE__ */ new Map([
       [
         "LI",
@@ -2480,6 +2774,7 @@ var NestedInteractiveElementRule = class extends ValidationRule {
     __publicField(this, "type", 1 /* Error */);
     __publicField(this, "name", "NestedInteractiveElementRule");
     __publicField(this, "anchored", true);
+    __publicField(this, "groupName", "Nested interactive element");
   }
   _isAriaHidden(element) {
     return element.ownerDocument.evaluate(
@@ -2577,6 +2872,7 @@ var TabIndexRule = class extends ValidationRule {
     __publicField(this, "type", 2 /* Warning */);
     __publicField(this, "name", "tabindex");
     __publicField(this, "anchored", true);
+    __publicField(this, "groupName", "Positive tabindex");
   }
   accept(element) {
     return element.hasAttribute("tabindex");