abledom 0.0.1 → 0.0.3

package/dist/esm/index.js

@@ -2,8 +2,63 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
+// src/rules/base.ts
+var ValidationRuleType = /* @__PURE__ */ ((ValidationRuleType2) => {
+  ValidationRuleType2[ValidationRuleType2["Error"] = 1] = "Error";
+  ValidationRuleType2[ValidationRuleType2["Warning"] = 2] = "Warning";
+  ValidationRuleType2[ValidationRuleType2["Info"] = 3] = "Info";
+  return ValidationRuleType2;
+})(ValidationRuleType || {});
+var ValidationRule = class {
+  constructor() {
+    __publicField(this, "_window");
+    __publicField(this, "_exceptions", []);
+    __publicField(this, "_onNotification");
+  }
+  static init(instance, window, onNotification) {
+    instance._window = window;
+    instance._onNotification = onNotification;
+  }
+  static dispose(instance) {
+    instance.dispose();
+  }
+  static checkExceptions(instance, element) {
+    for (const exception of instance._exceptions) {
+      if (exception(element)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  dispose() {
+    this._window = void 0;
+    this._onNotification = void 0;
+    this._exceptions = [];
+  }
+  addException(checkException) {
+    var _a;
+    (_a = this._exceptions) == null ? void 0 : _a.push(checkException);
+  }
+  removeException(checkException) {
+    const index = this._exceptions.indexOf(checkException);
+    if (index >= 0) {
+      this._exceptions.splice(index, 1);
+    }
+  }
+  /**
+   * Window is set when the rule is added to the AbleDOM instance.
+   */
+  get window() {
+    return this._window;
+  }
+  notify(notification) {
+    var _a;
+    (_a = this._onNotification) == null ? void 0 : _a.call(this, this, notification);
+  }
+};
+
 // 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: absolute;\n  z-index: 100500;\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\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  border: 1px solid red;\n  box-sizing: border-box;\n  display: none;\n  opacity: 0.6;\n  position: absolute;\n  z-index: 100499;\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: absolute;\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  border: 1px solid red;\n  box-sizing: border-box;\n  display: none;\n  opacity: 0.6;\n  position: absolute;\n  z-index: 100499;\n}\n";
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/close.svg
 var close_default = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"\n    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"\n    xmlns="http://www.w3.org/2000/svg">\n    <circle cx="12" cy="12" r="10"/>\n    <line x1="15" y1="9" x2="9" y2="15"/>\n    <line x1="9" y1="9" x2="15" y2="15"/>\n</svg>\n';
@@ -17,30 +72,80 @@ var log_default = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" s
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/reveal.svg
 var reveal_default = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"\n    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"\n    xmlns="http://www.w3.org/2000/svg">\n  <circle cx="12" cy="12" r="10"/>\n  <line x1="12" y1="2" x2="12" y2="6"/>\n  <line x1="12" y1="18" x2="12" y2="22"/>\n  <line x1="2" y1="12" x2="6" y2="12"/>\n  <line x1="18" y1="12" x2="22" y2="12"/>\n</svg>';
 
+// inline-file:/Users/marata/Documents/Work/abledom/src/ui/hideall.svg
+var hideall_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <path d="M11.44 17.5a1.67 1.67 0 0 1-2.89 0" stroke-width="1.5"/>\n  <path d="M15 6.67a5 5 0 0 0-10 0v4.17a1.67 1.67 0 0 1-.83 1.44L3.33 14.17h13.34l-0.83-1.89a1.67 1.67 0 0 1-.83-1.44V6.67z" stroke-width="1.5"/>\n  <line x1="1.67" y1="1.67" x2="18.33" y2="18.33" stroke-width="1.5"/>\n</svg>\n';
+
+// inline-file:/Users/marata/Documents/Work/abledom/src/ui/muteall.svg
+var muteall_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <path d="M11.44 17.5a1.67 1.67 0 0 1-2.89 0" stroke-width="1.5"/>\n  <path d="M15 6.67a5 5 0 0 0-10 0v4.17a1.67 1.67 0 0 1-.83 1.44L3.33 14.17h13.34l-0.83-1.89a1.67 1.67 0 0 1-.83-1.44V6.67z" stroke-width="1.5"/>\n  <line x1="1.67" y1="1.67" x2="18.33" y2="18.33" stroke-width="1.5"/>\n  <line x1="18.33" y1="1.67" x2="1.67" y2="18.33" stroke-width="1.5"/>\n</svg>\n';
+
+// inline-file:/Users/marata/Documents/Work/abledom/src/ui/showall.svg
+var showall_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <path d="M11.44 17.5a1.67 1.67 0 0 1-2.89 0" stroke-width="1.5"/>\n  <path d="M15 6.67a5 5 0 0 0-10 0v4.17a1.67 1.67 0 0 1-.83 1.44L3.33 14.17h13.34l-0.83-1.89a1.67 1.67 0 0 1-.83-1.44V6.67z" stroke-width="1.5"/>\n</svg>\n';
+
+// inline-file:/Users/marata/Documents/Work/abledom/src/ui/aligntopleft.svg
+var aligntopleft_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <rect x="3" y="3" width="6" height="6" stroke-width="2"/>\n</svg>\n';
+
+// inline-file:/Users/marata/Documents/Work/abledom/src/ui/aligntopright.svg
+var aligntopright_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <rect x="11" y="3" width="6" height="6" stroke-width="2"/>\n</svg>\n';
+
+// inline-file:/Users/marata/Documents/Work/abledom/src/ui/alignbottomright.svg
+var alignbottomright_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <rect x="11" y="11" width="6" height="6" stroke-width="2"/>\n</svg>\n';
+
+// inline-file:/Users/marata/Documents/Work/abledom/src/ui/alignbottomleft.svg
+var alignbottomleft_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <rect x="3" y="11" width="6" height="6" stroke-width="2"/>\n</svg>\n';
+
 // src/ui/ui.ts
+var pressedClass = "pressed";
+function createTrustedHTML(win, html) {
+  var _a, _b;
+  const escapeHTMLPolicy = (_b = (_a = win.trustedTypes) == null ? void 0 : _a.createPolicy) == null ? void 0 : _b.call(_a, "forceInner", {
+    createHTML: (html2) => html2
+  });
+  return escapeHTMLPolicy ? escapeHTMLPolicy.createHTML(html) : html;
+}
 var _NotificationUI = class _NotificationUI {
-  constructor(element, error) {
+  constructor(win, rule) {
+    __publicField(this, "_win");
     __publicField(this, "_wrapper");
-    var _a;
-    const wrapper = this._wrapper = document.createElement(
+    __publicField(this, "_rule");
+    __publicField(this, "_onToggle");
+    __publicField(this, "isHidden", false);
+    this._win = win;
+    this._rule = rule;
+    if (!_NotificationUI._notificationsUI) {
+      _NotificationUI._notificationsUI = new NotificationsUI(this._win);
+    }
+    this._wrapper = win.document.createElement(
       "div"
     );
-    const win = element.ownerDocument.defaultView;
-    if (!win) {
-      return;
-    }
     if (!_NotificationUI._highlight) {
       _NotificationUI._highlight = new ElementHighlighter(win);
     }
+    _NotificationUI._notificationsUI.addNotification(this);
+  }
+  static setOnToggle(instance, onToggle) {
+    instance._onToggle = onToggle;
+  }
+  static getElement(instance) {
+    return instance._wrapper;
+  }
+  update(notification) {
+    var _a;
+    const win = this._win;
+    const rule = this._rule;
+    const wrapper = this._wrapper;
+    const element = notification.element;
     wrapper.__abledomui = true;
-    wrapper.innerHTML = `
-      <div class="abledom-notification-container"><div class="abledom-notification">
+    wrapper.innerHTML = createTrustedHTML(
+      win,
+      `
+      <div class="abledom-notification-container"><div class="abledom-notification${rule.type === 2 /* Warning */ ? " abledom-notification_warning" : rule.type === 3 /* Info */ ? " abledom-notification_info" : ""}">
         <button class="button" title="Log to Console">${log_default}</button>
         <button class="button" title="Reveal in Elements panel">${reveal_default}</button>
-        ${error.message}
+        ${notification.message}
         <a href class="button close" href="/" title="Open help" target="_blank">${help_default}</a>
         <button class="button close" class="close" title="Hide">${close_default}</button>
-      </div></div>`;
+      </div></div>`
+    );
     const container = wrapper.firstElementChild;
     const buttons = wrapper.querySelectorAll("button");
     const logButton = buttons[0];
@@ -48,16 +153,18 @@ var _NotificationUI = class _NotificationUI {
     const closeButton = buttons[2];
     logButton.onclick = () => {
       console.error(
-        "AbleDOM violation: ",
-        "\nerror:",
-        error.message,
+        "AbleDOM: ",
+        "\nmessage:",
+        notification.message,
         "\nelement:",
         element,
-        ...error.rel ? ["\nrelative:", error.rel] : []
+        ...notification.rel ? ["\nrelative:", notification.rel] : [],
+        "\nnotification:",
+        notification
       );
     };
-    const hasDevTools = !!((_a = win.__ableDOMDevtools) == null ? void 0 : _a.revealElement);
-    if (hasDevTools && win.document.body.contains(element)) {
+    const hasDevTools = !!((_a = win.__ableDOMDevtools) == null ? void 0 : _a.revealElement) && false;
+    if (hasDevTools && element && win.document.body.contains(element)) {
       revealButton.onclick = () => {
         var _a2;
         const revealElement = (_a2 = win.__ableDOMDevtools) == null ? void 0 : _a2.revealElement;
@@ -73,51 +180,239 @@ var _NotificationUI = class _NotificationUI {
     }
     closeButton.onclick = () => {
       var _a2;
-      wrapper.style.display = "none";
+      this.toggle(false);
       (_a2 = _NotificationUI._highlight) == null ? void 0 : _a2.hide();
     };
     container.onmouseover = () => {
       var _a2;
-      (_a2 = _NotificationUI._highlight) == null ? void 0 : _a2.highlight(element);
+      element && ((_a2 = _NotificationUI._highlight) == null ? void 0 : _a2.highlight(element));
     };
     container.onmouseout = () => {
       var _a2;
       (_a2 = _NotificationUI._highlight) == null ? void 0 : _a2.hide();
     };
   }
-  static getElement(instance) {
-    return instance._wrapper;
+  toggle(show, initial = false) {
+    var _a;
+    this.isHidden = !show;
+    if (!initial) {
+      (_a = this._onToggle) == null ? void 0 : _a.call(this, this, show);
+      if (!this._rule.anchored && !show) {
+        this.dispose();
+      }
+    }
+    this._wrapper.style.display = show ? "block" : "none";
   }
   dispose() {
+    var _a;
     this._wrapper.remove();
+    (_a = _NotificationUI._notificationsUI) == null ? void 0 : _a.removeNotification(this);
   }
 };
+__publicField(_NotificationUI, "_notificationsUI");
 __publicField(_NotificationUI, "_highlight");
 var NotificationUI = _NotificationUI;
 var NotificationsUI = class {
   constructor(win) {
-    // private _window: Window;
+    __publicField(this, "_win");
     __publicField(this, "_container");
+    __publicField(this, "_notificationsContainer");
+    __publicField(this, "_menuElement");
+    __publicField(this, "_notificationCountElement");
+    __publicField(this, "_showAllButton");
+    __publicField(this, "_hideAllButton");
+    __publicField(this, "_alignBottomLeftButton");
+    __publicField(this, "_alignTopLeftButton");
+    __publicField(this, "_alignTopRightButton");
+    __publicField(this, "_alignBottomRightButton");
+    __publicField(this, "_isMuted", false);
     __publicField(this, "_notifications", /* @__PURE__ */ new Set());
-    const container = this._container = document.createElement("div");
+    var _a;
+    this._win = win;
+    const container = this._container = win.document.createElement("div");
     container.__abledomui = true;
     container.id = "abledom-report";
-    container.innerHTML = `<style>${ui_default}</style>`;
+    container.innerHTML = createTrustedHTML(win, `<style>${ui_default}</style>`);
+    const notificationsContainer = this._notificationsContainer = win.document.createElement("div");
+    notificationsContainer.className = "abledom-notifications-container";
+    container.appendChild(notificationsContainer);
+    const menuElement = this._menuElement = win.document.createElement("div");
+    menuElement.className = "abledom-menu-container";
+    menuElement.innerHTML = createTrustedHTML(
+      win,
+      `<div class="abledom-menu"><span class="notifications-count"></span
+      ><button class="button" title="Show all notifications">${showall_default}</button
+      ><button class="button" title="Hide all notifications">${hideall_default}</button
+      ><button class="button" title="Mute newly appearing notifications">${muteall_default}</button
+      ><button class="button align-button align-button-first pressed" title="Attach notifications to bottom left">${alignbottomleft_default}</button
+      ><button class="button align-button" title="Attach notifications to top left">${aligntopleft_default}</button
+      ><button class="button align-button" title="Attach notifications to top right">${aligntopright_default}</button
+      ><button class="button align-button align-button-last" title="Attach notifications to bottom right">${alignbottomright_default}</button
+      ></div>`
+    );
+    const [
+      notificationCountElement,
+      showAllButton,
+      hideAllButton,
+      muteButton,
+      alignBottomLeftButton,
+      alignTopLeftButton,
+      alignTopRightButton,
+      alignBottomRightButton
+    ] = ((_a = menuElement.firstElementChild) == null ? void 0 : _a.childNodes) || [];
+    if (notificationCountElement instanceof HTMLSpanElement && showAllButton instanceof HTMLButtonElement && hideAllButton instanceof HTMLButtonElement && muteButton instanceof HTMLButtonElement && alignBottomLeftButton instanceof HTMLButtonElement && alignTopLeftButton instanceof HTMLButtonElement && alignTopRightButton instanceof HTMLButtonElement && alignBottomRightButton instanceof HTMLButtonElement) {
+      container.appendChild(menuElement);
+      this._notificationCountElement = notificationCountElement;
+      this._showAllButton = showAllButton;
+      this._hideAllButton = hideAllButton;
+      this._alignBottomLeftButton = alignBottomLeftButton;
+      this._alignTopLeftButton = alignTopLeftButton;
+      this._alignTopRightButton = alignTopRightButton;
+      this._alignBottomRightButton = alignBottomRightButton;
+      showAllButton.onclick = () => {
+        this.showAll();
+      };
+      hideAllButton.onclick = () => {
+        this.hideAll();
+      };
+      muteButton.onclick = () => {
+        const isMuted = this._isMuted = muteButton.classList.toggle(pressedClass);
+        if (isMuted) {
+          muteButton.setAttribute(
+            "title",
+            "Unmute newly appearing notifications"
+          );
+        } else {
+          muteButton.setAttribute(
+            "title",
+            "Mute newly appearing notifications"
+          );
+        }
+      };
+      alignBottomLeftButton.onclick = () => {
+        this.setUIAlignment("bottom-left" /* BottomLeft */);
+      };
+      alignBottomRightButton.onclick = () => {
+        this.setUIAlignment("bottom-right" /* BottomRight */);
+      };
+      alignTopLeftButton.onclick = () => {
+        this.setUIAlignment("top-left" /* TopLeft */);
+      };
+      alignTopRightButton.onclick = () => {
+        this.setUIAlignment("top-right" /* TopRight */);
+      };
+    }
     win.document.body.appendChild(container);
   }
+  setUIAlignment(alignment) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    (_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._container.classList.remove(
+      "abledom-align-left",
+      "abledom-align-right",
+      "abledom-align-top",
+      "abledom-align-bottom"
+    );
+    let containerClasses = [];
+    let notificationsFirst = false;
+    switch (alignment) {
+      case "bottom-left" /* BottomLeft */:
+        containerClasses = ["abledom-align-left", "abledom-align-bottom"];
+        notificationsFirst = 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;
+        (_f = this._alignBottomRightButton) == null ? void 0 : _f.classList.add(pressedClass);
+        break;
+      case "top-left" /* TopLeft */:
+        containerClasses = ["abledom-align-left", "abledom-align-top"];
+        (_g = this._alignTopLeftButton) == null ? void 0 : _g.classList.add(pressedClass);
+        break;
+      case "top-right" /* TopRight */:
+        containerClasses = ["abledom-align-right", "abledom-align-top"];
+        (_h = this._alignTopRightButton) == null ? void 0 : _h.classList.add(pressedClass);
+        break;
+    }
+    this._container.classList.add(...containerClasses);
+    this._container.insertBefore(
+      this._notificationsContainer,
+      notificationsFirst ? this._menuElement : null
+    );
+  }
+  _setNotificationsCount(count) {
+    const countElement = this._notificationCountElement;
+    if (countElement && count > 0) {
+      countElement.innerHTML = createTrustedHTML(
+        this._win,
+        `<strong>${count}</strong> notification${count > 1 ? "s" : ""}`
+      );
+      this._menuElement.style.display = "block";
+    } else {
+      this._menuElement.style.display = "none";
+    }
+  }
+  _setShowHideButtonsVisibility() {
+    const showAllButton = this._showAllButton;
+    const hideAllButton = this._hideAllButton;
+    if (!showAllButton || !hideAllButton) {
+      return;
+    }
+    let allHidden = true;
+    let allVisible = true;
+    for (let notification of this._notifications) {
+      if (notification.isHidden) {
+        allVisible = false;
+      } else {
+        allHidden = false;
+      }
+      if (!allHidden && !allVisible) {
+        break;
+      }
+    }
+    hideAllButton.style.display = allHidden ? "none" : "block";
+    showAllButton.style.display = allVisible ? "none" : "block";
+  }
   addNotification(notification) {
     if (this._notifications.has(notification)) {
       return;
     }
+    if (this._isMuted) {
+      notification.toggle(false, true);
+    }
     this._notifications.add(notification);
-    this._container.appendChild(NotificationUI.getElement(notification));
+    this._notificationsContainer.appendChild(
+      NotificationUI.getElement(notification)
+    );
+    NotificationUI.setOnToggle(notification, () => {
+      this._setShowHideButtonsVisibility();
+    });
+    this._setNotificationsCount(this._notifications.size);
+    this._setShowHideButtonsVisibility();
   }
   removeNotification(notification) {
     if (!this._notifications.has(notification)) {
       return;
     }
     this._notifications.delete(notification);
-    this._container.removeChild(NotificationUI.getElement(notification));
+    this._setNotificationsCount(this._notifications.size);
+    this._setShowHideButtonsVisibility();
+  }
+  hideAll() {
+    this._notifications.forEach((notification) => {
+      notification.toggle(false);
+    });
+    this._setShowHideButtonsVisibility();
+  }
+  showAll() {
+    this._notifications.forEach((notification) => {
+      notification.toggle(true);
+    });
+    this._setShowHideButtonsVisibility();
   }
 };
 var ElementHighlighter = class {
@@ -340,91 +635,13 @@ function getStackTrace() {
   }
 }
 
-// src/rules/base.ts
-var ValidationRule = class {
-  constructor() {
-    __publicField(this, "_window");
-    __publicField(this, "_exceptions", []);
-  }
-  static setWindow(instance, window2) {
-    instance._window = window2;
-  }
-  static checkExceptions(instance, element) {
-    for (const exception of instance._exceptions) {
-      if (exception(element)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  addException(checkException) {
-    var _a;
-    (_a = this._exceptions) == null ? void 0 : _a.push(checkException);
-  }
-  removeException(checkException) {
-    const index = this._exceptions.indexOf(checkException);
-    if (index >= 0) {
-      this._exceptions.splice(index, 1);
-    }
-  }
-  /**
-   * Window is set when the rule is added to the AbleDOM instance.
-   */
-  get window() {
-    return this._window;
-  }
-};
-
 // src/core.ts
-var _ValidationErrorReport = class _ValidationErrorReport {
-  constructor(element, error, onHide) {
-    this.element = element;
-    this.error = error;
-    __publicField(this, "_notification");
-    __publicField(this, "_onHide");
-    this._onHide = onHide;
-    this.report();
-  }
-  update(error) {
-    this.error = error;
-    this.report();
-  }
-  report() {
-    if (!_ValidationErrorReport._notificationsUI) {
-      _ValidationErrorReport._notificationsUI = new NotificationsUI(window);
-    }
-    let notification = this._notification;
-    if (notification) {
-    } else {
-      notification = this._notification = new NotificationUI(
-        this.element,
-        this.error
-      );
-    }
-    _ValidationErrorReport._notificationsUI.addNotification(notification);
-  }
-  hide() {
-    var _a;
-    (_a = this._onHide) == null ? void 0 : _a.call(this);
-  }
-  remove() {
-    var _a;
-    if (this._notification) {
-      (_a = _ValidationErrorReport._notificationsUI) == null ? void 0 : _a.removeNotification(
-        this._notification
-      );
-      delete this._notification;
-    }
-  }
-};
-__publicField(_ValidationErrorReport, "_notificationsUI");
-var ValidationErrorReport = _ValidationErrorReport;
 var AbleDOM = class {
   constructor(win) {
-    __publicField(this, "_window");
+    __publicField(this, "_win");
     __publicField(this, "_observer");
     __publicField(this, "_clearValidationTimeout");
-    __publicField(this, "_elementsWithErrors", /* @__PURE__ */ new Set());
+    __publicField(this, "_elementsWithNotifications", /* @__PURE__ */ new Set());
     __publicField(this, "_changedElementIds", /* @__PURE__ */ new Set());
     __publicField(this, "_elementsDependingOnId", /* @__PURE__ */ new Map());
     __publicField(this, "_dependantIdsByElement", /* @__PURE__ */ new Map());
@@ -439,19 +656,10 @@ var AbleDOM = class {
         return;
       }
       for (const rule of this._rules) {
-        (_a = rule.focused) == null ? void 0 : _a.call(rule, event).then(
-          (focusError) => {
-            if (focusError) {
-              this._addValidationError(
-                focusError.element,
-                rule,
-                focusError.error
-              );
-            }
-          },
-          () => {
-          }
-        );
+        const focusNotification = (_a = rule.focused) == null ? void 0 : _a.call(rule, event);
+        if (focusNotification) {
+          this._addNotification(rule, focusNotification);
+        }
       }
     });
     __publicField(this, "_onFocusOut", (event) => {
@@ -461,22 +669,16 @@ var AbleDOM = class {
         return;
       }
       for (const rule of this._rules) {
-        (_a = rule.blurred) == null ? void 0 : _a.call(rule, event).then(
-          (focusError) => {
-            if (focusError) {
-              this._addValidationError(
-                focusError.element,
-                rule,
-                focusError.error
-              );
-            }
-          },
-          () => {
-          }
-        );
+        const blurNotification = (_a = rule.blurred) == null ? void 0 : _a.call(rule, event);
+        if (blurNotification) {
+          this._addNotification(rule, blurNotification);
+        }
       }
     });
-    this._window = win;
+    __publicField(this, "_notifyAsync", (rule, notification) => {
+      this._addNotification(rule, notification);
+    });
+    this._win = win;
     const _elementsToValidate = /* @__PURE__ */ new Set();
     const _elementsToRemove = /* @__PURE__ */ new Set();
     win.document.addEventListener("focusin", this._onFocusIn, true);
@@ -545,7 +747,7 @@ var AbleDOM = class {
     };
     function lookUp(node) {
       for (let n = node; n; n = n.parentNode) {
-        addTarget(n, false);
+        addTarget(n, _elementsToRemove.has(node));
       }
     }
     function findTargets(node, removed) {
@@ -603,49 +805,49 @@ var AbleDOM = class {
       this._idByElement.delete(element);
     }
   }
-  _addValidationError(element, rule, error) {
-    if (!error) {
-      this._removeElementError(element, rule);
+  _addNotification(rule, notification) {
+    const element = notification == null ? void 0 : notification.element;
+    if (!notification) {
+      this._removeNotification(element || this._win.document.body, rule);
       return;
     }
-    if (rule.anchored) {
+    let notificationUI;
+    if (rule.anchored && element) {
       let abledomOnElement = element.__abledom;
       if (!abledomOnElement) {
         abledomOnElement = element.__abledom = {};
       }
-      let errors = abledomOnElement.errors;
-      if (!errors) {
-        errors = abledomOnElement.errors = /* @__PURE__ */ new Map();
+      let notifications = abledomOnElement.notifications;
+      if (!notifications) {
+        notifications = abledomOnElement.notifications = /* @__PURE__ */ new Map();
       }
-      const report = errors.get(rule);
-      if (report) {
-        report.update(error);
-      } else {
-        errors.set(rule, new ValidationErrorReport(element, error));
+      notificationUI = notifications.get(rule);
+      if (!notificationUI) {
+        notificationUI = new NotificationUI(this._win, rule);
+        notifications.set(rule, notificationUI);
       }
-      this._elementsWithErrors.add(element);
+      this._elementsWithNotifications.add(element);
     } else {
-      const report = new ValidationErrorReport(element, error, () => {
-        report.remove();
-      });
+      notificationUI = new NotificationUI(this._win, rule);
     }
+    notificationUI.update(notification);
   }
-  _removeElementError(element, rule) {
+  _removeNotification(element, rule) {
     var _a;
     if (!rule.anchored) {
       return;
     }
-    const errors = (_a = element.__abledom) == null ? void 0 : _a.errors;
-    if (!errors) {
+    const notifications = (_a = element.__abledom) == null ? void 0 : _a.notifications;
+    if (!notifications) {
       return;
     }
-    const report = errors.get(rule);
-    if (report) {
-      report.remove();
-      errors.delete(rule);
+    const notification = notifications.get(rule);
+    if (notification) {
+      notification.dispose();
+      notifications.delete(rule);
     }
-    if (errors.size === 0) {
-      this._elementsWithErrors.delete(element);
+    if (notifications.size === 0) {
+      this._elementsWithNotifications.delete(element);
       delete element.__abledom;
     }
   }
@@ -660,26 +862,26 @@ var AbleDOM = class {
     }
     elements.forEach((element) => {
       var _a, _b, _c, _d, _e;
-      if (isAccessibilityAffectingElement(element) || ((_a = element.__abledom) == null ? void 0 : _a.errors)) {
+      if (isAccessibilityAffectingElement(element) || ((_a = element.__abledom) == null ? void 0 : _a.notifications)) {
         const dependsOnIds = /* @__PURE__ */ new Set();
         for (const rule of this._rules) {
-          if (((_b = rule.accept) == null ? void 0 : _b.call(rule, element)) === false) {
+          if (!rule.validate || ((_b = rule.accept) == null ? void 0 : _b.call(rule, element)) === false) {
             continue;
           }
           if (ValidationRule.checkExceptions(rule, element)) {
             continue;
           }
           const validationResult = (_c = rule.validate) == null ? void 0 : _c.call(rule, element);
-          if (validationResult) {
-            this._addValidationError(element, rule, validationResult.error);
+          if (validationResult == null ? void 0 : validationResult.notification) {
+            this._addNotification(rule, validationResult.notification);
             const ids = validationResult.dependsOnIds;
             if (ids) {
               for (const id of ids) {
                 dependsOnIds.add(id);
               }
             }
-          } else if ((_e = (_d = element.__abledom) == null ? void 0 : _d.errors) == null ? void 0 : _e.has(rule)) {
-            this._removeElementError(element, rule);
+          } else if ((_e = (_d = element.__abledom) == null ? void 0 : _d.notifications) == null ? void 0 : _e.has(rule)) {
+            this._removeNotification(element, rule);
           }
         }
         this._processElementDependingOnIds(
@@ -731,8 +933,8 @@ var AbleDOM = class {
   _remove(elements) {
     elements.forEach((element) => {
       var _a, _b;
-      const rules = [...((_b = (_a = element.__abledom) == null ? void 0 : _a.errors) == null ? void 0 : _b.keys()) || []];
-      rules.forEach((rule) => this._removeElementError(element, rule));
+      const rules = [...((_b = (_a = element.__abledom) == null ? void 0 : _a.notifications) == null ? void 0 : _b.keys()) || []];
+      rules.forEach((rule) => this._removeNotification(element, rule));
     });
   }
   addRule(rule) {
@@ -754,23 +956,24 @@ var AbleDOM = class {
     }
     this._isStarted = true;
     for (const rule of this._rules) {
-      ValidationRule.setWindow(rule, this._window);
+      ValidationRule.init(rule, this._win, this._notifyAsync);
       (_a = rule.start) == null ? void 0 : _a.call(rule);
     }
     (_b = this._startFunc) == null ? void 0 : _b.call(this);
   }
   dispose() {
     var _a, _b;
-    this._window.document.addEventListener("focusin", this._onFocusIn, true);
-    this._window.document.addEventListener("focusout", this._onFocusOut, true);
-    this._remove(this._elementsWithErrors);
-    this._elementsWithErrors.clear();
+    this._win.document.addEventListener("focusin", this._onFocusIn, true);
+    this._win.document.addEventListener("focusout", this._onFocusOut, true);
+    this._remove(this._elementsWithNotifications);
+    this._elementsWithNotifications.clear();
     this._dependantIdsByElement.clear();
     this._elementsDependingOnId.clear();
     this._idByElement.clear();
     (_a = this._clearValidationTimeout) == null ? void 0 : _a.call(this);
     for (const rule of this._rules) {
       (_b = rule.stop) == null ? void 0 : _b.call(rule);
+      ValidationRule.dispose(rule);
     }
     this._rules = [];
     if (this._startFunc) {
@@ -785,6 +988,7 @@ var AbleDOM = class {
 var AtomicRule = class extends ValidationRule {
   constructor() {
     super(...arguments);
+    __publicField(this, "type", 1 /* Error */);
     __publicField(this, "name", "atomic");
     __publicField(this, "anchored", true);
   }
@@ -818,9 +1022,10 @@ var AtomicRule = class extends ValidationRule {
     ).snapshotItem(0);
     if (parentAtomic) {
       return {
-        error: {
+        notification: {
           id: "focusable-in-atomic",
           message: "Focusable element inside atomic focusable.",
+          element,
           rel: parentAtomic
         }
       };
@@ -847,6 +1052,7 @@ var _keyboardEditableInputTypes = /* @__PURE__ */ new Set([
 var FocusableElementLabelRule = class extends ValidationRule {
   constructor() {
     super(...arguments);
+    __publicField(this, "type", 1 /* Error */);
     __publicField(this, "name", "FocusableElementLabelRule");
     __publicField(this, "anchored", true);
   }
@@ -950,9 +1156,10 @@ var FocusableElementLabelRule = class extends ValidationRule {
       }
     }
     return {
-      error: isElementVisible(element) ? {
+      notification: isElementVisible(element) ? {
         id: "focusable-element-label",
-        message: "Focusable element must have a non-empty text label."
+        message: "Focusable element must have a non-empty text label.",
+        element
       } : void 0,
       dependsOnIds: new Set(labelledByValues)
     };
@@ -963,6 +1170,7 @@ var FocusableElementLabelRule = class extends ValidationRule {
 var ExistingIdRule = class extends ValidationRule {
   constructor() {
     super(...arguments);
+    __publicField(this, "type", 1 /* Error */);
     __publicField(this, "name", "existing-id");
     __publicField(this, "anchored", true);
   }
@@ -987,9 +1195,10 @@ var ExistingIdRule = class extends ValidationRule {
       }
     }
     return {
-      error: {
+      notification: {
         id: "missing-id",
-        message: `Elements with referenced ids do not extist.`
+        message: `Elements with referenced ids do not extist.`,
+        element
       },
       dependsOnIds: new Set(ids)
     };
@@ -1000,6 +1209,7 @@ var ExistingIdRule = class extends ValidationRule {
 var FocusLostRule = class extends ValidationRule {
   constructor() {
     super(...arguments);
+    __publicField(this, "type", 1 /* Error */);
     __publicField(this, "name", "focus-lost");
     __publicField(this, "anchored", false);
     __publicField(this, "_focusLostTimeout", 2e3);
@@ -1009,6 +1219,8 @@ var FocusLostRule = class extends ValidationRule {
     __publicField(this, "_focusedElementPosition");
     __publicField(this, "_lastFocusStack");
     __publicField(this, "_lastBlurStack");
+    __publicField(this, "_mouseEventTimer");
+    __publicField(this, "_releaseMouseEvent");
   }
   _serializeElementPosition(element) {
     const position = [];
@@ -1022,7 +1234,7 @@ var FocusLostRule = class extends ValidationRule {
     }
     return position;
   }
-  async focused(event) {
+  focused(event) {
     var _a;
     const target = event.target;
     (_a = this._clearScheduledFocusLost) == null ? void 0 : _a.call(this);
@@ -1033,53 +1245,71 @@ var FocusLostRule = class extends ValidationRule {
     }
     return null;
   }
-  async blurred(event) {
+  blurred(event) {
     var _a;
     const target = event.target;
     const win = this.window;
     (_a = this._clearScheduledFocusLost) == null ? void 0 : _a.call(this);
-    if (!target || !win || event.relatedTarget) {
+    if (!target || !win || event.relatedTarget || this._mouseEventTimer) {
       return null;
     }
-    let focusLostTimer;
-    let rejectPromise;
     const targetPosition = this._focusedElement === target ? this._focusedElementPosition : void 0;
     this._lastBlurStack = getStackTrace();
     this._focusedElement = void 0;
     this._focusedElementPosition = void 0;
+    const focusLostTimer = win.setTimeout(() => {
+      delete this._clearScheduledFocusLost;
+      if (win.document.body && (!win.document.activeElement || win.document.activeElement === win.document.body) && (!win.document.body.contains(target) || !isElementVisible(target))) {
+        this.notify({
+          element: target,
+          id: "focus-lost",
+          message: "Focus lost.",
+          stack: this._lastBlurStack,
+          relStack: this._lastFocusStack,
+          position: targetPosition || []
+        });
+      }
+    }, this._focusLostTimeout);
     this._clearScheduledFocusLost = () => {
       delete this._clearScheduledFocusLost;
-      rejectPromise == null ? void 0 : rejectPromise();
-      if (focusLostTimer) {
-        win.clearTimeout(focusLostTimer);
-        focusLostTimer = void 0;
+      win.clearTimeout(focusLostTimer);
+    };
+    return null;
+  }
+  start() {
+    const win = this.window;
+    if (!win) {
+      return;
+    }
+    const onMouseEvent = () => {
+      if (!this._mouseEventTimer) {
+        this._mouseEventTimer = win.setTimeout(() => {
+          this._mouseEventTimer = void 0;
+        }, 0);
       }
     };
-    return new Promise((resolve, reject) => {
-      rejectPromise = () => {
-        rejectPromise = void 0;
-        reject();
-      };
-      focusLostTimer = win.setTimeout(() => {
-        focusLostTimer = void 0;
-        rejectPromise = void 0;
-        delete this._clearScheduledFocusLost;
-        if (win.document.body && (!win.document.activeElement || win.document.activeElement === win.document.body) && (!win.document.body.contains(target) || !isElementVisible(target))) {
-          resolve({
-            element: target,
-            position: targetPosition || [],
-            error: {
-              id: "focus-lost",
-              message: "Focus lost.",
-              stack: this._lastBlurStack,
-              relStack: this._lastFocusStack
-            }
-          });
-        } else {
-          resolve(null);
-        }
-      }, this._focusLostTimeout);
-    });
+    win.addEventListener("mousedown", onMouseEvent, true);
+    win.addEventListener("mouseup", onMouseEvent, true);
+    win.addEventListener("mousemove", onMouseEvent, true);
+    this._releaseMouseEvent = () => {
+      delete this._releaseMouseEvent;
+      if (this._mouseEventTimer) {
+        win.clearTimeout(this._mouseEventTimer);
+        delete this._mouseEventTimer;
+      }
+      win.removeEventListener("mousedown", onMouseEvent, true);
+      win.removeEventListener("mouseup", onMouseEvent, true);
+      win.removeEventListener("mousemove", onMouseEvent, true);
+    };
+  }
+  stop() {
+    var _a, _b;
+    (_a = this._releaseMouseEvent) == null ? void 0 : _a.call(this);
+    (_b = this._clearScheduledFocusLost) == null ? void 0 : _b.call(this);
+    this._focusedElement = void 0;
+    this._focusedElementPosition = void 0;
+    this._lastFocusStack = void 0;
+    this._lastBlurStack = void 0;
   }
 };
 
@@ -1087,53 +1317,96 @@ var FocusLostRule = class extends ValidationRule {
 var BadFocusRule = class extends ValidationRule {
   constructor() {
     super(...arguments);
+    __publicField(this, "type", 1 /* Error */);
     __publicField(this, "name", "bad-focus");
     __publicField(this, "anchored", false);
     __publicField(this, "_lastFocusStack");
     __publicField(this, "_lastBlurStack");
-    __publicField(this, "_reject");
+    __publicField(this, "_clearCheckTimer");
   }
-  async focused() {
-    var _a;
+  focused() {
     this._lastFocusStack = getStackTrace();
-    (_a = this._reject) == null ? void 0 : _a.call(this);
     return null;
   }
-  async blurred() {
+  blurred() {
     var _a;
-    (_a = this._reject) == null ? void 0 : _a.call(this);
     const win = this.window;
     if (!win) {
       return null;
     }
     this._lastBlurStack = getStackTrace();
-    return new Promise((resolve, reject) => {
-      let checkTimer;
-      this._reject = () => {
-        if (checkTimer) {
-          win.clearTimeout(checkTimer);
-          checkTimer = void 0;
-        }
-        this._reject = void 0;
-        reject();
-      };
-      checkTimer = win.setTimeout(() => {
-        checkTimer = void 0;
-        this._reject = void 0;
-        if (document.activeElement && !isElementVisible(document.activeElement)) {
-          resolve({
-            element: document.activeElement,
-            error: {
-              id: "bad-focus",
-              message: "Focused stolen by invisible element.",
-              stack: this._lastBlurStack,
-              relStack: this._lastFocusStack
-            }
-          });
-        } else {
-          resolve(null);
-        }
-      }, 100);
+    (_a = this._clearCheckTimer) == null ? void 0 : _a.call(this);
+    const checkTimer = win.setTimeout(() => {
+      delete this._clearCheckTimer;
+      if (document.activeElement && !isElementVisible(document.activeElement)) {
+        this.notify({
+          id: "bad-focus",
+          message: "Focused stolen by invisible element.",
+          element: document.activeElement,
+          stack: this._lastBlurStack,
+          relStack: this._lastFocusStack
+        });
+      }
+    }, 100);
+    this._clearCheckTimer = () => {
+      delete this._clearCheckTimer;
+      win.clearTimeout(checkTimer);
+    };
+    return null;
+  }
+  stop() {
+    var _a;
+    (_a = this._clearCheckTimer) == null ? void 0 : _a.call(this);
+    this._clearCheckTimer = void 0;
+    this._lastFocusStack = void 0;
+    this._lastBlurStack = void 0;
+  }
+};
+
+// src/rules/find.ts
+var FindElementRule = class extends ValidationRule {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", 2 /* Warning */);
+    __publicField(this, "name", "find-element");
+    __publicField(this, "anchored", true);
+    __publicField(this, "_conditions", {});
+  }
+  addCondition(name, condition) {
+    this._conditions[name] = condition;
+  }
+  removeCondition(name) {
+    delete this._conditions[name];
+  }
+  validate(element) {
+    for (const name of Object.keys(this._conditions)) {
+      if (this._conditions[name](element)) {
+        return {
+          notification: {
+            id: "find-element",
+            message: `Element found: ${name}.`,
+            element
+          }
+        };
+      }
+    }
+    return null;
+  }
+};
+
+// src/rules/notify.ts
+var CustomNotifyRule = class extends ValidationRule {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", 3 /* Info */);
+    __publicField(this, "name", "custom-notify");
+    __publicField(this, "anchored", false);
+  }
+  customNotify(message, element) {
+    this.notify({
+      id: "custom-notify",
+      message,
+      element
     });
   }
 };
@@ -1141,10 +1414,18 @@ export {
   AbleDOM,
   AtomicRule,
   BadFocusRule,
+  CustomNotifyRule,
   ExistingIdRule,
+  FindElementRule,
   FocusLostRule,
   FocusableElementLabelRule,
-  ValidationRule
+  ValidationRule,
+  ValidationRuleType,
+  hasAccessibilityAttribute,
+  isAccessibilityAffectingElement,
+  isDisplayNone,
+  isElementVisible,
+  matchesSelector
 };
 /*!
  * Copyright (c) Microsoft Corporation. All rights reserved.