material 1.0.3 → 3.0.0-next.0

package/dist/core/dom/layer.d.ts

@@ -0,0 +1,117 @@
+/**
+ * How an element is promoted to the browser's top layer:
+ * - `popover-auto`: `popover="auto"`, which the browser light-dismisses (a
+ *   click outside, Escape, another auto popover opening)
+ * - `popover-manual`: `popover="manual"`, closed only by its owner
+ * - `modal`: a `<dialog>` shown with `showModal()`, which makes the rest of
+ *   the page inert and closes on Escape
+ */
+export type TopLayerKind = "popover-auto" | "popover-manual" | "modal";
+export interface TopLayerOptions {
+    kind: TopLayerKind;
+}
+/**
+ * Whether the browser can show an element of this kind in the top layer:
+ * `showPopover` for the popovers, `HTMLDialogElement.prototype.showModal` for
+ * a modal.
+ *
+ * @param kind - The kind of top-layer element
+ * @returns True where the browser supports it
+ */
+export declare const supportsTopLayer: (kind: TopLayerKind) => boolean;
+/**
+ * Shows an element in the top layer, above everything else on the page
+ * whatever its z-index and whatever clips or transforms its ancestors. The
+ * element stays where it is in the DOM, so it keeps the styles of its tree,
+ * a shadow root's included.
+ *
+ * The element must be connected, and for `modal` be a `<dialog>`. Showing an
+ * element already shown does nothing.
+ *
+ * Where the browser has no support for the kind, nothing changes and false is
+ * returned: the caller keeps its own positioning and stacking, which is what
+ * it did before the top layer.
+ *
+ * @param element - The element to show
+ * @param options - The kind of top-layer element
+ * @returns True when the element is in the top layer
+ */
+export declare const showInTopLayer: (element: HTMLElement, { kind }: TopLayerOptions) => boolean;
+/**
+ * Takes an element out of the top layer. Does nothing when it is not shown.
+ * This close is not reported to onTopLayerClose.
+ *
+ * @param element - The element shown with showInTopLayer
+ */
+export declare const hideFromTopLayer: (element: HTMLElement) => void;
+/**
+ * Reports the closes the browser makes on its own: a light dismiss or Escape
+ * for `popover="auto"` (a `toggle` event to `closed`), Escape or a form for a
+ * modal dialog (its `close` event, which follows an uncanceled `cancel`).
+ * Closes made with hideFromTopLayer are not reported, nor is a close the
+ * element was shown again after.
+ *
+ * @param element - The element shown with showInTopLayer
+ * @param callback - Called once for each close
+ * @returns A function that stops the reports
+ */
+export declare const onTopLayerClose: (element: HTMLElement, callback: () => void) => (() => void);
+/**
+ * A modal outside the top layer (FLO-324): makes everything but `keep` inert,
+ * as showModal() does for a top-layer dialog. The siblings of `keep` and of
+ * each of its ancestors, up to the body, crossing shadow roots, get `inert`;
+ * elements already inert are left alone. Returns the undo, which removes
+ * `inert` from exactly the elements it set it on.
+ */
+export declare const inertOutside: (keep: Element) => (() => void);
+/** What eventsFrom returns: see there. */
+export interface EventsFrom {
+    /** Whether the event's dispatch began after the call */
+    after: (event: Event) => boolean;
+    /** Releases the marker. Harmless when called again. */
+    stop: () => void;
+}
+/**
+ * Tells the events that came after this call from the one that was already
+ * on its way: "the event that opened an overlay never dismisses it".
+ *
+ * An overlay adds its dismiss listeners in `open()`, and the click or the key
+ * press that called `open()` then reaches them, on its way up. It is not
+ * told apart by time (event times are whole milliseconds in some browsers,
+ * and equal times cannot be ordered) nor by the task (a real key press can
+ * be delivered before any timer has run), but by the dispatch itself: every
+ * event passes the window's capture phase first, where one listener numbers
+ * it. An event numbered after the call came after it; the one in flight has
+ * an earlier number, or none.
+ *
+ * The browser's own `cancel` for a modal `<dialog>` is not covered: it is a
+ * new event, created after `open()` (see `ModalEscape.opening`).
+ *
+ * @param element - An element of the overlay, which says which window it is in
+ * @returns `after(event)`, and `stop()` for when the overlay closes
+ */
+export declare const eventsFrom: (element: HTMLElement) => EventsFrom;
+/** A modal's place in the Escape stack: see onModalEscape. */
+export interface ModalEscape {
+    /**
+     * True for the rest of the task the modal opened in, for the one event the
+     * marker cannot number: the `cancel` the browser sends the topmost modal
+     * `<dialog>` for the key press that opened it, when the page stopped that
+     * key press before it reached the window.
+     */
+    opening: boolean;
+    /** Takes the modal off the stack. Harmless when called again. */
+    stop: () => void;
+}
+/**
+ * Escape for a modal, handled as a key press. One bubble listener on the
+ * window serves every open modal: after the listeners on the document, so
+ * whatever is open inside the modal keeps a key it has used, and wherever
+ * focus is, the body included. Only the topmost modal is told, and never for
+ * the key press that opened it (see eventsFrom).
+ *
+ * @param element - The modal's element, which says which window it is in
+ * @param escape - Called for an Escape that is the modal's: it closes, or refuses
+ * @returns The modal's entry: `opening`, and `stop()` for when it closes
+ */
+export declare const onModalEscape: (element: HTMLElement, escape: () => void) => ModalEscape;

