arrowtab 0.0.4 → 0.1.0

package/README.md

@@ -14,6 +14,12 @@ ArrowTab slightly modifies the behavior of some input elements to enhance keyboa
 
 To revert to the native behavior, press `Shift` + `Arrow Key`.
 
+Arrow keys combined with `Alt`, `Ctrl` or `Meta` / `Cmd` are left to the browser and OS (e.g. word jumps or history navigation).
+
+If there is nothing to navigate to, the arrow key keeps its native behavior, so the page can still scroll. Only fields that would change their value (e.g. number inputs, selects, radio buttons) never react to arrow keys.
+
+Text fields keep the arrow keys as long as the caret can move: left / right leave an input once the caret is at the start / end, up / down leave a textarea or `contenteditable` once the caret is in the first / last line (soft wrapped lines included).
+
 ## Installation
 
 pnpm:
@@ -80,7 +86,10 @@ cleanup()
 You can pass options to the `initArrowTab` function. For example:
 
 ```ts
-initArrowTab({ debug: true })
+initArrowTab({
+  debug: true,
+  autoDetectHistory: true,
+})
 ```
 
 ### debug
@@ -103,6 +112,109 @@ If you click on a focusable element, debug information will be logged to the con
 
 To deactivate the visual debug mode, press `Esc`.
 
