@primer/behaviors 1.0.2 → 1.1.0

package/dist/cjs/anchored-position.js

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAnchoredPosition = void 0;
+const alternateOrders = {
+    'outside-top': ['outside-bottom', 'outside-right', 'outside-left', 'outside-bottom'],
+    'outside-bottom': ['outside-top', 'outside-right', 'outside-left', 'outside-bottom'],
+    'outside-left': ['outside-right', 'outside-bottom', 'outside-top', 'outside-bottom'],
+    'outside-right': ['outside-left', 'outside-bottom', 'outside-top', 'outside-bottom']
+};
+function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
+    const parentElement = getPositionedParent(floatingElement);
+    const clippingRect = getClippingRect(parentElement);
+    const parentElementStyle = getComputedStyle(parentElement);
+    const parentElementRect = parentElement.getBoundingClientRect();
+    const [borderTop, borderLeft] = [parentElementStyle.borderTopWidth, parentElementStyle.borderLeftWidth].map(v => parseInt(v, 10) || 0);
+    const relativeRect = {
+        top: parentElementRect.top + borderTop,
+        left: parentElementRect.left + borderLeft
+    };
+    return pureCalculateAnchoredPosition(clippingRect, relativeRect, floatingElement.getBoundingClientRect(), anchorElement instanceof Element ? anchorElement.getBoundingClientRect() : anchorElement, getDefaultSettings(settings));
+}
+exports.getAnchoredPosition = getAnchoredPosition;
+function getPositionedParent(element) {
+    let parentNode = element.parentNode;
+    while (parentNode !== null) {
+        if (parentNode instanceof HTMLElement && getComputedStyle(parentNode).position !== 'static') {
+            return parentNode;
+        }
+        parentNode = parentNode.parentNode;
+    }
+    return document.body;
+}
+function getClippingRect(element) {
+    let parentNode = element;
+    while (parentNode !== null) {
+        if (parentNode === document.body) {
+            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, 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,
+        width: elemRect.width - borderRight - borderLeft,
+        height: Math.max(elemRect.height - borderTop - borderBottom, clippingNode === document.body ? window.innerHeight : -Infinity)
+    };
+}
+const positionDefaults = {
+    side: 'outside-bottom',
+    align: 'start',
+    anchorOffset: 4,
+    alignmentOffset: 4,
+    allowOutOfBounds: false
+};
+function getDefaultSettings(settings = {}) {
+    var _a, _b, _c, _d, _e;
+    const side = (_a = settings.side) !== null && _a !== void 0 ? _a : positionDefaults.side;
+    const align = (_b = settings.align) !== null && _b !== void 0 ? _b : positionDefaults.align;
+    return {
+        side,
+        align,
+        anchorOffset: (_c = settings.anchorOffset) !== null && _c !== void 0 ? _c : (side === 'inside-center' ? 0 : positionDefaults.anchorOffset),
+        alignmentOffset: (_d = settings.alignmentOffset) !== null && _d !== void 0 ? _d : (align !== 'center' && side.startsWith('inside') ? positionDefaults.alignmentOffset : 0),
+        allowOutOfBounds: (_e = settings.allowOutOfBounds) !== null && _e !== void 0 ? _e : positionDefaults.allowOutOfBounds
+    };
+}
+function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingRect, anchorRect, { side, align, allowOutOfBounds, anchorOffset, alignmentOffset }) {
+    const relativeViewportRect = {
+        top: viewportRect.top - relativePosition.top,
+        left: viewportRect.left - relativePosition.left,
+        width: viewportRect.width,
+        height: viewportRect.height
+    };
+    let pos = calculatePosition(floatingRect, anchorRect, side, align, anchorOffset, alignmentOffset);
+    let anchorSide = side;
+    pos.top -= relativePosition.top;
+    pos.left -= relativePosition.left;
+    if (!allowOutOfBounds) {
+        const alternateOrder = alternateOrders[side];
+        let positionAttempt = 0;
+        if (alternateOrder) {
+            let prevSide = side;
+            while (positionAttempt < alternateOrder.length &&
+                shouldRecalculatePosition(prevSide, pos, relativeViewportRect, floatingRect)) {
+                const nextSide = alternateOrder[positionAttempt++];
+                prevSide = nextSide;
+                pos = calculatePosition(floatingRect, anchorRect, nextSide, align, anchorOffset, alignmentOffset);
+                pos.top -= relativePosition.top;
+                pos.left -= relativePosition.left;
+                anchorSide = nextSide;
+            }
+        }
+        if (pos.top < relativeViewportRect.top) {
+            pos.top = relativeViewportRect.top;
+        }
+        if (pos.left < relativeViewportRect.left) {
+            pos.left = relativeViewportRect.left;
+        }
+        if (pos.left + floatingRect.width > viewportRect.width + relativeViewportRect.left) {
+            pos.left = viewportRect.width + relativeViewportRect.left - floatingRect.width;
+        }
+        if (alternateOrder && positionAttempt < alternateOrder.length) {
+            if (pos.top + floatingRect.height > viewportRect.height + relativeViewportRect.top) {
+                pos.top = viewportRect.height + relativeViewportRect.top - floatingRect.height;
+            }
+        }
+    }
+    return Object.assign(Object.assign({}, pos), { anchorSide });
+}
+function calculatePosition(elementDimensions, anchorPosition, side, align, anchorOffset, alignmentOffset) {
+    const anchorRight = anchorPosition.left + anchorPosition.width;
+    const anchorBottom = anchorPosition.top + anchorPosition.height;
+    let top = -1;
+    let left = -1;
+    if (side === 'outside-top') {
+        top = anchorPosition.top - anchorOffset - elementDimensions.height;
+    }
+    else if (side === 'outside-bottom') {
+        top = anchorBottom + anchorOffset;
+    }
+    else if (side === 'outside-left') {
+        left = anchorPosition.left - anchorOffset - elementDimensions.width;
+    }
+    else if (side === 'outside-right') {
+        left = anchorRight + anchorOffset;
+    }
+    if (side === 'outside-top' || side === 'outside-bottom') {
+        if (align === 'start') {
+            left = anchorPosition.left + alignmentOffset;
+        }
+        else if (align === 'center') {
+            left = anchorPosition.left - (elementDimensions.width - anchorPosition.width) / 2 + alignmentOffset;
+        }
+        else {
+            left = anchorRight - elementDimensions.width - alignmentOffset;
+        }
+    }
+    if (side === 'outside-left' || side === 'outside-right') {
+        if (align === 'start') {
+            top = anchorPosition.top + alignmentOffset;
+        }
+        else if (align === 'center') {
+            top = anchorPosition.top - (elementDimensions.height - anchorPosition.height) / 2 + alignmentOffset;
+        }
+        else {
+            top = anchorBottom - elementDimensions.height - alignmentOffset;
+        }
+    }
+    if (side === 'inside-top') {
+        top = anchorPosition.top + anchorOffset;
+    }
+    else if (side === 'inside-bottom') {
+        top = anchorBottom - anchorOffset - elementDimensions.height;
+    }
+    else if (side === 'inside-left') {
+        left = anchorPosition.left + anchorOffset;
+    }
+    else if (side === 'inside-right') {
+        left = anchorRight - anchorOffset - elementDimensions.width;
+    }
+    else if (side === 'inside-center') {
+        left = (anchorRight + anchorPosition.left) / 2 - elementDimensions.width / 2 + anchorOffset;
+    }
+    if (side === 'inside-top' || side === 'inside-bottom') {
+        if (align === 'start') {
+            left = anchorPosition.left + alignmentOffset;
+        }
+        else if (align === 'center') {
+            left = anchorPosition.left - (elementDimensions.width - anchorPosition.width) / 2 + alignmentOffset;
+        }
+        else {
+            left = anchorRight - elementDimensions.width - alignmentOffset;
+        }
+    }
+    else if (side === 'inside-left' || side === 'inside-right' || side === 'inside-center') {
+        if (align === 'start') {
+            top = anchorPosition.top + alignmentOffset;
+        }
+        else if (align === 'center') {
+            top = anchorPosition.top - (elementDimensions.height - anchorPosition.height) / 2 + alignmentOffset;
+        }
+        else {
+            top = anchorBottom - elementDimensions.height - alignmentOffset;
+        }
+    }
+    return { top, left };
+}
+function shouldRecalculatePosition(side, currentPos, containerDimensions, elementDimensions) {
+    if (side === 'outside-top' || side === 'outside-bottom') {
+        return (currentPos.top < containerDimensions.top ||
+            currentPos.top + elementDimensions.height > containerDimensions.height + containerDimensions.top);
+    }
+    else {
+        return (currentPos.left < containerDimensions.left ||
+            currentPos.left + elementDimensions.width > containerDimensions.width + containerDimensions.left);
+    }
+}