package/dist/core/dom/layer.js

@@ -0,0 +1,158 @@
+const ownHides = new WeakSet();
+export const supportsTopLayer = (kind) => kind === "modal"
+    ? typeof HTMLDialogElement === "function" &&
+        typeof HTMLDialogElement.prototype.showModal === "function"
+    : typeof HTMLElement === "function" &&
+        typeof HTMLElement.prototype.showPopover === "function";
+const isShown = (element) => element.open === true ||
+    (typeof element.showPopover === "function" && element.matches(":popover-open"));
+export const showInTopLayer = (element, { kind }) => {
+    const layered = element;
+    ownHides.delete(element);
+    if (kind === "modal") {
+        if (typeof layered.showModal !== "function")
+            return false;
+        if (!layered.open)
+            layered.showModal();
+        return true;
+    }
+    if (typeof element.showPopover !== "function")
+        return false;
+    element.setAttribute("popover", kind === "popover-auto" ? "auto" : "manual");
+    if (!isShown(element))
+        element.showPopover();
+    return true;
+};
+export const hideFromTopLayer = (element) => {
+    const layered = element;
+    if (!isShown(layered))
+        return;
+    ownHides.add(element);
+    if (layered.open === true && typeof layered.close === "function")
+        layered.close();
+    else
+        element.hidePopover();
+};
+export const onTopLayerClose = (element, callback) => {
+    const listener = (event) => {
+        if ((event.type === "toggle") !== element.hasAttribute("popover"))
+            return;
+        if (event.newState === "open" || isShown(element))
+            return;
+        if (ownHides.delete(element))
+            return;
+        callback();
+    };
+    element.addEventListener("toggle", listener);
+    element.addEventListener("close", listener);
+    return () => {
+        element.removeEventListener("toggle", listener);
+        element.removeEventListener("close", listener);
+    };
+};
+export const inertOutside = (keep) => {
+    const made = [];
+    let node = keep;
+    for (;;) {
+        const parent = node.parentNode;
+        if (!parent)
+            break;
+        for (const sibling of Array.from(parent.children)) {
+            if (sibling === node || sibling.hasAttribute("inert") || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(sibling.tagName))
+                continue;
+            sibling.setAttribute("inert", "");
+            made.push(sibling);
+        }
+        if (parent === document.body || parent === document.documentElement)
+            break;
+        const next = parent instanceof ShadowRoot ? parent.host : parent.parentElement ? parent : null;
+        if (!next)
+            break;
+        node = next;
+    }
+    return () => {
+        for (const element of made)
+            element.removeAttribute("inert");
+        made.length = 0;
+    };
+};
+const MARKED = ["keydown", "click"];
+const order = new WeakMap();
+const marking = new WeakMap();
+let clock = 0;
+const mark = (event) => {
+    order.set(event, ++clock);
+};
+export const eventsFrom = (element) => {
+    const view = element.ownerDocument.defaultView;
+    const users = marking.get(view) ?? 0;
+    if (!users)
+        MARKED.forEach((type) => view.addEventListener(type, mark, true));
+    marking.set(view, users + 1);
+    const since = clock;
+    let live = true;
+    return {
+        after: (event) => (order.get(event) ?? 0) > since,
+        stop: () => {
+            if (!live)
+                return;
+            live = false;
+            const left = marking.get(view) - 1;
+            marking.set(view, left);
+            if (!left)
+                MARKED.forEach((type) => view.removeEventListener(type, mark, true));
+        },
+    };
+};
+const escapes = [];
+const onEscapeKey = (event) => {
+    if (event.key !== "Escape" || event.defaultPrevented || event.isComposing)
+        return;
+    let at = escapes.length;
+    while (at-- && escapes[at].view !== event.currentTarget)
+        ;
+    const top = escapes[at];
+    if (!top)
+        return;
+    if (!top.element.isConnected) {
+        top.stop();
+        onEscapeKey(event);
+        return;
+    }
+    for (const node of event.composedPath()) {
+        if (node.localName === "dialog" && node.hasAttribute?.("open")) {
+            if (node !== top.element)
+                return;
+            break;
+        }
+    }
+    event.preventDefault();
+    if (top.from.after(event))
+        top.escape();
+};
+export const onModalEscape = (element, escape) => {
+    const view = element.ownerDocument.defaultView;
+    const from = eventsFrom(element);
+    const entry = {
+        element,
+        view,
+        escape,
+        from,
+        opening: true,
+        stop: () => {
+            const at = escapes.indexOf(entry);
+            if (at < 0)
+                return;
+            escapes.splice(at, 1);
+            from.stop();
+            if (!escapes.some((other) => other.view === view))
+                view.removeEventListener("keydown", onEscapeKey);
+        },
+    };
+    escapes.push(entry);
+    view.addEventListener("keydown", onEscapeKey);
+    setTimeout(() => {
+        entry.opening = false;
+    }, 0);
+    return entry;
+};

