@primer/behaviors 0.0.0-20251215125247 → 0.0.0-20251215200522

package/dist/cjs/anchored-position.js

@@ -27,11 +27,9 @@ function getPositionedParent(element) {
     if (isOnTopLayer(element))
         return document.body;
     let parentNode = element.parentNode;
-    while (parentNode !== null && parentNode !== document.body) {
-        if (parentNode instanceof HTMLElement) {
-            if (getComputedStyle(parentNode).position !== 'static') {
-                return parentNode;
-            }
+    while (parentNode !== null) {
+        if (parentNode instanceof HTMLElement && getComputedStyle(parentNode).position !== 'static') {
+            return parentNode;
         }
         parentNode = parentNode.parentNode;
     }
@@ -53,24 +51,26 @@ function isOnTopLayer(element) {
     return false;
 }
 function getClippingRect(element) {
-    let clippingNode = document.body;
     let parentNode = element;
-    while (parentNode !== null && parentNode !== document.body) {
-        if (parentNode instanceof HTMLElement) {
-            const overflow = getComputedStyle(parentNode).overflow;
-            if (overflow !== 'visible') {
-                clippingNode = parentNode;
-                break;
-            }
+    while (parentNode !== null) {
+        if (!(parentNode instanceof Element)) {
+            break;
+        }
+        const parentNodeStyle = getComputedStyle(parentNode);
+        if (parentNodeStyle.overflow !== 'visible') {
+            break;
         }
         parentNode = parentNode.parentNode;
     }
+    const clippingNode = parentNode === document.body || !(parentNode instanceof HTMLElement) ? document.body : parentNode;
     const elemRect = clippingNode.getBoundingClientRect();
     const elemStyle = getComputedStyle(clippingNode);
-    const borderTop = parseInt(elemStyle.borderTopWidth, 10) || 0;
-    const borderLeft = parseInt(elemStyle.borderLeftWidth, 10) || 0;
-    const borderRight = parseInt(elemStyle.borderRightWidth, 10) || 0;
-    const borderBottom = parseInt(elemStyle.borderBottomWidth, 10) || 0;
+    const [borderTop, borderLeft, borderRight, borderBottom] = [
+        elemStyle.borderTopWidth,
+        elemStyle.borderLeftWidth,
+        elemStyle.borderRightWidth,
+        elemStyle.borderBottomWidth,
+    ].map(v => parseInt(v, 10) || 0);
     return {
         top: elemRect.top + borderTop,
         left: elemRect.left + borderLeft,

package/dist/cjs/focus-trap.js

@@ -6,16 +6,6 @@ var eventListenerSignal = require('./polyfills/event-listener-signal.js');
 eventListenerSignal.polyfill();
 const suspendedTrapStack = [];
 let activeTrap = undefined;
-const SR_ONLY_STYLES = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';
-function createSentinel({ onFocus }) {
-    const sentinel = document.createElement('span');
-    sentinel.setAttribute('class', 'sentinel');
-    sentinel.setAttribute('tabindex', '0');
-    sentinel.setAttribute('aria-hidden', 'true');
-    sentinel.style.cssText = SR_ONLY_STYLES;
-    sentinel.onfocus = onFocus;
-    return sentinel;
-}
 function tryReactivate() {
     const trapToReactivate = suspendedTrapStack.pop();
     if (trapToReactivate) {
@@ -33,10 +23,9 @@ function observeFocusTrap(container, sentinels) {
     const observer = new MutationObserver(mutations => {
         for (const mutation of mutations) {
             if (mutation.type === 'childList' && mutation.addedNodes.length) {
-                for (const node of mutation.addedNodes) {
-                    if (node instanceof HTMLElement && node.tagName === 'SPAN' && node.classList.contains('sentinel')) {
-                        return;
-                    }
+                const sentinelChildren = Array.from(mutation.addedNodes).filter(e => e instanceof HTMLElement && e.classList.contains('sentinel') && e.tagName === 'SPAN');
+                if (sentinelChildren.length) {
+                    return;
                 }
                 const firstChild = container.firstElementChild;
                 const lastChild = container.lastElementChild;
@@ -57,20 +46,24 @@ function focusTrap(container, initialFocus, abortSignal) {
     const controller = new AbortController();
     const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
     container.setAttribute('data-focus-trap', 'active');
-    const sentinelStart = createSentinel({
-        onFocus: () => {
-            const lastFocusableChild = iterateFocusableElements.getFocusableChild(container, true);
-            lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
-        },
-    });
-    const sentinelEnd = createSentinel({
-        onFocus: () => {
-            const firstFocusableChild = iterateFocusableElements.getFocusableChild(container);
-            firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
-        },
-    });
-    const hasExistingSentinels = container.querySelector(':scope > span.sentinel') !== null;
-    if (!hasExistingSentinels) {
+    const sentinelStart = document.createElement('span');
+    sentinelStart.setAttribute('class', 'sentinel');
+    sentinelStart.setAttribute('tabindex', '0');
+    sentinelStart.setAttribute('aria-hidden', 'true');
+    sentinelStart.onfocus = () => {
+        const lastFocusableChild = iterateFocusableElements.getFocusableChild(container, true);
+        lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
+    };
+    const sentinelEnd = document.createElement('span');
+    sentinelEnd.setAttribute('class', 'sentinel');
+    sentinelEnd.setAttribute('tabindex', '0');
+    sentinelEnd.setAttribute('aria-hidden', 'true');
+    sentinelEnd.onfocus = () => {
+        const firstFocusableChild = iterateFocusableElements.getFocusableChild(container);
+        firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+    };
+    const existingSentinels = Array.from(container.children).filter(e => e.classList.contains('sentinel') && e.tagName === 'SPAN');
+    if (!existingSentinels.length) {
         container.prepend(sentinelStart);
         container.append(sentinelEnd);
     }

package/dist/cjs/focus-zone.js

@@ -5,7 +5,6 @@ var userAgent = require('./utils/user-agent.js');
 var iterateFocusableElements = require('./utils/iterate-focusable-elements.js');
 var uniqueId = require('./utils/unique-id.js');
 var isEditableElement = require('./utils/is-editable-element.js');
-var indexedSet = require('./utils/indexed-set.js');
 
 eventListenerSignal.polyfill();
 exports.FocusKeys = void 0;
@@ -83,18 +82,17 @@ function getDirection(keyboardEvent) {
 }
 function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
     const key = keyboardEvent.key;
-    const isSingleChar = key.length === 1 || (key.length === 2 && key.charCodeAt(0) >= 0xd800 && key.charCodeAt(0) <= 0xdbff);
+    const keyLength = [...key].length;
     const isEditable = isEditableElement.isEditableElement(activeElement);
     const isSelect = activeElement instanceof HTMLSelectElement;
-    if (isEditable && (isSingleChar || key === 'Home' || key === 'End')) {
+    if (isEditable && (keyLength === 1 || key === 'Home' || key === 'End')) {
         return true;
     }
     if (isSelect) {
-        const isMac = userAgent.isMacOS();
-        if (key === 'ArrowDown' && isMac && !keyboardEvent.metaKey) {
+        if (key === 'ArrowDown' && userAgent.isMacOS() && !keyboardEvent.metaKey) {
             return true;
         }
-        if (key === 'ArrowDown' && !isMac && keyboardEvent.altKey) {
+        if (key === 'ArrowDown' && !userAgent.isMacOS() && keyboardEvent.altKey) {
             return true;
         }
         return false;
@@ -132,7 +130,7 @@ const activeDescendantActivatedIndirectly = 'activated-indirectly';
 const hasActiveDescendantAttribute = 'data-has-active-descendant';
 function focusZone(container, settings) {
     var _a, _b, _c, _d, _e, _f;
-    const focusableElements = new indexedSet.IndexedSet();
+    const focusableElements = [];
     const savedTabIndex = new WeakMap();
     const bindKeys = (_a = settings === null || settings === void 0 ? void 0 : settings.bindKeys) !== null && _a !== void 0 ? _a : ((settings === null || settings === void 0 ? void 0 : settings.getNextFocusable) ? exports.FocusKeys.ArrowAll : exports.FocusKeys.ArrowVertical) | exports.FocusKeys.HomeAndEnd;
     const focusOutBehavior = (_b = settings === null || settings === void 0 ? void 0 : settings.focusOutBehavior) !== null && _b !== void 0 ? _b : 'stop';
@@ -144,7 +142,7 @@ function focusZone(container, settings) {
     const preventScroll = (_e = settings === null || settings === void 0 ? void 0 : settings.preventScroll) !== null && _e !== void 0 ? _e : false;
     const preventInitialFocus = focusInStrategy === 'initial' && (settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl);
     function getFirstFocusableElement() {
-        return focusableElements.get(0);
+        return focusableElements[0];
     }
     function isActiveDescendantInputFocused() {
         return document.activeElement === activeDescendantControl;
@@ -189,20 +187,17 @@ function focusZone(container, settings) {
         activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.removeAttribute('aria-activedescendant');
         container.removeAttribute(hasActiveDescendantAttribute);
         previouslyActiveElement === null || previouslyActiveElement === void 0 ? void 0 : previouslyActiveElement.removeAttribute(isActiveDescendantAttribute);
-        const items = container.querySelectorAll(`[${isActiveDescendantAttribute}]`);
-        for (let i = 0; i < items.length; i++) {
-            items[i].removeAttribute(isActiveDescendantAttribute);
+        for (const item of container.querySelectorAll(`[${isActiveDescendantAttribute}]`)) {
+            item === null || item === void 0 ? void 0 : item.removeAttribute(isActiveDescendantAttribute);
         }
         activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(undefined, previouslyActiveElement, false);
     }
     function beginFocusManagement(...elements) {
-        const filteredElements = (settings === null || settings === void 0 ? void 0 : settings.focusableElementFilter)
-            ? elements.filter(e => settings.focusableElementFilter(e))
-            : elements;
+        const filteredElements = elements.filter(e => { var _a, _b; return (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.focusableElementFilter) === null || _a === void 0 ? void 0 : _a.call(settings, e)) !== null && _b !== void 0 ? _b : true; });
         if (filteredElements.length === 0) {
             return;
         }
-        focusableElements.insertAt(findInsertionIndex(filteredElements), ...filteredElements);
+        focusableElements.splice(findInsertionIndex(filteredElements), 0, ...filteredElements);
         for (const element of filteredElements) {
             if (!savedTabIndex.has(element)) {
                 savedTabIndex.set(element, element.getAttribute('tabindex'));
@@ -215,13 +210,13 @@ function focusZone(container, settings) {
     }
     function findInsertionIndex(elementsToInsert) {
         const firstElementToInsert = elementsToInsert[0];
-        if (focusableElements.size === 0)
+        if (focusableElements.length === 0)
             return 0;
         let iMin = 0;
-        let iMax = focusableElements.size - 1;
+        let iMax = focusableElements.length - 1;
         while (iMin <= iMax) {
             const i = Math.floor((iMin + iMax) / 2);
-            const element = focusableElements.get(i);
+            const element = focusableElements[i];
             if (followsInDocument(firstElementToInsert, element)) {
                 iMax = i - 1;
             }
@@ -236,7 +231,10 @@ function focusZone(container, settings) {
     }
     function endFocusManagement(...elements) {
         for (const element of elements) {
-            focusableElements.delete(element);
+            const focusableElementIndex = focusableElements.indexOf(element);
+            if (focusableElementIndex >= 0) {
+                focusableElements.splice(focusableElementIndex, 1);
+            }
             const savedIndex = savedTabIndex.get(element);
             if (savedIndex !== undefined) {
                 if (savedIndex === null) {
@@ -263,61 +261,29 @@ function focusZone(container, settings) {
     if (!preventInitialFocus)
         updateFocusedElement(initialElement);
     const observer = new MutationObserver(mutations => {
-        const elementsToRemove = new Set();
-        const elementsToAdd = new Set();
-        const attributeRemovals = new Set();
-        const attributeAdditions = new Set();
         for (const mutation of mutations) {
-            if (mutation.type === 'childList') {
-                for (const removedNode of mutation.removedNodes) {
-                    if (removedNode instanceof HTMLElement) {
-                        elementsToRemove.add(removedNode);
-                    }
-                }
-                for (const addedNode of mutation.addedNodes) {
-                    if (addedNode instanceof HTMLElement) {
-                        elementsToAdd.add(addedNode);
-                    }
+            for (const removedNode of mutation.removedNodes) {
+                if (removedNode instanceof HTMLElement) {
+                    endFocusManagement(...iterateFocusableElements.iterateFocusableElements(removedNode));
                 }
             }
-            else if (mutation.type === 'attributes' && mutation.target instanceof HTMLElement) {
-                const attributeName = mutation.attributeName;
-                const hasAttribute = attributeName ? mutation.target.hasAttribute(attributeName) : false;
-                if (hasAttribute) {
-                    attributeRemovals.add(mutation.target);
-                }
-                else {
-                    attributeAdditions.add(mutation.target);
+            if (mutation.type === 'attributes' && mutation.oldValue === null) {
+                if (mutation.target instanceof HTMLElement) {
+                    endFocusManagement(mutation.target);
                 }
             }
         }
-        if (elementsToRemove.size > 0) {
-            const toRemove = [];
-            for (const node of elementsToRemove) {
-                for (const el of iterateFocusableElements.iterateFocusableElements(node)) {
-                    toRemove.push(el);
+        for (const mutation of mutations) {
+            for (const addedNode of mutation.addedNodes) {
+                if (addedNode instanceof HTMLElement) {
+                    beginFocusManagement(...iterateFocusableElements.iterateFocusableElements(addedNode, iterateFocusableElementsOptions));
                 }
             }
-            if (toRemove.length > 0) {
-                endFocusManagement(...toRemove);
-            }
-        }
-        if (attributeRemovals.size > 0) {
-            endFocusManagement(...attributeRemovals);
-        }
-        if (elementsToAdd.size > 0) {
-            const toAdd = [];
-            for (const node of elementsToAdd) {
-                for (const el of iterateFocusableElements.iterateFocusableElements(node, iterateFocusableElementsOptions)) {
-                    toAdd.push(el);
+            if (mutation.type === 'attributes' && mutation.oldValue !== null) {
+                if (mutation.target instanceof HTMLElement) {
+                    beginFocusManagement(mutation.target);
                 }
             }
-            if (toAdd.length > 0) {
-                beginFocusManagement(...toAdd);
-            }
-        }
-        if (attributeAdditions.size > 0) {
-            beginFocusManagement(...attributeAdditions);
         }
     });
     observer.observe(container, {
@@ -329,9 +295,7 @@ function focusZone(container, settings) {
     const controller = new AbortController();
     const signal = (_f = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _f !== void 0 ? _f : controller.signal;
     signal.addEventListener('abort', () => {
-        observer.disconnect();
         endFocusManagement(...focusableElements);
-        focusableElements.clear();
     });
     let elementIndexFocusedByClick = undefined;
     container.addEventListener('mousedown', event => {
@@ -341,7 +305,7 @@ function focusZone(container, settings) {
     }, { signal });
     if (activeDescendantControl) {
         container.addEventListener('focusin', event => {
-            if (event.target instanceof HTMLElement && focusableElements.has(event.target)) {
+            if (event.target instanceof HTMLElement && focusableElements.includes(event.target)) {
                 activeDescendantControl.focus({ preventScroll });
                 updateFocusedElement(event.target);
             }
@@ -351,10 +315,6 @@ function focusZone(container, settings) {
                 if (!(target instanceof Node)) {
                     return;
                 }
-                if (target instanceof HTMLElement && focusableElements.has(target)) {
-                    updateFocusedElement(target);
-                    return;
-                }
                 const focusableElement = focusableElements.find(element => element.contains(target));
                 if (focusableElement) {
                     updateFocusedElement(focusableElement);
@@ -379,9 +339,8 @@ function focusZone(container, settings) {
             if (event.target instanceof HTMLElement) {
                 if (elementIndexFocusedByClick !== undefined) {
                     if (elementIndexFocusedByClick >= 0) {
-                        const clickedElement = focusableElements.get(elementIndexFocusedByClick);
-                        if (clickedElement && clickedElement !== currentFocusedElement) {
-                            updateFocusedElement(clickedElement);
+                        if (focusableElements[elementIndexFocusedByClick] !== currentFocusedElement) {
+                            updateFocusedElement(focusableElements[elementIndexFocusedByClick]);
                         }
                     }
                     elementIndexFocusedByClick = undefined;
@@ -392,8 +351,8 @@ function focusZone(container, settings) {
                     }
                     else if (focusInStrategy === 'closest' || focusInStrategy === 'first') {
                         if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
-                            const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.size - 1 : 0;
-                            const targetElement = focusableElements.get(targetElementIndex);
+                            const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.length - 1 : 0;
+                            const targetElement = focusableElements[targetElementIndex];
                             targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus({ preventScroll });
                             return;
                         }
@@ -404,7 +363,8 @@ function focusZone(container, settings) {
                     else if (typeof focusInStrategy === 'function') {
                         if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
                             const elementToFocus = focusInStrategy(event.relatedTarget);
-                            if (elementToFocus && focusableElements.has(elementToFocus)) {
+                            const requestedFocusElementIndex = elementToFocus ? focusableElements.indexOf(elementToFocus) : -1;
+                            if (requestedFocusElementIndex >= 0 && elementToFocus instanceof HTMLElement) {
                                 elementToFocus.focus({ preventScroll });
                                 return;
                             }
@@ -463,26 +423,26 @@ function focusZone(container, settings) {
                         nextFocusedIndex += 1;
                     }
                     else {
-                        nextFocusedIndex = focusableElements.size - 1;
+                        nextFocusedIndex = focusableElements.length - 1;
                     }
                     if (nextFocusedIndex < 0) {
                         if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
-                            nextFocusedIndex = focusableElements.size - 1;
+                            nextFocusedIndex = focusableElements.length - 1;
                         }
                         else {
                             nextFocusedIndex = 0;
                         }
                     }
-                    if (nextFocusedIndex >= focusableElements.size) {
+                    if (nextFocusedIndex >= focusableElements.length) {
                         if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
                             nextFocusedIndex = 0;
                         }
                         else {
-                            nextFocusedIndex = focusableElements.size - 1;
+                            nextFocusedIndex = focusableElements.length - 1;
                         }
                     }
                     if (lastFocusedIndex !== nextFocusedIndex) {
-                        nextElementToFocus = focusableElements.get(nextFocusedIndex);
+                        nextElementToFocus = focusableElements[nextFocusedIndex];
                     }
                 }
                 if (activeDescendantControl) {

package/dist/cjs/utils/iterate-focusable-elements.js

@@ -33,32 +33,24 @@ function* iterateFocusableElements(container, options = {}) {
 function getFocusableChild(container, lastChild = false) {
     return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
 }
-const DISABLEABLE_TAGS = new Set(['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET']);
 function isFocusable(elem, strict = false) {
-    if (elem.hidden)
-        return false;
-    if (elem.classList.contains('sentinel'))
-        return false;
-    if (elem instanceof HTMLInputElement && elem.type === 'hidden')
-        return false;
-    if (DISABLEABLE_TAGS.has(elem.tagName) && elem.disabled)
+    const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
+        elem.disabled;
+    const hiddenInert = elem.hidden;
+    const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
+    const sentinelInert = elem.classList.contains('sentinel');
+    if (disabledAttrInert || hiddenInert || hiddenInputInert || sentinelInert) {
         return false;
+    }
     if (strict) {
-        const offsetWidth = elem.offsetWidth;
-        const offsetHeight = elem.offsetHeight;
-        const offsetParent = elem.offsetParent;
-        if (offsetWidth === 0 || offsetHeight === 0)
-            return false;
         const style = getComputedStyle(elem);
-        if (style.display === 'none')
-            return false;
-        if (style.visibility === 'hidden' || style.visibility === 'collapse')
-            return false;
-        const position = style.position;
-        if (!offsetParent && position !== 'fixed' && position !== 'sticky')
-            return false;
-        if (elem.getClientRects().length === 0)
+        const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
+        const visibilityInert = ['hidden', 'collapse'].includes(style.visibility);
+        const displayInert = style.display === 'none' || !elem.offsetParent;
+        const clientRectsInert = elem.getClientRects().length === 0;
+        if (sizeInert || visibilityInert || clientRectsInert || displayInert) {
             return false;
+        }
     }
     if (elem.getAttribute('tabindex') != null) {
         return true;

package/dist/esm/anchored-position.mjs

@@ -25,11 +25,9 @@ function getPositionedParent(element) {
     if (isOnTopLayer(element))
         return document.body;
     let parentNode = element.parentNode;
-    while (parentNode !== null && parentNode !== document.body) {
-        if (parentNode instanceof HTMLElement) {
-            if (getComputedStyle(parentNode).position !== 'static') {
-                return parentNode;
-            }
+    while (parentNode !== null) {
+        if (parentNode instanceof HTMLElement && getComputedStyle(parentNode).position !== 'static') {
+            return parentNode;
         }
         parentNode = parentNode.parentNode;
     }
@@ -51,24 +49,26 @@ function isOnTopLayer(element) {
     return false;
 }
 function getClippingRect(element) {
-    let clippingNode = document.body;
     let parentNode = element;
-    while (parentNode !== null && parentNode !== document.body) {
-        if (parentNode instanceof HTMLElement) {
-            const overflow = getComputedStyle(parentNode).overflow;
-            if (overflow !== 'visible') {
-                clippingNode = parentNode;
-                break;
-            }
+    while (parentNode !== null) {
+        if (!(parentNode instanceof Element)) {
+            break;
+        }
+        const parentNodeStyle = getComputedStyle(parentNode);
+        if (parentNodeStyle.overflow !== 'visible') {
+            break;
         }
         parentNode = parentNode.parentNode;
     }
+    const clippingNode = parentNode === document.body || !(parentNode instanceof HTMLElement) ? document.body : parentNode;
     const elemRect = clippingNode.getBoundingClientRect();
     const elemStyle = getComputedStyle(clippingNode);
-    const borderTop = parseInt(elemStyle.borderTopWidth, 10) || 0;
-    const borderLeft = parseInt(elemStyle.borderLeftWidth, 10) || 0;
-    const borderRight = parseInt(elemStyle.borderRightWidth, 10) || 0;
-    const borderBottom = parseInt(elemStyle.borderBottomWidth, 10) || 0;
+    const [borderTop, borderLeft, borderRight, borderBottom] = [
+        elemStyle.borderTopWidth,
+        elemStyle.borderLeftWidth,
+        elemStyle.borderRightWidth,
+        elemStyle.borderBottomWidth,
+    ].map(v => parseInt(v, 10) || 0);
     return {
         top: elemRect.top + borderTop,
         left: elemRect.left + borderLeft,

package/dist/esm/focus-trap.mjs

@@ -4,16 +4,6 @@ import { polyfill } from './polyfills/event-listener-signal.mjs';
 polyfill();
 const suspendedTrapStack = [];
 let activeTrap = undefined;
-const SR_ONLY_STYLES = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';
-function createSentinel({ onFocus }) {
-    const sentinel = document.createElement('span');
-    sentinel.setAttribute('class', 'sentinel');
-    sentinel.setAttribute('tabindex', '0');
-    sentinel.setAttribute('aria-hidden', 'true');
-    sentinel.style.cssText = SR_ONLY_STYLES;
-    sentinel.onfocus = onFocus;
-    return sentinel;
-}
 function tryReactivate() {
     const trapToReactivate = suspendedTrapStack.pop();
     if (trapToReactivate) {
@@ -31,10 +21,9 @@ function observeFocusTrap(container, sentinels) {
     const observer = new MutationObserver(mutations => {
         for (const mutation of mutations) {
             if (mutation.type === 'childList' && mutation.addedNodes.length) {
-                for (const node of mutation.addedNodes) {
-                    if (node instanceof HTMLElement && node.tagName === 'SPAN' && node.classList.contains('sentinel')) {
-                        return;
-                    }
+                const sentinelChildren = Array.from(mutation.addedNodes).filter(e => e instanceof HTMLElement && e.classList.contains('sentinel') && e.tagName === 'SPAN');
+                if (sentinelChildren.length) {
+                    return;
                 }
                 const firstChild = container.firstElementChild;
                 const lastChild = container.lastElementChild;
@@ -55,20 +44,24 @@ function focusTrap(container, initialFocus, abortSignal) {
     const controller = new AbortController();
     const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
     container.setAttribute('data-focus-trap', 'active');
-    const sentinelStart = createSentinel({
-        onFocus: () => {
-            const lastFocusableChild = getFocusableChild(container, true);
-            lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
-        },
-    });
-    const sentinelEnd = createSentinel({
-        onFocus: () => {
-            const firstFocusableChild = getFocusableChild(container);
-            firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
-        },
-    });
-    const hasExistingSentinels = container.querySelector(':scope > span.sentinel') !== null;
-    if (!hasExistingSentinels) {
+    const sentinelStart = document.createElement('span');
+    sentinelStart.setAttribute('class', 'sentinel');
+    sentinelStart.setAttribute('tabindex', '0');
+    sentinelStart.setAttribute('aria-hidden', 'true');
+    sentinelStart.onfocus = () => {
+        const lastFocusableChild = getFocusableChild(container, true);
+        lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
+    };
+    const sentinelEnd = document.createElement('span');
+    sentinelEnd.setAttribute('class', 'sentinel');
+    sentinelEnd.setAttribute('tabindex', '0');
+    sentinelEnd.setAttribute('aria-hidden', 'true');
+    sentinelEnd.onfocus = () => {
+        const firstFocusableChild = getFocusableChild(container);
+        firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+    };
+    const existingSentinels = Array.from(container.children).filter(e => e.classList.contains('sentinel') && e.tagName === 'SPAN');
+    if (!existingSentinels.length) {
         container.prepend(sentinelStart);
         container.append(sentinelEnd);
     }

package/dist/esm/focus-zone.mjs

@@ -3,7 +3,6 @@ import { isMacOS } from './utils/user-agent.mjs';
 import { iterateFocusableElements } from './utils/iterate-focusable-elements.mjs';
 import { uniqueId } from './utils/unique-id.mjs';
 import { isEditableElement } from './utils/is-editable-element.mjs';
-import { IndexedSet } from './utils/indexed-set.mjs';
 
 polyfill();
 var FocusKeys;
@@ -81,18 +80,17 @@ function getDirection(keyboardEvent) {
 }
 function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
     const key = keyboardEvent.key;
-    const isSingleChar = key.length === 1 || (key.length === 2 && key.charCodeAt(0) >= 0xd800 && key.charCodeAt(0) <= 0xdbff);
+    const keyLength = [...key].length;
     const isEditable = isEditableElement(activeElement);
     const isSelect = activeElement instanceof HTMLSelectElement;
-    if (isEditable && (isSingleChar || key === 'Home' || key === 'End')) {
+    if (isEditable && (keyLength === 1 || key === 'Home' || key === 'End')) {
         return true;
     }
     if (isSelect) {
-        const isMac = isMacOS();
-        if (key === 'ArrowDown' && isMac && !keyboardEvent.metaKey) {
+        if (key === 'ArrowDown' && isMacOS() && !keyboardEvent.metaKey) {
             return true;
         }
-        if (key === 'ArrowDown' && !isMac && keyboardEvent.altKey) {
+        if (key === 'ArrowDown' && !isMacOS() && keyboardEvent.altKey) {
             return true;
         }
         return false;
@@ -130,7 +128,7 @@ const activeDescendantActivatedIndirectly = 'activated-indirectly';
 const hasActiveDescendantAttribute = 'data-has-active-descendant';
 function focusZone(container, settings) {
     var _a, _b, _c, _d, _e, _f;
-    const focusableElements = new IndexedSet();
+    const focusableElements = [];
     const savedTabIndex = new WeakMap();
     const bindKeys = (_a = settings === null || settings === void 0 ? void 0 : settings.bindKeys) !== null && _a !== void 0 ? _a : ((settings === null || settings === void 0 ? void 0 : settings.getNextFocusable) ? FocusKeys.ArrowAll : FocusKeys.ArrowVertical) | FocusKeys.HomeAndEnd;
     const focusOutBehavior = (_b = settings === null || settings === void 0 ? void 0 : settings.focusOutBehavior) !== null && _b !== void 0 ? _b : 'stop';
@@ -142,7 +140,7 @@ function focusZone(container, settings) {
     const preventScroll = (_e = settings === null || settings === void 0 ? void 0 : settings.preventScroll) !== null && _e !== void 0 ? _e : false;
     const preventInitialFocus = focusInStrategy === 'initial' && (settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl);
     function getFirstFocusableElement() {
-        return focusableElements.get(0);
+        return focusableElements[0];
     }
     function isActiveDescendantInputFocused() {
         return document.activeElement === activeDescendantControl;
@@ -187,20 +185,17 @@ function focusZone(container, settings) {
         activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.removeAttribute('aria-activedescendant');
         container.removeAttribute(hasActiveDescendantAttribute);
         previouslyActiveElement === null || previouslyActiveElement === void 0 ? void 0 : previouslyActiveElement.removeAttribute(isActiveDescendantAttribute);
-        const items = container.querySelectorAll(`[${isActiveDescendantAttribute}]`);
-        for (let i = 0; i < items.length; i++) {
-            items[i].removeAttribute(isActiveDescendantAttribute);
+        for (const item of container.querySelectorAll(`[${isActiveDescendantAttribute}]`)) {
+            item === null || item === void 0 ? void 0 : item.removeAttribute(isActiveDescendantAttribute);
         }
         activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(undefined, previouslyActiveElement, false);
     }
     function beginFocusManagement(...elements) {
-        const filteredElements = (settings === null || settings === void 0 ? void 0 : settings.focusableElementFilter)
-            ? elements.filter(e => settings.focusableElementFilter(e))
-            : elements;
+        const filteredElements = elements.filter(e => { var _a, _b; return (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.focusableElementFilter) === null || _a === void 0 ? void 0 : _a.call(settings, e)) !== null && _b !== void 0 ? _b : true; });
         if (filteredElements.length === 0) {
             return;
         }
-        focusableElements.insertAt(findInsertionIndex(filteredElements), ...filteredElements);
+        focusableElements.splice(findInsertionIndex(filteredElements), 0, ...filteredElements);
         for (const element of filteredElements) {
             if (!savedTabIndex.has(element)) {
                 savedTabIndex.set(element, element.getAttribute('tabindex'));
@@ -213,13 +208,13 @@ function focusZone(container, settings) {
     }
     function findInsertionIndex(elementsToInsert) {
         const firstElementToInsert = elementsToInsert[0];
-        if (focusableElements.size === 0)
+        if (focusableElements.length === 0)
             return 0;
         let iMin = 0;
-        let iMax = focusableElements.size - 1;
+        let iMax = focusableElements.length - 1;
         while (iMin <= iMax) {
             const i = Math.floor((iMin + iMax) / 2);
-            const element = focusableElements.get(i);
+            const element = focusableElements[i];
             if (followsInDocument(firstElementToInsert, element)) {
                 iMax = i - 1;
             }
@@ -234,7 +229,10 @@ function focusZone(container, settings) {
     }
     function endFocusManagement(...elements) {
         for (const element of elements) {
-            focusableElements.delete(element);
+            const focusableElementIndex = focusableElements.indexOf(element);
+            if (focusableElementIndex >= 0) {
+                focusableElements.splice(focusableElementIndex, 1);
+            }
             const savedIndex = savedTabIndex.get(element);
             if (savedIndex !== undefined) {
                 if (savedIndex === null) {
@@ -261,61 +259,29 @@ function focusZone(container, settings) {
     if (!preventInitialFocus)
         updateFocusedElement(initialElement);
     const observer = new MutationObserver(mutations => {
-        const elementsToRemove = new Set();
-        const elementsToAdd = new Set();
-        const attributeRemovals = new Set();
-        const attributeAdditions = new Set();
         for (const mutation of mutations) {
-            if (mutation.type === 'childList') {
-                for (const removedNode of mutation.removedNodes) {
-                    if (removedNode instanceof HTMLElement) {
-                        elementsToRemove.add(removedNode);
-                    }
-                }
-                for (const addedNode of mutation.addedNodes) {
-                    if (addedNode instanceof HTMLElement) {
-                        elementsToAdd.add(addedNode);
-                    }
+            for (const removedNode of mutation.removedNodes) {
+                if (removedNode instanceof HTMLElement) {
+                    endFocusManagement(...iterateFocusableElements(removedNode));
                 }
             }
-            else if (mutation.type === 'attributes' && mutation.target instanceof HTMLElement) {
-                const attributeName = mutation.attributeName;
-                const hasAttribute = attributeName ? mutation.target.hasAttribute(attributeName) : false;
-                if (hasAttribute) {
-                    attributeRemovals.add(mutation.target);
-                }
-                else {
-                    attributeAdditions.add(mutation.target);
+            if (mutation.type === 'attributes' && mutation.oldValue === null) {
+                if (mutation.target instanceof HTMLElement) {
+                    endFocusManagement(mutation.target);
                 }
             }
         }
-        if (elementsToRemove.size > 0) {
-            const toRemove = [];
-            for (const node of elementsToRemove) {
-                for (const el of iterateFocusableElements(node)) {
-                    toRemove.push(el);
+        for (const mutation of mutations) {
+            for (const addedNode of mutation.addedNodes) {
+                if (addedNode instanceof HTMLElement) {
+                    beginFocusManagement(...iterateFocusableElements(addedNode, iterateFocusableElementsOptions));
                 }
             }
-            if (toRemove.length > 0) {
-                endFocusManagement(...toRemove);
-            }
-        }
-        if (attributeRemovals.size > 0) {
-            endFocusManagement(...attributeRemovals);
-        }
-        if (elementsToAdd.size > 0) {
-            const toAdd = [];
-            for (const node of elementsToAdd) {
-                for (const el of iterateFocusableElements(node, iterateFocusableElementsOptions)) {
-                    toAdd.push(el);
+            if (mutation.type === 'attributes' && mutation.oldValue !== null) {
+                if (mutation.target instanceof HTMLElement) {
+                    beginFocusManagement(mutation.target);
                 }
             }
-            if (toAdd.length > 0) {
-                beginFocusManagement(...toAdd);
-            }
-        }
-        if (attributeAdditions.size > 0) {
-            beginFocusManagement(...attributeAdditions);
         }
     });
     observer.observe(container, {
@@ -327,9 +293,7 @@ function focusZone(container, settings) {
     const controller = new AbortController();
     const signal = (_f = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _f !== void 0 ? _f : controller.signal;
     signal.addEventListener('abort', () => {
-        observer.disconnect();
         endFocusManagement(...focusableElements);
-        focusableElements.clear();
     });
     let elementIndexFocusedByClick = undefined;
     container.addEventListener('mousedown', event => {
@@ -339,7 +303,7 @@ function focusZone(container, settings) {
     }, { signal });
     if (activeDescendantControl) {
         container.addEventListener('focusin', event => {
-            if (event.target instanceof HTMLElement && focusableElements.has(event.target)) {
+            if (event.target instanceof HTMLElement && focusableElements.includes(event.target)) {
                 activeDescendantControl.focus({ preventScroll });
                 updateFocusedElement(event.target);
             }
@@ -349,10 +313,6 @@ function focusZone(container, settings) {
                 if (!(target instanceof Node)) {
                     return;
                 }
-                if (target instanceof HTMLElement && focusableElements.has(target)) {
-                    updateFocusedElement(target);
-                    return;
-                }
                 const focusableElement = focusableElements.find(element => element.contains(target));
                 if (focusableElement) {
                     updateFocusedElement(focusableElement);
@@ -377,9 +337,8 @@ function focusZone(container, settings) {
             if (event.target instanceof HTMLElement) {
                 if (elementIndexFocusedByClick !== undefined) {
                     if (elementIndexFocusedByClick >= 0) {
-                        const clickedElement = focusableElements.get(elementIndexFocusedByClick);
-                        if (clickedElement && clickedElement !== currentFocusedElement) {
-                            updateFocusedElement(clickedElement);
+                        if (focusableElements[elementIndexFocusedByClick] !== currentFocusedElement) {
+                            updateFocusedElement(focusableElements[elementIndexFocusedByClick]);
                         }
                     }
                     elementIndexFocusedByClick = undefined;
@@ -390,8 +349,8 @@ function focusZone(container, settings) {
                     }
                     else if (focusInStrategy === 'closest' || focusInStrategy === 'first') {
                         if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
-                            const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.size - 1 : 0;
-                            const targetElement = focusableElements.get(targetElementIndex);
+                            const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.length - 1 : 0;
+                            const targetElement = focusableElements[targetElementIndex];
                             targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus({ preventScroll });
                             return;
                         }
@@ -402,7 +361,8 @@ function focusZone(container, settings) {
                     else if (typeof focusInStrategy === 'function') {
                         if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
                             const elementToFocus = focusInStrategy(event.relatedTarget);
-                            if (elementToFocus && focusableElements.has(elementToFocus)) {
+                            const requestedFocusElementIndex = elementToFocus ? focusableElements.indexOf(elementToFocus) : -1;
+                            if (requestedFocusElementIndex >= 0 && elementToFocus instanceof HTMLElement) {
                                 elementToFocus.focus({ preventScroll });
                                 return;
                             }
@@ -461,26 +421,26 @@ function focusZone(container, settings) {
                         nextFocusedIndex += 1;
                     }
                     else {
-                        nextFocusedIndex = focusableElements.size - 1;
+                        nextFocusedIndex = focusableElements.length - 1;
                     }
                     if (nextFocusedIndex < 0) {
                         if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
-                            nextFocusedIndex = focusableElements.size - 1;
+                            nextFocusedIndex = focusableElements.length - 1;
                         }
                         else {
                             nextFocusedIndex = 0;
                         }
                     }
-                    if (nextFocusedIndex >= focusableElements.size) {
+                    if (nextFocusedIndex >= focusableElements.length) {
                         if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
                             nextFocusedIndex = 0;
                         }
                         else {
-                            nextFocusedIndex = focusableElements.size - 1;
+                            nextFocusedIndex = focusableElements.length - 1;
                         }
                     }
                     if (lastFocusedIndex !== nextFocusedIndex) {
-                        nextElementToFocus = focusableElements.get(nextFocusedIndex);
+                        nextElementToFocus = focusableElements[nextFocusedIndex];
                     }
                 }
                 if (activeDescendantControl) {

package/dist/esm/utils/iterate-focusable-elements.mjs

@@ -31,32 +31,24 @@ function* iterateFocusableElements(container, options = {}) {
 function getFocusableChild(container, lastChild = false) {
     return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
 }
-const DISABLEABLE_TAGS = new Set(['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET']);
 function isFocusable(elem, strict = false) {
-    if (elem.hidden)
-        return false;
-    if (elem.classList.contains('sentinel'))
-        return false;
-    if (elem instanceof HTMLInputElement && elem.type === 'hidden')
-        return false;
-    if (DISABLEABLE_TAGS.has(elem.tagName) && elem.disabled)
+    const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
+        elem.disabled;
+    const hiddenInert = elem.hidden;
+    const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
+    const sentinelInert = elem.classList.contains('sentinel');
+    if (disabledAttrInert || hiddenInert || hiddenInputInert || sentinelInert) {
         return false;
+    }
     if (strict) {
-        const offsetWidth = elem.offsetWidth;
-        const offsetHeight = elem.offsetHeight;
-        const offsetParent = elem.offsetParent;
-        if (offsetWidth === 0 || offsetHeight === 0)
-            return false;
         const style = getComputedStyle(elem);
-        if (style.display === 'none')
-            return false;
-        if (style.visibility === 'hidden' || style.visibility === 'collapse')
-            return false;
-        const position = style.position;
-        if (!offsetParent && position !== 'fixed' && position !== 'sticky')
-            return false;
-        if (elem.getClientRects().length === 0)
+        const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
+        const visibilityInert = ['hidden', 'collapse'].includes(style.visibility);
+        const displayInert = style.display === 'none' || !elem.offsetParent;
+        const clientRectsInert = elem.getClientRects().length === 0;
+        if (sizeInert || visibilityInert || clientRectsInert || displayInert) {
             return false;
+        }
     }
     if (elem.getAttribute('tabindex') != null) {
         return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/behaviors",
-  "version": "0.0.0-20251215125247",
+  "version": "0.0.0-20251215200522",
   "description": "Shared behaviors for JavaScript components",
   "type": "commonjs",
   "main": "dist/cjs/index.js",

package/dist/cjs/utils/indexed-set.d.ts

@@ -1,13 +0,0 @@
-export declare class IndexedSet<T> {
-    private _items;
-    private _itemSet;
-    insertAt(index: number, ...elements: T[]): void;
-    delete(element: T): boolean;
-    has(element: T): boolean;
-    indexOf(element: T): number;
-    get(index: number): T | undefined;
-    get size(): number;
-    [Symbol.iterator](): Iterator<T>;
-    clear(): void;
-    find(predicate: (element: T) => boolean): T | undefined;
-}

package/dist/cjs/utils/indexed-set.js

@@ -1,53 +0,0 @@
-'use strict';
-
-class IndexedSet {
-    constructor() {
-        this._items = [];
-        this._itemSet = new Set();
-    }
-    insertAt(index, ...elements) {
-        const newElements = elements.filter(e => !this._itemSet.has(e));
-        if (newElements.length === 0)
-            return;
-        this._items.splice(index, 0, ...newElements);
-        for (const element of newElements) {
-            this._itemSet.add(element);
-        }
-    }
-    delete(element) {
-        if (!this._itemSet.has(element))
-            return false;
-        const index = this._items.indexOf(element);
-        if (index >= 0) {
-            this._items.splice(index, 1);
-        }
-        this._itemSet.delete(element);
-        return true;
-    }
-    has(element) {
-        return this._itemSet.has(element);
-    }
-    indexOf(element) {
-        if (!this._itemSet.has(element))
-            return -1;
-        return this._items.indexOf(element);
-    }
-    get(index) {
-        return this._items[index];
-    }
-    get size() {
-        return this._items.length;
-    }
-    [Symbol.iterator]() {
-        return this._items[Symbol.iterator]();
-    }
-    clear() {
-        this._items = [];
-        this._itemSet.clear();
-    }
-    find(predicate) {
-        return this._items.find(predicate);
-    }
-}
-
-exports.IndexedSet = IndexedSet;

package/dist/esm/utils/indexed-set.d.ts

@@ -1,13 +0,0 @@
-export declare class IndexedSet<T> {
-    private _items;
-    private _itemSet;
-    insertAt(index: number, ...elements: T[]): void;
-    delete(element: T): boolean;
-    has(element: T): boolean;
-    indexOf(element: T): number;
-    get(index: number): T | undefined;
-    get size(): number;
-    [Symbol.iterator](): Iterator<T>;
-    clear(): void;
-    find(predicate: (element: T) => boolean): T | undefined;
-}

package/dist/esm/utils/indexed-set.mjs

@@ -1,51 +0,0 @@
-class IndexedSet {
-    constructor() {
-        this._items = [];
-        this._itemSet = new Set();
-    }
-    insertAt(index, ...elements) {
-        const newElements = elements.filter(e => !this._itemSet.has(e));
-        if (newElements.length === 0)
-            return;
-        this._items.splice(index, 0, ...newElements);
-        for (const element of newElements) {
-            this._itemSet.add(element);
-        }
-    }
-    delete(element) {
-        if (!this._itemSet.has(element))
-            return false;
-        const index = this._items.indexOf(element);
-        if (index >= 0) {
-            this._items.splice(index, 1);
-        }
-        this._itemSet.delete(element);
-        return true;
-    }
-    has(element) {
-        return this._itemSet.has(element);
-    }
-    indexOf(element) {
-        if (!this._itemSet.has(element))
-            return -1;
-        return this._items.indexOf(element);
-    }
-    get(index) {
-        return this._items[index];
-    }
-    get size() {
-        return this._items.length;
-    }
-    [Symbol.iterator]() {
-        return this._items[Symbol.iterator]();
-    }
-    clear() {
-        this._items = [];
-        this._itemSet.clear();
-    }
-    find(predicate) {
-        return this._items.find(predicate);
-    }
-}
-
-export { IndexedSet };