package/dist/cjs/focus-trap.d.ts

@@ -0,0 +1 @@
+export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement, abortSignal?: AbortSignal): AbortController | undefined;

package/dist/cjs/focus-trap.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.focusTrap = void 0;
+const iterate_focusable_elements_js_1 = require("./utils/iterate-focusable-elements.js");
+const event_listener_signal_js_1 = require("./polyfills/event-listener-signal.js");
+(0, event_listener_signal_js_1.polyfill)();
+const suspendedTrapStack = [];
+let activeTrap = undefined;
+function tryReactivate() {
+    const trapToReactivate = suspendedTrapStack.pop();
+    if (trapToReactivate) {
+        focusTrap(trapToReactivate.container, trapToReactivate.initialFocus, trapToReactivate.originalSignal);
+    }
+}
+function followSignal(signal) {
+    const controller = new AbortController();
+    signal.addEventListener('abort', () => {
+        controller.abort();
+    });
+    return controller;
+}
+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 = document.createElement('span');
+    sentinelStart.setAttribute('class', 'sentinel');
+    sentinelStart.setAttribute('tabindex', '0');
+    sentinelStart.setAttribute('aria-hidden', 'true');
+    sentinelStart.onfocus = () => {
+        const lastFocusableChild = (0, iterate_focusable_elements_js_1.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 = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
+        firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+    };
+    container.prepend(sentinelStart);
+    container.append(sentinelEnd);
+    let lastFocusedChild = undefined;
+    function ensureTrapZoneHasFocus(focusedElement) {
+        if (focusedElement instanceof HTMLElement && document.contains(container)) {
+            if (container.contains(focusedElement)) {
+                lastFocusedChild = focusedElement;
+                return;
+            }
+            else {
+                if (lastFocusedChild && (0, iterate_focusable_elements_js_1.isTabbable)(lastFocusedChild) && container.contains(lastFocusedChild)) {
+                    lastFocusedChild.focus();
+                    return;
+                }
+                else if (initialFocus && container.contains(initialFocus)) {
+                    initialFocus.focus();
+                    return;
+                }
+                else {
+                    const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
+                    firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+                    return;
+                }
+            }
+        }
+    }
+    const wrappingController = followSignal(signal);
+    if (activeTrap) {
+        const suspendedTrap = activeTrap;
+        activeTrap.container.setAttribute('data-focus-trap', 'suspended');
+        activeTrap.controller.abort();
+        suspendedTrapStack.push(suspendedTrap);
+    }
+    wrappingController.signal.addEventListener('abort', () => {
+        activeTrap = undefined;
+    });
+    signal.addEventListener('abort', () => {
+        container.removeAttribute('data-focus-trap');
+        const sentinels = container.getElementsByClassName('sentinel');
+        while (sentinels.length > 0)
+            sentinels[0].remove();
+        const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
+        if (suspendedTrapIndex >= 0) {
+            suspendedTrapStack.splice(suspendedTrapIndex, 1);
+        }
+        tryReactivate();
+    });
+    document.addEventListener('focus', event => {
+        ensureTrapZoneHasFocus(event.target);
+    }, { signal: wrappingController.signal, capture: true });
+    ensureTrapZoneHasFocus(document.activeElement);
+    activeTrap = {
+        container,
+        controller: wrappingController,
+        initialFocus,
+        originalSignal: signal
+    };
+    const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
+    if (suspendedTrapIndex >= 0) {
+        suspendedTrapStack.splice(suspendedTrapIndex, 1);
+    }
+    if (!abortSignal) {
+        return controller;
+    }
+}
+exports.focusTrap = focusTrap;