package/dist/core/dom/roving.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Whether the arrow keys, Home and End belong to an element: a text input, a
+ * textarea or editable content, where they move the caret.
+ */
+export declare const isTextEditable: (element: EventTarget | null | undefined) => boolean;
+export interface RovingOptions {
+    /** The composite: it receives the key and focus listeners. */
+    container: HTMLElement;
+    /**
+     * The focus targets in order. A target is an element that takes focus itself:
+     * a control, or the host of a web component that delegates focus to one.
+     */
+    targets: () => HTMLElement[];
+    /** Whether Up and Down move focus instead of Left and Right. */
+    vertical?: () => boolean;
+}
+export interface Roving {
+    /** Puts the one tab stop back on the current target, or the first enabled one. */
+    sync(): void;
+    /** Removes the listeners. */
+    destroy(): void;
+}
+/**
+ * A roving tab index over a composite's focus targets (the WAI-ARIA toolbar
+ * pattern): one tab stop, kept on the target focused last; the arrow keys along
+ * the layout, Left and Right following the reading direction; Home and End to
+ * the ends. Disabled targets are skipped and the ends do not wrap. Inside a
+ * text input the keys stay with the caret.
+ */
+export declare const createRoving: ({ container, targets, vertical }: RovingOptions) => Roving;

package/dist/core/dom/roving.js

@@ -0,0 +1,75 @@
+const NON_TEXT_INPUTS = new Set(["button", "checkbox", "color", "file", "image", "radio", "range", "reset", "submit"]);
+export const isTextEditable = (element) => {
+    const node = element;
+    if (!node || typeof node.localName !== "string")
+        return false;
+    if (node.isContentEditable)
+        return true;
+    if (node.localName === "textarea")
+        return true;
+    return node.localName === "input" && !NON_TEXT_INPUTS.has((node.type || "text").toLowerCase());
+};
+const isDisabled = (element) => element.matches(":disabled") || element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
+export const createRoving = ({ container, targets, vertical = () => false }) => {
+    let current = null;
+    let chosen = false;
+    const enabled = () => targets().filter((target) => !isDisabled(target));
+    const owner = (list, node) => list.find((target) => target === node || (node instanceof Node && target.contains(node))) ?? null;
+    const sync = () => {
+        const list = enabled();
+        if (!chosen || !current || !list.includes(current))
+            current = list[0] ?? null;
+        for (const target of targets())
+            target.tabIndex = target === current ? 0 : -1;
+    };
+    const onKeydown = (event) => {
+        if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        if (isTextEditable(event.composedPath()[0]))
+            return;
+        const list = enabled();
+        const from = list.indexOf(owner(list, event.target));
+        if (from === -1)
+            return;
+        const rtl = container.matches(":dir(rtl)");
+        const isVertical = vertical();
+        const back = isVertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+        const forward = isVertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+        let next;
+        if (event.key === back)
+            next = Math.max(0, from - 1);
+        else if (event.key === forward)
+            next = Math.min(list.length - 1, from + 1);
+        else if (event.key === "Home")
+            next = 0;
+        else if (event.key === "End")
+            next = list.length - 1;
+        else
+            return;
+        event.preventDefault();
+        current = list[next];
+        chosen = true;
+        sync();
+        current.focus();
+    };
+    const onFocusin = (event) => {
+        const target = owner(enabled(), event.target);
+        if (target) {
+            chosen = true;
+            if (target !== current) {
+                current = target;
+                sync();
+            }
+        }
+    };
+    container.addEventListener("keydown", onKeydown);
+    container.addEventListener("focusin", onFocusin);
+    sync();
+    return {
+        sync,
+        destroy() {
+            container.removeEventListener("keydown", onKeydown);
+            container.removeEventListener("focusin", onFocusin);
+        },
+    };
+};