+### autoDetectHistory
+
+default: `false`
+
+If `true`, ArrowTab detects dialogs (`role="dialog"`, `role="alertdialog"`, `<dialog>`) and refocuses the element that was focused before the dialog opened, once the dialog closes. Dialogs rendered into portal wrappers and nested dialogs are supported.
+
+ArrowTab only steps in if focus got lost. Dialog libraries that restore focus themselves are left alone.
+
+### strategy
+
+default: `'spatial'`
+
+How the next element is chosen:
+
+- `'spatial'`: Compares the edges of the elements, like Android's focus navigation. Elements in the same row / column win, elements of different sizes and slightly misaligned elements are handled well.
+- `'grid'`: Compares the centers of the elements. Up / down jump to the nearest row and then to the nearest column, left / right stay in the current row.
+- A custom function. It gets the rect of the focused element, all candidates and the direction and returns the candidates sorted by preference:
+
+```ts
+import { initArrowTab, spatial, type Strategy } from 'arrowtab'
+
+const strategy: Strategy = ({ origin, candidates, direction }) =>
+  spatial({
+    origin,
+    direction,
+    candidates: candidates.filter(
+      ({ element }) => !element.matches('.skip-me'),
+    ),
+  })
+
+initArrowTab({ strategy })
+```
+
+### root
+
+default: the whole document
+
+Only navigate inside this element. Arrow keys outside of it are ignored.
+
+```ts
+initArrowTab({ root: document.querySelector('#app') })
+```
+
+Calling `initArrowTab` twice for the same root logs a warning. Call `cleanup()` of the first instance before initializing it again.
+
+## Events
+
+Before focus moves, ArrowTab dispatches a cancelable `arrowtab:navigate` event on the focused element (or the document if nothing is focused). It bubbles and crosses shadow roots. Call `preventDefault()` to stop the navigation:
+
+```ts
+import { navigateEventName } from 'arrowtab'
+
+document.addEventListener(navigateEventName, (event) => {
+  const { from, to, direction } = event.detail
+  if (to.matches('.locked')) event.preventDefault()
+})
+```
+
+## Special Cases
+
+### Going back
+
+Pressing the opposite arrow key returns to the element focus came from, e.g. down from a narrow button to a wide one and up again lands on the same narrow button.
+
+### Hidden elements and scrolling
+
+Elements that are completely hidden by an ancestor with `overflow: hidden` or `overflow: clip` (e.g. inactive carousel slides) are skipped. Elements in scroll containers stay reachable.
+
+Focusing an element scrolls as little as possible. If you have a sticky header, set [`scroll-padding-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top) on the scroll container so focused elements don't end up behind it.
+
+### Shadow DOM
+
+Focusable elements inside open shadow roots are found, so ArrowTab works with web components. `data-arrowtab` attributes on the host apply to its shadow content. `autoDetectHistory` doesn't detect dialogs inside shadow roots.
+
+### Modals and scopes
+
+If focus is inside a dialog (`<dialog>`, `role="dialog"`, `role="alertdialog"` or `aria-modal="true"`), arrow keys keep it inside. Non-modal dialogs can still be left with `Tab`.
+
+If focus is behind an open modal (`aria-modal="true"` or a `<dialog>` opened with `showModal()`), the next arrow key moves it into the modal.
+
+Use `data-arrowtab="scope"` to keep navigation inside any other container, or `data-arrowtab="wrap"` to also jump to the opposite edge at the end.
+
+### ARIA widgets
+
+Composite widgets implement their own arrow key navigation, so ArrowTab leaves the keys to them:
+
+| Role                                             | Keys left to the widget |
+| ------------------------------------------------ | ----------------------- |
+| `grid`, `treegrid`, `radiogroup`                 | all                     |
+| `listbox`, `menu`, `tree`                        | up / down               |
+| `menubar`, `tablist`, `toolbar`                  | left / right            |
+| open `combobox` / popup (`aria-expanded="true"`) | up / down               |
+
+`aria-orientation` overrides the default orientation. If a widget doesn't handle arrow keys itself, add `data-arrowtab="enable"` to it.
+
+### Lost focus
+
+If the focused element is removed or focus is lost otherwise, ArrowTab navigates from the position of the last focused element instead of starting at the top of the page.
+
+### Focusable containers
+
+If a focusable container (e.g. a card with `tabindex="0"`) is focused, down / right move into it.
+
 ## data-arrowtab
 
 You can control the behavior of ArrowTab by adding a `data-arrowtab` attribute to any element. Separate the keywords with a space. For example: `<div data-arrowtab="disable-left disable-right">`
@@ -115,6 +227,22 @@ Sometimes your components are listening to arrow keys themselves. In that case,
 
 If you only want to disable a specific key, then use: `disable-left`, `disable-right`, `disable-up`, `disable-down`.
 
+### scope
+
+Keeps navigation inside this element while focus is inside it. See [Modals and scopes](#modals-and-scopes).
+
+### wrap
+
+Like `scope`, but at the edge focus jumps to the opposite side, preferably in the same row / column. Add it to `<body>` to wrap around the whole page.
+
+### skip
+
+The element (and its children) is skipped by the arrow keys but stays reachable with `Tab`. Useful for e.g. help links next to every field.
+
+### enable
+
+Turns off the [ARIA widget](#aria-widgets) detection for this element and its children.
+
 ## Development
 
 ```sh

package/dist/index.d.ts

@@ -1 +1,5 @@
-export { initArrowTab } from './lib/initArrowTab.js';
+export { initArrowTab, type ArrowTabOptions } from './lib/initArrowTab.js';
+export { grid, spatial, type Candidate, type RankedCandidate, type Strategy, } from './lib/strategies.js';
+export { navigateEventName, type ArrowTabNavigateEvent, } from './lib/navigateEvent.js';
+export type { Direction } from './lib/directions.js';
+export type { Rect } from './lib/geometry.js';

package/dist/index.js

@@ -1,2 +1,4 @@
 export { initArrowTab } from './lib/initArrowTab.js';
+export { grid, spatial, } from './lib/strategies.js';
+export { navigateEventName, } from './lib/navigateEvent.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAwB,MAAM,uBAAuB,CAAA;AAC1E,OAAO,EACL,IAAI,EACJ,OAAO,GAIR,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,iBAAiB,GAElB,MAAM,wBAAwB,CAAA"}

package/dist/lib/caret.d.ts

@@ -0,0 +1,5 @@
+import { type Direction } from './directions.js';
+export declare const canMoveCaret: ({ activeElement, direction, }: {
+    activeElement: HTMLElement;
+    direction: Direction;
+}) => boolean;

package/dist/lib/caret.js

@@ -0,0 +1,136 @@
+import { isVertical } from './directions.js';
+const mirroredStyles = [
+    'boxSizing',
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontVariant',
+    'fontWeight',
+    'fontStretch',
+    'letterSpacing',
+    'wordSpacing',
+    'lineHeight',
+    'textTransform',
+    'textIndent',
+    'tabSize',
+    'wordBreak',
+    'overflowWrap',
+    // e.g. pre for wrap="off"
+    'whiteSpace',
+    'direction',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+];
+/**
+ * Whether the caret is in the first / last visual line of a textarea, including soft wrapped lines.
+ * Renders the text into a hidden copy of the textarea and compares the line positions of markers.
+ */
+const getCaretLine = ({ textarea, start, end, }) => {
+    const style = window.getComputedStyle(textarea);
+    const mirror = document.createElement('div');
+    for (const property of mirroredStyles) {
+        mirror.style[property] = style[property];
+    }
+    Object.assign(mirror.style, {
+        position: 'absolute',
+        top: '0',
+        left: '-9999px',
+        visibility: 'hidden',
+        border: '0',
+        overflow: 'hidden',
+        boxSizing: 'content-box',
+        width: `${textarea.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight)}px`,
+    });
+    const { value } = textarea;
+    const markers = [0, start, end, value.length].map(() => document.createElement('span'));
+    const [first, caretStart, caretEnd, last] = markers;
+    mirror.append(first, value.slice(0, start), caretStart, value.slice(start, end), caretEnd, value.slice(end), last);
+    document.body.append(mirror);
+    const line = {
+        isFirst: caretStart.offsetTop <= first.offsetTop,
+        isLast: caretEnd.offsetTop >= last.offsetTop,
+    };
+    mirror.remove();
+    return line;
+};
+const canMoveCaretInField = ({ field, direction, }) => {
+    const { selectionStart: start, selectionEnd: end, value } = field;
+    // Some input types (e.g. number, email) don't expose the caret position
+    if (start === null || end === null)
+        return false;
+    const hasSelection = start !== end;
+    const isTextarea = field instanceof HTMLTextAreaElement;
+    switch (direction) {
+        case 'left':
+            return hasSelection || start > 0;
+        case 'right':
+            return hasSelection || end < value.length;
+        case 'up':
+            if (!isTextarea)
+                return false;
+            if (start > 0 && value.lastIndexOf('\n', start - 1) !== -1)
+                return true;
+            return !getCaretLine({ textarea: field, start, end }).isFirst;
+        case 'down':
+            if (!isTextarea)
+                return false;
+            if (value.indexOf('\n', end) !== -1)
+                return true;
+            return !getCaretLine({ textarea: field, start, end }).isLast;
+    }
+};
+// Collapsed whitespace (e.g. from the HTML source) isn't visible, so the caret can't move over it
+const getRenderedText = ({ element, text, }) => {
+    const { whiteSpace } = window.getComputedStyle(element);
+    if (['pre', 'pre-wrap', 'break-spaces'].includes(whiteSpace))
+        return text;
+    if (whiteSpace === 'pre-line')
+        return text.replace(/[^\S\n]+/g, '');
+    return text.trim();
+};
+const canMoveCaretInContentEditable = ({ element, direction, }) => {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0)
+        return false;
+    const range = selection.getRangeAt(0);
+    const vertical = isVertical({ direction });
+    if (!range.collapsed && !vertical)
+        return true;
+    // Content between the caret and the start / end of the element
+    const isBackward = direction === 'left' || direction === 'up';
+    const rest = document.createRange();
+    rest.selectNodeContents(element);
+    if (isBackward) {
+        rest.setEnd(range.startContainer, range.startOffset);
+    }
+    else {
+        rest.setStart(range.endContainer, range.endOffset);
+    }
+    const hasText = getRenderedText({ element, text: rest.toString() }).length > 0;
+    if (!vertical && hasText)
+        return true;
+    // Whether the rest of the content has lines besides the caret's line, e.g. empty paragraphs without text.
+    // Up / down leave once it hasn't, left / right also need it for content without text.
+    const caret = range.cloneRange();
+    caret.collapse(isBackward);
+    const caretRect = caret.getBoundingClientRect();
+    // Without layout information only text counts
+    if (caretRect.height === 0)
+        return hasText;
+    const caretCenter = caretRect.top + caretRect.height / 2;
+    return Array.from(rest.getClientRects()).some((rect) => rect.width > 0 && (rect.bottom < caretCenter || rect.top > caretCenter));
+};
+// Whether the arrow key should move the caret inside the active element instead of moving focus
+export const canMoveCaret = ({ activeElement, direction, }) => {
+    if (activeElement instanceof HTMLInputElement ||
+        activeElement instanceof HTMLTextAreaElement) {
+        return canMoveCaretInField({ field: activeElement, direction });
+    }
+    if (activeElement.isContentEditable) {
+        return canMoveCaretInContentEditable({ element: activeElement, direction });
+    }
+    return false;
+};
+//# sourceMappingURL=caret.js.map