package/dist/cjs/focus-zone.js

@@ -0,0 +1,410 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.focusZone = exports.hasActiveDescendantAttribute = exports.activeDescendantActivatedIndirectly = exports.activeDescendantActivatedDirectly = exports.isActiveDescendantAttribute = exports.FocusKeys = void 0;
+const event_listener_signal_js_1 = require("./polyfills/event-listener-signal.js");
+const user_agent_js_1 = require("./utils/user-agent.js");
+const iterate_focusable_elements_js_1 = require("./utils/iterate-focusable-elements.js");
+const unique_id_js_1 = require("./utils/unique-id.js");
+(0, event_listener_signal_js_1.polyfill)();
+var FocusKeys;
+(function (FocusKeys) {
+    FocusKeys[FocusKeys["ArrowHorizontal"] = 1] = "ArrowHorizontal";
+    FocusKeys[FocusKeys["ArrowVertical"] = 2] = "ArrowVertical";
+    FocusKeys[FocusKeys["JK"] = 4] = "JK";
+    FocusKeys[FocusKeys["HL"] = 8] = "HL";
+    FocusKeys[FocusKeys["HomeAndEnd"] = 16] = "HomeAndEnd";
+    FocusKeys[FocusKeys["PageUpDown"] = 256] = "PageUpDown";
+    FocusKeys[FocusKeys["WS"] = 32] = "WS";
+    FocusKeys[FocusKeys["AD"] = 64] = "AD";
+    FocusKeys[FocusKeys["Tab"] = 128] = "Tab";
+    FocusKeys[FocusKeys["ArrowAll"] = 3] = "ArrowAll";
+    FocusKeys[FocusKeys["HJKL"] = 12] = "HJKL";
+    FocusKeys[FocusKeys["WASD"] = 96] = "WASD";
+    FocusKeys[FocusKeys["All"] = 511] = "All";
+})(FocusKeys = exports.FocusKeys || (exports.FocusKeys = {}));
+const KEY_TO_BIT = {
+    ArrowLeft: FocusKeys.ArrowHorizontal,
+    ArrowDown: FocusKeys.ArrowVertical,
+    ArrowUp: FocusKeys.ArrowVertical,
+    ArrowRight: FocusKeys.ArrowHorizontal,
+    h: FocusKeys.HL,
+    j: FocusKeys.JK,
+    k: FocusKeys.JK,
+    l: FocusKeys.HL,
+    a: FocusKeys.AD,
+    s: FocusKeys.WS,
+    w: FocusKeys.WS,
+    d: FocusKeys.AD,
+    Tab: FocusKeys.Tab,
+    Home: FocusKeys.HomeAndEnd,
+    End: FocusKeys.HomeAndEnd,
+    PageUp: FocusKeys.PageUpDown,
+    PageDown: FocusKeys.PageUpDown
+};
+const KEY_TO_DIRECTION = {
+    ArrowLeft: 'previous',
+    ArrowDown: 'next',
+    ArrowUp: 'previous',
+    ArrowRight: 'next',
+    h: 'previous',
+    j: 'next',
+    k: 'previous',
+    l: 'next',
+    a: 'previous',
+    s: 'next',
+    w: 'previous',
+    d: 'next',
+    Tab: 'next',
+    Home: 'start',
+    End: 'end',
+    PageUp: 'start',
+    PageDown: 'end'
+};
+function getDirection(keyboardEvent) {
+    const direction = KEY_TO_DIRECTION[keyboardEvent.key];
+    if (keyboardEvent.key === 'Tab' && keyboardEvent.shiftKey) {
+        return 'previous';
+    }
+    const isMac = (0, user_agent_js_1.isMacOS)();
+    if ((isMac && keyboardEvent.metaKey) || (!isMac && keyboardEvent.ctrlKey)) {
+        if (keyboardEvent.key === 'ArrowLeft' || keyboardEvent.key === 'ArrowUp') {
+            return 'start';
+        }
+        else if (keyboardEvent.key === 'ArrowRight' || keyboardEvent.key === 'ArrowDown') {
+            return 'end';
+        }
+    }
+    return direction;
+}
+function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
+    const key = keyboardEvent.key;
+    const keyLength = [...key].length;
+    const isTextInput = (activeElement instanceof HTMLInputElement && activeElement.type === 'text') ||
+        activeElement instanceof HTMLTextAreaElement;
+    if (isTextInput && (keyLength === 1 || key === 'Home' || key === 'End')) {
+        return true;
+    }
+    if (activeElement instanceof HTMLSelectElement) {
+        if (keyLength === 1) {
+            return true;
+        }
+        if (key === 'ArrowDown' && (0, user_agent_js_1.isMacOS)() && !keyboardEvent.metaKey) {
+            return true;
+        }
+        if (key === 'ArrowDown' && !(0, user_agent_js_1.isMacOS)() && keyboardEvent.altKey) {
+            return true;
+        }
+    }
+    if (activeElement instanceof HTMLTextAreaElement && (key === 'PageUp' || key === 'PageDown')) {
+        return true;
+    }
+    if (isTextInput) {
+        const textInput = activeElement;
+        const cursorAtStart = textInput.selectionStart === 0 && textInput.selectionEnd === 0;
+        const cursorAtEnd = textInput.selectionStart === textInput.value.length && textInput.selectionEnd === textInput.value.length;
+        if (key === 'ArrowLeft' && !cursorAtStart) {
+            return true;
+        }
+        if (key === 'ArrowRight' && !cursorAtEnd) {
+            return true;
+        }
+        if (textInput instanceof HTMLTextAreaElement) {
+            if (key === 'ArrowUp' && !cursorAtStart) {
+                return true;
+            }
+            if (key === 'ArrowDown' && !cursorAtEnd) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+exports.isActiveDescendantAttribute = 'data-is-active-descendant';
+exports.activeDescendantActivatedDirectly = 'activated-directly';
+exports.activeDescendantActivatedIndirectly = 'activated-indirectly';
+exports.hasActiveDescendantAttribute = 'data-has-active-descendant';
+function focusZone(container, settings) {
+    var _a, _b, _c, _d;
+    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';
+    const focusInStrategy = (_c = settings === null || settings === void 0 ? void 0 : settings.focusInStrategy) !== null && _c !== void 0 ? _c : 'previous';
+    const activeDescendantControl = settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl;
+    const activeDescendantCallback = settings === null || settings === void 0 ? void 0 : settings.onActiveDescendantChanged;
+    let currentFocusedElement;
+    function getFirstFocusableElement() {
+        return focusableElements[0];
+    }
+    function isActiveDescendantInputFocused() {
+        return document.activeElement === activeDescendantControl;
+    }
+    function updateFocusedElement(to, directlyActivated = false) {
+        const from = currentFocusedElement;
+        currentFocusedElement = to;
+        if (activeDescendantControl) {
+            if (to && isActiveDescendantInputFocused()) {
+                setActiveDescendant(from, to, directlyActivated);
+            }
+            else {
+                clearActiveDescendant();
+            }
+            return;
+        }
+        if (from && from !== to && savedTabIndex.has(from)) {
+            from.setAttribute('tabindex', '-1');
+        }
+        to === null || to === void 0 ? void 0 : to.setAttribute('tabindex', '0');
+    }
+    function setActiveDescendant(from, to, directlyActivated = false) {
+        if (!to.id) {
+            to.setAttribute('id', (0, unique_id_js_1.uniqueId)());
+        }
+        if (from && from !== to) {
+            from.removeAttribute(exports.isActiveDescendantAttribute);
+        }
+        if (!activeDescendantControl ||
+            (!directlyActivated && activeDescendantControl.getAttribute('aria-activedescendant') === to.id)) {
+            return;
+        }
+        activeDescendantControl.setAttribute('aria-activedescendant', to.id);
+        container.setAttribute(exports.hasActiveDescendantAttribute, to.id);
+        to.setAttribute(exports.isActiveDescendantAttribute, directlyActivated ? exports.activeDescendantActivatedDirectly : exports.activeDescendantActivatedIndirectly);
+        activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(to, from, directlyActivated);
+    }
+    function clearActiveDescendant(previouslyActiveElement = currentFocusedElement) {
+        if (focusInStrategy === 'first') {
+            currentFocusedElement = undefined;
+        }
+        activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.removeAttribute('aria-activedescendant');
+        container.removeAttribute(exports.hasActiveDescendantAttribute);
+        previouslyActiveElement === null || previouslyActiveElement === void 0 ? void 0 : previouslyActiveElement.removeAttribute(exports.isActiveDescendantAttribute);
+        activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(undefined, previouslyActiveElement, false);
+    }
+    function beginFocusManagement(...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;
+        }
+        const insertIndex = focusableElements.findIndex(e => (e.compareDocumentPosition(filteredElements[0]) & Node.DOCUMENT_POSITION_PRECEDING) > 0);
+        focusableElements.splice(insertIndex === -1 ? focusableElements.length : insertIndex, 0, ...filteredElements);
+        for (const element of filteredElements) {
+            if (!savedTabIndex.has(element)) {
+                savedTabIndex.set(element, element.getAttribute('tabindex'));
+            }
+            element.setAttribute('tabindex', '-1');
+        }
+        if (!currentFocusedElement) {
+            updateFocusedElement(getFirstFocusableElement());
+        }
+    }
+    function endFocusManagement(...elements) {
+        for (const element of elements) {
+            const focusableElementIndex = focusableElements.indexOf(element);
+            if (focusableElementIndex >= 0) {
+                focusableElements.splice(focusableElementIndex, 1);
+            }
+            const savedIndex = savedTabIndex.get(element);
+            if (savedIndex !== undefined) {
+                if (savedIndex === null) {
+                    element.removeAttribute('tabindex');
+                }
+                else {
+                    element.setAttribute('tabindex', savedIndex);
+                }
+                savedTabIndex.delete(element);
+            }
+            if (element === currentFocusedElement) {
+                const nextElementToFocus = getFirstFocusableElement();
+                updateFocusedElement(nextElementToFocus);
+            }
+        }
+    }
+    beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(container));
+    updateFocusedElement(getFirstFocusableElement());
+    const observer = new MutationObserver(mutations => {
+        for (const mutation of mutations) {
+            for (const removedNode of mutation.removedNodes) {
+                if (removedNode instanceof HTMLElement) {
+                    endFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(removedNode));
+                }
+            }
+        }
+        for (const mutation of mutations) {
+            for (const addedNode of mutation.addedNodes) {
+                if (addedNode instanceof HTMLElement) {
+                    beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(addedNode));
+                }
+            }
+        }
+    });
+    observer.observe(container, {
+        subtree: true,
+        childList: true
+    });
+    const controller = new AbortController();
+    const signal = (_d = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _d !== void 0 ? _d : controller.signal;
+    signal.addEventListener('abort', () => {
+        endFocusManagement(...focusableElements);
+    });
+    let elementIndexFocusedByClick = undefined;
+    container.addEventListener('mousedown', event => {
+        if (event.target instanceof HTMLElement && event.target !== document.activeElement) {
+            elementIndexFocusedByClick = focusableElements.indexOf(event.target);
+        }
+    }, { signal });
+    if (activeDescendantControl) {
+        container.addEventListener('focusin', event => {
+            if (event.target instanceof HTMLElement && focusableElements.includes(event.target)) {
+                activeDescendantControl.focus();
+                updateFocusedElement(event.target);
+            }
+        });
+        container.addEventListener('mousemove', ({ target }) => {
+            if (!(target instanceof Node)) {
+                return;
+            }
+            const focusableElement = focusableElements.find(element => element.contains(target));
+            if (focusableElement) {
+                updateFocusedElement(focusableElement);
+            }
+        }, { signal, capture: true });
+        activeDescendantControl.addEventListener('focusin', () => {
+            if (!currentFocusedElement) {
+                updateFocusedElement(getFirstFocusableElement());
+            }
+            else {
+                setActiveDescendant(undefined, currentFocusedElement);
+            }
+        });
+        activeDescendantControl.addEventListener('focusout', () => {
+            clearActiveDescendant();
+        });
+    }
+    else {
+        container.addEventListener('focusin', event => {
+            if (event.target instanceof HTMLElement) {
+                if (elementIndexFocusedByClick !== undefined) {
+                    if (elementIndexFocusedByClick >= 0) {
+                        if (focusableElements[elementIndexFocusedByClick] !== currentFocusedElement) {
+                            updateFocusedElement(focusableElements[elementIndexFocusedByClick]);
+                        }
+                    }
+                    elementIndexFocusedByClick = undefined;
+                }
+                else {
+                    if (focusInStrategy === 'previous') {
+                        updateFocusedElement(event.target);
+                    }
+                    else if (focusInStrategy === 'closest' || focusInStrategy === 'first') {
+                        if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
+                            const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.length - 1 : 0;
+                            const targetElement = focusableElements[targetElementIndex];
+                            targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus();
+                            return;
+                        }
+                        else {
+                            updateFocusedElement(event.target);
+                        }
+                    }
+                    else if (typeof focusInStrategy === 'function') {
+                        if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
+                            const elementToFocus = focusInStrategy(event.relatedTarget);
+                            const requestedFocusElementIndex = elementToFocus ? focusableElements.indexOf(elementToFocus) : -1;
+                            if (requestedFocusElementIndex >= 0 && elementToFocus instanceof HTMLElement) {
+                                elementToFocus.focus();
+                                return;
+                            }
+                            else {
+                                console.warn('Element requested is not a known focusable element.');
+                            }
+                        }
+                        else {
+                            updateFocusedElement(event.target);
+                        }
+                    }
+                }
+            }
+            lastKeyboardFocusDirection = undefined;
+        }, { signal });
+    }
+    const keyboardEventRecipient = activeDescendantControl !== null && activeDescendantControl !== void 0 ? activeDescendantControl : container;
+    let lastKeyboardFocusDirection = undefined;
+    if (focusInStrategy === 'closest') {
+        document.addEventListener('keydown', event => {
+            if (event.key === 'Tab') {
+                lastKeyboardFocusDirection = getDirection(event);
+            }
+        }, { signal, capture: true });
+    }
+    function getCurrentFocusedIndex() {
+        if (!currentFocusedElement) {
+            return 0;
+        }
+        const focusedIndex = focusableElements.indexOf(currentFocusedElement);
+        const fallbackIndex = currentFocusedElement === container ? -1 : 0;
+        return focusedIndex !== -1 ? focusedIndex : fallbackIndex;
+    }
+    keyboardEventRecipient.addEventListener('keydown', event => {
+        var _a;
+        if (event.key in KEY_TO_DIRECTION) {
+            const keyBit = KEY_TO_BIT[event.key];
+            if (!event.defaultPrevented &&
+                (keyBit & bindKeys) > 0 &&
+                !shouldIgnoreFocusHandling(event, document.activeElement)) {
+                const direction = getDirection(event);
+                let nextElementToFocus = undefined;
+                if (settings === null || settings === void 0 ? void 0 : settings.getNextFocusable) {
+                    nextElementToFocus = settings.getNextFocusable(direction, (_a = document.activeElement) !== null && _a !== void 0 ? _a : undefined, event);
+                }
+                if (!nextElementToFocus) {
+                    const lastFocusedIndex = getCurrentFocusedIndex();
+                    let nextFocusedIndex = lastFocusedIndex;
+                    if (direction === 'previous') {
+                        nextFocusedIndex -= 1;
+                    }
+                    else if (direction === 'start') {
+                        nextFocusedIndex = 0;
+                    }
+                    else if (direction === 'next') {
+                        nextFocusedIndex += 1;
+                    }
+                    else {
+                        nextFocusedIndex = focusableElements.length - 1;
+                    }
+                    if (nextFocusedIndex < 0) {
+                        if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
+                            nextFocusedIndex = focusableElements.length - 1;
+                        }
+                        else {
+                            nextFocusedIndex = 0;
+                        }
+                    }
+                    if (nextFocusedIndex >= focusableElements.length) {
+                        if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
+                            nextFocusedIndex = 0;
+                        }
+                        else {
+                            nextFocusedIndex = focusableElements.length - 1;
+                        }
+                    }
+                    if (lastFocusedIndex !== nextFocusedIndex) {
+                        nextElementToFocus = focusableElements[nextFocusedIndex];
+                    }
+                }
+                if (activeDescendantControl) {
+                    updateFocusedElement(nextElementToFocus || currentFocusedElement, true);
+                }
+                else if (nextElementToFocus) {
+                    lastKeyboardFocusDirection = direction;
+                    nextElementToFocus.focus();
+                }
+                if (event.key !== 'Tab' || nextElementToFocus) {
+                    event.preventDefault();
+                }
+            }
+        }
+    }, { signal });
+    return controller;
+}
+exports.focusZone = focusZone;