package/dist/core/dom/utils.d.ts

@@ -0,0 +1,33 @@
+export { normalizeClasses } from "./classes.js";
+/**
+ * Creates a DOM element with attributes
+ *
+ * @param tag - Element tag name
+ * @param attributes - Element attributes
+ * @returns Created element
+ */
+export declare const createElement: <T extends HTMLElement>(tag: string, attributes?: Record<string, unknown>) => T;
+/**
+ * Sets inline styles on an element
+ *
+ * @param element - Target element
+ * @param styles - Styles to set
+ * @returns Modified element
+ */
+export declare const setStyles: <T extends HTMLElement>(element: T, styles: Partial<CSSStyleDeclaration>) => T;
+/**
+ * Checks if an element matches a selector
+ *
+ * @param element - Element to check
+ * @param selector - CSS selector
+ * @returns Whether element matches selector
+ */
+export declare const matches: (element: Element, selector: string) => boolean;
+/**
+ * Finds the closest ancestor matching a selector
+ *
+ * @param element - Starting element
+ * @param selector - CSS selector
+ * @returns Matching ancestor or null
+ */
+export declare const closest: <T extends HTMLElement>(element: Element, selector: string) => T | null;

package/dist/core/dom/utils.js

@@ -0,0 +1,49 @@
+import { omitsAttribute } from "../utils/attributes.js";
+import { safeUrl, URL_ATTRIBUTES } from "../utils/url.js";
+export { normalizeClasses } from "./classes.js";
+export const createElement = (tag, attributes = {}) => {
+    const element = document.createElement(tag);
+    Object.entries(attributes).forEach(([key, value]) => {
+        if (key === "className") {
+            element.className = value;
+        }
+        else if (key === "style" && typeof value === "object") {
+            Object.assign(element.style, value);
+        }
+        else if (key === "data" && value && typeof value === "object") {
+            Object.entries(value).forEach(([dataKey, dataValue]) => {
+                element.dataset[dataKey] = String(dataValue);
+            });
+        }
+        else if (key === "children" && Array.isArray(value)) {
+            value.forEach((child) => {
+                if (child instanceof Node) {
+                    element.appendChild(child);
+                }
+                else if (child != null) {
+                    element.appendChild(document.createTextNode(String(child)));
+                }
+            });
+        }
+        else if (key.startsWith("on") && typeof value === "function") {
+            const eventName = key.slice(2).toLowerCase();
+            element.addEventListener(eventName, value);
+        }
+        else if (key.startsWith("on")) {
+        }
+        else if (value !== null && value !== undefined && !omitsAttribute(key, value)) {
+            element.setAttribute(key, URL_ATTRIBUTES.has(key.toLowerCase()) ? safeUrl(String(value)) : String(value));
+        }
+    });
+    return element;
+};
+export const setStyles = (element, styles) => {
+    Object.assign(element.style, styles);
+    return element;
+};
+export const matches = (element, selector) => {
+    return element.matches(selector);
+};
+export const closest = (element, selector) => {
+    return element.closest(selector);
+};

