abledom 0.3.0 → 0.4.0

package/dist/esm/index.js

@@ -13,11 +13,11 @@ var ValidationRule = class {
   constructor() {
     __publicField(this, "_window");
     __publicField(this, "_exceptions", []);
-    __publicField(this, "_onNotification");
+    __publicField(this, "_onIssue");
   }
-  static init(instance, window, onNotification) {
+  static init(instance, window, onIssue) {
     instance._window = window;
-    instance._onNotification = onNotification;
+    instance._onIssue = onIssue;
   }
   static dispose(instance) {
     instance.dispose();
@@ -32,7 +32,7 @@ var ValidationRule = class {
   }
   dispose() {
     this._window = void 0;
-    this._onNotification = void 0;
+    this._onIssue = void 0;
     this._exceptions = [];
   }
   addException(checkException) {
@@ -51,14 +51,14 @@ var ValidationRule = class {
   get window() {
     return this._window;
   }
-  notify(notification) {
+  notify(issue) {
     var _a;
-    (_a = this._onNotification) == null ? void 0 : _a.call(this, this, notification);
+    (_a = this._onIssue) == null ? void 0 : _a.call(this, this, issue);
   }
 };
 
 // inline-file:/Users/marata/Documents/Work/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 .notifications-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-notifications-container {\n  overflow: scroll;\n  max-height: calc(100vh - 100px);\n}\n\n#abledom-report.abledom-align-right .abledom-notifications-container {\n  text-align: right;\n}\n\n.abledom-notification-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-notification {\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-notification_warning {\n  background-color: rgba(163, 82, 1, 0.7);\n}\n.abledom-notification_info {\n  background-color: rgba(0, 0, 255, 0.7);\n}\n\n.abledom-notification .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-notification .button:hover {\n  opacity: 0.7;\n}\n\n.abledom-notification .button.close {\n  background: none;\n  border-color: transparent;\n  color: #fff;\n  margin: 0;\n}\n\n.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";
+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: scroll;\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\n.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";
 
 // src/ui/domBuilder.ts
 var DOMBuilder = class {
@@ -285,21 +285,23 @@ var alignbottomleft_default = function buildSVG12(parent) {
 
 // src/ui/ui.ts
 var pressedClass = "pressed";
-var NotificationUI = class {
-  constructor(win, core, rule, notificationsUI) {
+var IssueUI = class {
+  constructor(win, core, rule, issuesUI) {
     __publicField(this, "_core");
-    __publicField(this, "_notificationsUI");
+    __publicField(this, "_issuesUI");
     __publicField(this, "_wrapper");
     __publicField(this, "_rule");
     __publicField(this, "_onToggle");
     __publicField(this, "isHidden", false);
     this._core = core;
     this._rule = rule;
-    this._notificationsUI = notificationsUI;
-    this._wrapper = win.document.createElement(
-      "div"
-    );
-    notificationsUI.addNotification(this);
+    this._issuesUI = issuesUI;
+    if (!issuesUI.headless) {
+      this._wrapper = win.document.createElement(
+        "div"
+      );
+    }
+    issuesUI.addIssue(this);
   }
   static setOnToggle(instance, onToggle) {
     instance._onToggle = onToggle;
@@ -307,27 +309,26 @@ var NotificationUI = class {
   static getElement(instance) {
     return instance._wrapper;
   }
-  update(notification) {
+  update(issue) {
     const rule = this._rule;
     const wrapper = this._wrapper;
-    const element = notification.element;
+    const element = issue.element;
+    if (!wrapper) {
+      return;
+    }
     wrapper.__abledomui = true;
     wrapper.textContent = "";
-    new DOMBuilder(wrapper).openTag(
-      "div",
-      { class: "abledom-notification-container" },
-      (container) => {
-        container.onmouseover = () => {
-          var _a;
-          element && ((_a = this._notificationsUI) == null ? void 0 : _a.highlight(element));
-        };
-        container.onmouseout = () => {
-          var _a;
-          (_a = this._notificationsUI) == null ? void 0 : _a.highlight(null);
-        };
-      }
-    ).openTag("div", {
-      class: `abledom-notification${rule.type === 2 /* Warning */ ? " abledom-notification_warning" : rule.type === 3 /* Info */ ? " abledom-notification_info" : ""}`
+    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);
+      };
+    }).openTag("div", {
+      class: `abledom-issue${rule.type === 2 /* Warning */ ? " abledom-issue_warning" : rule.type === 3 /* Info */ ? " abledom-issue_info" : ""}`
     }).openTag(
       "button",
       {
@@ -336,7 +337,7 @@ var NotificationUI = class {
       },
       (logButton) => {
         logButton.onclick = () => {
-          const { id, message, element: element2, rel, help, ...extra } = notification;
+          const { id, message, element: element2, rel, help, ...extra } = issue;
           this._core.log(
             "AbleDOM: ",
             "\nid:",
@@ -359,12 +360,12 @@ var NotificationUI = class {
         title: "Scroll element into view"
       },
       (revealButton) => {
-        const element2 = notification.element;
+        const element2 = issue.element;
         if (element2) {
           revealButton.onclick = () => {
             var _a;
-            element2.scrollIntoView();
-            (_a = this._notificationsUI) == null ? void 0 : _a.highlight(element2);
+            element2.scrollIntoView({ block: "center" });
+            (_a = this._issuesUI) == null ? void 0 : _a.highlight(element2);
           };
         } else {
           revealButton.style.display = "none";
@@ -378,29 +379,29 @@ var NotificationUI = class {
       },
       (bugReportButton) => {
         var _a, _b;
-        const bugReport = (_a = this._notificationsUI) == null ? void 0 : _a.bugReport;
-        if (bugReport == null ? void 0 : bugReport.isVisible(notification)) {
-          const title = (_b = bugReport.getTitle) == null ? void 0 : _b.call(bugReport, notification);
+        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(notification);
+            bugReport.onClick(issue);
           };
         } else {
           bugReportButton.style.display = "none";
         }
       }
-    ).element(bug_default).closeTag().text(notification.message).openTag(
+    ).element(bug_default).closeTag().text(issue.message).openTag(
       "a",
       {
         class: "button close",
-        href: notification.help || "/",
+        href: issue.help || "/",
         title: "Open help",
         target: "_blank"
       },
       (help) => {
-        if (!notification.help) {
+        if (!issue.help) {
           help.style.display = "none";
         }
       }
@@ -414,13 +415,16 @@ var NotificationUI = class {
         closeButton.onclick = () => {
           var _a;
           this.toggle(false);
-          (_a = this._notificationsUI) == null ? void 0 : _a.highlight(null);
+          (_a = this._issuesUI) == null ? void 0 : _a.highlight(null);
         };
       }
     ).element(close_default).closeTag().closeTag().closeTag();
   }
   toggle(show, initial = false) {
     var _a;
+    if (!this._wrapper) {
+      return;
+    }
     this.isHidden = !show;
     if (!initial) {
       (_a = this._onToggle) == null ? void 0 : _a.call(this, this, show);
@@ -431,18 +435,18 @@ var NotificationUI = class {
     this._wrapper.style.display = show ? "block" : "none";
   }
   dispose() {
-    var _a;
-    this._wrapper.remove();
-    (_a = this._notificationsUI) == null ? void 0 : _a.removeNotification(this);
-    delete this._notificationsUI;
+    var _a, _b;
+    (_a = this._wrapper) == null ? void 0 : _a.remove();
+    (_b = this._issuesUI) == null ? void 0 : _b.removeIssue(this);
+    delete this._issuesUI;
   }
 };
-var NotificationsUI = class {
+var IssuesUI = class {
   constructor(win, props) {
     __publicField(this, "_container");
-    __publicField(this, "_notificationsContainer");
+    __publicField(this, "_issuesContainer");
     __publicField(this, "_menuElement");
-    __publicField(this, "_notificationCountElement");
+    __publicField(this, "_issueCountElement");
     __publicField(this, "_showAllButton");
     __publicField(this, "_hideAllButton");
     __publicField(this, "_alignBottomLeftButton");
@@ -450,10 +454,15 @@ var NotificationsUI = class {
     __publicField(this, "_alignTopRightButton");
     __publicField(this, "_alignBottomRightButton");
     __publicField(this, "_isMuted", false);
-    __publicField(this, "_notifications", /* @__PURE__ */ new Set());
+    __publicField(this, "_issues", /* @__PURE__ */ new Set());
     __publicField(this, "_highlighter");
     __publicField(this, "bugReport");
+    __publicField(this, "headless");
     this.bugReport = props.bugReport;
+    this.headless = !!props.headless;
+    if (this.headless) {
+      return;
+    }
     const doc = win.document;
     const container = this._container = doc.createElement("div");
     container.__abledomui = true;
@@ -462,10 +471,10 @@ var NotificationsUI = class {
     style.type = "text/css";
     style.appendChild(doc.createTextNode(ui_default));
     container.appendChild(style);
-    const notificationsContainer = this._notificationsContainer = doc.createElement("div");
-    notificationsContainer.__abledomui = true;
-    notificationsContainer.className = "abledom-notifications-container";
-    container.appendChild(notificationsContainer);
+    const issuesContainer = this._issuesContainer = doc.createElement("div");
+    issuesContainer.__abledomui = true;
+    issuesContainer.className = "abledom-issues-container";
+    container.appendChild(issuesContainer);
     const menuElement = this._menuElement = doc.createElement("div");
     menuElement.__abledomui = true;
     menuElement.className = "abledom-menu-container";
@@ -473,17 +482,17 @@ var NotificationsUI = class {
     new DOMBuilder(menuElement).openTag("div", { class: "abledom-menu" }).openTag(
       "span",
       {
-        class: "notifications-count",
-        title: "Number of notifications"
+        class: "issues-count",
+        title: "Number of issues"
       },
-      (notificationCountElement) => {
-        this._notificationCountElement = notificationCountElement;
+      (issueCountElement) => {
+        this._issueCountElement = issueCountElement;
       }
     ).closeTag().openTag(
       "button",
       {
         class: "button",
-        title: "Show all notifications"
+        title: "Show all issues"
       },
       (showAllButton) => {
         this._showAllButton = showAllButton;
@@ -495,7 +504,7 @@ var NotificationsUI = class {
       "button",
       {
         class: "button",
-        title: "Hide all notifications"
+        title: "Hide all issues"
       },
       (hideAllButton) => {
         this._hideAllButton = hideAllButton;
@@ -507,21 +516,15 @@ var NotificationsUI = class {
       "button",
       {
         class: "button",
-        title: "Mute newly appearing notifications"
+        title: "Mute newly appearing issues"
       },
       (muteButton) => {
         muteButton.onclick = () => {
           const isMuted = this._isMuted = muteButton.classList.toggle(pressedClass);
           if (isMuted) {
-            muteButton.setAttribute(
-              "title",
-              "Unmute newly appearing notifications"
-            );
+            muteButton.setAttribute("title", "Unmute newly appearing issues");
           } else {
-            muteButton.setAttribute(
-              "title",
-              "Mute newly appearing notifications"
-            );
+            muteButton.setAttribute("title", "Mute newly appearing issues");
           }
         };
       }
@@ -529,7 +532,7 @@ var NotificationsUI = class {
       "button",
       {
         class: "button align-button align-button-first pressed",
-        title: "Attach notifications to bottom left"
+        title: "Attach issues to bottom left"
       },
       (alignBottomLeftButton) => {
         this._alignBottomLeftButton = alignBottomLeftButton;
@@ -541,7 +544,7 @@ var NotificationsUI = class {
       "button",
       {
         class: "button align-button",
-        title: "Attach notifications to top left"
+        title: "Attach issues to top left"
       },
       (alignTopLeftButton) => {
         this._alignTopLeftButton = alignTopLeftButton;
@@ -553,7 +556,7 @@ var NotificationsUI = class {
       "button",
       {
         class: "button align-button",
-        title: "Attach notifications to top right"
+        title: "Attach issues to top right"
       },
       (alignTopRightButton) => {
         this._alignTopRightButton = alignTopRightButton;
@@ -565,7 +568,7 @@ var NotificationsUI = class {
       "button",
       {
         class: "button align-button align-button-last",
-        title: "Attach notifications to bottom right"
+        title: "Attach issues to bottom right"
       },
       (alignBottomRightButton) => {
         this._alignBottomRightButton = alignBottomRightButton;
@@ -579,7 +582,7 @@ var NotificationsUI = class {
   }
   setUIAlignment(alignment) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (!this._container || !this._notificationsContainer || !this._menuElement) {
+    if (!this._container || !this._issuesContainer || !this._menuElement) {
       return;
     }
     (_a = this._alignBottomLeftButton) == null ? void 0 : _a.classList.remove(pressedClass);
@@ -593,16 +596,16 @@ var NotificationsUI = class {
       "abledom-align-bottom"
     );
     let containerClasses = [];
-    let notificationsFirst = false;
+    let issuesFirst = false;
     switch (alignment) {
       case "bottom-left" /* BottomLeft */:
         containerClasses = ["abledom-align-left", "abledom-align-bottom"];
-        notificationsFirst = true;
+        issuesFirst = true;
         (_e = this._alignBottomLeftButton) == null ? void 0 : _e.classList.add(pressedClass);
         break;
       case "bottom-right" /* BottomRight */:
         containerClasses = ["abledom-align-right", "abledom-align-bottom"];
-        notificationsFirst = true;
+        issuesFirst = true;
         (_f = this._alignBottomRightButton) == null ? void 0 : _f.classList.add(pressedClass);
         break;
       case "top-left" /* TopLeft */:
@@ -616,18 +619,18 @@ var NotificationsUI = class {
     }
     this._container.classList.add(...containerClasses);
     this._container.insertBefore(
-      this._notificationsContainer,
-      notificationsFirst ? this._menuElement : null
+      this._issuesContainer,
+      issuesFirst ? this._menuElement : null
     );
   }
-  _setNotificationsCount(count) {
+  _setIssuesCount(count) {
     if (!this._menuElement) {
       return;
     }
-    const countElement = this._notificationCountElement;
+    const countElement = this._issueCountElement;
     if (countElement && count > 0) {
       countElement.textContent = "";
-      new DOMBuilder(countElement).openTag("strong").text(`${count}`).closeTag().text(` notification${count > 1 ? "s" : ""}`);
+      new DOMBuilder(countElement).openTag("strong").text(`${count}`).closeTag().text(` issue${count > 1 ? "s" : ""}`);
       this._menuElement.style.display = "block";
     } else {
       this._menuElement.style.display = "none";
@@ -641,8 +644,8 @@ var NotificationsUI = class {
     }
     let allHidden = true;
     let allVisible = true;
-    for (let notification of this._notifications) {
-      if (notification.isHidden) {
+    for (let issue of this._issues) {
+      if (issue.isHidden) {
         allVisible = false;
       } else {
         allHidden = false;
@@ -654,44 +657,46 @@ var NotificationsUI = class {
     hideAllButton.style.display = allHidden ? "none" : "block";
     showAllButton.style.display = allVisible ? "none" : "block";
   }
-  addNotification(notification) {
-    if (!this._notificationsContainer) {
-      throw new Error("NotificationsUI is not initialized");
+  addIssue(issue) {
+    if (this._issues.has(issue)) {
+      return;
     }
-    if (this._notifications.has(notification)) {
+    this._issues.add(issue);
+    if (this.headless) {
       return;
     }
+    if (!this._issuesContainer) {
+      throw new Error("IssuesUI is not initialized");
+    }
     if (this._isMuted) {
-      notification.toggle(false, true);
+      issue.toggle(false, true);
     }
-    this._notifications.add(notification);
-    this._notificationsContainer.appendChild(
-      NotificationUI.getElement(notification)
-    );
-    NotificationUI.setOnToggle(notification, () => {
+    const issueUIWraper = IssueUI.getElement(issue);
+    issueUIWraper && this._issuesContainer.appendChild(issueUIWraper);
+    IssueUI.setOnToggle(issue, () => {
       this._setShowHideButtonsVisibility();
     });
-    this._setNotificationsCount(this._notifications.size);
+    this._setIssuesCount(this._issues.size);
     this._setShowHideButtonsVisibility();
   }
-  removeNotification(notification) {
-    if (!this._notifications.has(notification)) {
+  removeIssue(issue) {
+    if (!this._issues.has(issue)) {
       return;
     }
-    this._notifications.delete(notification);
-    this._setNotificationsCount(this._notifications.size);
+    this._issues.delete(issue);
+    this._setIssuesCount(this._issues.size);
     this._setShowHideButtonsVisibility();
     this.highlight(null);
   }
   hideAll() {
-    this._notifications.forEach((notification) => {
-      notification.toggle(false);
+    this._issues.forEach((issue) => {
+      issue.toggle(false);
     });
     this._setShowHideButtonsVisibility();
   }
   showAll() {
-    this._notifications.forEach((notification) => {
-      notification.toggle(true);
+    this._issues.forEach((issue) => {
+      issue.toggle(true);
     });
     this._setShowHideButtonsVisibility();
   }
@@ -705,9 +710,9 @@ var NotificationsUI = class {
     (_b = this._container) == null ? void 0 : _b.remove();
     delete this._highlighter;
     delete this._container;
-    delete this._notificationsContainer;
+    delete this._issuesContainer;
     delete this._menuElement;
-    delete this._notificationCountElement;
+    delete this._issueCountElement;
     delete this._showAllButton;
     delete this._hideAllButton;
     delete this._alignBottomLeftButton;
@@ -992,7 +997,7 @@ var AbleDOM = class {
     __publicField(this, "_props");
     __publicField(this, "_observer");
     __publicField(this, "_clearValidationTimeout");
-    __publicField(this, "_elementsWithNotifications", /* @__PURE__ */ new Set());
+    __publicField(this, "_elementsWithIssues", /* @__PURE__ */ new Set());
     __publicField(this, "_changedElementIds", /* @__PURE__ */ new Set());
     __publicField(this, "_elementsDependingOnId", /* @__PURE__ */ new Map());
     __publicField(this, "_dependantIdsByElement", /* @__PURE__ */ new Map());
@@ -1000,7 +1005,9 @@ var AbleDOM = class {
     __publicField(this, "_rules", []);
     __publicField(this, "_startFunc");
     __publicField(this, "_isStarted", false);
-    __publicField(this, "_notificationsUI");
+    __publicField(this, "_issuesUI");
+    __publicField(this, "_idlePromise");
+    __publicField(this, "_idleResolve");
     __publicField(this, "_onFocusIn", (event) => {
       var _a;
       const target = event.target;
@@ -1008,9 +1015,9 @@ var AbleDOM = class {
         return;
       }
       for (const rule of this._rules) {
-        const focusNotification = (_a = rule.focused) == null ? void 0 : _a.call(rule, event);
-        if (focusNotification) {
-          this._addNotification(rule, focusNotification);
+        const focusIssue = (_a = rule.focused) == null ? void 0 : _a.call(rule, event);
+        if (focusIssue) {
+          this._addIssue(rule, focusIssue);
         }
       }
     });
@@ -1021,14 +1028,14 @@ var AbleDOM = class {
         return;
       }
       for (const rule of this._rules) {
-        const blurNotification = (_a = rule.blurred) == null ? void 0 : _a.call(rule, event);
-        if (blurNotification) {
-          this._addNotification(rule, blurNotification);
+        const blurIssue = (_a = rule.blurred) == null ? void 0 : _a.call(rule, event);
+        if (blurIssue) {
+          this._addIssue(rule, blurIssue);
         }
       }
     });
-    __publicField(this, "_notifyAsync", (rule, notification) => {
-      this._addNotification(rule, notification);
+    __publicField(this, "_notifyAsync", (rule, issue) => {
+      this._addIssue(rule, issue);
     });
     __publicField(this, "log", (...args) => {
       var _a, _b, _c, _d;
@@ -1065,12 +1072,14 @@ var AbleDOM = class {
       }
       (_a = this._clearValidationTimeout) == null ? void 0 : _a.call(this);
       const _validationTimeout = win.setTimeout(() => {
+        var _a2;
         delete this._clearValidationTimeout;
         this._remove(_elementsToRemove);
         this._validate(_elementsToValidate);
         _elementsToRemove.clear();
         _elementsToValidate.clear();
         this._changedElementIds.clear();
+        (_a2 = this._idleResolve) == null ? void 0 : _a2.call(this);
       }, 200);
       this._clearValidationTimeout = () => {
         win.clearTimeout(_validationTimeout);
@@ -1165,65 +1174,70 @@ var AbleDOM = class {
       this._idByElement.delete(element);
     }
   }
-  _addNotification(rule, notification) {
-    var _a;
-    if (!this._notificationsUI) {
-      this._notificationsUI = new NotificationsUI(this._win, {
-        bugReport: (_a = this._props) == null ? void 0 : _a.bugReport
+  _addIssue(rule, issue) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    if (!this._issuesUI) {
+      this._issuesUI = new IssuesUI(this._win, {
+        bugReport: (_a = this._props) == null ? void 0 : _a.bugReport,
+        headless: (_b = this._props) == null ? void 0 : _b.headless
       });
     }
-    const element = notification == null ? void 0 : notification.element;
-    if (!notification) {
-      this._removeNotification(element || this._win.document.body, rule);
+    const element = issue == null ? void 0 : issue.element;
+    if (!issue) {
+      this._removeIssue(element || this._win.document.body, rule);
       return;
     }
-    let notificationUI;
+    let issueUI;
+    let justUpdate = true;
     if (rule.anchored && element) {
       let abledomOnElement = element.__abledom;
       if (!abledomOnElement) {
         abledomOnElement = element.__abledom = {};
       }
-      let notifications = abledomOnElement.notifications;
-      if (!notifications) {
-        notifications = abledomOnElement.notifications = /* @__PURE__ */ new Map();
+      let issues = abledomOnElement.issues;
+      if (!issues) {
+        issues = abledomOnElement.issues = /* @__PURE__ */ new Map();
       }
-      notificationUI = notifications.get(rule);
-      if (!notificationUI) {
-        notificationUI = new NotificationUI(
-          this._win,
-          this,
-          rule,
-          this._notificationsUI
-        );
-        notifications.set(rule, notificationUI);
+      issueUI = issues.get(rule);
+      if (!issueUI) {
+        issueUI = new IssueUI(this._win, this, rule, this._issuesUI);
+        issues.set(rule, issueUI);
+        justUpdate = false;
+        (_e = (_d = (_c = this._props) == null ? void 0 : _c.callbacks) == null ? void 0 : _d.onIssueAdded) == null ? void 0 : _e.call(_d, element, rule, issue);
       }
-      this._elementsWithNotifications.add(element);
+      this._elementsWithIssues.add(element);
     } else {
-      notificationUI = new NotificationUI(
-        this._win,
-        this,
+      issueUI = new IssueUI(this._win, this, rule, this._issuesUI);
+      justUpdate = false;
+      (_h = (_g = (_f = this._props) == null ? void 0 : _f.callbacks) == null ? void 0 : _g.onIssueAdded) == null ? void 0 : _h.call(_g, null, rule, issue);
+    }
+    issueUI.update(issue);
+    if (justUpdate) {
+      (_k = (_j = (_i = this._props) == null ? void 0 : _i.callbacks) == null ? void 0 : _j.onIssueUpdated) == null ? void 0 : _k.call(
+        _j,
+        rule.anchored && element ? element : null,
         rule,
-        this._notificationsUI
+        issue
       );
     }
-    notificationUI.update(notification);
   }
-  _removeNotification(element, rule) {
-    var _a;
+  _removeIssue(element, rule) {
+    var _a, _b, _c, _d;
     if (!rule.anchored) {
       return;
     }
-    const notifications = (_a = element.__abledom) == null ? void 0 : _a.notifications;
-    if (!notifications) {
+    const issues = (_a = element.__abledom) == null ? void 0 : _a.issues;
+    if (!issues) {
       return;
     }
-    const notification = notifications.get(rule);
-    if (notification) {
-      notification.dispose();
-      notifications.delete(rule);
+    const issue = issues.get(rule);
+    if (issue) {
+      issue.dispose();
+      issues.delete(rule);
+      (_d = (_c = (_b = this._props) == null ? void 0 : _b.callbacks) == null ? void 0 : _c.onIssueRemoved) == null ? void 0 : _d.call(_c, element, rule);
     }
-    if (notifications.size === 0) {
-      this._elementsWithNotifications.delete(element);
+    if (issues.size === 0) {
+      this._elementsWithIssues.delete(element);
       delete element.__abledom;
     }
   }
@@ -1238,7 +1252,7 @@ var AbleDOM = class {
     }
     elements.forEach((element) => {
       var _a, _b, _c, _d, _e;
-      if (isAccessibilityAffectingElement(element) || ((_a = element.__abledom) == null ? void 0 : _a.notifications)) {
+      if (isAccessibilityAffectingElement(element) || ((_a = element.__abledom) == null ? void 0 : _a.issues)) {
         const dependsOnIds = /* @__PURE__ */ new Set();
         for (const rule of this._rules) {
           if (!rule.validate || ((_b = rule.accept) == null ? void 0 : _b.call(rule, element)) === false) {
@@ -1248,16 +1262,16 @@ var AbleDOM = class {
             continue;
           }
           const validationResult = (_c = rule.validate) == null ? void 0 : _c.call(rule, element);
-          if (validationResult == null ? void 0 : validationResult.notification) {
-            this._addNotification(rule, validationResult.notification);
+          if (validationResult == null ? void 0 : validationResult.issue) {
+            this._addIssue(rule, validationResult.issue);
             const ids = validationResult.dependsOnIds;
             if (ids) {
               for (const id of ids) {
                 dependsOnIds.add(id);
               }
             }
-          } else if ((_e = (_d = element.__abledom) == null ? void 0 : _d.notifications) == null ? void 0 : _e.has(rule)) {
-            this._removeNotification(element, rule);
+          } else if ((_e = (_d = element.__abledom) == null ? void 0 : _d.issues) == null ? void 0 : _e.has(rule)) {
+            this._removeIssue(element, rule);
           }
         }
         this._processElementDependingOnIds(
@@ -1309,10 +1323,25 @@ var AbleDOM = class {
   _remove(elements) {
     elements.forEach((element) => {
       var _a, _b;
-      const rules = [...((_b = (_a = element.__abledom) == null ? void 0 : _a.notifications) == null ? void 0 : _b.keys()) || []];
-      rules.forEach((rule) => this._removeNotification(element, rule));
+      const rules = [...((_b = (_a = element.__abledom) == null ? void 0 : _a.issues) == null ? void 0 : _b.keys()) || []];
+      rules.forEach((rule) => this._removeIssue(element, rule));
     });
   }
+  idle() {
+    if (!this._clearValidationTimeout) {
+      return Promise.resolve();
+    }
+    if (!this._idlePromise) {
+      this._idlePromise = new Promise((resolve) => {
+        this._idleResolve = () => {
+          delete this._idlePromise;
+          delete this._idleResolve;
+          resolve();
+        };
+      });
+    }
+    return this._idlePromise;
+  }
   addRule(rule) {
     this._rules.push(rule);
   }
@@ -1338,20 +1367,21 @@ var AbleDOM = class {
     (_b = this._startFunc) == null ? void 0 : _b.call(this);
   }
   dispose() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const doc = this._win.document;
     doc.addEventListener("focusin", this._onFocusIn, true);
     doc.addEventListener("focusout", this._onFocusOut, true);
-    this._remove(this._elementsWithNotifications);
-    this._elementsWithNotifications.clear();
+    this._remove(this._elementsWithIssues);
+    this._elementsWithIssues.clear();
     this._dependantIdsByElement.clear();
     this._elementsDependingOnId.clear();
     this._idByElement.clear();
-    (_a = this._notificationsUI) == null ? void 0 : _a.dispose();
-    delete this._notificationsUI;
+    (_a = this._issuesUI) == null ? void 0 : _a.dispose();
+    delete this._issuesUI;
     (_b = this._clearValidationTimeout) == null ? void 0 : _b.call(this);
+    (_c = this._idleResolve) == null ? void 0 : _c.call(this);
     for (const rule of this._rules) {
-      (_c = rule.stop) == null ? void 0 : _c.call(rule);
+      (_d = rule.stop) == null ? void 0 : _d.call(rule);
       ValidationRule.dispose(rule);
     }
     this._rules = [];
@@ -1401,7 +1431,7 @@ var AtomicRule = class extends ValidationRule {
     ).snapshotItem(0);
     if (parentAtomic) {
       return {
-        notification: {
+        issue: {
           id: "focusable-in-atomic",
           message: "Focusable element inside atomic focusable.",
           element,
@@ -1539,7 +1569,7 @@ var FocusableElementLabelRule = class extends ValidationRule {
       }
     }
     return {
-      notification: isElementVisible(element) ? {
+      issue: isElementVisible(element) ? {
         id: "focusable-element-label",
         message: "Focusable element must have a non-empty text label.",
         element,
@@ -1579,7 +1609,7 @@ var ExistingIdRule = class extends ValidationRule {
       }
     }
     return {
-      notification: {
+      issue: {
         id: "missing-id",
         message: `Elements with referenced ids do not extist.`,
         element
@@ -1768,7 +1798,7 @@ var FindElementRule = class extends ValidationRule {
     for (const name of Object.keys(this._conditions)) {
       if (this._conditions[name](element)) {
         return {
-          notification: {
+          issue: {
             id: "find-element",
             message: `Element found: ${name}.`,
             element