abledom 0.0.0 → 0.0.2

package/dist/esm/index.js

@@ -0,0 +1,1416 @@
+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-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';
+
+// inline-file:/Users/marata/Documents/Work/abledom/src/ui/help.svg
+var help_default = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none"\n    stroke="currentColor" stroke-width="2" stroke-linecap="round"\n    stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">\n  <circle cx="12" cy="12" r="10"/>\n  <path d="M9.09 9a3 3 0 1 1 5.83 1c-.28 1.02-1.22 1.5-2.01 2.1-.76.58-1 1.1-1 2"/>\n  <circle cx="12" cy="17" r="0.5"/>\n</svg>';
+
+// inline-file:/Users/marata/Documents/Work/abledom/src/ui/log.svg
+var log_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  <polyline points="4 7 9 12 4 17"/>\n  <line x1="11" y1="19" x2="20" y2="19"/>\n</svg>';
+
+// 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";
+var _NotificationUI = class _NotificationUI {
+  constructor(win, rule) {
+    __publicField(this, "_win");
+    __publicField(this, "_wrapper");
+    __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"
+    );
+    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${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>
+        ${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>`;
+    const container = wrapper.firstElementChild;
+    const buttons = wrapper.querySelectorAll("button");
+    const logButton = buttons[0];
+    const revealButton = buttons[1];
+    const closeButton = buttons[2];
+    logButton.onclick = () => {
+      console.error(
+        "AbleDOM: ",
+        "\nmessage:",
+        notification.message,
+        "\nelement:",
+        element,
+        ...notification.rel ? ["\nrelative:", notification.rel] : [],
+        "\nnotification:",
+        notification
+      );
+    };
+    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;
+        if (revealElement && win.document.body.contains(element)) {
+          revealElement(element).then((revealed) => {
+            if (!revealed) {
+            }
+          });
+        }
+      };
+    } else {
+      revealButton.style.display = "none";
+    }
+    closeButton.onclick = () => {
+      var _a2;
+      this.toggle(false);
+      (_a2 = _NotificationUI._highlight) == null ? void 0 : _a2.hide();
+    };
+    container.onmouseover = () => {
+      var _a2;
+      element && ((_a2 = _NotificationUI._highlight) == null ? void 0 : _a2.highlight(element));
+    };
+    container.onmouseout = () => {
+      var _a2;
+      (_a2 = _NotificationUI._highlight) == null ? void 0 : _a2.hide();
+    };
+  }
+  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) {
+    __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());
+    var _a;
+    const container = this._container = win.document.createElement("div");
+    container.__abledomui = true;
+    container.id = "abledom-report";
+    container.innerHTML = `<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 = `<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 = `<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._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._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 {
+  constructor(win) {
+    __publicField(this, "_window");
+    __publicField(this, "_container");
+    this._window = win;
+    const container = this._container = win.document.createElement("div");
+    container.__abledomui = true;
+    container.className = "abledom-highlight";
+  }
+  highlight(element) {
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+      return;
+    }
+    const win = this._window;
+    const container = this._container;
+    const style = container.style;
+    if (container.parentElement !== win.document.body) {
+      win.document.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";
+  }
+  hide() {
+    this._container.style.display = "none";
+  }
+};
+function isAbleDOMUIElement(element) {
+  for (let el = element; el; el = el.parentElement) {
+    if (el.__abledomui) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// src/utils.ts
+var focusableElementSelector = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "*[tabindex]",
+  "*[contenteditable]",
+  "details > summary",
+  "audio[controls]",
+  "video[controls]"
+].join(", ");
+var AccessibilityAffectingElements = {
+  a: true,
+  area: true,
+  article: true,
+  aside: true,
+  body: true,
+  button: true,
+  datalist: true,
+  details: true,
+  dialog: true,
+  dl: true,
+  form: true,
+  h1: true,
+  h2: true,
+  h3: true,
+  h4: true,
+  h5: true,
+  h6: true,
+  hr: true,
+  iframe: true,
+  img: true,
+  input: true,
+  li: true,
+  link: true,
+  main: true,
+  menu: true,
+  menuitem: true,
+  meter: true,
+  nav: true,
+  object: true,
+  ol: true,
+  option: true,
+  progress: true,
+  section: true,
+  select: true,
+  tbody: true,
+  textarea: true,
+  tfoot: true,
+  th: true,
+  thead: true,
+  ul: true
+};
+var AccessibilityAttributes = {
+  role: true,
+  tabindex: true,
+  disabled: true,
+  required: true,
+  readonly: true,
+  hidden: true,
+  "aria-activedescendant": true,
+  "aria-atomic": true,
+  "aria-autocomplete": true,
+  "aria-busy": true,
+  "aria-checked": true,
+  "aria-colcount": true,
+  "aria-colindex": true,
+  "aria-colspan": true,
+  "aria-controls": true,
+  "aria-current": true,
+  "aria-describedby": true,
+  "aria-details": true,
+  "aria-disabled": true,
+  "aria-dropeffect": true,
+  "aria-errormessage": true,
+  "aria-expanded": true,
+  "aria-flowto": true,
+  "aria-grabbed": true,
+  "aria-haspopup": true,
+  "aria-hidden": true,
+  "aria-invalid": true,
+  "aria-keyshortcuts": true,
+  "aria-label": true,
+  "aria-labelledby": true,
+  "aria-level": true,
+  "aria-live": true,
+  "aria-modal": true,
+  "aria-multiline": true,
+  "aria-multiselectable": true,
+  "aria-orientation": true,
+  "aria-owns": true,
+  "aria-placeholder": true,
+  "aria-posinset": true,
+  "aria-pressed": true,
+  "aria-readonly": true,
+  "aria-relevant": true,
+  "aria-required": true,
+  "aria-roledescription": true,
+  "aria-rowcount": true,
+  "aria-rowindex": true,
+  "aria-rowspan": true,
+  "aria-selected": true,
+  "aria-setsize": true,
+  "aria-sort": true,
+  "aria-valuemax": true,
+  "aria-valuemin": true,
+  "aria-valuenow": true,
+  "aria-valuetext": true
+};
+function isAccessibilityAffectingElement(element) {
+  const tagName = element.tagName.toLowerCase();
+  const attributes = getAttributes(element);
+  return tagName in AccessibilityAffectingElements || hasAccessibilityAttribute(attributes);
+}
+function hasAccessibilityAttribute(attributes) {
+  for (let attrName of Object.keys(attributes)) {
+    if (attrName in AccessibilityAttributes && !(attrName === "role" && (attributes[attrName] === "none" || attributes[attrName] === "presentation"))) {
+      return true;
+    }
+  }
+  return false;
+}
+function getAttributes(element) {
+  const names = element.getAttributeNames();
+  const attributes = {};
+  for (let name of names) {
+    attributes[name] = element.getAttribute(name) || "";
+  }
+  return attributes;
+}
+function matchesSelector(element, selector) {
+  const matches = element.matches || element.matchesSelector || element.msMatchesSelector || element.webkitMatchesSelector;
+  return matches && matches.call(element, selector);
+}
+function isDisplayNone(element) {
+  var _a, _b;
+  const elementDocument = element.ownerDocument;
+  const computedStyle = (_a = elementDocument.defaultView) == null ? void 0 : _a.getComputedStyle(element);
+  if (element.offsetParent === null && elementDocument.body !== element && (computedStyle == null ? void 0 : computedStyle.position) !== "fixed") {
+    return true;
+  }
+  if ((computedStyle == null ? void 0 : computedStyle.visibility) === "hidden") {
+    return true;
+  }
+  if ((computedStyle == null ? void 0 : computedStyle.position) === "fixed") {
+    if (computedStyle.display === "none") {
+      return true;
+    }
+    if (((_b = element.parentElement) == null ? void 0 : _b.offsetParent) === null && elementDocument.body !== element.parentElement) {
+      return true;
+    }
+  }
+  return false;
+}
+function isElementVisible(element) {
+  if (!element.ownerDocument || element.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+  if (isDisplayNone(element)) {
+    return false;
+  }
+  const rect = element.ownerDocument.body.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) {
+    return false;
+  }
+  return true;
+}
+function getStackTrace() {
+  var _a;
+  const oldStackTraceLimit = Error.stackTraceLimit;
+  try {
+    Error.stackTraceLimit = 1e3;
+    throw new Error();
+  } catch (e) {
+    Error.stackTraceLimit = oldStackTraceLimit;
+    return ((_a = e.stack) == null ? void 0 : _a.split("\n").slice(1).map((line) => line.trim()).filter((line) => line.startsWith("at "))) || [];
+  }
+}
+
+// src/core.ts
+var AbleDOM = class {
+  constructor(win) {
+    __publicField(this, "_win");
+    __publicField(this, "_observer");
+    __publicField(this, "_clearValidationTimeout");
+    __publicField(this, "_elementsWithNotifications", /* @__PURE__ */ new Set());
+    __publicField(this, "_changedElementIds", /* @__PURE__ */ new Set());
+    __publicField(this, "_elementsDependingOnId", /* @__PURE__ */ new Map());
+    __publicField(this, "_dependantIdsByElement", /* @__PURE__ */ new Map());
+    __publicField(this, "_idByElement", /* @__PURE__ */ new Map());
+    __publicField(this, "_rules", []);
+    __publicField(this, "_startFunc");
+    __publicField(this, "_isStarted", false);
+    __publicField(this, "_onFocusIn", (event) => {
+      var _a;
+      const target = event.target;
+      if (target && isAbleDOMUIElement(target)) {
+        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);
+        }
+      }
+    });
+    __publicField(this, "_onFocusOut", (event) => {
+      var _a;
+      const target = event.target;
+      if (target && isAbleDOMUIElement(target)) {
+        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);
+        }
+      }
+    });
+    __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);
+    win.document.addEventListener("focusout", this._onFocusOut, true);
+    this._observer = new MutationObserver((mutations) => {
+      var _a;
+      for (let mutation of mutations) {
+        if (mutation.target.__abledomui) {
+          continue;
+        }
+        const added = mutation.addedNodes;
+        const removed = mutation.removedNodes;
+        const attributeName = mutation.attributeName;
+        if (attributeName === "id") {
+          this._onElementId(mutation.target, false);
+          continue;
+        }
+        lookUp(mutation.target);
+        for (let i = 0; i < added.length; i++) {
+          findTargets(added[i], false);
+        }
+        for (let i = 0; i < removed.length; i++) {
+          findTargets(removed[i], true);
+        }
+      }
+      (_a = this._clearValidationTimeout) == null ? void 0 : _a.call(this);
+      const _validationTimeout = win.setTimeout(() => {
+        delete this._clearValidationTimeout;
+        this._remove(_elementsToRemove);
+        this._validate(_elementsToValidate);
+        _elementsToRemove.clear();
+        _elementsToValidate.clear();
+        this._changedElementIds.clear();
+      }, 200);
+      this._clearValidationTimeout = () => {
+        win.clearTimeout(_validationTimeout);
+        delete this._clearValidationTimeout;
+      };
+    });
+    this._startFunc = () => {
+      delete this._startFunc;
+      this._observer.observe(win.document, {
+        childList: true,
+        subtree: true,
+        attributes: true
+      });
+      findTargets(win.document.body, false);
+      this._validate(_elementsToValidate);
+      _elementsToValidate.clear();
+    };
+    const addTarget = (node, removed) => {
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        return;
+      }
+      const id = node.id;
+      if (id) {
+        this._onElementId(node, removed);
+      }
+      if (removed) {
+        _elementsToRemove.add(node);
+        _elementsToValidate.delete(node);
+      } else {
+        _elementsToValidate.add(node);
+        _elementsToRemove.delete(node);
+      }
+    };
+    function lookUp(node) {
+      for (let n = node; n; n = n.parentNode) {
+        addTarget(n, _elementsToRemove.has(node));
+      }
+    }
+    function findTargets(node, removed) {
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        return;
+      }
+      addTarget(node, removed);
+      const walker = win.document.createTreeWalker(
+        node,
+        NodeFilter.SHOW_ELEMENT,
+        (node2) => {
+          addTarget(node2, removed);
+          return NodeFilter.FILTER_SKIP;
+        }
+      );
+      if (walker) {
+        while (walker.nextNode()) {
+        }
+      }
+    }
+  }
+  _onElementId(element, removed) {
+    const elementId = element.getAttribute("id");
+    const oldElementId = this._idByElement.get(element);
+    if (oldElementId) {
+      this._changedElementIds.add(oldElementId);
+      const elements = this._elementsDependingOnId.get(oldElementId);
+      if (elements) {
+        elements.delete(element);
+        if (elements.size === 0) {
+          this._elementsDependingOnId.delete(oldElementId);
+        }
+      }
+    }
+    if (elementId) {
+      this._changedElementIds.add(elementId);
+      let elements = this._elementsDependingOnId.get(elementId);
+      if (removed) {
+        this._idByElement.delete(element);
+        if (elements) {
+          elements.delete(element);
+          if (elements.size === 0) {
+            this._elementsDependingOnId.delete(elementId);
+          }
+        }
+      } else {
+        this._idByElement.set(element, elementId);
+        if (!elements) {
+          elements = /* @__PURE__ */ new Set();
+          this._elementsDependingOnId.set(elementId, elements);
+        }
+        elements.add(element);
+      }
+    } else {
+      this._idByElement.delete(element);
+    }
+  }
+  _addNotification(rule, notification) {
+    const element = notification == null ? void 0 : notification.element;
+    if (!notification) {
+      this._removeNotification(element || this._win.document.body, rule);
+      return;
+    }
+    let notificationUI;
+    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();
+      }
+      notificationUI = notifications.get(rule);
+      if (!notificationUI) {
+        notificationUI = new NotificationUI(this._win, rule);
+        notifications.set(rule, notificationUI);
+      }
+      this._elementsWithNotifications.add(element);
+    } else {
+      notificationUI = new NotificationUI(this._win, rule);
+    }
+    notificationUI.update(notification);
+  }
+  _removeNotification(element, rule) {
+    var _a;
+    if (!rule.anchored) {
+      return;
+    }
+    const notifications = (_a = element.__abledom) == null ? void 0 : _a.notifications;
+    if (!notifications) {
+      return;
+    }
+    const notification = notifications.get(rule);
+    if (notification) {
+      notification.dispose();
+      notifications.delete(rule);
+    }
+    if (notifications.size === 0) {
+      this._elementsWithNotifications.delete(element);
+      delete element.__abledom;
+    }
+  }
+  _validate(elements) {
+    for (const id of this._changedElementIds) {
+      const dependingOnId = this._elementsDependingOnId.get(id);
+      if (dependingOnId) {
+        for (const element of dependingOnId) {
+          elements.add(element);
+        }
+      }
+    }
+    elements.forEach((element) => {
+      var _a, _b, _c, _d, _e;
+      if (isAccessibilityAffectingElement(element) || ((_a = element.__abledom) == null ? void 0 : _a.notifications)) {
+        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) {
+            continue;
+          }
+          if (ValidationRule.checkExceptions(rule, element)) {
+            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);
+            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);
+          }
+        }
+        this._processElementDependingOnIds(
+          element,
+          dependsOnIds.size === 0 ? null : dependsOnIds
+        );
+      }
+    });
+  }
+  _processElementDependingOnIds(element, ids) {
+    let dependsOnIds = this._dependantIdsByElement.get(element);
+    if (!ids && !dependsOnIds) {
+      return;
+    }
+    if (!dependsOnIds) {
+      dependsOnIds = /* @__PURE__ */ new Set();
+    }
+    if (!ids) {
+      ids = /* @__PURE__ */ new Set();
+    }
+    for (const id of dependsOnIds) {
+      if (!ids.has(id)) {
+        const elements = this._elementsDependingOnId.get(id);
+        if (elements) {
+          elements.delete(element);
+          if (elements.size === 0) {
+            this._elementsDependingOnId.delete(id);
+          }
+        }
+      }
+    }
+    for (const id of ids) {
+      if (!dependsOnIds.has(id)) {
+        dependsOnIds.add(id);
+        let elements = this._elementsDependingOnId.get(id);
+        if (!elements) {
+          elements = /* @__PURE__ */ new Set();
+          this._elementsDependingOnId.set(id, elements);
+        }
+        elements.add(element);
+      }
+    }
+    if (dependsOnIds.size === 0) {
+      this._dependantIdsByElement.delete(element);
+    } else {
+      this._dependantIdsByElement.set(element, dependsOnIds);
+    }
+  }
+  _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));
+    });
+  }
+  addRule(rule) {
+    this._rules.push(rule);
+  }
+  removeRule(rule) {
+    var _a;
+    const index = this._rules.indexOf(rule);
+    if (index >= 0) {
+      const rule2 = this._rules[index];
+      this._rules.splice(index, 1);
+      (_a = rule2.stop) == null ? void 0 : _a.call(rule2);
+    }
+  }
+  start() {
+    var _a, _b;
+    if (this._isStarted) {
+      return;
+    }
+    this._isStarted = true;
+    for (const rule of this._rules) {
+      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._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) {
+      delete this._startFunc;
+    } else {
+      this._observer.disconnect();
+    }
+  }
+};
+
+// src/rules/atomic.ts
+var AtomicRule = class extends ValidationRule {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", 1 /* Error */);
+    __publicField(this, "name", "atomic");
+    __publicField(this, "anchored", true);
+  }
+  accept(element) {
+    return matchesSelector(element, focusableElementSelector);
+  }
+  validate(element) {
+    const parentAtomic = document.evaluate(
+      `ancestor::*[
+          @role = 'button' or 
+          @role = 'checkbox' or 
+          @role = 'link' or 
+          @role = 'menuitem' or 
+          @role = 'menuitemcheckbox' or 
+          @role = 'menuitemradio' or 
+          @role = 'option' or 
+          @role = 'radio' or 
+          @role = 'switch' or 
+          @role = 'tab' or 
+          @role = 'treeitem' or
+          self::a or
+          self::button or
+          self::input or
+          self::option or
+          self::textarea 
+        ][1]`,
+      element,
+      null,
+      XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
+      null
+    ).snapshotItem(0);
+    if (parentAtomic) {
+      return {
+        notification: {
+          id: "focusable-in-atomic",
+          message: "Focusable element inside atomic focusable.",
+          element,
+          rel: parentAtomic
+        }
+      };
+    }
+    return null;
+  }
+};
+
+// src/rules/label.ts
+var _keyboardEditableInputTypes = /* @__PURE__ */ new Set([
+  "text",
+  "password",
+  "email",
+  "search",
+  "tel",
+  "url",
+  "number",
+  "date",
+  "month",
+  "week",
+  "time",
+  "datetime-local"
+]);
+var FocusableElementLabelRule = class extends ValidationRule {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", 1 /* Error */);
+    __publicField(this, "name", "FocusableElementLabelRule");
+    __publicField(this, "anchored", true);
+  }
+  _isAriaHidden(element) {
+    return document.evaluate(
+      `ancestor-or-self::*[@aria-hidden = 'true' or @hidden]`,
+      element,
+      null,
+      XPathResult.BOOLEAN_TYPE,
+      null
+    ).booleanValue;
+  }
+  _hasLabel(element) {
+    var _a, _b;
+    const labels = element.labels;
+    if (labels && labels.length > 0) {
+      for (let i = 0; i < labels.length; i++) {
+        const label = labels[i];
+        if (label.innerText.trim()) {
+          return true;
+        }
+      }
+    }
+    if (element.tagName === "IMG") {
+      if (element.alt.trim()) {
+        return true;
+      }
+    }
+    const labelNodes = document.evaluate(
+      `(
+      .//@aria-label | 
+      .//text() | 
+      .//@title | 
+      .//img/@alt | 
+      .//input[@type = 'image']/@alt | 
+      .//input[@type != 'hidden'][@type = 'submit' or @type = 'reset' or @type = 'button']/@value
+    )[not(ancestor-or-self::*[@aria-hidden = 'true' or @hidden])]`,
+      element,
+      null,
+      XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
+      null
+    );
+    for (let i = 0; i < labelNodes.snapshotLength; i++) {
+      const val = (_b = (_a = labelNodes.snapshotItem(i)) == null ? void 0 : _a.nodeValue) == null ? void 0 : _b.trim();
+      if (val) {
+        return true;
+      }
+    }
+    return false;
+  }
+  accept(element) {
+    return matchesSelector(element, focusableElementSelector);
+  }
+  validate(element) {
+    var _a, _b;
+    if (element.tagName === "INPUT") {
+      const type = element.type;
+      if (type === "hidden") {
+        return null;
+      }
+      if (_keyboardEditableInputTypes.has(type)) {
+        return null;
+      }
+      if (type === "image") {
+        if (element.alt.trim()) {
+          return null;
+        }
+      }
+      if (type === "submit" || type === "reset" || type === "button") {
+        if (element.value.trim()) {
+          return null;
+        }
+      }
+    }
+    if (this._isAriaHidden(element)) {
+      return null;
+    }
+    if (this._hasLabel(element)) {
+      return null;
+    }
+    const labelledByNodes = document.evaluate(
+      `.//@aria-labelledby[not(ancestor-or-self::*[@aria-hidden = 'true' or @hidden])]`,
+      element,
+      null,
+      XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
+      null
+    );
+    const labelledByValues = [];
+    for (let i = 0; i < labelledByNodes.snapshotLength; i++) {
+      const val = (_b = (_a = labelledByNodes.snapshotItem(i)) == null ? void 0 : _a.value) == null ? void 0 : _b.trim().split(" ");
+      if (val == null ? void 0 : val.length) {
+        labelledByValues.push(...val);
+      }
+    }
+    for (const id of labelledByValues) {
+      const labelElement = document.getElementById(id);
+      if (labelElement && this._hasLabel(labelElement)) {
+        return {
+          dependsOnIds: new Set(labelledByValues)
+        };
+      }
+    }
+    return {
+      notification: isElementVisible(element) ? {
+        id: "focusable-element-label",
+        message: "Focusable element must have a non-empty text label.",
+        element
+      } : void 0,
+      dependsOnIds: new Set(labelledByValues)
+    };
+  }
+};
+
+// src/rules/existingid.ts
+var ExistingIdRule = class extends ValidationRule {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", 1 /* Error */);
+    __publicField(this, "name", "existing-id");
+    __publicField(this, "anchored", true);
+  }
+  accept(element) {
+    return element.hasAttribute("aria-labelledby") || element.hasAttribute("aria-describedby") || element.tagName === "LABEL" && !!element.htmlFor;
+  }
+  validate(element) {
+    var _a, _b;
+    const ids = [
+      ...((_a = element.getAttribute("aria-labelledby")) == null ? void 0 : _a.split(" ")) || [],
+      ...((_b = element.getAttribute("aria-describedby")) == null ? void 0 : _b.split(" ")) || [],
+      ...element.tagName === "LABEL" ? [element.htmlFor] : []
+    ].filter((id) => !!id);
+    if (ids.length === 0) {
+      return null;
+    }
+    for (const id of ids) {
+      if (document.getElementById(id)) {
+        return {
+          dependsOnIds: new Set(ids)
+        };
+      }
+    }
+    return {
+      notification: {
+        id: "missing-id",
+        message: `Elements with referenced ids do not extist.`,
+        element
+      },
+      dependsOnIds: new Set(ids)
+    };
+  }
+};
+
+// src/rules/focuslost.ts
+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);
+    // For now reporting lost focus after 2 seconds of it being lost.
+    __publicField(this, "_clearScheduledFocusLost");
+    __publicField(this, "_focusedElement");
+    __publicField(this, "_focusedElementPosition");
+    __publicField(this, "_lastFocusStack");
+    __publicField(this, "_lastBlurStack");
+    __publicField(this, "_mouseEventTimer");
+    __publicField(this, "_releaseMouseEvent");
+  }
+  _serializeElementPosition(element) {
+    const position = [];
+    const parentElement = element.parentElement;
+    if (!parentElement) {
+      return position;
+    }
+    for (let el = parentElement; el; el = el.parentElement) {
+      const tagName = el.tagName.toLowerCase();
+      position.push(tagName);
+    }
+    return position;
+  }
+  focused(event) {
+    var _a;
+    const target = event.target;
+    (_a = this._clearScheduledFocusLost) == null ? void 0 : _a.call(this);
+    if (target) {
+      this._lastFocusStack = getStackTrace();
+      this._focusedElement = target;
+      this._focusedElementPosition = this._serializeElementPosition(target);
+    }
+    return null;
+  }
+  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 || this._mouseEventTimer) {
+      return null;
+    }
+    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;
+      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);
+      }
+    };
+    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;
+  }
+};
+
+// src/rules/badfocus.ts
+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, "_clearCheckTimer");
+  }
+  focused() {
+    this._lastFocusStack = getStackTrace();
+    return null;
+  }
+  blurred() {
+    var _a;
+    const win = this.window;
+    if (!win) {
+      return null;
+    }
+    this._lastBlurStack = getStackTrace();
+    (_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
+    });
+  }
+};
+export {
+  AbleDOM,
+  AtomicRule,
+  BadFocusRule,
+  CustomNotifyRule,
+  ExistingIdRule,
+  FindElementRule,
+  FocusLostRule,
+  FocusableElementLabelRule,
+  ValidationRule,
+  ValidationRuleType,
+  hasAccessibilityAttribute,
+  isAccessibilityAffectingElement,
+  isDisplayNone,
+  isElementVisible,
+  matchesSelector
+};
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+//# sourceMappingURL=index.js.map