package/dist/lib/caret.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"caret.js","sourceRoot":"","sources":["../../src/lib/caret.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,iBAAiB,CAAA;AAE5D,MAAM,cAAc,GAAG;IACrB,WAAW;IACX,YAAY;IACZ,UAAU;IACV,WAAW;IACX,aAAa;IACb,YAAY;IACZ,aAAa;IACb,eAAe;IACf,aAAa;IACb,YAAY;IACZ,eAAe;IACf,YAAY;IACZ,SAAS;IACT,WAAW;IACX,cAAc;IACd,0BAA0B;IAC1B,YAAY;IACZ,WAAW;IACX,YAAY;IACZ,cAAc;IACd,eAAe;IACf,aAAa;CACL,CAAA;AAEV;;;GAGG;AACH,MAAM,YAAY,GAAG,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,GAAG,GAKJ,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;IAC/C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAC5C,KAAK,MAAM,QAAQ,IAAI,cAAc,EAAE,CAAC;QACtC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAA;IAC1C,CAAC;IACD,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;QAC1B,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,SAAS;QACf,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,GAAG;QACX,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,aAAa;QACxB,KAAK,EAAE,GAAG,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI;KACpG,CAAC,CAAA;IAEF,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAA;IAC1B,MAAM,OAAO,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CACrD,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAC/B,CAAA;IACD,MAAM,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,OAK3C,CAAA;IACD,MAAM,CAAC,MAAM,CACX,KAAK,EACL,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,EACrB,UAAU,EACV,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,EACvB,QAAQ,EACR,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,EAChB,IAAI,CACL,CAAA;IACD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAC5B,MAAM,IAAI,GAAG;QACX,OAAO,EAAE,UAAU,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS;QAChD,MAAM,EAAE,QAAQ,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS;KAC7C,CAAA;IACD,MAAM,CAAC,MAAM,EAAE,CAAA;IACf,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,EAC3B,KAAK,EACL,SAAS,GAIV,EAAE,EAAE;IACH,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACjE,wEAAwE;IACxE,IAAI,KAAK,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI;QAAE,OAAO,KAAK,CAAA;IAChD,MAAM,YAAY,GAAG,KAAK,KAAK,GAAG,CAAA;IAClC,MAAM,UAAU,GAAG,KAAK,YAAY,mBAAmB,CAAA;IAEvD,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,MAAM;YACT,OAAO,YAAY,IAAI,KAAK,GAAG,CAAC,CAAA;QAClC,KAAK,OAAO;YACV,OAAO,YAAY,IAAI,GAAG,GAAG,KAAK,CAAC,MAAM,CAAA;QAC3C,KAAK,IAAI;YACP,IAAI,CAAC,UAAU;gBAAE,OAAO,KAAK,CAAA;YAC7B,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;gBAAE,OAAO,IAAI,CAAA;YACvE,OAAO,CAAC,YAAY,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,CAAA;QAC/D,KAAK,MAAM;YACT,IAAI,CAAC,UAAU;gBAAE,OAAO,KAAK,CAAA;YAC7B,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC;gBAAE,OAAO,IAAI,CAAA;YAChD,OAAO,CAAC,YAAY,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,CAAA;IAChE,CAAC;AACH,CAAC,CAAA;AAED,kGAAkG;AAClG,MAAM,eAAe,GAAG,CAAC,EACvB,OAAO,EACP,IAAI,GAIL,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;IACvD,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC;QAAE,OAAO,IAAI,CAAA;IACzE,IAAI,UAAU,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;IACnE,OAAO,IAAI,CAAC,IAAI,EAAE,CAAA;AACpB,CAAC,CAAA;AAED,MAAM,6BAA6B,GAAG,CAAC,EACrC,OAAO,EACP,SAAS,GAIV,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,CAAA;IACvC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,UAAU,KAAK,CAAC;QAAE,OAAO,KAAK,CAAA;IAC1D,MAAM,KAAK,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;IACrC,MAAM,QAAQ,GAAG,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC,CAAA;IAC1C,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAA;IAE9C,+DAA+D;IAC/D,MAAM,UAAU,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,IAAI,CAAA;IAC7D,MAAM,IAAI,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAA;IACnC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAA;IAChC,IAAI,UAAU,EAAE,CAAC;QACf,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,WAAW,CAAC,CAAA;IACtD,CAAC;SAAM,CAAC;QACN,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACpD,CAAC;IACD,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAA;IAC9E,IAAI,CAAC,QAAQ,IAAI,OAAO;QAAE,OAAO,IAAI,CAAA;IAErC,0GAA0G;IAC1G,sFAAsF;IACtF,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,EAAE,CAAA;IAChC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAA;IAC1B,MAAM,SAAS,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAA;IAC/C,8CAA8C;IAC9C,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,OAAO,CAAA;IAC1C,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAA;IACxD,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,IAAI,CAC3C,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,WAAW,IAAI,IAAI,CAAC,GAAG,GAAG,WAAW,CAAC,CAC1E,CAAA;AACH,CAAC,CAAA;AAED,gGAAgG;AAChG,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,aAAa,EACb,SAAS,GAIV,EAAE,EAAE;IACH,IACE,aAAa,YAAY,gBAAgB;QACzC,aAAa,YAAY,mBAAmB,EAC5C,CAAC;QACD,OAAO,mBAAmB,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAA;IACjE,CAAC;IACD,IAAI,aAAa,CAAC,iBAAiB,EAAE,CAAC;QACpC,OAAO,6BAA6B,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAA;IAC7E,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

package/dist/lib/changesValueOnArrowKeys.d.ts

@@ -0,0 +1,3 @@
+export declare const changesValueOnArrowKeys: ({ element }: {
+    element: Element;
+}) => boolean;

package/dist/lib/changesValueOnArrowKeys.js

@@ -0,0 +1,15 @@
+const inputTypesChangingValue = [
+    'number',
+    'range',
+    'radio',
+    'date',
+    'time',
+    'datetime-local',
+    'month',
+    'week',
+];
+// Arrow keys change the value of these fields. ArrowTab prevents that even if there is nothing to navigate to.
+export const changesValueOnArrowKeys = ({ element }) => element instanceof HTMLSelectElement ||
+    (element instanceof HTMLInputElement &&
+        inputTypesChangingValue.includes(element.type));
+//# sourceMappingURL=changesValueOnArrowKeys.js.map

package/dist/lib/changesValueOnArrowKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"changesValueOnArrowKeys.js","sourceRoot":"","sources":["../../src/lib/changesValueOnArrowKeys.ts"],"names":[],"mappings":"AAAA,MAAM,uBAAuB,GAAG;IAC9B,QAAQ;IACR,OAAO;IACP,OAAO;IACP,MAAM;IACN,MAAM;IACN,gBAAgB;IAChB,OAAO;IACP,MAAM;CACP,CAAA;AAED,+GAA+G;AAC/G,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,OAAO,EAAwB,EAAE,EAAE,CAC3E,OAAO,YAAY,iBAAiB;IACpC,CAAC,OAAO,YAAY,gBAAgB;QAClC,uBAAuB,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAA"}