package/dist/cjs/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./anchored-position.js"), exports);
+__exportStar(require("./focus-trap.js"), exports);
+__exportStar(require("./focus-zone.js"), exports);
+__exportStar(require("./scroll-into-view.js"), exports);

package/dist/cjs/polyfills/event-listener-signal.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.polyfill = void 0;
+let signalSupported = false;
+function noop() { }
+try {
+    const options = Object.create({}, {
+        signal: {
+            get() {
+                signalSupported = true;
+            }
+        }
+    });
+    window.addEventListener('test', noop, options);
+    window.removeEventListener('test', noop, options);
+}
+catch (e) {
+}
+function featureSupported() {
+    return signalSupported;
+}
+function monkeyPatch() {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    const originalAddEventListener = EventTarget.prototype.addEventListener;
+    EventTarget.prototype.addEventListener = function (name, originalCallback, optionsOrCapture) {
+        if (typeof optionsOrCapture === 'object' &&
+            'signal' in optionsOrCapture &&
+            optionsOrCapture.signal instanceof AbortSignal) {
+            originalAddEventListener.call(optionsOrCapture.signal, 'abort', () => {
+                this.removeEventListener(name, originalCallback, optionsOrCapture);
+            });
+        }
+        return originalAddEventListener.call(this, name, originalCallback, optionsOrCapture);
+    };
+}
+function polyfill() {
+    if (!featureSupported()) {
+        monkeyPatch();
+        signalSupported = true;
+    }
+}
+exports.polyfill = polyfill;

