abledom 0.0.0 → 0.0.1

package/dist/esm/index.js

@@ -0,0 +1,1153 @@
+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);
+
+// 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";
+
+// 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>';
+
+// src/ui/ui.ts
+var _NotificationUI = class _NotificationUI {
+  constructor(element, error) {
+    __publicField(this, "_wrapper");
+    var _a;
+    const wrapper = this._wrapper = document.createElement(
+      "div"
+    );
+    const win = element.ownerDocument.defaultView;
+    if (!win) {
+      return;
+    }
+    if (!_NotificationUI._highlight) {
+      _NotificationUI._highlight = new ElementHighlighter(win);
+    }
+    wrapper.__abledomui = true;
+    wrapper.innerHTML = `
+      <div class="abledom-notification-container"><div class="abledom-notification">
+        <button class="button" title="Log to Console">${log_default}</button>
+        <button class="button" title="Reveal in Elements panel">${reveal_default}</button>
+        ${error.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 violation: ",
+        "\nerror:",
+        error.message,
+        "\nelement:",
+        element,
+        ...error.rel ? ["\nrelative:", error.rel] : []
+      );
+    };
+    const hasDevTools = !!((_a = win.__ableDOMDevtools) == null ? void 0 : _a.revealElement);
+    if (hasDevTools && 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;
+      wrapper.style.display = "none";
+      (_a2 = _NotificationUI._highlight) == null ? void 0 : _a2.hide();
+    };
+    container.onmouseover = () => {
+      var _a2;
+      (_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;
+  }
+  dispose() {
+    this._wrapper.remove();
+  }
+};
+__publicField(_NotificationUI, "_highlight");
+var NotificationUI = _NotificationUI;
+var NotificationsUI = class {
+  constructor(win) {
+    // private _window: Window;
+    __publicField(this, "_container");
+    __publicField(this, "_notifications", /* @__PURE__ */ new Set());
+    const container = this._container = document.createElement("div");
+    container.__abledomui = true;
+    container.id = "abledom-report";
+    container.innerHTML = `<style>${ui_default}</style>`;
+    win.document.body.appendChild(container);
+  }
+  addNotification(notification) {
+    if (this._notifications.has(notification)) {
+      return;
+    }
+    this._notifications.add(notification);
+    this._container.appendChild(NotificationUI.getElement(notification));
+  }
+  removeNotification(notification) {
+    if (!this._notifications.has(notification)) {
+      return;
+    }
+    this._notifications.delete(notification);
+    this._container.removeChild(NotificationUI.getElement(notification));
+  }
+};
+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/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, "_observer");
+    __publicField(this, "_clearValidationTimeout");
+    __publicField(this, "_elementsWithErrors", /* @__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) {
+        (_a = rule.focused) == null ? void 0 : _a.call(rule, event).then(
+          (focusError) => {
+            if (focusError) {
+              this._addValidationError(
+                focusError.element,
+                rule,
+                focusError.error
+              );
+            }
+          },
+          () => {
+          }
+        );
+      }
+    });
+    __publicField(this, "_onFocusOut", (event) => {
+      var _a;
+      const target = event.target;
+      if (target && isAbleDOMUIElement(target)) {
+        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
+              );
+            }
+          },
+          () => {
+          }
+        );
+      }
+    });
+    this._window = 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, false);
+      }
+    }
+    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);
+    }
+  }
+  _addValidationError(element, rule, error) {
+    if (!error) {
+      this._removeElementError(element, rule);
+      return;
+    }
+    if (rule.anchored) {
+      let abledomOnElement = element.__abledom;
+      if (!abledomOnElement) {
+        abledomOnElement = element.__abledom = {};
+      }
+      let errors = abledomOnElement.errors;
+      if (!errors) {
+        errors = abledomOnElement.errors = /* @__PURE__ */ new Map();
+      }
+      const report = errors.get(rule);
+      if (report) {
+        report.update(error);
+      } else {
+        errors.set(rule, new ValidationErrorReport(element, error));
+      }
+      this._elementsWithErrors.add(element);
+    } else {
+      const report = new ValidationErrorReport(element, error, () => {
+        report.remove();
+      });
+    }
+  }
+  _removeElementError(element, rule) {
+    var _a;
+    if (!rule.anchored) {
+      return;
+    }
+    const errors = (_a = element.__abledom) == null ? void 0 : _a.errors;
+    if (!errors) {
+      return;
+    }
+    const report = errors.get(rule);
+    if (report) {
+      report.remove();
+      errors.delete(rule);
+    }
+    if (errors.size === 0) {
+      this._elementsWithErrors.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.errors)) {
+        const dependsOnIds = /* @__PURE__ */ new Set();
+        for (const rule of this._rules) {
+          if (((_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);
+            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);
+          }
+        }
+        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.errors) == null ? void 0 : _b.keys()) || []];
+      rules.forEach((rule) => this._removeElementError(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.setWindow(rule, this._window);
+      (_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._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);
+    }
+    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, "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 {
+        error: {
+          id: "focusable-in-atomic",
+          message: "Focusable element inside atomic focusable.",
+          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, "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 {
+      error: isElementVisible(element) ? {
+        id: "focusable-element-label",
+        message: "Focusable element must have a non-empty text label."
+      } : void 0,
+      dependsOnIds: new Set(labelledByValues)
+    };
+  }
+};
+
+// src/rules/existingid.ts
+var ExistingIdRule = class extends ValidationRule {
+  constructor() {
+    super(...arguments);
+    __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 {
+      error: {
+        id: "missing-id",
+        message: `Elements with referenced ids do not extist.`
+      },
+      dependsOnIds: new Set(ids)
+    };
+  }
+};
+
+// src/rules/focuslost.ts
+var FocusLostRule = class extends ValidationRule {
+  constructor() {
+    super(...arguments);
+    __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");
+  }
+  _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;
+  }
+  async 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;
+  }
+  async 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) {
+      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;
+    this._clearScheduledFocusLost = () => {
+      delete this._clearScheduledFocusLost;
+      rejectPromise == null ? void 0 : rejectPromise();
+      if (focusLostTimer) {
+        win.clearTimeout(focusLostTimer);
+        focusLostTimer = void 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);
+    });
+  }
+};
+
+// src/rules/badfocus.ts
+var BadFocusRule = class extends ValidationRule {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "name", "bad-focus");
+    __publicField(this, "anchored", false);
+    __publicField(this, "_lastFocusStack");
+    __publicField(this, "_lastBlurStack");
+    __publicField(this, "_reject");
+  }
+  async focused() {
+    var _a;
+    this._lastFocusStack = getStackTrace();
+    (_a = this._reject) == null ? void 0 : _a.call(this);
+    return null;
+  }
+  async 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);
+    });
+  }
+};
+export {
+  AbleDOM,
+  AtomicRule,
+  BadFocusRule,
+  ExistingIdRule,
+  FocusLostRule,
+  FocusableElementLabelRule,
+  ValidationRule
+};
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+//# sourceMappingURL=index.js.map