package/dist/lib/debugMode.d.ts

@@ -1,8 +1,8 @@
-export declare const activateDebugMode: ({ focusableElements, }: {
-    focusableElements: {
-        element: Element;
-        withinReach: boolean;
-    }[];
+import type { Rect } from './geometry.js';
+import type { RankedCandidate } from './strategies.js';
+export declare const activateDebugMode: ({ origin, items, }: {
+    origin: Rect | undefined;
+    items: RankedCandidate[];
 }) => void;
 export declare const deactivateDebugMode: () => void;
 export declare const isInDebugMode: () => boolean;

package/dist/lib/debugMode.js

@@ -1,23 +1,32 @@
 let inDebugMode = false;
-export const activateDebugMode = ({ focusableElements, }) => {
+export const activateDebugMode = ({ origin, items, }) => {
     inDebugMode = true;
-    if (document.activeElement) {
+    if (origin) {
         addDebugElementToDom({
-            element: document.activeElement,
-            withinReach: false,
-            content: '',
+            rect: origin,
+            label: '',
             color: 'rgb(33 150 243 / 80%)',
+            details: { origin },
         });
     }
-    let counter = focusableElements.length;
-    let withinReachCounter = focusableElements.filter((focusable) => focusable.withinReach).length;
-    for (const focusable of [...focusableElements].reverse()) {
+    let withinReachCounter = 0;
+    const labeled = items.map((item, index) => {
+        if (item.withinReach)
+            withinReachCounter++;
+        return {
+            item,
+            label: `${index + 1} ${item.withinReach ? `(${withinReachCounter})` : ''}`,
+        };
+    });
+    // Nearest elements are added last, so they are on top if they overlap
+    for (const { item, label } of labeled.reverse()) {
         addDebugElementToDom({
-            ...focusable,
-            content: `<div>${counter--} ${focusable.withinReach ? `(${withinReachCounter--})` : ''}</div>`,
-            color: focusable.withinReach
+            rect: item.rect,
+            label,
+            color: item.withinReach
                 ? 'rgba(76 175 80 / 80%)'
                 : 'rgb(244 67 54 / 80%)',
+            details: { item },
         });
     }
 };
@@ -26,42 +35,29 @@ export const deactivateDebugMode = () => {
         div.remove();
     });
     inDebugMode = false;
-    return;
 };
 export const isInDebugMode = () => inDebugMode;
-const addDebugElementToDom = (focusable) => {
-    if (!(focusable.element instanceof HTMLElement))
-        return;
+const addDebugElementToDom = ({ rect, label, color, details, }) => {
     const div = document.createElement('div');
-    const rect = focusable.element.getBoundingClientRect();
-    const scrollX = document.documentElement.scrollLeft;
-    const scrollY = document.documentElement.scrollTop;
     div.style.position = 'absolute';
-    div.style.top = `${rect.top + scrollY}px`;
-    div.style.left = `${rect.left + scrollX}px`;
-    let width = Math.max(rect.width, 10);
-    let height = Math.max(rect.height, 10);
-    div.style.width = `${width}px`;
-    div.style.height = `${height}px`;
+    div.style.top = `${rect.top}px`;
+    div.style.left = `${rect.left}px`;
+    div.style.width = `${Math.max(rect.right - rect.left, 10)}px`;
+    div.style.height = `${Math.max(rect.bottom - rect.top, 10)}px`;
     div.style.color = 'white';
-    div.style.backgroundColor = focusable.color;
+    div.style.backgroundColor = color;
     div.style.zIndex = '100000';
     div.style.display = 'flex';
     div.style.alignItems = 'center';
     div.style.justifyContent = 'center';
     div.style.cursor = 'pointer';
     div.style.borderRadius = '4px';
-    div.innerHTML = focusable.content;
+    div.textContent = label;
     div.dataset.arrowtab = 'debug';
-    // Move the click event to the focusable element
     div.addEventListener('click', (e) => {
         e.preventDefault();
         e.stopPropagation();
-        console.log({
-            focusable,
-            rect,
-            debugElement: div,
-        });
+        console.log({ ...details, rect, debugElement: div });
     });
     document.body.appendChild(div);
 };

package/dist/lib/debugMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"debugMode.js","sourceRoot":"","sources":["../../src/lib/debugMode.ts"],"names":[],"mappings":"AAAA,IAAI,WAAW,GAAG,KAAK,CAAA;AAEvB,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,iBAAiB,GAGlB,EAAE,EAAE;IACH,WAAW,GAAG,IAAI,CAAA;IAElB,IAAI,QAAQ,CAAC,aAAa,EAAE,CAAC;QAC3B,oBAAoB,CAAC;YACnB,OAAO,EAAE,QAAQ,CAAC,aAAa;YAC/B,WAAW,EAAE,KAAK;YAClB,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,uBAAuB;SAC/B,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,OAAO,GAAG,iBAAiB,CAAC,MAAM,CAAA;IACtC,IAAI,kBAAkB,GAAG,iBAAiB,CAAC,MAAM,CAC/C,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,WAAW,CACrC,CAAC,MAAM,CAAA;IACR,KAAK,MAAM,SAAS,IAAI,CAAC,GAAG,iBAAiB,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;QACzD,oBAAoB,CAAC;YACnB,GAAG,SAAS;YACZ,OAAO,EAAE,QAAQ,OAAO,EAAE,IACxB,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,kBAAkB,EAAE,GAAG,CAAC,CAAC,CAAC,EACxD,QAAQ;YACR,KAAK,EAAE,SAAS,CAAC,WAAW;gBAC1B,CAAC,CAAC,uBAAuB;gBACzB,CAAC,CAAC,sBAAsB;SAC3B,CAAC,CAAA;IACJ,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,QAAQ,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACnE,GAAG,CAAC,MAAM,EAAE,CAAA;IACd,CAAC,CAAC,CAAA;IACF,WAAW,GAAG,KAAK,CAAA;IACnB,OAAM;AACR,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,WAAW,CAAA;AAE9C,MAAM,oBAAoB,GAAG,CAAC,SAK7B,EAAE,EAAE;IACH,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,YAAY,WAAW,CAAC;QAAE,OAAM;IACvD,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IACzC,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;IACtD,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,UAAU,CAAA;IACnD,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAA;IAElD,GAAG,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;IAC/B,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,OAAO,IAAI,CAAA;IACzC,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,OAAO,IAAI,CAAA;IAC3C,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;IACpC,IAAI,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IACtC,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAA;IAC9B,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAA;IAEhC,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAA;IACzB,GAAG,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC,KAAK,CAAA;IAC3C,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAA;IAC3B,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;IAC1B,GAAG,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAA;IAC/B,GAAG,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAA;IACnC,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAA;IAC5B,GAAG,CAAC,KAAK,CAAC,YAAY,GAAG,KAAK,CAAA;IAE9B,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC,OAAO,CAAA;IACjC,GAAG,CAAC,OAAO,CAAC,QAAQ,GAAG,OAAO,CAAA;IAE9B,gDAAgD;IAChD,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;QAClC,CAAC,CAAC,cAAc,EAAE,CAAA;QAClB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,OAAO,CAAC,GAAG,CAAC;YACV,SAAS;YACT,IAAI;YACJ,YAAY,EAAE,GAAG;SAClB,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;AAChC,CAAC,CAAA"}
+{"version":3,"file":"debugMode.js","sourceRoot":"","sources":["../../src/lib/debugMode.ts"],"names":[],"mappings":"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"}

package/dist/lib/directions.d.ts

@@ -0,0 +1,13 @@
+export type Direction = 'up' | 'down' | 'left' | 'right';
+export declare const getDirection: ({ key }: {
+    key: string;
+}) => Direction | undefined;
+export declare const isVertical: ({ direction }: {
+    direction: Direction;
+}) => boolean;
+export declare const isForward: ({ direction }: {
+    direction: Direction;
+}) => boolean;
+export declare const getOpposite: ({ direction }: {
+    direction: Direction;
+}) => Direction;

package/dist/lib/directions.js

@@ -0,0 +1,17 @@
+const directionsByKey = {
+    ArrowUp: 'up',
+    ArrowDown: 'down',
+    ArrowLeft: 'left',
+    ArrowRight: 'right',
+};
+export const getDirection = ({ key }) => directionsByKey[key];
+export const isVertical = ({ direction }) => direction === 'up' || direction === 'down';
+export const isForward = ({ direction }) => direction === 'down' || direction === 'right';
+const opposites = {
+    up: 'down',
+    down: 'up',
+    left: 'right',
+    right: 'left',
+};
+export const getOpposite = ({ direction }) => opposites[direction];
+//# sourceMappingURL=directions.js.map

package/dist/lib/directions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"directions.js","sourceRoot":"","sources":["../../src/lib/directions.ts"],"names":[],"mappings":"AAEA,MAAM,eAAe,GAA8B;IACjD,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,OAAO;CACpB,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA;AAE9E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAA4B,EAAE,EAAE,CACpE,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,MAAM,CAAA;AAE5C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,EAA4B,EAAE,EAAE,CACnE,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,OAAO,CAAA;AAE/C,MAAM,SAAS,GAAiC;IAC9C,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;CACd,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAA4B,EAAE,EAAE,CACrE,SAAS,CAAC,SAAS,CAAC,CAAA"}

package/dist/lib/dom.d.ts

@@ -0,0 +1,16 @@
+export declare const getComposedParent: ({ element }: {
+    element: Element;
+}) => Element | null;
+export declare const closestComposed: ({ element, selector, }: {
+    element: Element;
+    selector: string;
+}) => Element | null;
+export declare const containsComposed: ({ container, element, }: {
+    container: Node;
+    element: Element;
+}) => boolean;
+export declare const getDeepActiveElement: () => Element | null;
+export declare const querySelectorAllDeep: ({ root, selector, }: {
+    root: ParentNode;
+    selector: string;
+}) => Element[];

package/dist/lib/dom.js

@@ -0,0 +1,62 @@
+// Helpers that walk the flat tree (open shadow roots and slots), so ArrowTab works with web components
+// Parent in the flat tree: the slot for slotted elements, the host for elements at the top of a shadow root
+export const getComposedParent = ({ element }) => {
+    if (element.assignedSlot)
+        return element.assignedSlot;
+    if (element.parentElement)
+        return element.parentElement;
+    const parent = element.parentNode;
+    return parent instanceof ShadowRoot ? parent.host : null;
+};
+export const closestComposed = ({ element, selector, }) => {
+    let current = element;
+    while (current) {
+        if (current.matches(selector))
+            return current;
+        current = getComposedParent({ element: current });
+    }
+    return null;
+};
+export const containsComposed = ({ container, element, }) => {
+    let current = element;
+    while (current) {
+        if (current === container)
+            return true;
+        current = getComposedParent({ element: current });
+    }
+    return false;
+};
+// document.activeElement is the shadow host if focus is inside a shadow root
+export const getDeepActiveElement = () => {
+    let active = document.activeElement;
+    while (active?.shadowRoot?.activeElement) {
+        active = active.shadowRoot.activeElement;
+    }
+    return active;
+};
+// Also searches open shadow roots and the elements assigned to their slots
+export const querySelectorAllDeep = ({ root, selector, }) => {
+    const found = new Set();
+    const visit = ({ node }) => {
+        // The node itself can be a host, e.g. the root or a component assigned to a slot
+        if (node instanceof Element && node.shadowRoot) {
+            visit({ node: node.shadowRoot });
+        }
+        for (const element of node.querySelectorAll(selector))
+            found.add(element);
+        for (const slot of node.querySelectorAll('slot')) {
+            for (const assigned of slot.assignedElements({ flatten: true })) {
+                if (assigned.matches(selector))
+                    found.add(assigned);
+                visit({ node: assigned });
+            }
+        }
+        for (const element of node.querySelectorAll('*')) {
+            if (element.shadowRoot)
+                visit({ node: element.shadowRoot });
+        }
+    };
+    visit({ node: root });
+    return [...found];
+};
+//# sourceMappingURL=dom.js.map

package/dist/lib/dom.js.map

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

package/dist/lib/focusHistory.d.ts

@@ -0,0 +1,11 @@
+import type { FocusTracker } from './focusTracker.js';
+/**
+ * Refocuses the element that was focused before a dialog opened, once the dialog closes.
+ * Only kicks in if focus got lost, so dialogs restoring focus themselves are left alone.
+ */
+export declare const startAutoDetectHistory: ({ active, focusTracker, }: {
+    active: boolean;
+    focusTracker: FocusTracker;
+}) => {
+    cleanup: () => void;
+};