package/dist/cjs/scroll-into-view.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollIntoView = void 0;
+function scrollIntoView(child, viewingArea, { direction = 'vertical', startMargin = 0, endMargin = 0, behavior = 'smooth' } = {}) {
+    const startSide = direction === 'vertical' ? 'top' : 'left';
+    const endSide = direction === 'vertical' ? 'bottom' : 'right';
+    const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+    const { [startSide]: childStart, [endSide]: childEnd } = child.getBoundingClientRect();
+    const { [startSide]: viewingAreaStart, [endSide]: viewingAreaEnd } = viewingArea.getBoundingClientRect();
+    const isChildStartAboveViewingArea = childStart < viewingAreaStart + startMargin;
+    const isChildBottomBelowViewingArea = childEnd > viewingAreaEnd - endMargin;
+    if (isChildStartAboveViewingArea) {
+        const scrollHeightToChildStart = childStart - viewingAreaStart + viewingArea[scrollSide];
+        viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildStart - startMargin });
+    }
+    else if (isChildBottomBelowViewingArea) {
+        const scrollHeightToChildBottom = childEnd - viewingAreaEnd + viewingArea[scrollSide];
+        viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildBottom + endMargin });
+    }
+}
+exports.scrollIntoView = scrollIntoView;