package/dist/core/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @module core
+ * @description Core utilities and building blocks for the component system
+ *
+ * This module provides the foundational elements used to build components
+ * in a functional, composable way.
+ *
+ * @packageDocumentation
+ */
+export * from "./compose/index.js";
+export * from "./dom/index.js";
+export { schemeToTokens, THEME_ROLES } from "./theme/index.js";
+export type { ThemeRole, SchemeRoles, SchemeToTokensOptions, ThemeTokens } from "./theme/index.js";
+export { createEmitter } from "./state/emitter.js";
+export type { Emitter, EventCallback } from "./state/emitter.js";
+export { createComponentConfig, createElementConfig } from "./config/component.js";
+export { createStore, loggingMiddleware, deriveFiltered } from "./state/store.js";
+export type { Store, StoreOptions, Selector, Computation, Updater, } from "./state/store.js";
+export { createEventManager as createStateEventManager } from "./state/events.js";
+export type { EventManagerState } from "./state/events.js";
+export * from "./canvas/index.js";
+export * from "./canvas/index.js";
+export { PREFIX, classNames, getComponentClass, getModifierClass, getElementClass, } from "./config.js";
+export { setComponentDefaults, getComponentDefaults, setGlobalDefaults, clearGlobalDefaults, type ComponentConfigMap, } from "./config/global.js";
+export { when, classNames as joinClasses, isObject, byString, hasTouchSupport, normalizeEvent, throttle, debounce, once, getInheritedBackground, } from "./utils/index.js";
+export type { ThemeConfig, ComponentConfig, ThemedComponentConfig, VariantComponentConfig, StateComponentConfig, } from "./config.js";
+export type { NormalizedEvent } from "./utils/mobile.js";

package/dist/core/index.js

@@ -0,0 +1,12 @@
+export * from "./compose/index.js";
+export * from "./dom/index.js";
+export { schemeToTokens, THEME_ROLES } from "./theme/index.js";
+export { createEmitter } from "./state/emitter.js";
+export { createComponentConfig, createElementConfig } from "./config/component.js";
+export { createStore, loggingMiddleware, deriveFiltered } from "./state/store.js";
+export { createEventManager as createStateEventManager } from "./state/events.js";
+export * from "./canvas/index.js";
+export * from "./canvas/index.js";
+export { PREFIX, classNames, getComponentClass, getModifierClass, getElementClass, } from "./config.js";
+export { setComponentDefaults, getComponentDefaults, setGlobalDefaults, clearGlobalDefaults, } from "./config/global.js";
+export { when, classNames as joinClasses, isObject, byString, hasTouchSupport, normalizeEvent, throttle, debounce, once, getInheritedBackground, } from "./utils/index.js";

package/dist/core/navigation/destinations.d.ts

@@ -0,0 +1,34 @@
+/** One destination, as both components take it. */
+export interface DestinationConfig {
+    id: string;
+    label: string;
+    /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
+    icon: string;
+    /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. Shown while this destination is active. */
+    activeIcon?: string;
+    href?: string;
+    /** A count, a short text, or `true` for the dot */
+    badge?: string | number | boolean;
+    badgeLabel?: string;
+    active?: boolean;
+    disabled?: boolean;
+}
+/** The component's class for a part: `__item`, `__badge`, … */
+export type PartClass = (part: string) => string;
+/** A copy of the items with unique ids, labels and icons, and one active at most. */
+export declare const copyDestinations: <T extends DestinationConfig>(items: T[], component: string) => T[];
+/** Shows, updates or removes the item's badge, and names the destination with it. */
+export declare const updateBadge: (item: DestinationConfig, element: HTMLElement, cls: PartClass) => void;
+/** The destination's element: a link or a button, its indicator, icon, label and badge. */
+export declare const createDestination: (item: DestinationConfig, cls: PartClass) => HTMLElement;
+/** Marks the active destination, and shows its active icon. */
+export declare const updateSelection: (items: DestinationConfig[], nodes: Map<string, HTMLElement>, cls: PartClass) => void;
+/**
+ * Moves focus between the enabled destinations: `next` and `previous` are the
+ * arrow keys of the component's axis, Home and End go to the ends. Returns
+ * whether it moved.
+ */
+export declare const moveDestinationFocus: (event: KeyboardEvent, nodes: Map<string, HTMLElement>, container: HTMLElement, keys: {
+    next: string;
+    previous: string;
+}) => boolean;

package/dist/core/navigation/destinations.js

