accented 0.0.0-20250223121749 → 0.0.0-20250404114312

package/NOTICE

@@ -0,0 +1,14 @@
+NOTICE
+
+This project, Accented, is licensed under the MIT License.
+
+However, it depends on axe-core, which is licensed under the Mozilla Public License 2.0 (MPL-2.0). The source code for axe-core is available at:
+
+https://github.com/dequelabs/axe-core
+
+According to the MPL-2.0 requirements:
+- Any modifications made to axe-core within this project will remain under the MPL-2.0 license.
+- The original license and notices for axe-core are preserved.
+- The full MPL-2.0 license can be found at: https://www.mozilla.org/MPL/2.0/
+
+No changes have been made to axe-core within this project, beyond its use as a dependency.

package/README.md

@@ -95,15 +95,19 @@ A function that Accented will call after every scan.
 It accepts a single `params` object with the following properties:
 
 * `elementsWithIssues`: the most up-to-date array of all elements with accessibility issues.
-* `scanDuration`: how long the last scan took, in milliseconds (may be useful for performance tracking).
+* `performance`: runtime performance of the last scan. An object:
+  * `totalBlockingTime`: how long the main thread was blocked by Accented during the last scan, in milliseconds.
+    It’s further divided into the `scan` and `domUpdate` phases.
+  * `scan`: how long the `scan` phase took, in milliseconds.
+  * `domUpdate`: how long the `domUpdate` phase took, in milliseconds.
 
 **Example:**
 
 ```
 accented({
-  callback: ({ elementsWithIssues, scanDuration }) => {
+  callback: ({ elementsWithIssues, performance }) => {
     console.log('Elements with issues:', elementsWithIssues);
-    console.log('Scan duration:', scanDuration);
+    console.log('Total blocking time:', performance.totalBlockingTime);
   }
 });
 ```

package/dist/accented.d.ts

@@ -19,9 +19,9 @@ export type { AccentedOptions, DisableAccented };
  *     wait: 500,
  *     leading: false
  *   },
- *   callback: ({ elementsWithIssues, scanDuration }) => {
+ *   callback: ({ elementsWithIssues, performance }) => {
  *    console.log('Elements with issues:', elementsWithIssues);
- *    console.log('Scan duration:', scanDuration);
+ *    console.log('Total blocking time:', performance.totalBlockingTime);
  *   }
  * });
  */

package/dist/accented.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"accented.d.ts","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"AAWA,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,CA8E/E"}

package/dist/accented.js

@@ -4,6 +4,7 @@ import createLogger from './logger.js';
 import createScanner from './scanner.js';
 import setupScrollListeners from './scroll-listeners.js';
 import setupResizeListener from './resize-listener.js';
+import setupFullscreenListener from './fullscreen-listener.js';
 import setupIntersectionObserver from './intersection-observer.js';
 import { enabled, extendedElementsWithIssues } from './state.js';
 import deepMerge from './utils/deep-merge.js';
@@ -29,9 +30,9 @@ import logAndRethrow from './log-and-rethrow.js';
  *     wait: 500,
  *     leading: false
  *   },
- *   callback: ({ elementsWithIssues, scanDuration }) => {
+ *   callback: ({ elementsWithIssues, performance }) => {
  *    console.log('Elements with issues:', elementsWithIssues);
- *    console.log('Scan duration:', scanDuration);
+ *    console.log('Total blocking time:', performance.totalBlockingTime);
  *   }
  * });
  */