package/dist/cjs/utils/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./iterate-focusable-elements.js"), exports);
+__exportStar(require("./unique-id.js"), exports);
+__exportStar(require("./user-agent.js"), exports);

package/dist/{utils → cjs/utils}/iterate-focusable-elements.d.ts

@@ -4,5 +4,6 @@ export interface IterateFocusableElements {
     onlyTabbable?: boolean;
 }
 export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
+export declare function getFocusableChild(container: HTMLElement, lastChild?: boolean): HTMLElement | undefined;
 export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
 export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTabbable = exports.isFocusable = exports.getFocusableChild = exports.iterateFocusableElements = void 0;
+function* iterateFocusableElements(container, options = {}) {
+    var _a, _b;
+    const strict = (_a = options.strict) !== null && _a !== void 0 ? _a : false;
+    const acceptFn = ((_b = options.onlyTabbable) !== null && _b !== void 0 ? _b : false) ? isTabbable : isFocusable;
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: node => node instanceof HTMLElement && acceptFn(node, strict) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+    });
+    let nextNode = null;
+    if (!options.reverse && acceptFn(container, strict)) {
+        yield container;
+    }
+    if (options.reverse) {
+        let lastChild = walker.lastChild();
+        while (lastChild) {
+            nextNode = lastChild;
+            lastChild = walker.lastChild();
+        }
+    }
+    else {
+        nextNode = walker.firstChild();
+    }
+    while (nextNode instanceof HTMLElement) {
+        yield nextNode;
+        nextNode = options.reverse ? walker.previousNode() : walker.nextNode();
+    }
+    if (options.reverse && acceptFn(container, strict)) {
+        yield container;
+    }
+    return undefined;
+}
+exports.iterateFocusableElements = iterateFocusableElements;
+function getFocusableChild(container, lastChild = false) {
+    return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
+}
+exports.getFocusableChild = getFocusableChild;
+function isFocusable(elem, strict = false) {
+    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 sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
+        const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility);
+        const clientRectsInert = elem.getClientRects().length === 0;
+        if (sizeInert || visibilityInert || clientRectsInert) {
+            return false;
+        }
+    }
+    if (elem.getAttribute('tabindex') != null) {
+        return true;
+    }
+    if (elem instanceof HTMLAnchorElement && elem.getAttribute('href') == null) {
+        return false;
+    }
+    return elem.tabIndex !== -1;
+}
+exports.isFocusable = isFocusable;
+function isTabbable(elem, strict = false) {
+    return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
+}
+exports.isTabbable = isTabbable;