@@ -0,0 +1,107 @@
+import { safeUrl } from "../utils/url.js";
+import { setHTML } from "../dom/html.js";
+import { activeElementOf } from "../dom/focus.js";
+export const copyDestinations = (items, component) => {
+    const ids = new Set();
+    let selected = false;
+    return items.map((item) => {
+        if (!item.id || !item.label || !item.icon || ids.has(item.id))
+            throw new Error(`${component} destinations require unique IDs, labels, and icons`);
+        ids.add(item.id);
+        const active = !!item.active && !item.disabled && !selected;
+        selected || (selected = active);
+        return { ...item, active };
+    });
+};
+export const updateBadge = (item, element, cls) => {
+    let badge = element.querySelector(`.${cls("__badge")}`);
+    const visible = item.badge !== undefined && item.badge !== false && item.badge !== "";
+    if (!visible) {
+        badge?.remove();
+        element.classList.remove(cls("__item--badged"));
+        element.setAttribute("aria-label", item.label);
+        return;
+    }
+    if (!badge) {
+        badge = document.createElement("span");
+        badge.className = cls("__badge");
+        badge.setAttribute("aria-hidden", "true");
+        element.querySelector(`.${cls("__content")}`).append(badge);
+    }
+    badge.classList.toggle(cls("__badge--dot"), item.badge === true);
+    badge.textContent = item.badge === true ? "" : String(item.badge);
+    element.classList.toggle(cls("__item--badged"), item.badge !== true);
+    element.setAttribute("aria-label", `${item.label}, ${item.badgeLabel || (item.badge === true ? "New activity" : String(item.badge))}`);
+};
+export const createDestination = (item, cls) => {
+    const element = document.createElement(item.href ? "a" : "button");
+    if (item.href) {
+        if (!item.disabled)
+            element.setAttribute("href", safeUrl(item.href));
+        else {
+            element.setAttribute("role", "link");
+            element.tabIndex = -1;
+        }
+    }
+    else {
+        element.setAttribute("type", "button");
+        if (item.disabled)
+            element.setAttribute("disabled", "");
+    }
+    if (item.disabled)
+        element.setAttribute("aria-disabled", "true");
+    element.className = cls("__item");
+    element.dataset.id = item.id;
+    const indicator = document.createElement("span");
+    indicator.className = cls("__indicator");
+    indicator.setAttribute("aria-hidden", "true");
+    const icon = document.createElement("span");
+    icon.className = cls("__icon");
+    icon.setAttribute("aria-hidden", "true");
+    const label = document.createElement("span");
+    label.className = cls("__label");
+    label.textContent = item.label;
+    const content = document.createElement("span");
+    content.className = cls("__content");
+    content.append(indicator, icon, label);
+    element.append(content);
+    updateBadge(item, element, cls);
+    return element;
+};
+export const updateSelection = (items, nodes, cls) => {
+    for (const item of items) {
+        const element = nodes.get(item.id);
+        element.classList.toggle(cls("__item--active"), !!item.active);
+        if (item.active)
+            element.setAttribute("aria-current", "page");
+        else
+            element.removeAttribute("aria-current");
+        const icon = element.querySelector(`.${cls("__icon")}`);
+        setHTML(icon, item.active && item.activeIcon ? item.activeIcon : item.icon);
+    }
+};
+export const moveDestinationFocus = (event, nodes, container, keys) => {
+    const enabled = [...nodes.values()].filter((element) => !element.hasAttribute("aria-disabled"));
+    const index = enabled.indexOf(activeElementOf(container));
+    if (index < 0 || event.altKey || event.ctrlKey || event.metaKey)
+        return false;
+    let next;
+    switch (event.key) {
+        case keys.next:
+            next = (index + 1) % enabled.length;
+            break;
+        case keys.previous:
+            next = (index + enabled.length - 1) % enabled.length;
+            break;
+        case "Home":
+            next = 0;
+            break;
+        case "End":
+            next = enabled.length - 1;
+            break;
+        default: return false;
+    }
+    event.preventDefault();
+    enabled[next].focus();
+    return true;
+};

package/dist/core/navigation/ripple.d.ts

@@ -0,0 +1,2 @@
+/** A CSS-animated state layer with no document listeners, timers, or animation frames. */
+export declare function mountRailRipple(root: HTMLElement, className: (part: string) => string): () => void;