accented 0.0.0-20250124142030 → 0.0.0-20250223121749

package/README.md

@@ -37,7 +37,47 @@ The following types are exported for TypeScript consumers:
 
 ### Options
 
-#### `outputToConsole`
+#### `axeContext`
+
+**Type:** see [documentation](https://www.deque.com/axe/core-documentation/api-documentation/#context-parameter).
+
+**Default:** `document`.
+
+The `context` parameter for `axe.run()`.
+
+Determines what element(s) to scan for accessibility issues.
+
+Accepts a variety of shapes:
+* an element reference;
+* a selector;
+* a `NodeList`;
+* an include / exclude object;
+* and more.
+
+See documentation: https://www.deque.com/axe/core-documentation/api-documentation/#context-parameter
+
+#### `axeOptions`
+
+**Type:** object.
+
+**Default:** `{}`.
+
+The `options` parameter for `axe.run()`.
+
+Accented only supports two keys of the `options` object:
+
+* `rules`;
+* `runOnly`.
+
+Both properties are optional, and both control which accessibility rules your page is tested against.
+
+See documentation: https://www.deque.com/axe/core-documentation/api-documentation/#options-parameter
+
+#### `output`
+
+An object controlling how the results of scans will be presented.
+
+#### `output.console`
 
 **Type:** boolean.
 
@@ -79,9 +119,15 @@ The character sequence that’s used in various elements, attributes and stylesh
 You shouldn’t have to use this attribute unless some of the names on your page conflict with what Accented provides by default.
 
 * The data attribute that’s added to elements with issues (default: `data-accented`).
-* The custom element that encapsulates the button and dialog attached to each element with issues (default: `accented-container`).
+* The custom elements for the button and the dialog that get created for each element with issues
+  (default: `accented-trigger`, `accented-dialog`).
 * The CSS cascade layer containing page-wide Accented-specific styles (default: `accented`).
 * The prefix for some of the CSS custom properties used by Accented (default: `--accented-`).
+* The window property that’s used to prevent multiple axe-core scans from running simultaneously
+  (default: `__accented_axe_running__`).
+
+Only lowercase alphanumeric characters and dashes (-) are allowed in the name,
+and it must start with a lowercase letter.
 
 **Example:**
 
@@ -90,7 +136,7 @@ accented({name: 'my-name'});
 ```
 
 With the above option provided, the attribute set on elements with issues will be `data-my-name`,
-the custom element will be called `my-name-container`, and so on.
+a custom element will be called `my-name-trigger`, and so on.
 
 #### `throttle`
 
@@ -130,6 +176,12 @@ This may be useful if you’re expecting bursts of mutations on your page.
 
 TODO: Create a separate doc with info on using `:root` and CSS layers to control some aspects of styling.
 
+Documented CSS custom props:
+* `--accented-primary-color`
+* `--accented-secondary-color`
+* `--accented-outline-width`
+* `--accented-outline-style`
+
 ## Miscellaneous
 
 ### Shadow DOM

package/dist/accented.d.ts

@@ -12,7 +12,9 @@ export type { AccentedOptions, DisableAccented };
  *
  * @example
  * const disableAccented = accented({
- *   outputToConsole: false,
+ *   output: {
+ *     console: false
+ *   },
  *   throttle: {
  *     wait: 500,
  *     leading: false

package/dist/accented.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accented.d.ts","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAgB,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE9E,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;AAiBjD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,OAAO,GAAE,eAAoB,GAAG,eAAe,CAiD/E"}
+{"version":3,"file":"accented.d.ts","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAKhE,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,OAAO,GAAE,eAAoB,GAAG,eAAe,CA4E/E"}

package/dist/accented.js

@@ -1,23 +1,15 @@
+import registerElements from './register-elements.js';
 import createDomUpdater from './dom-updater.js';
 import createLogger from './logger.js';
 import createScanner from './scanner.js';
+import setupScrollListeners from './scroll-listeners.js';
+import setupResizeListener from './resize-listener.js';
+import setupIntersectionObserver from './intersection-observer.js';
 import { enabled, extendedElementsWithIssues } from './state.js';
 import deepMerge from './utils/deep-merge.js';
-import getAccentedContainer from './elements/accented-container.js';
-// IMPORTANT: when changing any of the properties or values, also do the following:
-// * update the default value in the type documentation accordingly;
-// * update validations and validation tests if necessary;
-// * update examples in the accented() function JSDoc;
-// * update examples in the Readme.
-const defaultOptions = {
-    name: 'accented',
-    outputToConsole: true,
-    throttle: {
-        wait: 1000,
-        leading: true
-    },
-    callback: () => { }
-};
+import validateOptions from './validate-options.js';
+import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
+import logAndRethrow from './log-and-rethrow.js';
 /**
  * Enables highlighting of elements with accessibility issues.
  *
@@ -30,7 +22,9 @@ const defaultOptions = {
  *
  * @example
  * const disableAccented = accented({
- *   outputToConsole: false,
+ *   output: {
+ *     console: false
+ *   },
  *   throttle: {
  *     wait: 500,
  *     leading: false
@@ -42,44 +36,69 @@ const defaultOptions = {
  * });
  */
 export default function accented(options = {}) {
-    // Argument validation
-    if (options.throttle !== undefined) {
-        if (typeof options.throttle !== 'object' || options.throttle === null) {
-            throw new TypeError(`Invalid argument: \`throttle\` option must be an object if provided. It’s currently set to ${options.throttle}.`);
-        }
-        if (options.throttle.wait !== undefined && (typeof options.throttle.wait !== 'number' || options.throttle.wait < 0)) {
-            throw new TypeError(`Invalid argument: \`throttle.wait\` option must be a non-negative number if provided. It’s currently set to ${options.throttle.wait}.`);
+    validateOptions(options);
+    try {
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            console.warn('Accented: this script can only run in the browser, and it’s likely running on the server now. Exiting.');
+            console.trace();
+            return () => { };
         }
-        if (options.callback !== undefined && typeof options.callback !== 'function') {
-            throw new TypeError(`Invalid argument: \`callback\` option must be a function if provided. It’s currently set to ${options.callback}.`);
+        const defaultOutput = {
+            console: true
+        };
+        const defaultThrottle = {
+            wait: 1000,
+            leading: true
+        };
+        // IMPORTANT: when changing any of the properties or values, also do the following:
+        // * update the default value in the type documentation accordingly;
+        // * update validations and validation tests if necessary;
+        // * update examples in the accented() function JSDoc;
+        // * update examples in the Readme.
+        const defaultOptions = {
+            axeContext: document,
+            axeOptions: {},
+            name: 'accented',
+            output: defaultOutput,
+            throttle: defaultThrottle,
+            callback: () => { }
+        };
+        const { axeContext, axeOptions, name, output, throttle, callback } = deepMerge(defaultOptions, options);
+        if (enabled.value) {
+            // Add link to the recipes section of the docs (#56).
+            console.warn('You are trying to run the Accented library more than once. ' +
+                'This will likely lead to errors.');
+            console.trace();
         }
+        enabled.value = true;
+        registerElements(name);
+        const { disconnect: cleanupIntersectionObserver, intersectionObserver } = supportsAnchorPositioning(window) ? {} : setupIntersectionObserver();
+        const cleanupScanner = createScanner(name, axeContext, axeOptions, throttle, callback);
+        const cleanupDomUpdater = createDomUpdater(name, intersectionObserver);
+        const cleanupLogger = output.console ? createLogger() : () => { };
+        const cleanupScrollListeners = supportsAnchorPositioning(window) ? () => { } : setupScrollListeners();
+        const cleanupResizeListener = supportsAnchorPositioning(window) ? () => { } : setupResizeListener();
+        return () => {
+            try {
+                enabled.value = false;
+                extendedElementsWithIssues.value = [];
+                cleanupScanner();
+                cleanupDomUpdater();
+                cleanupLogger();
+                cleanupScrollListeners();
+                cleanupResizeListener();
+                if (cleanupIntersectionObserver) {
+                    cleanupIntersectionObserver();
+                }
+            }
+            catch (error) {
+                logAndRethrow(error);
+            }
+        };
     }
-    if (typeof window === 'undefined' || typeof document === 'undefined') {
-        console.warn('Accented: this script can only run in the browser, and it’s likely running on the server now. Exiting.');
-        console.trace();
+    catch (error) {
+        logAndRethrow(error);
         return () => { };
     }
-    const { name, outputToConsole, throttle, callback } = deepMerge(defaultOptions, options);
-    const AccentedContainer = getAccentedContainer(name);
-    if (!customElements.get(`${name}-container`)) {
-        customElements.define(`${name}-container`, AccentedContainer);
-    }
-    if (enabled.value) {
-        // TODO: add link to relevant docs
-        console.warn('You are trying to run the Accented library more than once. ' +
-            'This will likely lead to errors.');
-        console.trace();
-    }
-    enabled.value = true;
-    const cleanupScanner = createScanner(name, throttle, callback);
-    const cleanupDomUpdater = createDomUpdater(name);
-    const cleanupLogger = outputToConsole ? createLogger() : () => { };
-    return () => {
-        enabled.value = false;
-        extendedElementsWithIssues.value = [];
-        cleanupScanner();
-        cleanupDomUpdater();
-        cleanupLogger();
-    };
 }
 //# sourceMappingURL=accented.js.map

package/dist/accented.js.map

@@ -1 +1 @@
-{"version":3,"file":"accented.js","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,kBAAkB,CAAC;AAChD,OAAO,YAAY,MAAM,aAAa,CAAC;AACvC,OAAO,aAAa,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,oBAAoB,MAAM,kCAAkC,CAAA;AAKnE,mFAAmF;AACnF,oEAAoE;AACpE,0DAA0D;AAC1D,sDAAsD;AACtD,mCAAmC;AACnC,MAAM,cAAc,GAAkC;IACpD,IAAI,EAAE,UAAU;IAChB,eAAe,EAAE,IAAI;IACrB,QAAQ,EAAE;QACR,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,IAAI;KACd;IACD,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,UAA2B,EAAE;IAE5D,sBAAsB;IACtB,IAAI,OAAO,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;QACnC,IAAI,OAAO,OAAO,CAAC,QAAQ,KAAK,QAAQ,IAAI,OAAO,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YACtE,MAAM,IAAI,SAAS,CAAC,8FAA8F,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC;QACzI,CAAC;QACD,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,OAAO,OAAO,CAAC,QAAQ,CAAC,IAAI,KAAK,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC,EAAE,CAAC;YACpH,MAAM,IAAI,SAAS,CAAC,+GAA+G,OAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC;QAC/J,CAAC;QACD,IAAI,OAAO,CAAC,QAAQ,KAAK,SAAS,IAAI,OAAO,OAAO,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;YAC7E,MAAM,IAAI,SAAS,CAAC,+FAA+F,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC;QAC1I,CAAC;IACH,CAAC;IAED,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACrE,OAAO,CAAC,IAAI,CAAC,wGAAwG,CAAC,CAAC;QACvH,OAAO,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC;IAED,MAAM,EAAC,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,GAAG,SAAS,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;IAEvF,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,IAAI,CAAC,CAAC;IACrD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,IAAI,YAAY,CAAC,EAAE,CAAC;QAC7C,cAAc,CAAC,MAAM,CAAC,GAAG,IAAI,YAAY,EAAE,iBAAiB,CAAC,CAAC;IAChE,CAAC;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,kCAAkC;QAClC,OAAO,CAAC,IAAI,CACV,6DAA6D;YAC7D,kCAAkC,CACnC,CAAC;QACF,OAAO,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;IAED,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;IACrB,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC/D,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;IAElE,OAAO,GAAG,EAAE;QACV,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;QACtB,0BAA0B,CAAC,KAAK,GAAG,EAAE,CAAC;QACtC,cAAc,EAAE,CAAC;QACjB,iBAAiB,EAAE,CAAC;QACpB,aAAa,EAAE,CAAC;IAClB,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"accented.js","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"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"}

package/dist/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const accentedUrl = "https://www.npmjs.com/package/accented";
+export declare const issuesUrl = "https://github.com/pomerantsev/accented/issues";
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,2CAA2C,CAAC;AACpE,eAAO,MAAM,SAAS,mDAAmD,CAAC"}

package/dist/constants.js

@@ -0,0 +1,3 @@
+export const accentedUrl = 'https://www.npmjs.com/package/accented';
+export const issuesUrl = 'https://github.com/pomerantsev/accented/issues';
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,wCAAwC,CAAC;AACpE,MAAM,CAAC,MAAM,SAAS,GAAG,gDAAgD,CAAC"}

package/dist/dom-updater.d.ts

@@ -1,2 +1,2 @@
-export default function createDomUpdater(name: string): () => void;
+export default function createDomUpdater(name: string, intersectionObserver?: IntersectionObserver): () => void;
 //# sourceMappingURL=dom-updater.d.ts.map

package/dist/dom-updater.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom-updater.d.ts","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,IAAI,EAAE,MAAM,cAmGpD"}
+{"version":3,"file":"dom-updater.d.ts","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,oBAAoB,CAAC,EAAE,oBAAoB,cA0GjG"}

package/dist/dom-updater.js

@@ -1,15 +1,17 @@
 import { effect } from '@preact/signals-core';
 import { extendedElementsWithIssues } from './state.js';
-export default function createDomUpdater(name) {
+import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
+export default function createDomUpdater(name, intersectionObserver) {
     const attrName = `data-${name}`;
-    function supportsAnchorPositioning() {
-        return CSS.supports('anchor-name: --foo') && CSS.supports('position-anchor: --foo');
+    function getAnchorNames(anchorNameValue) {
+        return anchorNameValue
+            .split(',')
+            .map(anchorName => anchorName.trim())
+            .filter(anchorName => anchorName.startsWith('--'));
     }
     function setAnchorName(element, id) {
         const anchorNameValue = element.style.getPropertyValue('anchor-name') || window.getComputedStyle(element).getPropertyValue('anchor-name');
-        const anchorNames = anchorNameValue
-            .split(/,\s*/)
-            .filter(anchorName => anchorName.startsWith('--'));
+        const anchorNames = getAnchorNames(anchorNameValue);
         if (anchorNames.length > 0) {
             element.style.setProperty('anchor-name', `${anchorNameValue}, --${name}-anchor-${id}`);
         }
@@ -19,9 +21,7 @@ export default function createDomUpdater(name) {
     }
     function removeAnchorName(element, id) {
         const anchorNameValue = element.style.getPropertyValue('anchor-name');
-        const anchorNames = anchorNameValue
-            .split(/,\s*/)
-            .filter(anchorName => anchorName.startsWith('--'));
+        const anchorNames = getAnchorNames(anchorNameValue);
         const index = anchorNames.indexOf(`--${name}-anchor-${id}`);
         if (anchorNames.length === 1 && index === 0) {
             element.style.removeProperty('anchor-name');
@@ -31,25 +31,32 @@ export default function createDomUpdater(name) {
         }
     }
     function setIssues(extendedElementsWithIssues) {
-        const displayAccentedContainers = supportsAnchorPositioning();
         for (const elementWithIssues of extendedElementsWithIssues) {
             elementWithIssues.element.setAttribute(attrName, elementWithIssues.id.toString());
-            if (displayAccentedContainers) {
+            if (supportsAnchorPositioning(window)) {
                 setAnchorName(elementWithIssues.element, elementWithIssues.id);
-                if (elementWithIssues.element.parentElement) {
-                    elementWithIssues.element.insertAdjacentElement('afterend', elementWithIssues.accentedContainer);
-                }
-                else {
-                    elementWithIssues.element.insertAdjacentElement('beforeend', elementWithIssues.accentedContainer);
-                }
+            }
+            if (elementWithIssues.element.parentElement) {
+                elementWithIssues.element.insertAdjacentElement('afterend', elementWithIssues.trigger);
+            }
+            else {
+                elementWithIssues.element.insertAdjacentElement('beforeend', elementWithIssues.trigger);
+            }
+            if (intersectionObserver) {
+                intersectionObserver.observe(elementWithIssues.element);
             }
         }
     }
     function removeIssues(extendedElementsWithIssues) {
         for (const elementWithIssues of extendedElementsWithIssues) {
             elementWithIssues.element.removeAttribute(attrName);
-            removeAnchorName(elementWithIssues.element, elementWithIssues.id);
-            elementWithIssues.accentedContainer.remove();
+            if (supportsAnchorPositioning(window)) {
+                removeAnchorName(elementWithIssues.element, elementWithIssues.id);
+            }
+            elementWithIssues.trigger.remove();
+            if (intersectionObserver) {
+                intersectionObserver.unobserve(elementWithIssues.element);
+            }
         }
     }
     const stylesheet = new CSSStyleSheet();

package/dist/dom-updater.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom-updater.js","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAGxD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,IAAY;IACnD,MAAM,QAAQ,GAAG,QAAQ,IAAI,EAAE,CAAC;IAEhC,SAAS,yBAAyB;QAChC,OAAO,GAAG,CAAC,QAAQ,CAAC,oBAAoB,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,wBAAwB,CAAC,CAAC;IACtF,CAAC;IAED,SAAS,aAAa,CAAE,OAAoB,EAAE,EAAU;QACtD,MAAM,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAC1I,MAAM,WAAW,GAAG,eAAe;aAChC,KAAK,CAAC,MAAM,CAAC;aACb,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;QACrD,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC3B,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,GAAG,eAAe,OAAO,IAAI,WAAW,EAAE,EAAE,CAAC,CAAC;QACzF,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,KAAK,IAAI,WAAW,EAAE,EAAE,CAAC,CAAC;QACrE,CAAC;IACH,CAAC;IAED,SAAS,gBAAgB,CAAE,OAAoB,EAAE,EAAU;QACzD,MAAM,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;QACtE,MAAM,WAAW,GAAG,eAAe;aAChC,KAAK,CAAC,MAAM,CAAC;aACb,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;QACrD,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,WAAW,EAAE,EAAE,CAAC,CAAC;QAC5D,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAC5C,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QAC9C,CAAC;aAAM,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;YAChD,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACjG,CAAC;IACH,CAAC;IAED,SAAS,SAAS,CAAE,0BAA4D;QAC9E,MAAM,yBAAyB,GAAG,yBAAyB,EAAE,CAAC;QAC9D,KAAK,MAAM,iBAAiB,IAAI,0BAA0B,EAAE,CAAC;YAC3D,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;YAClF,IAAI,yBAAyB,EAAE,CAAC;gBAC9B,aAAa,CAAC,iBAAiB,CAAC,OAAO,EAAE,iBAAiB,CAAC,EAAE,CAAC,CAAC;gBAC/D,IAAI,iBAAiB,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC;oBAC5C,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,CAAC,UAAU,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;gBACnG,CAAC;qBAAM,CAAC;oBACN,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,CAAC,WAAW,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;gBACpG,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,SAAS,YAAY,CAAE,0BAA4D;QACjF,KAAK,MAAM,iBAAiB,IAAI,0BAA0B,EAAE,CAAC;YAC3D,iBAAiB,CAAC,OAAO,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;YACpD,gBAAgB,CAAC,iBAAiB,CAAC,OAAO,EAAE,iBAAiB,CAAC,EAAE,CAAC,CAAC;YAClE,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,MAAM,UAAU,GAAG,IAAI,aAAa,EAAE,CAAC;IACvC,UAAU,CAAC,WAAW,CAAC;aACZ,IAAI;;YAEL,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;;;SAGP,QAAQ;+BACc,IAAI;0CACO,IAAI;+BACf,IAAI;+BACJ,IAAI;;;GAGhC,CAAC,CAAC;IAEH,IAAI,kCAAkC,GAAqC,EAAE,CAAC;IAE9E,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC7C,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,QAAQ,CAAC,kBAAkB,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YACrD,QAAQ,CAAC,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,kBAAkB,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;QACzF,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,EAAE;QAC1C,MAAM,KAAK,GAAG,0BAA0B,CAAC,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE;YACxE,OAAO,CAAC,kCAAkC,CAAC,IAAI,CAAC,yBAAyB,CAAC,EAAE,CAAC,yBAAyB,CAAC,OAAO,KAAK,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAChJ,CAAC,CAAC,CAAC;QACH,MAAM,OAAO,GAAG,kCAAkC,CAAC,MAAM,CAAC,yBAAyB,CAAC,EAAE;YACpF,OAAO,CAAC,0BAA0B,CAAC,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,iBAAiB,CAAC,OAAO,KAAK,yBAAyB,CAAC,OAAO,CAAC,CAAC;QACtI,CAAC,CAAC,CAAC;QACH,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,kCAAkC,GAAG,CAAC,GAAG,0BAA0B,CAAC,KAAK,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,EAAE;QACV,gBAAgB,EAAE,CAAC;QACnB,uBAAuB,EAAE,CAAC;IAC5B,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"dom-updater.js","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAExD,OAAO,yBAAyB,MAAM,wCAAwC,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,IAAY,EAAE,oBAA2C;IAChG,MAAM,QAAQ,GAAG,QAAQ,IAAI,EAAE,CAAC;IAEhC,SAAS,cAAc,CAAE,eAAuB;QAC9C,OAAO,eAAe;aACnB,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;aACpC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,SAAS,aAAa,CAAE,OAAoB,EAAE,EAAU;QACtD,MAAM,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAC1I,MAAM,WAAW,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;QACpD,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC3B,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,GAAG,eAAe,OAAO,IAAI,WAAW,EAAE,EAAE,CAAC,CAAC;QACzF,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,KAAK,IAAI,WAAW,EAAE,EAAE,CAAC,CAAC;QACrE,CAAC;IACH,CAAC;IAED,SAAS,gBAAgB,CAAE,OAAoB,EAAE,EAAU;QACzD,MAAM,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;QACtE,MAAM,WAAW,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;QACpD,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,WAAW,EAAE,EAAE,CAAC,CAAC;QAC5D,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAC5C,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QAC9C,CAAC;aAAM,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;YAChD,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACjG,CAAC;IACH,CAAC;IAED,SAAS,SAAS,CAAE,0BAA4D;QAC9E,KAAK,MAAM,iBAAiB,IAAI,0BAA0B,EAAE,CAAC;YAC3D,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;YAClF,IAAI,yBAAyB,CAAC,MAAM,CAAC,EAAE,CAAC;gBACtC,aAAa,CAAC,iBAAiB,CAAC,OAAO,EAAE,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACjE,CAAC;YAED,IAAI,iBAAiB,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC;gBAC5C,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,CAAC,UAAU,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;YACzF,CAAC;iBAAM,CAAC;gBACN,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,CAAC,WAAW,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;YAC1F,CAAC;YACD,IAAI,oBAAoB,EAAE,CAAC;gBACzB,oBAAoB,CAAC,OAAO,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;YAC1D,CAAC;QACH,CAAC;IACH,CAAC;IAED,SAAS,YAAY,CAAE,0BAA4D;QACjF,KAAK,MAAM,iBAAiB,IAAI,0BAA0B,EAAE,CAAC;YAC3D,iBAAiB,CAAC,OAAO,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;YACpD,IAAI,yBAAyB,CAAC,MAAM,CAAC,EAAE,CAAC;gBACtC,gBAAgB,CAAC,iBAAiB,CAAC,OAAO,EAAE,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACpE,CAAC;YACD,iBAAiB,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YACnC,IAAI,oBAAoB,EAAE,CAAC;gBACzB,oBAAoB,CAAC,SAAS,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;YAC5D,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM,UAAU,GAAG,IAAI,aAAa,EAAE,CAAC;IACvC,UAAU,CAAC,WAAW,CAAC;aACZ,IAAI;;YAEL,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;;;SAGP,QAAQ;+BACc,IAAI;0CACO,IAAI;+BACf,IAAI;+BACJ,IAAI;;;GAGhC,CAAC,CAAC;IAEH,IAAI,kCAAkC,GAAqC,EAAE,CAAC;IAE9E,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC7C,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,QAAQ,CAAC,kBAAkB,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YACrD,QAAQ,CAAC,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,kBAAkB,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;QACzF,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,EAAE;QAC1C,MAAM,KAAK,GAAG,0BAA0B,CAAC,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE;YACxE,OAAO,CAAC,kCAAkC,CAAC,IAAI,CAAC,yBAAyB,CAAC,EAAE,CAAC,yBAAyB,CAAC,OAAO,KAAK,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAChJ,CAAC,CAAC,CAAC;QACH,MAAM,OAAO,GAAG,kCAAkC,CAAC,MAAM,CAAC,yBAAyB,CAAC,EAAE;YACpF,OAAO,CAAC,0BAA0B,CAAC,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,iBAAiB,CAAC,OAAO,KAAK,yBAAyB,CAAC,OAAO,CAAC,CAAC;QACtI,CAAC,CAAC,CAAC;QACH,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,kCAAkC,GAAG,CAAC,GAAG,0BAA0B,CAAC,KAAK,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,EAAE;QACV,gBAAgB,EAAE,CAAC;QACnB,uBAAuB,EAAE,CAAC;IAC5B,CAAC,CAAC;AACJ,CAAC"}

package/dist/elements/{accented-container.d.ts → accented-dialog.d.ts}

@@ -1,15 +1,21 @@
 import type { Issue } from '../types';
 import type { Signal } from '@preact/signals-core';
-export interface AccentedContainer extends HTMLElement {
+export interface AccentedDialog extends HTMLElement {
     issues: Signal<Array<Issue>> | undefined;
+    element: Element | undefined;
+    showModal: () => void;
 }
-declare const _default: (name: string) => {
+declare const _default: () => {
     new (): {
-        "__#1@#abortController": AbortController | undefined;
         "__#1@#disposeOfEffect": (() => void) | undefined;
+        "__#1@#abortController": AbortController | undefined;
         issues: Signal<Array<Issue>> | undefined;
+        element: Element | undefined;
+        "__#1@#elementMutationObserver": MutationObserver | undefined;
         connectedCallback(): void;
         disconnectedCallback(): void;
+        showModal(): void;
+        "__#1@#onDialogClick"(event: MouseEvent): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -347,4 +353,4 @@ declare const _default: (name: string) => {
     };
 };
 export default _default;
-//# sourceMappingURL=accented-container.d.ts.map
+//# sourceMappingURL=accented-dialog.d.ts.map

package/dist/elements/accented-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accented-dialog.d.ts","sourceRoot":"","sources":["../../src/elements/accented-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAMnD,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS,CAAC;IACzC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;;;iCA4MqB,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;iCAExB,eAAe,GAAG,SAAS;gBAErC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS;iBAE/B,OAAO,GAAG,SAAS;yCAEF,gBAAgB,GAAG,SAAS;;;;qCAgJhC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhWpC,wBAgXE"}