package/dist/cjs/utils/unique-id.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uniqueId = void 0;
+let idSeed = 10000;
+function uniqueId() {
+    return `__primer_id_${idSeed++}`;
+}
+exports.uniqueId = uniqueId;

package/dist/cjs/utils/user-agent.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMacOS = void 0;
+let isMac = undefined;
+function isMacOS() {
+    if (isMac === undefined) {
+        isMac = /^mac/i.test(window.navigator.platform);
+    }
+    return isMac;
+}
+exports.isMacOS = isMacOS;

package/dist/esm/anchored-position.d.ts

@@ -0,0 +1,15 @@
+export declare type AnchorAlignment = 'start' | 'center' | 'end';
+export declare type AnchorSide = 'inside-top' | 'inside-bottom' | 'inside-left' | 'inside-right' | 'inside-center' | 'outside-top' | 'outside-bottom' | 'outside-left' | 'outside-right';
+export interface PositionSettings {
+    side: AnchorSide;
+    align: AnchorAlignment;
+    anchorOffset: number;
+    alignmentOffset: number;
+    allowOutOfBounds: boolean;
+}
+export interface AnchorPosition {
+    top: number;
+    left: number;
+    anchorSide: AnchorSide;
+}
+export declare function getAnchoredPosition(floatingElement: Element, anchorElement: Element | DOMRect, settings?: Partial<PositionSettings>): AnchorPosition;

package/dist/esm/focus-trap.d.ts

@@ -0,0 +1 @@
+export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement, abortSignal?: AbortSignal): AbortController | undefined;

package/dist/{focus-trap.js → esm/focus-trap.js}

@@ -1,4 +1,4 @@
-import { isTabbable, iterateFocusableElements } from './utils/iterate-focusable-elements.js';
+import { getFocusableChild, isTabbable } from './utils/iterate-focusable-elements.js';
 import { polyfill as eventListenerSignalPolyfill } from './polyfills/event-listener-signal.js';
 eventListenerSignalPolyfill();
 const suspendedTrapStack = [];
@@ -16,13 +16,28 @@ function followSignal(signal) {
     });
     return controller;
 }
-function getFocusableChild(container, lastChild = false) {
-    return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
-}
 export 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 = 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();
+    };
+    container.prepend(sentinelStart);
+    container.append(sentinelEnd);
     let lastFocusedChild = undefined;
     function ensureTrapZoneHasFocus(focusedElement) {
         if (focusedElement instanceof HTMLElement && document.contains(container)) {
@@ -40,36 +55,14 @@ export function focusTrap(container, initialFocus, abortSignal) {
                     return;
                 }
                 else {
-                    const containerNeedsTemporaryTabIndex = container.getAttribute('tabindex') === null;
-                    if (containerNeedsTemporaryTabIndex) {
-                        container.setAttribute('tabindex', '-1');
-                    }
-                    container.focus();
-                    if (containerNeedsTemporaryTabIndex) {
-                        container.addEventListener('blur', () => container.removeAttribute('tabindex'), { once: true });
-                    }
+                    const firstFocusableChild = getFocusableChild(container);
+                    firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
                     return;
                 }
             }
         }
     }
     const wrappingController = followSignal(signal);