@@ -78,6 +79,7 @@ export default function accented(options = {}) {
         const cleanupLogger = output.console ? createLogger() : () => { };
         const cleanupScrollListeners = supportsAnchorPositioning(window) ? () => { } : setupScrollListeners();
         const cleanupResizeListener = supportsAnchorPositioning(window) ? () => { } : setupResizeListener();
+        const cleanupFullscreenListener = supportsAnchorPositioning(window) ? () => { } : setupFullscreenListener();
         return () => {
             try {
                 enabled.value = false;
@@ -87,6 +89,7 @@ export default function accented(options = {}) {
                 cleanupLogger();
                 cleanupScrollListeners();
                 cleanupResizeListener();
+                cleanupFullscreenListener();
                 if (cleanupIntersectionObserver) {
                     cleanupIntersectionObserver();
                 }

package/dist/accented.js.map

@@ -1 +1 @@
-{"version":3,"file":"accented.js","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AACtD,OAAO,gBAAgB,MAAM,kBAAkB,CAAC;AAChD,OAAO,YAAY,MAAM,aAAa,CAAC;AACvC,OAAO,aAAa,MAAM,cAAc,CAAC;AACzC,OAAO,oBAAoB,MAAM,uBAAuB,CAAC;AACzD,OAAO,mBAAmB,MAAM,sBAAsB,CAAC;AACvD,OAAO,yBAAyB,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAE9C,OAAO,eAAe,MAAM,uBAAuB,CAAC;AACpD,OAAO,yBAAyB,MAAM,wCAAwC,CAAC;AAC/E,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAIjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,UAA2B,EAAE;IAE5D,eAAe,CAAC,OAAO,CAAC,CAAC;IAEzB,IAAI,CAAC;QACH,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;YACrE,OAAO,CAAC,IAAI,CAAC,wGAAwG,CAAC,CAAC;YACvH,OAAO,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAClB,CAAC;QAED,MAAM,aAAa,GAAwC;YACzD,OAAO,EAAE,IAAI;SACd,CAAC;QAEF,MAAM,eAAe,GAA0C;YAC7D,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,IAAI;SACd,CAAC;QAEF,mFAAmF;QACnF,oEAAoE;QACpE,0DAA0D;QAC1D,sDAAsD;QACtD,mCAAmC;QACnC,MAAM,cAAc,GAA8B;YAChD,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,EAAE;YACd,IAAI,EAAE,UAAU;YAChB,MAAM,EAAE,aAAa;YACrB,QAAQ,EAAE,eAAe;YACzB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;SACnB,CAAC;QAEF,MAAM,EAAC,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAC,GAAG,SAAS,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QAEtG,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;YAClB,qDAAqD;YACrD,OAAO,CAAC,IAAI,CACV,6DAA6D;gBAC7D,kCAAkC,CACnC,CAAC;YACF,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC;QAED,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;QAErB,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAEvB,MAAM,EAAC,UAAU,EAAE,2BAA2B,EAAE,oBAAoB,EAAE,GAAG,yBAAyB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB,EAAE,CAAC;QAC9I,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACvF,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC;QACvE,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;QACjE,MAAM,sBAAsB,GAAG,yBAAyB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,oBAAoB,EAAE,CAAC;QACrG,MAAM,qBAAqB,GAAG,yBAAyB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,EAAE,CAAC;QAEnG,OAAO,GAAG,EAAE;YACV,IAAI,CAAC;gBACH,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;gBACtB,0BAA0B,CAAC,KAAK,GAAG,EAAE,CAAC;gBACtC,cAAc,EAAE,CAAC;gBACjB,iBAAiB,EAAE,CAAC;gBACpB,aAAa,EAAE,CAAC;gBAChB,sBAAsB,EAAE,CAAC;gBACzB,qBAAqB,EAAE,CAAC;gBACxB,IAAI,2BAA2B,EAAE,CAAC;oBAChC,2BAA2B,EAAE,CAAC;gBAChC,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC;AACH,CAAC"}
+{"version":3,"file":"accented.js","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"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"}

package/dist/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const accentedUrl = "https://www.npmjs.com/package/accented";
 export declare const issuesUrl = "https://github.com/pomerantsev/accented/issues";
+export declare const getAccentedElementNames: (name: string) => string[];
 //# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -1 +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"}
+{"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;AAC1E,eAAO,MAAM,uBAAuB,SAAU,MAAM,aAA0C,CAAC"}

package/dist/constants.js

@@ -1,3 +1,4 @@
 export const accentedUrl = 'https://www.npmjs.com/package/accented';
 export const issuesUrl = 'https://github.com/pomerantsev/accented/issues';
+export const getAccentedElementNames = (name) => [`${name}-trigger`, `${name}-dialog`];
 //# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -1 +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"}
+{"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;AAC1E,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,UAAU,EAAE,GAAG,IAAI,SAAS,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"dom-updater.d.ts","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,oBAAoB,CAAC,EAAE,oBAAoB,cAuHjG"}

package/dist/dom-updater.js

@@ -1,6 +1,9 @@
 import { effect } from '@preact/signals-core';
-import { extendedElementsWithIssues } from './state.js';
+import { extendedElementsWithIssues, rootNodes } from './state.js';
+import areElementsWithIssuesEqual from './utils/are-elements-with-issues-equal.js';
 import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
+import { isDocument, isDocumentFragment, isShadowRoot } from './utils/dom-helpers.js';
+import getParent from './utils/get-parent.js';
 export default function createDomUpdater(name, intersectionObserver) {
     const attrName = `data-${name}`;
     function getAnchorNames(anchorNameValue) {
@@ -9,8 +12,8 @@ export default function createDomUpdater(name, intersectionObserver) {
             .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');
+    function setAnchorName(elementWithIssues) {
+        const { element, id, anchorNameValue } = elementWithIssues;
         const anchorNames = getAnchorNames(anchorNameValue);
         if (anchorNames.length > 0) {
             element.style.setProperty('anchor-name', `${anchorNameValue}, --${name}-anchor-${id}`);
@@ -19,24 +22,23 @@ export default function createDomUpdater(name, intersectionObserver) {
             element.style.setProperty('anchor-name', `--${name}-anchor-${id}`);
         }
     }
-    function removeAnchorName(element, id) {
-        const anchorNameValue = element.style.getPropertyValue('anchor-name');
+    function removeAnchorName(elementWithIssues) {
+        const { element, anchorNameValue } = elementWithIssues;
         const anchorNames = getAnchorNames(anchorNameValue);
-        const index = anchorNames.indexOf(`--${name}-anchor-${id}`);
-        if (anchorNames.length === 1 && index === 0) {
-            element.style.removeProperty('anchor-name');
+        if (anchorNames.length > 0) {
+            element.style.setProperty('anchor-name', anchorNames.join(', '));
         }
-        else if (anchorNames.length > 1 && index > -1) {
-            element.style.setProperty('anchor-name', anchorNames.filter((_, i) => i !== index).join(', '));
+        else {
+            element.style.removeProperty('anchor-name');
         }
     }
     function setIssues(extendedElementsWithIssues) {
         for (const elementWithIssues of extendedElementsWithIssues) {
             elementWithIssues.element.setAttribute(attrName, elementWithIssues.id.toString());
             if (supportsAnchorPositioning(window)) {
-                setAnchorName(elementWithIssues.element, elementWithIssues.id);
+                setAnchorName(elementWithIssues);
             }
-            if (elementWithIssues.element.parentElement) {
+            if (getParent(elementWithIssues.element)) {
                 elementWithIssues.element.insertAdjacentElement('afterend', elementWithIssues.trigger);
             }
             else {
@@ -51,7 +53,7 @@ export default function createDomUpdater(name, intersectionObserver) {
         for (const elementWithIssues of extendedElementsWithIssues) {
             elementWithIssues.element.removeAttribute(attrName);
             if (supportsAnchorPositioning(window)) {
-                removeAnchorName(elementWithIssues.element, elementWithIssues.id);
+                removeAnchorName(elementWithIssues);
             }
             elementWithIssues.trigger.remove();
             if (intersectionObserver) {
@@ -63,8 +65,10 @@ export default function createDomUpdater(name, intersectionObserver) {
     stylesheet.replaceSync(`
     @layer ${name} {
       :root {
-        --${name}-primary-color: red;
-        --${name}-secondary-color: white;
+        /* Ensure that the primary / secondary color combination meets WCAG 1.4.3 Contrast (Minimum) */
+        /* OKLCH stuff: https://oklch.com/ */
+        --${name}-primary-color: oklch(0.5 0.3 0);
+        --${name}-secondary-color: oklch(0.98 0 0);
         --${name}-outline-width: 2px;
         --${name}-outline-style: solid;
       }
@@ -78,25 +82,36 @@ export default function createDomUpdater(name, intersectionObserver) {
     }
   `);
     let previousExtendedElementsWithIssues = [];
-    document.adoptedStyleSheets.push(stylesheet);
-    const removeStylesheet = () => {
-        if (document.adoptedStyleSheets.includes(stylesheet)) {
-            document.adoptedStyleSheets.splice(document.adoptedStyleSheets.indexOf(stylesheet), 1);
+    let previousRootNodes = new Set();
+    const disposeOfStyleSheetsEffect = effect(() => {
+        const newRootNodes = rootNodes.value;
+        const addedRootNodes = [...newRootNodes].filter(rootNode => !previousRootNodes.has(rootNode));
+        const removedRootNodes = [...previousRootNodes].filter(rootNode => !newRootNodes.has(rootNode));
+        for (const rootNode of addedRootNodes) {
+            if (isDocument(rootNode) || (isDocumentFragment(rootNode) && isShadowRoot(rootNode))) {
+                rootNode.adoptedStyleSheets.push(stylesheet);
+            }
         }
-    };
+        for (const rootNode of removedRootNodes) {
+            if (isDocument(rootNode) || (isDocumentFragment(rootNode) && isShadowRoot(rootNode))) {
+                rootNode.adoptedStyleSheets.splice(rootNode.adoptedStyleSheets.indexOf(stylesheet), 1);
+            }
+        }
+        previousRootNodes = newRootNodes;
+    });
     const disposeOfElementsEffect = effect(() => {
         const added = extendedElementsWithIssues.value.filter(elementWithIssues => {
-            return !previousExtendedElementsWithIssues.some(previousElementWithIssues => previousElementWithIssues.element === elementWithIssues.element);
+            return !previousExtendedElementsWithIssues.some(previousElementWithIssues => areElementsWithIssuesEqual(previousElementWithIssues, elementWithIssues));
         });
         const removed = previousExtendedElementsWithIssues.filter(previousElementWithIssues => {
-            return !extendedElementsWithIssues.value.some(elementWithIssues => elementWithIssues.element === previousElementWithIssues.element);
+            return !extendedElementsWithIssues.value.some(elementWithIssues => areElementsWithIssuesEqual(elementWithIssues, previousElementWithIssues));
         });
         removeIssues(removed);
         setIssues(added);
         previousExtendedElementsWithIssues = [...extendedElementsWithIssues.value];
     });
     return () => {
-        removeStylesheet();
+        disposeOfStyleSheetsEffect();
         disposeOfElementsEffect();
     };
 }

package/dist/dom-updater.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom-updater.js","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dom-updater.js","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"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"}

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

@@ -1 +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"}
+{"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;;;iCAwOqB,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;;;;qCA0JhC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAtYpC,wBAsZE"}

package/dist/elements/accented-dialog.js

@@ -44,20 +44,45 @@ export default () => {
     :host {
       all: initial !important;
 
-      --light-color: white;
-      --dark-color: black;
-      --focus-color: #0078d4; /* Contrasts with both white and black. */
+      /* OKLCH stuff: https://oklch.com/ */
+      --light-color: oklch(0.98 0 0);
+      --dark-color: oklch(0.22 0 0);
 
-      --impact-minor-color: lightgray;
-      --impact-moderate-color: gold;
-      --impact-serious-color: #ff9e00;
-      --impact-critical-color: #f883ec;
+      --background-color: light-dark(var(--light-color), var(--dark-color));
+      --text-color: light-dark(var(--dark-color), var(--light-color));
+
+      --impact-lightness: 0.80;
+      --focus-lightness: 0.45;
+      @media (prefers-color-scheme: dark) {
+        --impact-lightness: 0.45;
+        --focus-lightness: 0.80;
+      }
+
+      --blue-hue: 230;
+      --gold-hue: 90;
+      --red-hue: 0;
+
+      /* Contrasts with background. */
+      --focus-color: oklch(var(--focus-lightness) 0.25 var(--blue-hue));
+
+      --impact-chroma: 0.16;
+
+      --impact-moderate-hue: var(--blue-hue);
+      --impact-serious-hue: var(--gold-hue);
+      --impact-critical-hue: var(--red-hue);
+
+      --impact-minor-color: oklch(var(--impact-lightness) 0 0);
+      --impact-moderate-color: oklch(var(--impact-lightness) var(--impact-chroma) var(--impact-moderate-hue));
+      --impact-serious-color: oklch(var(--impact-lightness) var(--impact-chroma) var(--impact-serious-hue));
+      --impact-critical-color: oklch(var(--impact-lightness) var(--impact-chroma) var(--impact-critical-hue));
+
+      --base-size: max(1rem, 16px);
 
       /* Spacing and typography custom props, inspired by https://utopia.fyi (simplified). */
 
       /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,16,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
       --ratio: 1.2;
-      --step-0: 1rem;
+      --step-0: var(--base-size);
       --step-1: calc(var(--step-0) * var(--ratio));
       --step-2: calc(var(--step-1) * var(--ratio));
       --step-3: calc(var(--step-2) * var(--ratio));
@@ -65,15 +90,15 @@ export default () => {
       --step--1: calc(var(--step-0) / var(--ratio));
 
       /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,16,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
-      --space-3xs: 0.25rem;
-      --space-2xs: 0.5rem;
-      --space-xs: 0.75rem;
-      --space-s: 1rem;
-      --space-m: 1.5rem;
-      --space-l: 2rem;
-      --space-xl: 3rem;
-      --space-2xl: 4rem;
-      --space-3xl: 6rem;
+      --space-3xs: calc(0.25 * var(--base-size));
+      --space-2xs: calc(0.5 * var(--base-size));
+      --space-xs: calc(0.75 * var(--base-size));
+      --space-s: var(--base-size);
+      --space-m: calc(1.5 * var(--base-size));
+      --space-l: calc(2 * var(--base-size));
+      --space-xl: calc(3 * var(--base-size));
+      --space-2xl: calc(4 * var(--base-size));
+      --space-3xl: calc(6 * var(--base-size));
     }
 
     a[href], button {
@@ -104,12 +129,15 @@ export default () => {
       overflow-wrap: break-word;
       font-family: system-ui;
       line-height: 1.5;
-      background-color: var(--light-color);
-      color: var(--dark-color);
+      text-wrap: pretty;
+      background-color: var(--background-color);
+      color: var(--text-color);
       border: 2px solid currentColor;
       padding: var(--space-l);
       inline-size: min(90ch, calc(100% - var(--space-s)* 2));
       max-block-size: calc(100% - var(--space-s) * 2);
+
+      color-scheme: light dark;
     }
 
     #button-container {
@@ -117,8 +145,8 @@ export default () => {
     }
 
     #close {
-      background-color: var(--light-color);
-      color: var(--dark-color);
+      background-color: var(--background-color);
+      color: var(--text-color);
       border: 2px solid currentColor;
       padding-inline: var(--space-2xs);
       aspect-ratio: 1 / 1;
@@ -155,7 +183,7 @@ export default () => {
       }
 
       a {
-        font-weight: bold;
+        font-weight: 500;
       }
     }
 
@@ -242,6 +270,16 @@ export default () => {
                             logAndRethrow(error);
                         }
                     }, { signal: this.#abortController.signal });
+                    dialog?.addEventListener('keydown', (event) => {
+                        try {
+                            if (event.key === 'Escape') {
+                                event.stopPropagation();
+                            }
+                        }
+                        catch (error) {
+                            logAndRethrow(error);
+                        }
+                    }, { signal: this.#abortController.signal });
                     this.#disposeOfEffect = effect(() => {
                         if (this.issues) {
                             const issues = this.issues.value;

package/dist/elements/accented-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"accented-dialog.js","sourceRoot":"","sources":["../../src/elements/accented-dialog.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"accented-dialog.js","sourceRoot":"","sources":["../../src/elements/accented-dialog.ts"],"names":[],"mappings":"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"}

package/dist/elements/accented-trigger.d.ts

@@ -13,12 +13,14 @@ declare const _default: (name: string) => {
         "__#2@#dialogCloseAbortController": AbortController | undefined;
         "__#2@#disposeOfPositionEffect": (() => void) | undefined;
         "__#2@#disposeOfVisibilityEffect": (() => void) | undefined;
+        "__#2@#elementMutationObserver": MutationObserver | undefined;
         element: Element | undefined;
         dialog: AccentedDialog | undefined;
         position: Signal<Position> | undefined;
         visible: Signal<boolean> | undefined;
         connectedCallback(): void;
         disconnectedCallback(): void;
+        "__#2@#setTransform"(): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

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

@@ -1 +1 @@
-{"version":3,"file":"accented-trigger.d.ts","sourceRoot":"","sources":["../../src/elements/accented-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,MAAM,EAAE,cAAc,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;CACtC;+BAMqB,MAAM;;iCAmDN,eAAe,GAAG,SAAS;4CAEhB,eAAe,GAAG,SAAS;yCAE9B,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;2CAEtB,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;iBAE3C,OAAO,GAAG,SAAS;gBAEpB,cAAc,GAAG,SAAS;kBAExB,MAAM,CAAC,QAAQ,CAAC,GAAG,SAAS;iBAE7B,MAAM,CAAC,OAAO,CAAC,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjExC,wBAgKE"}
+{"version":3,"file":"accented-trigger.d.ts","sourceRoot":"","sources":["../../src/elements/accented-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,MAAM,EAAE,cAAc,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;CACtC;+BAIqB,MAAM;;iCAuEN,eAAe,GAAG,SAAS;4CAEhB,eAAe,GAAG,SAAS;yCAE9B,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;2CAEtB,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;yCAE1B,gBAAgB,GAAG,SAAS;iBAE7C,OAAO,GAAG,SAAS;gBAEpB,cAAc,GAAG,SAAS;kBAExB,MAAM,CAAC,QAAQ,CAAC,GAAG,SAAS;iBAE7B,MAAM,CAAC,OAAO,CAAC,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAvFxC,wBA4NE"}

package/dist/elements/accented-trigger.js

@@ -1,7 +1,6 @@
 import { effect } from '@preact/signals-core';
 import supportsAnchorPositioning from '../utils/supports-anchor-positioning.js';
 import logAndRethrow from '../log-and-rethrow.js';
-const triggerSize = 'max(32px, 2rem)';
 // We want Accented to not throw an error in Node, and use static imports,
 // so we can't export `class extends HTMLElement` because HTMLElement is not available in Node.
 export default (name) => {
@@ -14,21 +13,37 @@ export default (name) => {
     template.innerHTML = `
     <style>
       :host {
+        --ratio: 1.2;
+        --base-size: max(1rem, 16px);
         position: fixed !important;
+        inset-inline-start: anchor(self-start) !important;
         inset-inline-end: anchor(self-end) !important;
         inset-block-start: anchor(self-start) !important;
+        inset-block-end: anchor(self-end) !important;
 
         position-visibility: anchors-visible !important;
 
         /* Revert potential effects of white-space: pre; set on a trigger's ancestor. */
         white-space: normal !important;
+
+        pointer-events: none !important;
       }
 
       #trigger {
+        pointer-events: auto;
+
+        position: absolute;
+        inset-block-start: 4px;
+        inset-inline-end: 4px;
+
         box-sizing: border-box;
-        font-size: 1rem;
-        inline-size: ${triggerSize};
-        block-size: ${triggerSize};
+        font-size: calc(var(--ratio) * var(--ratio) * var(--base-size));
+        inline-size: calc(2 * var(--base-size));
+        block-size: calc(2 * var(--base-size));
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         /* Make it look better in forced-colors mode. */
         border: 2px solid transparent;
@@ -36,6 +51,10 @@ export default (name) => {
         background-color: var(--${name}-primary-color);
         color: var(--${name}-secondary-color);
 
+        padding: 0;
+
+        border-radius: calc(0.25 * var(--base-size));
+
         outline-offset: -4px;
         outline-color: currentColor;
         outline-width: 2px;
@@ -50,13 +69,14 @@ export default (name) => {
         }
       }
     </style>
-    <button id="trigger" lang="en">⚠</button>
+    <button id="trigger" lang="en">!</button>
   `;
     return class extends HTMLElement {
         #abortController;
         #dialogCloseAbortController;
         #disposeOfPositionEffect;
         #disposeOfVisibilityEffect;
+        #elementMutationObserver;
         element;
         dialog;
         position;
@@ -82,10 +102,29 @@ export default (name) => {
                     if (trigger && this.element) {
                         trigger.ariaLabel = `Accessibility issues in ${this.element.nodeName.toLowerCase()}`;
                     }
+                    this.#setTransform();
+                    this.#elementMutationObserver = new MutationObserver(() => {
+                        try {
+                            this.#setTransform();
+                        }
+                        catch (error) {
+                            logAndRethrow(error);
+                        }
+                    });
+                    if (this.element) {
+                        this.#elementMutationObserver.observe(this.element, {
+                            attributes: true
+                        });
+                    }
                     this.#abortController = new AbortController();
                     trigger?.addEventListener('click', (event) => {
                         try {
+                            // event.preventDefault() ensures that if the issue is within a link,
+                            // the link's default behavior (following the URL) is prevented.
                             event.preventDefault();
+                            // event.stopPropagation() ensures that if there's a click handler on the trigger's ancestor
+                            // (a link, or a button, or anything else), it doesn't get triggered.
+                            event.stopPropagation();
                             // We append the dialog when the button is clicked,
                             // and remove it from the DOM when the dialog is closed.
                             // This gives us a performance improvement since Axe
@@ -113,13 +152,10 @@ export default (name) => {
                         this.#disposeOfPositionEffect = effect(() => {
                             if (this.position && trigger) {
                                 const position = this.position.value;
-                                this.style.setProperty('top', `${position.blockStartTop}px`, 'important');
-                                if (position.direction === 'ltr') {
-                                    this.style.setProperty('left', `calc(${position.inlineEndLeft}px - ${triggerSize})`, 'important');
-                                }
-                                else if (this.position.value.direction === 'rtl') {
-                                    this.style.setProperty('left', `${position.inlineEndLeft}px`, 'important');
-                                }
+                                this.style.setProperty('top', `${position.top}px`, 'important');
+                                this.style.setProperty('left', `${position.left}px`, 'important');
+                                this.style.setProperty('width', `${position.width}px`, 'important');
+                                this.style.setProperty('height', `${position.height}px`, 'important');
                             }
                         });
                         this.#disposeOfVisibilityEffect = effect(() => {
@@ -149,11 +185,27 @@ export default (name) => {
                     this.#disposeOfVisibilityEffect();
                     this.#disposeOfVisibilityEffect = undefined;
                 }
+                if (this.#elementMutationObserver) {
+                    this.#elementMutationObserver.disconnect();
+                }
             }
             catch (error) {
                 logAndRethrow(error);
             }
         }
+        #setTransform() {
+            // We read and write values in separate animation frames to avoid layout thrashing.
+            window.requestAnimationFrame(() => {
+                if (this.element) {
+                    const transform = window.getComputedStyle(this.element).getPropertyValue('transform');
+                    if (transform !== 'none') {
+                        window.requestAnimationFrame(() => {
+                            this.style.setProperty('transform', transform, 'important');
+                        });
+                    }
+                }
+            });
+        }
     };
 };
 //# sourceMappingURL=accented-trigger.js.map