-    container.addEventListener('keydown', event => {
-        if (event.key !== 'Tab' || event.defaultPrevented) {
-            return;
-        }
-        const { target } = event;
-        const firstFocusableChild = getFocusableChild(container);
-        const lastFocusableChild = getFocusableChild(container, true);
-        if (target === firstFocusableChild && event.shiftKey) {
-            event.preventDefault();
-            lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
-        }
-        else if (target === lastFocusableChild && !event.shiftKey) {
-            event.preventDefault();
-            firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
-        }
-    }, { signal: wrappingController.signal });
     if (activeTrap) {
         const suspendedTrap = activeTrap;
         activeTrap.container.setAttribute('data-focus-trap', 'suspended');
@@ -81,6 +74,9 @@ export function focusTrap(container, initialFocus, abortSignal) {
     });
     signal.addEventListener('abort', () => {
         container.removeAttribute('data-focus-trap');
+        const sentinels = container.getElementsByClassName('sentinel');
+        while (sentinels.length > 0)
+            sentinels[0].remove();
         const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
         if (suspendedTrapIndex >= 0) {
             suspendedTrapStack.splice(suspendedTrapIndex, 1);

package/dist/esm/focus-zone.d.ts

@@ -0,0 +1,32 @@
+export declare type Direction = 'previous' | 'next' | 'start' | 'end';
+export declare type FocusMovementKeys = 'ArrowLeft' | 'ArrowDown' | 'ArrowUp' | 'ArrowRight' | 'h' | 'j' | 'k' | 'l' | 'a' | 's' | 'w' | 'd' | 'Tab' | 'Home' | 'End' | 'PageUp' | 'PageDown';
+export declare enum FocusKeys {
+    ArrowHorizontal = 1,
+    ArrowVertical = 2,
+    JK = 4,
+    HL = 8,
+    HomeAndEnd = 16,
+    PageUpDown = 256,
+    WS = 32,
+    AD = 64,
+    Tab = 128,
+    ArrowAll = 3,
+    HJKL = 12,
+    WASD = 96,
+    All = 511
+}
+export interface FocusZoneSettings {
+    focusOutBehavior?: 'stop' | 'wrap';
+    getNextFocusable?: (direction: Direction, from: Element | undefined, event: KeyboardEvent) => HTMLElement | undefined;
+    focusableElementFilter?: (element: HTMLElement) => boolean;
+    bindKeys?: FocusKeys;
+    abortSignal?: AbortSignal;
+    activeDescendantControl?: HTMLElement;
+    onActiveDescendantChanged?: (newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void;
+    focusInStrategy?: 'first' | 'closest' | 'previous' | ((previousFocusedElement: Element) => HTMLElement | undefined);
+}
+export declare const isActiveDescendantAttribute = "data-is-active-descendant";
+export declare const activeDescendantActivatedDirectly = "activated-directly";
+export declare const activeDescendantActivatedIndirectly = "activated-indirectly";
+export declare const hasActiveDescendantAttribute = "data-has-active-descendant";
+export declare function focusZone(container: HTMLElement, settings?: FocusZoneSettings): AbortController;

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export * from './anchored-position.js';
+export * from './focus-trap.js';
+export * from './focus-zone.js';
+export * from './scroll-into-view.js';

package/dist/esm/polyfills/event-listener-signal.d.ts

@@ -0,0 +1,6 @@
+export declare function polyfill(): void;
+declare global {
+    interface AddEventListenerOptions {
+        signal?: AbortSignal;
+    }
+}

package/dist/esm/scroll-into-view.d.ts

@@ -0,0 +1,7 @@
+export interface ScrollIntoViewOptions {
+    direction?: 'horizontal' | 'vertical';
+    startMargin?: number;
+    endMargin?: number;
+    behavior?: ScrollBehavior;
+}
+export declare function scrollIntoView(child: HTMLElement, viewingArea: HTMLElement, { direction, startMargin, endMargin, behavior }?: ScrollIntoViewOptions): void;

package/dist/esm/utils/index.js

@@ -0,0 +1,3 @@
+export * from './iterate-focusable-elements.js';
+export * from './unique-id.js';
+export * from './user-agent.js';

package/dist/esm/utils/iterate-focusable-elements.d.ts

@@ -0,0 +1,9 @@
+export interface IterateFocusableElements {
+    reverse?: boolean;
+    strict?: boolean;
+    onlyTabbable?: boolean;
+}
+export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
+export declare function getFocusableChild(container: HTMLElement, lastChild?: boolean): HTMLElement | undefined;
+export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
+export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;

package/dist/{utils → esm/utils}/iterate-focusable-elements.js

@@ -28,12 +28,16 @@ export function* iterateFocusableElements(container, options = {}) {
     }
     return undefined;
 }
+export function getFocusableChild(container, lastChild = false) {
+    return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
+}
 export function isFocusable(elem, strict = false) {
     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';
-    if (disabledAttrInert || hiddenInert || hiddenInputInert) {
+    const sentinelInert = elem.classList.contains('sentinel');
+    if (disabledAttrInert || hiddenInert || hiddenInputInert || sentinelInert) {
         return false;
     }
     if (strict) {

package/dist/esm/utils/unique-id.d.ts

@@ -0,0 +1 @@
+export declare function uniqueId(): string;

package/dist/esm/utils/user-agent.d.ts

@@ -0,0 +1 @@
+export declare function isMacOS(): boolean;

package/package.json

@@ -1,17 +1,31 @@
 {
   "name": "@primer/behaviors",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Shared behaviors for JavaScript components",
-  "main": "./dist/index.js",
-  "type": "module",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/cjs/index.js",
+      "module": "./dist/esm/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "require": "./dist/cjs/utils/index.js",
+      "module": "./dist/esm/utils/index.js"
+    }
+  },
+  "types": "dist/cjs/index.d.ts",
   "files": [
     "dist",
     "utils"
   ],
   "sideEffects": [
-    "dist/focus-zone.js",
-    "dist/focus-trap.js"
+    "dist/esm/focus-zone.js",
+    "dist/esm/focus-trap.js",
+    "dist/cjs/focus-zone.js",
+    "dist/cjs/focus-trap.js"
   ],
   "scripts": {
     "lint": "eslint src/",
@@ -20,7 +34,9 @@
     "jest": "jest",
     "clean": "rm -rf dist",
     "prebuild": "npm run clean",
-    "build": "tsc",
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
     "size-limit": "npm run build && size-limit",
     "release": "npm run build && changeset publish"
   },
@@ -44,7 +60,7 @@
   "size-limit": [
     {
       "limit": "10kb",
-      "path": "dist/index.js"
+      "path": "dist/esm/index.js"
     }
   ],
   "devDependencies": {

package/utils/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/behaviors/utils",
-  "types": "../dist/utils/index.d.ts",
-  "main": "../dist/utils/index.js",
+  "types": "../dist/esm/utils/index.d.ts",
+  "main": "../dist/esm/utils/index.js",
   "type": "module",
   "sideEffects": false
 }

package/dist/focus-trap.d.ts

@@ -1,2 +0,0 @@
-export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement): AbortController;
-export declare function focusTrap(container: HTMLElement, initialFocus: HTMLElement | undefined, abortSignal: AbortSignal): void;