unpoly-rails 3.9.5 → 3.10.0

data/assets/unpoly/unpoly.es6.js

@@ -5,7 +5,7 @@
 /***/ (() => {
 
 window.up = {
-    version: '3.9.5'
+    version: '3.10.0'
 };
 
 
@@ -202,6 +202,9 @@ up.util = (function () {
     function isElement(object) {
         return object instanceof Element;
     }
+    function isTextNode(object) {
+        return object instanceof Text;
+    }
     function isRegExp(object) {
         return object instanceof RegExp;
     }
@@ -211,9 +214,9 @@ up.util = (function () {
     function isJQuery(object) {
         return up.browser.canJQuery() && object instanceof jQuery;
     }
-    function isElementish(object) {
+    function isElementLike(object) {
         var _a;
-        return !!(object && (object.addEventListener || ((_a = object[0]) === null || _a === void 0 ? void 0 : _a.addEventListener)));
+        return !!(object && (object.addEventListener || (isJQuery(object) && ((_a = object[0]) === null || _a === void 0 ? void 0 : _a.addEventListener))));
     }
     function isPromise(object) {
         return isObject(object) && isFunction(object.then);
@@ -241,6 +244,9 @@ up.util = (function () {
     function isArguments(value) {
         return Object.prototype.toString.call(value) === '[object Arguments]';
     }
+    function isAdjacentPosition(value) {
+        return /^(before|after)/.test(value);
+    }
     function wrapList(value) {
         if (isList(value)) {
             return value;
@@ -298,10 +304,9 @@ up.util = (function () {
         }
     }
     function parseArgIntoOptions(args, argKey) {
-        let options = extractOptions(args);
-        if (isDefined(args[0])) {
-            options = copy(options);
-            options[argKey] = args[0];
+        let [positionalArg, options] = parseArgs(args, 'val', 'options');
+        if (isDefined(positionalArg)) {
+            options[argKey] = positionalArg;
         }
         return options;
     }
@@ -469,7 +474,9 @@ up.util = (function () {
         return value;
     }
     function renameKey(object, oldKey, newKey) {
-        return object[newKey] = pluckKey(object, oldKey);
+        if (oldKey in object) {
+            object[newKey] = pluckKey(object, oldKey);
+        }
     }
     function extractLastArg(args, tester) {
         if (tester(last(args))) {
@@ -555,26 +562,35 @@ up.util = (function () {
     function isEqualList(a, b) {
         return (a.length === b.length) && every(a, (elem, index) => isEqual(elem, b[index]));
     }
-    const PARSE_TOKEN_PATTERNS = {
-        'space/or': /\s+(?:or\s+)?/,
-        'or': /\s+or\s+/,
-        'comma': /\s*,\s*/
-    };
-    function parseTokens(value, options = {}) {
-        if (isString(value)) {
-            value = value.trim();
-            if (options.json && /^\[.*]$/.test(value)) {
-                return JSON.parse(value);
-            }
-            else {
-                let separator = options.separator || 'space/or';
-                let pattern = PARSE_TOKEN_PATTERNS[separator];
-                return value.split(pattern);
-            }
+    function getSimpleTokens(value, { json = false, separator = /[,\s]/ } = {}) {
+        if (!isString(value)) {
+            return wrapList(value);
+        }
+        else if (json && /^\[.*]$/.test(value)) {
+            return parseRelaxedJSON(value);
         }
         else {
+            return splitSimpleTokenString(value, separator);
+        }
+    }
+    function splitSimpleTokenString(value, separator) {
+        var _a, _b;
+        let parts = ((_b = (_a = up.migrate).splitAtOr) === null || _b === void 0 ? void 0 : _b.call(_a, value)) || value.split(separator);
+        return parts.map((s) => s.trim()).filter(identity);
+    }
+    function getComplexTokens(value) {
+        if (!isString(value)) {
             return wrapList(value);
         }
+        else {
+            let { maskedTokens, restore } = complexTokenOutlines(value);
+            return maskedTokens.map((token) => restore(token));
+        }
+    }
+    function complexTokenOutlines(string) {
+        let { masked, restore } = expressionOutline(string);
+        let maskedTokens = splitSimpleTokenString(masked, ',');
+        return { maskedTokens, restore };
     }
     function wrapValue(constructor, ...args) {
         return (args[0] instanceof constructor) ? args[0] : new constructor(...args);
@@ -586,18 +602,13 @@ up.util = (function () {
     function reverse(list) {
         return copy(list).reverse();
     }
-    function replaceValue(value, matchValue, replacementValue) {
-        if (value === matchValue) {
-            return replacementValue;
-        }
-        else {
-            return value;
-        }
-    }
-    function renameKeys(object, renameKeyFn) {
+    function withRenamedKeys(object, renameKeyFn) {
         const renamed = {};
         for (let key in object) {
-            renamed[renameKeyFn(key)] = object[key];
+            let transformed = renameKeyFn(key);
+            if (isGiven(transformed)) {
+                renamed[transformed] = object[key];
+            }
         }
         return renamed;
     }
@@ -628,6 +639,9 @@ up.util = (function () {
             });
         }
     }
+    function delegatePromise(object, promiseProp) {
+        return defineDelegates(object, ['then', 'catch', 'finally'], function () { return this[promiseProp]; });
+    }
     function stringifyArg(arg, placeholder = '%o') {
         let string;
         const maxLength = 200;
@@ -738,6 +752,122 @@ up.util = (function () {
         Object.assign(variant, changes);
         return variant;
     }
+    function parseArgs(args, ...specs) {
+        let results = [];
+        while (specs.length) {
+            let lastSpec = specs.pop();
+            if (lastSpec === 'options') {
+                results.unshift(extractOptions(args));
+            }
+            else if (lastSpec === 'callback') {
+                results.unshift(extractCallback(args));
+            }
+            else if (lastSpec === 'val') {
+                results.unshift(args.pop());
+            }
+            else if (isFunction(lastSpec)) {
+                let value = lastSpec(last(args)) ? args.pop() : undefined;
+                results.unshift(value);
+            }
+        }
+        return results;
+    }
+    function scanFunctions(...values) {
+        return values.flat().filter(isFunction);
+    }
+    function cleaner() {
+        let fns = [];
+        let track = function (values, transform) {
+            values = scanFunctions(...values).map(transform);
+            fns.push(...scanFunctions(...values));
+        };
+        let api = function (...values) {
+            track(values, identity);
+        };
+        api.guard = function (...values) {
+            track(values, up.error.guardFn);
+        };
+        api.clean = function (...args) {
+            let { length } = fns;
+            for (let i = length - 1; i >= 0; i--)
+                fns[i](...args);
+            fns = [];
+        };
+        return api;
+    }
+    function maskPattern(str, patterns, { keepDelimiters = false } = {}) {
+        let maskCount = 0;
+        let maskPattern = /§(\d+)/g;
+        let matches = [];
+        let replaceLayers = 0;
+        let replace = (replacePattern) => {
+            let didReplace = false;
+            str = str.replaceAll(replacePattern, function (match) {
+                didReplace = true;
+                let glyph = '§' + (maskCount++);
+                let mask;
+                let masked;
+                if (keepDelimiters) {
+                    let startDelimiter = match[0];
+                    let endDelimiter = match.slice(-1);
+                    masked = match.slice(1, -1);
+                    mask = startDelimiter + glyph + endDelimiter;
+                }
+                else {
+                    masked = match;
+                    mask = glyph;
+                }
+                matches.push(masked);
+                return mask;
+            });
+            if (didReplace)
+                replaceLayers++;
+        };
+        [maskPattern, ...patterns].forEach(replace);
+        let restore = (s, transform = identity) => {
+            for (let i = 0; i < replaceLayers; i++) {
+                s = s.replace(maskPattern, (match, placeholderIndex) => transform(matches[placeholderIndex]));
+            }
+            return s;
+        };
+        return { masked: str, restore };
+    }
+    const QUOTED_STRING_PATTERN = /'(?:\\\\|\\'|[^'])*'|"(?:\\\\|\\"|[^"])*"/g;
+    const NESTED_GROUP_PATTERN = /{(?:[^{}]|{[^{}]*})*}|\((?:[^\(\)]|\([^\(\)]*\))*\)|\[(?:[^\[\]]|\[[^\[\]]*\])*\]/g;
+    function expressionOutline(str) {
+        return maskPattern(str, [QUOTED_STRING_PATTERN, NESTED_GROUP_PATTERN], { keepDelimiters: true });
+    }
+    function ensureDoubleQuotes(str) {
+        if (str[0] === '"')
+            return str;
+        str = str.slice(1, -1);
+        let transformed = str.replace(/(\\\\)|(\\')|(\\")|(")/g, function (_match, escapedBackslash, escapedSingleQuote, _doubleQuote) {
+            return escapedBackslash
+                || (escapedSingleQuote && "'")
+                || '\\"';
+        });
+        return '"' + transformed + '"';
+    }
+    function parseString(value) {
+        return JSON.parse(ensureDoubleQuotes(value));
+    }
+    function parseRelaxedJSON(str) {
+        let { masked, restore } = maskPattern(str, [QUOTED_STRING_PATTERN]);
+        masked = masked.replace(/([a-z_$][\w$]*:)/gi, (unquotedProperty) => ('"' + unquotedProperty.slice(0, -1) + '":'));
+        masked = masked.replace(/,\s*([}\]])/g, '$1');
+        masked = restore(masked, ensureDoubleQuotes);
+        return JSON.parse(masked);
+    }
+    function parseScalarJSONPairs(str) {
+        let { maskedTokens, restore } = complexTokenOutlines(str);
+        return maskedTokens.map((maskedToken) => {
+            let [_match, string, json] = maskedToken.match(/([^{]+)({[^}]*})?/);
+            return [
+                restore(string.trim()),
+                json && parseRelaxedJSON(restore(json))
+            ];
+        });
+    }
     return {
         parseURL,
         normalizeURL,
@@ -781,14 +911,16 @@ up.util = (function () {
         isBoolean,
         isNumber,
         isElement,
+        isTextNode,
         isJQuery,
-        isElementish,
+        isElementLike,
         isPromise,
         isOptions,
         isArray,
         isFormData,
         isList,
         isRegExp,
+        isAdjacentPosition,
         timer: scheduleTimer,
         contains,
         containsAll,
@@ -819,21 +951,30 @@ up.util = (function () {
         isCrossOrigin,
         task: queueTask,
         isEqual,
-        parseTokens,
+        getSimpleTokens,
+        getComplexTokens,
         wrapList,
         wrapValue,
         uid,
         upperCaseFirst,
         lowerCaseFirst,
         delegate: defineDelegates,
+        delegatePromise,
         reverse,
         camelToKebabCase,
-        replaceValue,
         sprintf,
-        renameKeys,
+        withRenamedKeys,
         memoizeMethod,
         safeStringifyJSON,
         variant,
+        cleaner,
+        scanFunctions,
+        args: parseArgs,
+        parseRelaxedJSON,
+        parseScalarJSONPairs,
+        maskPattern,
+        expressionOutline,
+        parseString,
     };
 })();
 
@@ -865,17 +1006,12 @@ up.error = (function () {
             throw value;
         }
     }
-    function report(error) {
-        console.error('Uncaught %o', error);
-        let event = new ErrorEvent('error', { error, message: 'Uncaught ' + error });
-        window.dispatchEvent(event);
-    }
-    function guard(fn) {
+    function guard(fn, ...args) {
         try {
-            return fn();
+            return fn(...args);
         }
         catch (error) {
-            report(error);
+            reportError(error);
         }
     }
     function guardFn(fn) {
@@ -907,7 +1043,6 @@ up.migrate = {
 /***/ (() => {
 
 up.browser = (function () {
-    const u = up.util;
     function submitForm(form) {
         form.submit();
     }
@@ -917,7 +1052,6 @@ up.browser = (function () {
     function canJQuery() {
         return !!window.jQuery;
     }
-    const canHasSelector = u.memoize(() => CSS.supports('selector(:has(*))'));
     function popCookie(name) {
         var _a;
         let value = (_a = document.cookie.match(new RegExp(name + "=(\\w+)"))) === null || _a === void 0 ? void 0 : _a[1];
@@ -939,7 +1073,6 @@ up.browser = (function () {
         canJQuery,
         assertConfirmed,
         popCookie,
-        canHasSelector,
     };
 })();
 
@@ -952,18 +1085,23 @@ __webpack_require__(8);
 up.element = (function () {
     const u = up.util;
     function first(...args) {
-        const selector = args.pop();
-        const root = args[0] || document;
+        let [root = document, selector] = u.args(args, 'val', 'val');
         return root.querySelector(selector);
     }
     function subtree(root, selector) {
         const results = [];
-        if (root.matches(selector)) {
+        if (elementLikeMatches(root, selector)) {
             results.push(root);
         }
         results.push(...root.querySelectorAll(selector));
         return results;
     }
+    function subtreeFirst(root, selector) {
+        return elementLikeMatches(root, selector) ? root : root.querySelector(selector);
+    }
+    function elementLikeMatches(elementLike, selector) {
+        return u.isElement(elementLike) && elementLike.matches(selector);
+    }
     function contains(root, selectorOrElement) {
         const element = getOne(selectorOrElement);
         return Node.prototype.contains.call(root, element);
@@ -1005,24 +1143,38 @@ up.element = (function () {
         }
     }
     function hide(element) {
-        element.setAttribute('hidden', '');
+        setVisible(element, false);
     }
     function show(element) {
-        element.removeAttribute('hidden');
-        if (element.style.display === 'none') {
-            element.style.display = '';
-        }
+        setVisible(element, true);
     }
-    function toggle(element, newVisible) {
-        if (newVisible == null) {
-            newVisible = !isVisible(element);
-        }
-        (newVisible ? show : hide)(element);
+    function showTemp(element) {
+        return setVisibleTemp(element, true);
+    }
+    function hideTemp(element) {
+        return setVisibleTemp(element, false);
     }
-    function toggleAttr(element, attr, value, newPresent) {
-        if (newPresent == null) {
-            newPresent = !element.hasAttribute(attr);
+    function setVisibleTemp(element, newVisible) {
+        if (newVisible === isVisible(element))
+            return u.noop;
+        setVisible(element, newVisible);
+        return () => setVisible(element, !newVisible);
+    }
+    function setVisible(element, newVisible) {
+        if (newVisible) {
+            element.removeAttribute('hidden');
+            if (element.style.display === 'none') {
+                element.style.display = '';
+            }
+        }
+        else {
+            element.setAttribute('hidden', '');
         }
+    }
+    function toggle(element, newVisible = !isVisible(element)) {
+        setVisible(element, newVisible);
+    }
+    function setAttrPresence(element, attr, value, newPresent) {
         if (newPresent) {
             return element.setAttribute(attr, value);
         }
@@ -1041,11 +1193,9 @@ up.element = (function () {
             }
         }
     }
-    function setTemporaryAttrs(element, attrs) {
-        const oldAttrs = {};
-        for (let key of Object.keys(attrs)) {
-            oldAttrs[key] = element.getAttribute(key);
-        }
+    function setAttrsTemp(element, attrs) {
+        let keys = Object.keys(attrs);
+        let oldAttrs = pickAttrs(element, keys);
         setAttrs(element, attrs);
         return () => setAttrs(element, oldAttrs);
     }
@@ -1054,8 +1204,8 @@ up.element = (function () {
         const selector = "meta" + attrSelector('name', name);
         return (_a = first(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute('content');
     }
-    function insertBefore(existingElement, newElement) {
-        existingElement.insertAdjacentElement('beforebegin', newElement);
+    function insertBefore(existingNode, newNode) {
+        existingNode.parentNode.insertBefore(newNode, existingNode);
     }
     function createFromSelector(selector, attrs = {}) {
         let { includePath } = parseSelector(selector);
@@ -1063,7 +1213,7 @@ up.element = (function () {
         let depthElement;
         let previousElement;
         for (let includeSegment of includePath) {
-            let { tagName, id, classNames, attributes } = includeSegment;
+            let { tagName } = includeSegment;
             if (!tagName || tagName === '*') {
                 tagName = 'div';
             }
@@ -1071,25 +1221,14 @@ up.element = (function () {
             if (!rootElement) {
                 rootElement = depthElement;
             }
-            if (id) {
-                depthElement.id = id;
-            }
-            for (let className of classNames) {
-                depthElement.classList.add(className);
-            }
-            for (let attributeName in attributes) {
-                let attributeValue = attributes[attributeName];
-                depthElement.setAttribute(attributeName, attributeValue || '');
-            }
+            makeVariation(depthElement, includeSegment);
             previousElement === null || previousElement === void 0 ? void 0 : previousElement.appendChild(depthElement);
             previousElement = depthElement;
         }
         for (let key in attrs) {
             let value = attrs[key];
             if (key === 'class') {
-                for (let klass of u.wrapList(value)) {
-                    rootElement.classList.add(klass);
-                }
+                addClasses(rootElement, u.wrapList(value));
             }
             else if (key === 'style') {
                 setInlineStyle(rootElement, value);
@@ -1098,7 +1237,12 @@ up.element = (function () {
                 rootElement.textContent = value;
             }
             else if (key === 'content') {
-                rootElement.innerHTML = value;
+                if (u.isString(value)) {
+                    rootElement.innerHTML = value;
+                }
+                else {
+                    rootElement.append(...u.wrapList(value));
+                }
             }
             else {
                 rootElement.setAttribute(key, value);
@@ -1106,14 +1250,24 @@ up.element = (function () {
         }
         return rootElement;
     }
-    function parseSelector(selector) {
+    function makeVariation(element, { id, classNames, attributes }) {
+        if (id) {
+            element.id = id;
+        }
+        for (let [name, value] of Object.entries(attributes)) {
+            element.setAttribute(name, value);
+        }
+        addClasses(element, classNames);
+    }
+    function parseSelector(rawSelector) {
         let excludeRaw;
-        const includeRaw = selector.replace(/:not\([^)]+\)/, function (match) {
-            excludeRaw = match;
+        const { masked: selectorOutline, restore: restoreSelectorLiterals, } = u.expressionOutline(rawSelector);
+        const includeWithoutAttrs = selectorOutline.replace(/:not\([^)]*\)/, function (match) {
+            excludeRaw = restoreSelectorLiterals(match);
             return '';
         });
-        const [includeSelectorWithoutAttrValues, attrValues] = removeAttrSelectorValues(includeRaw);
-        const includeSegments = includeSelectorWithoutAttrValues.split(/[ >]+/);
+        let includeRaw = restoreSelectorLiterals(includeWithoutAttrs);
+        const includeSegments = includeWithoutAttrs.split(/[ >]+/);
         let includePath = includeSegments.map(function (depthSelector) {
             let parsed = {
                 tagName: null,
@@ -1133,14 +1287,15 @@ up.element = (function () {
                 parsed.classNames.push(className);
                 return '';
             });
-            if (attrValues.length) {
-                depthSelector = replaceAttrSelectors(depthSelector, function ({ name }) {
-                    parsed.attributes[name] = attrValues.shift();
-                    return '';
-                });
-            }
+            depthSelector = depthSelector.replace(/\[[^\]]*]/g, function (attr) {
+                attr = restoreSelectorLiterals(attr);
+                let [_raw, name, _operator, quote, value] = attr.match(/\[([\w-]+)(?:([~|^$*]?=)(["'])?([^\3\]]*?)\3)?]/);
+                quote || (quote = '"');
+                parsed.attributes[name] = value ? u.parseString(quote + value + quote) : '';
+                return '';
+            });
             if (depthSelector) {
-                up.fail('Cannot parse selector: ' + selector);
+                up.fail('Cannot parse selector: ' + rawSelector);
             }
             return parsed;
         });
@@ -1150,33 +1305,8 @@ up.element = (function () {
             excludeRaw,
         };
     }
-    const ATTR_SELECTOR_PATTERN = /\[([\w-]+)(?:([~|^$*]?=)(["'])?([^\3\]]*?)\3)?]/g;
-    function replaceAttrSelectors(string, replacement) {
-        return string.replace(ATTR_SELECTOR_PATTERN, function (_match, name, operator, quote, value) {
-            if (value) {
-                value = value.replace(/\\([\\"'])/, '$1');
-            }
-            return replacement({ name, operator, quote, value });
-        });
-    }
-    function removeAttrSelectorValues(selector) {
-        let values = [];
-        selector = replaceAttrSelectors(selector, function ({ name, value }) {
-            values.push(value);
-            return `[${name}]`;
-        });
-        return [selector, values];
-    }
-    function affix(parent, ...args) {
-        let position, selector;
-        const attributes = u.extractOptions(args);
-        if (args.length === 2) {
-            [position, selector] = args;
-        }
-        else {
-            position = 'beforeend';
-            selector = args[0];
-        }
+    function affix(...args) {
+        let [parent, position = 'beforeend', selector, attributes] = u.args(args, 'val', u.isAdjacentPosition, 'val', 'options');
         const element = createFromSelector(selector, attributes);
         parent.insertAdjacentElement(position, element);
         return element;
@@ -1215,14 +1345,22 @@ up.element = (function () {
         scriptish.replaceWith(clone);
     }
     function createFromHTML(html) {
+        return extractSingular(createNodesFromHTML(html));
+    }
+    function extractSingular(nodes) {
+        if (nodes.length === 1 && u.isElementLike(nodes[0])) {
+            return nodes[0];
+        }
+        else {
+            up.fail('Expected a single element, but got %d elements', nodes.length);
+        }
+    }
+    function createNodesFromHTML(html) {
+        html = html.trim();
         const range = document.createRange();
         range.setStart(document.body, 0);
-        const fragment = range.createContextualFragment(html.trim());
-        let elements = fragment.childNodes;
-        if (elements.length !== 1) {
-            throw new Error('HTML must have a single root element');
-        }
-        return elements[0];
+        const fragment = range.createContextualFragment(html);
+        return fragment.childNodes;
     }
     function getRoot() {
         return document.documentElement;
@@ -1231,7 +1369,7 @@ up.element = (function () {
         element.offsetHeight;
     }
     function concludeCSSTransition(element) {
-        const undo = setTemporaryStyle(element, { transition: 'none' });
+        const undo = setStyleTemp(element, { transition: 'none' });
         paint(element);
         return undo;
     }
@@ -1264,19 +1402,28 @@ up.element = (function () {
     }
     function unwrap(wrapper) {
         preservingFocus(function () {
-            const parent = wrapper.parentNode;
-            const wrappedNodes = u.toArray(wrapper.childNodes);
-            u.each(wrappedNodes, wrappedNode => parent.insertBefore(wrappedNode, wrapper));
-            parent.removeChild(wrapper);
+            let childNodes = [...wrapper.childNodes];
+            for (let child of childNodes)
+                insertBefore(wrapper, child);
+            wrapper.remove();
         });
     }
-    function wrapChildren(element) {
-        let childNode;
+    function wrapNodes(nodeOrNodes) {
         const wrapper = document.createElement('up-wrapper');
-        while ((childNode = element.firstChild)) {
-            wrapper.appendChild(childNode);
+        wrapper.append(...u.wrapList(nodeOrNodes));
+        return wrapper;
+    }
+    function wrapIfRequired(nodes) {
+        if (nodes.length === 1 && u.isElement(nodes[0])) {
+            return nodes[0];
+        }
+        else {
+            return wrapNodes(nodes);
         }
-        element.appendChild(wrapper);
+    }
+    function wrapChildren(element) {
+        const wrapper = wrapNodes(element.childNodes);
+        element.append(wrapper);
         return wrapper;
     }
     function preservingFocus(fn) {
@@ -1290,77 +1437,91 @@ up.element = (function () {
             }
         }
     }
+    function parseAttr(element, attribute, ...parsers) {
+        var _a;
+        if (!((_a = element.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(element, attribute)))
+            return undefined;
+        let rawValue = element.getAttribute(attribute);
+        for (let parser of parsers) {
+            let parserResult = parser(rawValue, attribute, element);
+            if (u.isDefined(parserResult))
+                return parserResult;
+        }
+    }
     function stringAttr(element, attribute) {
-        let value = element.getAttribute(attribute);
-        return u.replaceValue(value, null, undefined);
+        return parseAttr(element, attribute, tryParseString);
     }
-    function booleanAttr(element, attribute, pass) {
-        if (!element.hasAttribute(attribute))
-            return;
-        const value = stringAttr(element, attribute);
+    let tryParseString = u.identity;
+    function booleanAttr(element, attribute) {
+        return parseAttr(element, attribute, tryParseBoolean);
+    }
+    function tryParseBoolean(value, attribute) {
         switch (value) {
             case 'false': {
                 return false;
             }
             case 'true':
             case '':
-            case attribute: {
-                return true;
-            }
-            default: {
-                if (pass) {
-                    return value;
-                }
-                else {
+            case attribute:
+                {
                     return true;
                 }
-            }
         }
     }
-    function booleanOrStringAttr(element, attribute, trueValue = true) {
-        let value = booleanAttr(element, attribute, true);
-        return value === true ? trueValue : value;
+    function booleanOrStringAttr(element, attribute) {
+        return parseAttr(element, attribute, tryParseBoolean, tryParseString);
+    }
+    function booleanOrNumberAttr(element, attribute) {
+        return parseAttr(element, attribute, tryParseBoolean, tryParseNumber);
     }
     function numberAttr(element, attribute) {
-        let value = element.getAttribute(attribute);
-        if (value) {
-            value = value.replace(/_/g, '');
-            if (value.match(/^-?[\d.]+$/)) {
-                return parseFloat(value);
-            }
+        return parseAttr(element, attribute, tryParseNumber);
+    }
+    function tryParseNumber(value) {
+        value = value.replaceAll('_', '');
+        if (value.match(/^-?[\d.]+$/)) {
+            return parseFloat(value);
         }
     }
     function jsonAttr(element, attribute) {
-        var _a, _b;
-        let json = (_b = (_a = element.getAttribute) === null || _a === void 0 ? void 0 : _a.call(element, attribute)) === null || _b === void 0 ? void 0 : _b.trim();
-        if (json) {
-            return JSON.parse(json);
-        }
-    }
-    function callbackAttr(link, attr, { exposedKeys = [], mainKey = 'event' } = {}) {
-        let code = link.getAttribute(attr);
-        if (code) {
-            const callback = up.NonceableCallback.fromString(code).toFunction(mainKey, ...exposedKeys);
-            return function (event) {
-                const exposedValues = Object.values(u.pick(event, exposedKeys));
-                return callback.call(link, event, ...exposedValues);
-            };
+        return parseAttr(element, attribute, tryParseJSON);
+    }
+    function tryParseJSON(value) {
+        if (value === null || value === void 0 ? void 0 : value.trim()) {
+            return u.parseRelaxedJSON(value);
         }
     }
-    function closestAttr(element, attr, parseFn = stringAttr) {
+    function callbackAttr(link, attr, callbackOptions) {
+        return parseAttr(link, attr, (value) => tryParseCallback(value, link, callbackOptions));
+    }
+    function tryParseCallback(code, link, { exposedKeys = [], mainKey = 'event' } = {}) {
+        const callback = up.NonceableCallback.fromString(code).toFunction(mainKey, ...exposedKeys);
+        return function (event) {
+            const exposedValues = Object.values(u.pick(event, exposedKeys));
+            return callback.call(link, event, ...exposedValues);
+        };
+    }
+    function closestAttr(element, attr, readAttrFn = stringAttr) {
         let match = element.closest('[' + attr + ']');
         if (match) {
-            return parseFn(match, attr);
+            return readAttrFn(match, attr);
         }
     }
-    function setTemporaryStyle(element, newStyles) {
-        const oldStyles = inlineStyle(element, Object.keys(newStyles));
-        setInlineStyle(element, newStyles);
-        return () => setInlineStyle(element, oldStyles);
+    function addClasses(element, classes) {
+        for (let klass of classes)
+            element.classList.add(klass);
     }
-    function addTemporaryClass(element, klass) {
-        element.classList.add(klass);
-        return () => element.classList.remove(klass);
+    function addClassTemp(element, klass) {
+        return setClassStateTemp(element, klass, true);
+    }
+    function removeClassTemp(element, klass) {
+        return setClassStateTemp(element, klass, false);
+    }
+    function setClassStateTemp(element, klass, targetState) {
+        if (element.classList.contains(klass) === targetState)
+            return u.noop;
+        element.classList.toggle(klass, targetState);
+        return () => element.classList.toggle(klass, !targetState);
     }
     function computedStyle(element, props) {
         const style = window.getComputedStyle(element);
@@ -1400,16 +1561,24 @@ up.element = (function () {
             }
         }
     }
+    function setStyleTemp(element, newStyles) {
+        const oldStyles = inlineStyle(element, Object.keys(newStyles));
+        setInlineStyle(element, newStyles);
+        return () => setInlineStyle(element, oldStyles);
+    }
     function isVisible(element) {
         return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
     }
     function isUpPrefixed(string) {
         return /^up-/.test(string);
     }
-    function upAttrs(element) {
-        let attrNames = u.filter(element.getAttributeNames(), isUpPrefixed);
+    function pickAttrs(element, attrNames) {
         return u.mapObject(attrNames, (name) => [name, element.getAttribute(name)]);
     }
+    function upAttrs(element) {
+        let attrNames = element.getAttributeNames().filter(isUpPrefixed);
+        return pickAttrs(element, attrNames);
+    }
     function upClasses(element) {
         return u.filter(element.classList.values(), isUpPrefixed);
     }
@@ -1436,8 +1605,29 @@ up.element = (function () {
             selector += `:not(${excludes.join()})`;
         return selector;
     }
+    function matchSelectorMap(selectorMap, element) {
+        let matches = [];
+        if (selectorMap) {
+            for (let [selector, value] of Object.entries(selectorMap)) {
+                if (u.isDefined(value) && element.matches(selector)) {
+                    matches.push(value);
+                }
+            }
+        }
+        return matches;
+    }
+    function documentPosition(element) {
+        let nextSibling = element.nextElementSibling;
+        if (nextSibling) {
+            return [nextSibling, 'beforebegin'];
+        }
+        else {
+            return [element.parentElement, 'beforeend'];
+        }
+    }
     return {
         subtree,
+        subtreeFirst,
         contains,
         closestAttr,
         ancestor,
@@ -1446,12 +1636,14 @@ up.element = (function () {
         list: getList,
         toggle,
         hide,
+        hideTemp,
         show,
+        showTemp,
         metaContent,
         insertBefore,
         createFromSelector,
         setAttrs,
-        setTemporaryAttrs,
+        setAttrsTemp,
         affix,
         idSelector,
         classSelector,
@@ -1460,7 +1652,9 @@ up.element = (function () {
         tagName: elementTagName,
         createBrokenDocumentFromHTML,
         fixParserDamage,
+        createNodesFromHTML,
         createFromHTML,
+        extractSingular,
         get root() { return getRoot(); },
         paint,
         concludeCSSTransition,
@@ -1470,13 +1664,15 @@ up.element = (function () {
         setMissingAttr,
         unwrap,
         wrapChildren,
+        wrapIfRequired,
         attr: stringAttr,
         booleanAttr,
         numberAttr,
         jsonAttr,
         callbackAttr,
         booleanOrStringAttr,
-        setTemporaryStyle,
+        booleanOrNumberAttr,
+        setStyleTemp,
         style: computedStyle,
         styleNumber: computedStyleNumber,
         inlineStyle,
@@ -1484,14 +1680,19 @@ up.element = (function () {
         isVisible,
         upAttrs,
         upClasses,
-        toggleAttr,
-        addTemporaryClass,
+        setAttrPresence,
+        addClasses,
+        addClassTemp,
+        removeClassTemp,
         cleanJQuery,
         parseSelector,
         isEmpty,
         crossOriginSelector,
         isIntersectingWindow,
         unionSelector,
+        matchSelectorMap,
+        elementLikeMatches,
+        documentPosition,
     };
 })();
 
@@ -1685,6 +1886,9 @@ up.OptionsParser = class OptionsParser {
     booleanOrString(key, keyOptions) {
         this.parse(e.booleanOrStringAttr, key, keyOptions);
     }
+    booleanOrNumber(key, keyOptions) {
+        this.parse(e.booleanOrNumberAttr, key, keyOptions);
+    }
     json(key, keyOptions) {
         this.parse(e.jsonAttr, key, keyOptions);
     }
@@ -1805,16 +2009,17 @@ up.Rect = class Rect extends up.Record {
 /***/ (() => {
 
 const e = up.element;
+const u = up.util;
 const SHIFT_CLASS = 'up-scrollbar-away';
 up.BodyShifter = class BodyShifter {
     constructor() {
         this._anchoredElements = new Set();
         this._stack = 0;
-        this._cleaners = [];
+        this._cleaner = u.cleaner();
     }
     lowerStack() {
         if (--this._stack === 0)
-            this._unshiftNow();
+            this._cleaner.clean();
     }
     raiseStack() {
         if (++this._stack === 1)
@@ -1830,7 +2035,7 @@ up.BodyShifter = class BodyShifter {
     }
     _shiftNow() {
         this._rootScrollbarWidth = up.viewport.rootScrollbarWidth();
-        this._cleaners.push(e.setTemporaryStyle(e.root, {
+        this._cleaner(e.setStyleTemp(e.root, {
             '--up-scrollbar-width': this._rootScrollbarWidth + 'px'
         }));
         this._shiftElement(document.body, 'padding-right');
@@ -1842,13 +2047,7 @@ up.BodyShifter = class BodyShifter {
         if (!this._isShifted())
             return;
         let originalValue = e.style(element, styleProp);
-        this._cleaners.push(e.setTemporaryStyle(element, { ['--up-original-' + styleProp]: originalValue }), e.addTemporaryClass(element, SHIFT_CLASS));
-    }
-    _unshiftNow() {
-        let cleaner;
-        while (cleaner = this._cleaners.pop()) {
-            cleaner();
-        }
+        this._cleaner(e.setStyleTemp(element, { ['--up-original-' + styleProp]: originalValue }), e.addClassTemp(element, SHIFT_CLASS));
     }
 };
 
@@ -1865,10 +2064,6 @@ up.Change = class Change {
     execute() {
         throw new up.NotImplemented();
     }
-    onFinished(renderResult) {
-        var _a, _b;
-        return (_b = (_a = this.options).onFinished) === null || _b === void 0 ? void 0 : _b.call(_a, renderResult);
-    }
     improveHistoryValue(existingValue, newValue) {
         if ((existingValue === false) || u.isString(existingValue)) {
             return existingValue;
@@ -1899,30 +2094,30 @@ up.Change.Addition = class Addition extends up.Change {
     }
     handleLayerChangeRequests() {
         if (this.layer.isOverlay()) {
-            this.tryAcceptLayerFromServer();
+            this._tryAcceptLayerFromServer();
             this.abortWhenLayerClosed();
-            this.layer.tryAcceptForLocation(this.responseOption());
+            this.layer.tryAcceptForLocation(this._responseOptions());
             this.abortWhenLayerClosed();
-            this.tryDismissLayerFromServer();
+            this._tryDismissLayerFromServer();
             this.abortWhenLayerClosed();
-            this.layer.tryDismissForLocation(this.responseOption());
+            this.layer.tryDismissForLocation(this._responseOptions());
             this.abortWhenLayerClosed();
         }
         this.layer.asCurrent(() => {
             for (let eventPlan of this._eventPlans) {
-                up.emit(Object.assign(Object.assign({}, eventPlan), this.responseOption()));
+                up.emit(Object.assign(Object.assign({}, eventPlan), this._responseOptions()));
                 this.abortWhenLayerClosed();
             }
         });
     }
-    tryAcceptLayerFromServer() {
+    _tryAcceptLayerFromServer() {
         if (u.isDefined(this._acceptLayer) && this.layer.isOverlay()) {
-            this.layer.accept(this._acceptLayer, this.responseOption());
+            this.layer.accept(this._acceptLayer, this._responseOptions());
         }
     }
-    tryDismissLayerFromServer() {
+    _tryDismissLayerFromServer() {
         if (u.isDefined(this._dismissLayer) && this.layer.isOverlay()) {
-            this.layer.dismiss(this._dismissLayer, this.responseOption());
+            this.layer.dismiss(this._dismissLayer, this._responseOptions());
         }
     }
     abortWhenLayerClosed(layer = this.layer) {
@@ -1930,7 +2125,7 @@ up.Change.Addition = class Addition extends up.Change {
             throw new up.Aborted('Layer was closed');
         }
     }
-    setSource({ oldElement, newElement, source }) {
+    _setSource({ oldElement, newElement, source }) {
         if (source === 'keep') {
             source = (oldElement && up.fragment.source(oldElement));
         }
@@ -1938,18 +2133,18 @@ up.Change.Addition = class Addition extends up.Change {
             e.setMissingAttr(newElement, 'up-source', up.fragment.normalizeSource(source));
         }
     }
-    setTime({ newElement, time }) {
+    _setTime({ newElement, time }) {
         e.setMissingAttr(newElement, 'up-time', time ? time.toUTCString() : false);
     }
-    setETag({ newElement, etag }) {
+    _setETag({ newElement, etag }) {
         e.setMissingAttr(newElement, 'up-etag', etag || false);
     }
     setReloadAttrs(options) {
-        this.setSource(options);
-        this.setTime(options);
-        this.setETag(options);
+        this._setSource(options);
+        this._setTime(options);
+        this._setETag(options);
     }
-    responseOption() {
+    _responseOptions() {
         return { response: this._response };
     }
     executeSteps(steps, responseDoc, noneOptions) {
@@ -1984,8 +2179,10 @@ up.RenderJob = (_a = class RenderJob {
         _executePromise() {
             return __awaiter(this, void 0, void 0, function* () {
                 try {
-                    this._guardRender();
+                    this._emitGuardEvent();
                     this.options = up.RenderOptions.preprocess(this.options);
+                    up.browser.assertConfirmed(this.options);
+                    up.RenderOptions.assertContentGiven(this.options);
                     let result = yield this._getChange().execute();
                     this._handleResult(result);
                     return result;
@@ -2033,21 +2230,19 @@ up.RenderJob = (_a = class RenderJob {
             });
         }
         _getChange() {
-            if (this.options.url) {
-                let onRequest = (request) => this._handleAbortOption(request);
-                return new up.Change.FromURL(Object.assign(Object.assign({}, this.options), { onRequest }));
+            let handleAbort = u.memoize((request) => this._handleAbortOption(request));
+            let renderOptions = Object.assign(Object.assign({}, this.options), { handleAbort });
+            if (renderOptions.url) {
+                return new up.Change.FromURL(renderOptions);
             }
-            else if (this.options.response) {
-                let onRender = () => this._handleAbortOption(null);
-                return new up.Change.FromResponse(Object.assign(Object.assign({}, this.options), { onRender }));
+            else if (renderOptions.response) {
+                return new up.Change.FromResponse(renderOptions);
             }
             else {
-                let onRender = () => this._handleAbortOption(null);
-                return new up.Change.FromContent(Object.assign(Object.assign({}, this.options), { onRender }));
+                return new up.Change.FromContent(renderOptions);
             }
         }
-        _guardRender() {
-            up.browser.assertConfirmed(this.options);
+        _emitGuardEvent() {
             let guardEvent = u.pluckKey(this.options, 'guardEvent');
             if (guardEvent) {
                 guardEvent.renderOptions = this.options;
@@ -2055,24 +2250,23 @@ up.RenderJob = (_a = class RenderJob {
                     throw new up.Aborted(`Rendering was prevented by ${guardEvent.type} listener`);
                 }
             }
-            up.RenderOptions.assertContentGiven(this.options);
         }
         _handleAbortOption(request) {
             let { abort } = this.options;
             if (!abort || !up.network.isBusy())
                 return;
-            let { fragments, layer, origin, newLayer } = this._getChange().getPreflightProps();
+            let { bindFragments, bindLayer, origin, layer } = this._getChange().getPreflightProps();
             let abortOptions = {
                 except: request,
                 logOnce: ['up.render()', 'Change with { abort } option will abort other requests'],
-                newLayer,
+                newLayer: (layer === 'new'),
                 origin,
             };
             if (abort === 'target') {
-                up.fragment.abort(fragments, abortOptions);
+                up.fragment.abort(bindFragments, Object.assign({}, abortOptions));
             }
             else if (abort === 'layer') {
-                up.fragment.abort(Object.assign(Object.assign({}, abortOptions), { layer }));
+                up.fragment.abort(Object.assign(Object.assign({}, abortOptions), { layer: bindLayer }));
             }
             else if (abort === 'all' || abort === true) {
                 up.fragment.abort(Object.assign(Object.assign({}, abortOptions), { layer: 'any' }));
@@ -2081,12 +2275,12 @@ up.RenderJob = (_a = class RenderJob {
                 abort(abortOptions);
             }
             else {
-                up.fragment.abort(abort, Object.assign(Object.assign({}, abortOptions), { layer }));
+                up.fragment.abort(abort, Object.assign(Object.assign({}, abortOptions), { layer: bindLayer }));
             }
         }
     },
     (() => {
-        u.delegate(_a.prototype, ['then', 'catch', 'finally'], function () { return this._rendered; });
+        u.delegatePromise(_a.prototype, '_rendered');
         u.memoizeMethod(_a.prototype, {
             _awaitFinished: true,
             _getChange: true,
@@ -2097,14 +2291,6 @@ up.RenderJob = (_a = class RenderJob {
 
 /***/ }),
 /* 26 */
-/***/ (() => {
-
-up.Change.Removal = class Removal extends up.Change {
-};
-
-
-/***/ }),
-/* 27 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -2116,13 +2302,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-up.Change.DestroyFragment = class DestroyFragment extends up.Change.Removal {
+up.Change.DestroyFragment = class DestroyFragment extends up.Change {
     constructor(options) {
         super(options);
         this._layer = up.layer.get(options) || up.layer.current;
         this._element = this.options.element;
         this._animation = this.options.animation;
         this._log = this.options.log;
+        this._onFinished = this.options.onFinished;
     }
     execute() {
         this._parent = this._element.parentNode;
@@ -2135,17 +2322,19 @@ up.Change.DestroyFragment = class DestroyFragment extends up.Change.Removal {
         }
     }
     _destroyAfterAnimation() {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             this._emitDestroyed();
             yield this._animate();
             this._wipe();
-            this.onFinished();
+            (_a = this._onFinished) === null || _a === void 0 ? void 0 : _a.call(this);
         });
     }
     _destroyNow() {
+        var _a;
         this._wipe();
         this._emitDestroyed();
-        this.onFinished();
+        (_a = this._onFinished) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     _animate() {
         return up.motion.animate(this._element, this._animation, this.options);
@@ -2165,7 +2354,7 @@ up.Change.DestroyFragment = class DestroyFragment extends up.Change.Removal {
 
 
 /***/ }),
-/* 28 */
+/* 27 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -2191,9 +2380,10 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
             context: this._buildLayer().context,
             origin: this.options.origin,
             target: this.target,
-            layer: this._baseLayer,
-            fragments: u.compact([up.fragment.get(':main', { layer: this._baseLayer })]),
-            newLayer: true,
+            bindLayer: this._baseLayer,
+            layer: 'new',
+            bindFragments: u.compact([up.fragment.get(':main', { layer: this._baseLayer })]),
+            fragments: [],
         };
     }
     execute(responseDoc, onApplicable) {
@@ -2243,7 +2433,7 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
             fragments: [this._content],
             target: this.target,
         });
-        up.hello(this.layer.element, Object.assign(Object.assign({}, this.options), { layer: this.layer }));
+        up.hello(this.layer.element, Object.assign(Object.assign({}, this.options), { layer: this.layer, dataRoot: this._content }));
         this._handleScroll();
         this._newOverlayResult.finished = this._finish();
         this.layer.opening = false;
@@ -2323,7 +2513,7 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
 
 
 /***/ }),
-/* 29 */
+/* 28 */
 /***/ (() => {
 
 var _a;
@@ -2339,14 +2529,16 @@ up.Change.UpdateLayer = (_a = class UpdateLayer extends up.Change.Addition {
         }
         getPreflightProps() {
             this._matchPreflight();
+            let fragments = this._getFragments();
             return {
                 layer: this.layer,
+                bindLayer: this.layer,
                 mode: this.layer.mode,
                 context: u.merge(this.layer.context, this._context),
                 origin: this.options.origin,
                 target: this._bestPreflightSelector(),
-                fragments: this._getFragments(),
-                newLayer: false,
+                fragments,
+                bindFragments: fragments,
             };
         }
         _bestPreflightSelector() {
@@ -2468,7 +2660,7 @@ up.Change.UpdateLayer = (_a = class UpdateLayer extends up.Change.Addition {
 
 
 /***/ }),
-/* 30 */
+/* 29 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -2547,7 +2739,7 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
                         }, beforeDetach: () => {
                             up.script.clean(step.oldElement, { layer: step.layer });
                         }, afterDetach() {
-                            up.element.cleanJQuery();
+                            e.cleanJQuery();
                             up.fragment.emitDestroyed(step.oldElement, { parent, log: false });
                         }, scrollNew: () => {
                             this._handleFocus(step.newElement, step);
@@ -2583,7 +2775,7 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
         }
     }
     _findKeepPlan(options) {
-        if (!options.useKeep) {
+        if (!options.keep) {
             return;
         }
         const { oldElement, newElement } = options;
@@ -2598,7 +2790,7 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
             partner = up.fragment.get(newElement, partnerSelector, lookupOpts);
         }
         else {
-            partner = up.fragment.subtree(newElement, partnerSelector, lookupOpts)[0];
+            partner = e.subtreeFirst(newElement, partnerSelector, lookupOpts);
         }
         if (partner && e.booleanAttr(partner, 'up-keep') !== false) {
             const plan = {
@@ -2614,7 +2806,7 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
     }
     _preserveKeepables(step) {
         const keepPlans = [];
-        if (step.useKeep) {
+        if (step.keep) {
             for (let keepable of step.oldElement.querySelectorAll('[up-keep]')) {
                 let keepPlan = this._findKeepPlan(Object.assign(Object.assign({}, step), { oldElement: keepable, descendantsOnly: true }));
                 if (keepPlan) {
@@ -2667,11 +2859,11 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
 
 
 /***/ }),
-/* 31 */
+/* 30 */
 /***/ (() => {
 
 const u = up.util;
-up.Change.CloseLayer = class CloseLayer extends up.Change.Removal {
+up.Change.CloseLayer = class CloseLayer extends up.Change {
     constructor(options) {
         var _a, _b;
         super(options);
@@ -2745,28 +2937,38 @@ up.Change.CloseLayer = class CloseLayer extends up.Change.Removal {
 
 
 /***/ }),
-/* 32 */
-/***/ (() => {
+/* 31 */
+/***/ (function() {
 
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var _a;
 const u = up.util;
 up.Change.FromURL = (_a = class FromURL extends up.Change {
         execute() {
-            var _b, _c;
-            let _newPageReason = this._newPageReason();
-            if (_newPageReason) {
-                up.puts('up.render()', _newPageReason);
-                up.network.loadPage(this.options);
-                return u.unresolvablePromise();
-            }
-            this.request = up.request(this._getRequestAttrs());
-            (_c = (_b = this.options).onRequest) === null || _c === void 0 ? void 0 : _c.call(_b, this.request);
-            up.feedback.showAroundRequest(this.request, this.options);
-            up.form.disableWhile(this.request, this.options);
-            if (this.options.preload) {
-                return this.request;
-            }
-            return u.always(this.request, responseOrError => this._onRequestSettled(responseOrError));
+            var _b, _c, _d, _e;
+            return __awaiter(this, void 0, void 0, function* () {
+                let newPageReason = this._newPageReason();
+                if (newPageReason) {
+                    up.puts('up.render()', newPageReason);
+                    up.network.loadPage(this.options);
+                    return u.unresolvablePromise();
+                }
+                let request = this.request = up.request(this._getRequestAttrs());
+                (_c = (_b = this.options).onRequestKnown) === null || _c === void 0 ? void 0 : _c.call(_b, request);
+                if (this.options.preload)
+                    return request;
+                (_e = (_d = this.options).handleAbort) === null || _e === void 0 ? void 0 : _e.call(_d, request);
+                request.runPreviews(this.options);
+                return yield u.always(request, responseOrError => this._onRequestSettled(responseOrError));
+            });
         }
         _newPageReason() {
             if (u.isCrossOrigin(this.options.url)) {
@@ -2779,14 +2981,14 @@ up.Change.FromURL = (_a = class FromURL extends up.Change {
         _getRequestAttrs() {
             const successAttrs = this._preflightPropsForRenderOptions(this.options);
             const failAttrs = this._preflightPropsForRenderOptions(this.deriveFailOptions(), { optional: true });
-            return Object.assign(Object.assign(Object.assign({}, this.options), successAttrs), u.renameKeys(failAttrs, up.fragment.failKey));
+            return Object.assign(Object.assign(Object.assign({}, this.options), successAttrs), u.withRenamedKeys(failAttrs, up.fragment.failKey));
         }
         getPreflightProps() {
             return this._getRequestAttrs();
         }
-        _preflightPropsForRenderOptions(renderOptions, requestAttributesOptions) {
-            const preview = new up.Change.FromContent(Object.assign(Object.assign({}, renderOptions), { preview: true }));
-            return preview.getPreflightProps(requestAttributesOptions);
+        _preflightPropsForRenderOptions(renderOptions, getPreflightPropsOptions) {
+            const preflightChange = new up.Change.FromContent(Object.assign(Object.assign({}, renderOptions), { preflight: true }));
+            return preflightChange.getPreflightProps(getPreflightPropsOptions);
         }
         _onRequestSettled(response) {
             if (response instanceof up.Response) {
@@ -2820,7 +3022,7 @@ up.Change.FromURL = (_a = class FromURL extends up.Change {
 
 
 /***/ }),
-/* 33 */
+/* 32 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -2887,7 +3089,7 @@ up.Change.FromResponse = (_a = class FromResponse extends up.Change {
                 }
                 else {
                     up.puts('up.render()', 'Revalidating cached response for target "%s"', effectiveTarget);
-                    let verifyResult = yield up.reload(effectiveTarget, Object.assign(Object.assign({}, originalRenderOptions), { preferOldElements: renderResult.fragments, layer: renderResult.layer, onFinished: null, scroll: false, focus: 'keep', transition: false, cache: false, confirm: false, feedback: false, abort: false, expiredResponse: this._response }));
+                    let verifyResult = yield up.reload(effectiveTarget, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, originalRenderOptions), up.RenderOptions.NO_MOTION), up.RenderOptions.NO_INPUT_INTERFERENCE), up.RenderOptions.NO_PREVIEWS), { preferOldElements: renderResult.fragments, layer: renderResult.layer, onFinished: null, expiredResponse: this._response, preview: this._revalidatePreview(originalRenderOptions), abort: false, cache: false, background: true }));
                     if (!verifyResult.none) {
                         renderResult = verifyResult;
                     }
@@ -2895,6 +3097,14 @@ up.Change.FromResponse = (_a = class FromResponse extends up.Change {
                 return renderResult;
             });
         }
+        _revalidatePreview({ preview, revalidatePreview }) {
+            if (revalidatePreview === true) {
+                return preview;
+            }
+            else {
+                return revalidatePreview;
+            }
+        }
         _loadedEventProps() {
             const { expiredResponse } = this.options;
             return {
@@ -2956,7 +3166,7 @@ up.Change.FromResponse = (_a = class FromResponse extends up.Change {
 
 
 /***/ }),
-/* 34 */
+/* 33 */
 /***/ (() => {
 
 var _a;
@@ -2965,7 +3175,7 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
         constructor(options) {
             super(options);
             this._origin = options.origin;
-            this._preview = options.preview;
+            this._preflight = options.preflight;
             this._layers = up.layer.getAll(options);
         }
         _getPlans() {
@@ -3018,11 +3228,11 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
             if (assets) {
                 up.script.assertAssetsOK(assets, plan.options);
             }
-            (_c = (_b = this.options).onRender) === null || _c === void 0 ? void 0 : _c.call(_b);
+            (_c = (_b = this.options).handleAbort) === null || _c === void 0 ? void 0 : _c.call(_b, null);
         }
         _getResponseDoc() {
             var _b, _c;
-            if (this._preview)
+            if (this._preflight)
                 return;
             const docOptions = u.pick(this.options, [
                 'target',
@@ -3032,6 +3242,7 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
                 'html',
                 'cspNonces',
                 'origin',
+                'data',
             ]);
             (_c = (_b = up.migrate).handleResponseDocOptions) === null || _c === void 0 ? void 0 : _c.call(_b, docOptions);
             if (this._defaultPlacement() === 'content') {
@@ -3041,7 +3252,7 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
         }
         _improveOptionsFromResponseDoc() {
             var _b;
-            if (this._preview)
+            if (this._preflight)
                 return;
             let responseDoc = this._getResponseDoc();
             if (this.options.fragment) {
@@ -3113,17 +3324,18 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
 
 
 /***/ }),
-/* 35 */
+/* 34 */
 /***/ (() => {
 
 const u = up.util;
 up.CompilerPass = class CompilerPass {
-    constructor(root, compilers, { layer, data, dataMap, meta }) {
+    constructor(root, compilers, { layer, data, dataRoot, dataMap, meta }) {
         layer || (layer = up.layer.get(root) || up.layer.current);
         this._root = root;
         this._compilers = compilers;
         this._layer = layer;
         this._data = data;
+        this._dataRoot = dataRoot || root;
         this._dataMap = dataMap;
         meta || (meta = {});
         meta.layer = layer;
@@ -3139,7 +3351,7 @@ up.CompilerPass = class CompilerPass {
     }
     setCompileData() {
         if (this._data) {
-            this._root.upCompileData = this._data;
+            this._dataRoot.upCompileData = this._data;
         }
         if (this._dataMap) {
             for (let selector in this._dataMap) {
@@ -3175,10 +3387,7 @@ up.CompilerPass = class CompilerPass {
             compileArgs.push(data, this._meta);
         }
         const result = this._applyCompilerFunction(compiler, element, compileArgs);
-        let destructorOrDestructors = this._destructorPresence(result);
-        if (destructorOrDestructors) {
-            up.destructor(element, destructorOrDestructors);
-        }
+        up.destructor(element, result);
     }
     _compileBatch(compiler, elements) {
         const compileArgs = [elements];
@@ -3187,18 +3396,13 @@ up.CompilerPass = class CompilerPass {
             compileArgs.push(dataList, this._meta);
         }
         const result = this._applyCompilerFunction(compiler, elements, compileArgs);
-        if (this._destructorPresence(result)) {
+        if (result) {
             up.fail('Compilers with { batch: true } cannot return destructors');
         }
     }
     _applyCompilerFunction(compiler, elementOrElements, compileArgs) {
         return up.error.guard(() => compiler.apply(elementOrElements, compileArgs));
     }
-    _destructorPresence(result) {
-        if (u.isFunction(result) || (u.isArray(result) && (u.every(result, u.isFunction)))) {
-            return result;
-        }
-    }
     _select(selector) {
         return up.fragment.subtree(this._root, u.evalOption(selector), { layer: this._layer });
     }
@@ -3216,7 +3420,7 @@ up.CompilerPass = class CompilerPass {
 
 
 /***/ }),
-/* 36 */
+/* 35 */
 /***/ (() => {
 
 const u = up.util;
@@ -3301,7 +3505,7 @@ up.CSSTransition = class CSSTransition {
             if (oldTransition['transition-property'] !== 'all') {
                 const oldTransitionProperties = oldTransition['transition-property'].split(/\s*,\s*/);
                 const oldTransitionFrame = e.style(this._element, oldTransitionProperties);
-                this._setOldTransitionTargetFrame = e.setTemporaryStyle(this._element, oldTransitionFrame);
+                this._setOldTransitionTargetFrame = e.setStyleTemp(this._element, oldTransitionFrame);
             }
             this._setOldTransition = e.concludeCSSTransition(this._element);
         }
@@ -3323,7 +3527,7 @@ up.CSSTransition = class CSSTransition {
 
 
 /***/ }),
-/* 37 */
+/* 36 */
 /***/ (() => {
 
 const u = up.util;
@@ -3334,27 +3538,19 @@ up.DestructorPass = class DestructorPass {
     }
     run() {
         for (let cleanable of this._selectCleanables()) {
-            let destructors = u.pluckKey(cleanable, 'upDestructors');
-            if (destructors) {
-                for (let destructor of destructors) {
-                    this._applyDestructorFunction(destructor, cleanable);
-                }
-            }
-            cleanable.classList.remove('up-can-clean');
+            let registry = u.pluckKey(cleanable, 'upDestructors');
+            registry === null || registry === void 0 ? void 0 : registry.clean(cleanable);
         }
     }
     _selectCleanables() {
         const selectOptions = Object.assign(Object.assign({}, this._options), { destroying: true });
         return up.fragment.subtree(this._fragment, '.up-can-clean', selectOptions);
     }
-    _applyDestructorFunction(destructor, element) {
-        up.error.guard(() => destructor(element));
-    }
 };
 
 
 /***/ }),
-/* 38 */
+/* 37 */
 /***/ (() => {
 
 const u = up.util;
@@ -3417,7 +3613,7 @@ up.EventEmitter = class EventEmitter extends up.Record {
         var _a, _b;
         let options = u.extractOptions(args);
         options = u.merge(defaults, options);
-        if (u.isElementish(args[0])) {
+        if (u.isElementLike(args[0])) {
             options.target = e.get(args.shift());
         }
         else if (args[0] instanceof up.Layer) {
@@ -3454,7 +3650,7 @@ up.EventEmitter = class EventEmitter extends up.Record {
 
 
 /***/ }),
-/* 39 */
+/* 38 */
 /***/ (() => {
 
 const u = up.util;
@@ -3561,7 +3757,7 @@ up.EventListener = class EventListener extends up.Record {
 
 
 /***/ }),
-/* 40 */
+/* 39 */
 /***/ (() => {
 
 const u = up.util;
@@ -3581,13 +3777,13 @@ up.EventListenerGroup = class EventListenerGroup extends up.Record {
         ];
     }
     bind() {
-        const unbindFns = [];
+        const cleaner = u.cleaner();
         this._eachListenerAttributes(function (attrs) {
             const listener = new up.EventListener(attrs);
             listener.bind();
-            return unbindFns.push(listener.unbind.bind(listener));
+            return cleaner(listener.unbind.bind(listener));
         });
-        return u.sequence(unbindFns);
+        return cleaner.clean;
     }
     _eachListenerAttributes(fn) {
         for (let element of this.elements) {
@@ -3620,7 +3816,7 @@ up.EventListenerGroup = class EventListenerGroup extends up.Record {
         else {
             elements = [document];
         }
-        let eventTypes = u.parseTokens(args.shift());
+        let eventTypes = u.getSimpleTokens(args.shift());
         let fixTypes = up.migrate.fixEventTypes;
         if (fixTypes) {
             eventTypes = fixTypes(eventTypes);
@@ -3634,7 +3830,7 @@ up.EventListenerGroup = class EventListenerGroup extends up.Record {
 
 
 /***/ }),
-/* 41 */
+/* 40 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -3654,26 +3850,24 @@ up.FieldWatcher = class FieldWatcher {
         this._scope = up.form.getScope(root);
         this._callback = callback;
         this._batch = options.batch;
-        this._abortable = options.abortable;
     }
     start() {
         this._scheduledValues = null;
         this._processedValues = this._readFieldValues();
         this._currentTimer = null;
         this._callbackRunning = false;
-        this._unbindFns = [];
+        this._cleaner = u.cleaner();
         this._watchFieldsWithin(this._root);
         this._root.addEventListener('up:fragment:inserted', ({ target }) => {
             if (target !== this._root)
                 this._watchFieldsWithin(target);
         });
-        this._unbindFns.push(up.fragment.onAborted(this._scope, () => this._abort()));
-        this._unbindFns.push(up.on(this._scope, 'reset', () => this._onFormReset()));
+        this._cleaner(up.fragment.onAborted(this._scope, () => this._abort()));
+        this._cleaner(up.on(this._scope, 'reset', () => this._onFormReset()));
     }
     stop() {
         this._abort();
-        for (let unbindFn of this._unbindFns)
-            unbindFn();
+        this._cleaner.clean();
     }
     _fieldOptions(field) {
         let rootOptions = u.copy(this._options);
@@ -3686,7 +3880,7 @@ up.FieldWatcher = class FieldWatcher {
     }
     _watchField(field) {
         let fieldOptions = this._fieldOptions(field);
-        this._unbindFns.push(up.on(field, fieldOptions.event, () => this._check(fieldOptions)));
+        this._cleaner(up.on(field, fieldOptions.event, () => this._check(fieldOptions)));
     }
     _abort() {
         this._scheduledValues = null;
@@ -3714,13 +3908,12 @@ up.FieldWatcher = class FieldWatcher {
                 return;
             if (!this._scope.isConnected)
                 return;
-            let fieldOptions = this._scheduledFieldOptions;
+            let callbackOptions = u.omit(this._scheduledFieldOptions, ['event', 'delay']);
             const diff = this._changedValues(this._processedValues, this._scheduledValues);
             this._processedValues = this._scheduledValues;
             this._scheduledValues = null;
             this._callbackRunning = true;
             this._scheduledFieldOptions = null;
-            let callbackOptions = Object.assign(Object.assign({}, fieldOptions), { disable: false });
             const callbackReturnValues = [];
             if (this._batch) {
                 callbackReturnValues.push(this._runCallback(diff, callbackOptions));
@@ -3733,7 +3926,6 @@ up.FieldWatcher = class FieldWatcher {
             }
             if (u.some(callbackReturnValues, u.isPromise)) {
                 let callbackDone = Promise.allSettled(callbackReturnValues);
-                up.form.disableWhile(callbackDone, fieldOptions);
                 yield callbackDone;
             }
             this._callbackRunning = false;
@@ -3741,7 +3933,7 @@ up.FieldWatcher = class FieldWatcher {
         });
     }
     _runCallback(...args) {
-        return up.error.guard(() => this._callback(...args));
+        return up.error.guard(this._callback, ...args);
     }
     _changedValues(previous, next) {
         const changes = {};
@@ -3773,7 +3965,7 @@ up.FieldWatcher = class FieldWatcher {
 
 
 /***/ }),
-/* 42 */
+/* 41 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -3907,7 +4099,6 @@ up.FormValidator = class FormValidator {
         up.error.muteUncriticalRejection(this._doRenderDirtySolutions());
     }
     _doRenderDirtySolutions() {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             if (!this._dirtySolutions.length)
                 return;
@@ -3915,39 +4106,11 @@ up.FormValidator = class FormValidator {
                 return;
             if (this._nextRenderTimer)
                 return;
-            let dirtySolutions = this._dirtySolutions;
+            let options = this._mergeRenderOptions(this._dirtySolutions);
             this._dirtySolutions = [];
-            let dirtyOrigins = u.map(dirtySolutions, 'origin');
-            let dirtyFields = u.flatMap(dirtyOrigins, up.form.fields);
-            let dirtyNames = u.uniq(u.map(dirtyFields, 'name'));
-            let dataMap = this._buildDataMap(dirtySolutions);
-            let dirtyRenderOptionsList = u.map(dirtySolutions, 'renderOptions');
-            let options = u.mergeDefined(...dirtyRenderOptionsList, { dataMap }, up.form.destinationOptions(this._form));
-            options.target = u.map(dirtySolutions, 'target').join(', ');
-            options.feedback = u.some(dirtyRenderOptionsList, 'feedback');
-            options.origin = this._form;
-            (_a = options.focus) !== null && _a !== void 0 ? _a : (options.focus = 'keep');
-            options.failOptions = false;
-            options.defaultMaybe = true;
-            options.params = up.Params.merge(options.params, ...u.map(dirtyRenderOptionsList, 'params'));
-            options.headers = u.merge(...u.map(dirtyRenderOptionsList, 'headers'));
-            this._addValidateHeader(options.headers, dirtyNames);
-            options.guardEvent = up.event.build('up:form:validate', {
-                fields: dirtyFields,
-                log: 'Validating form',
-                params: options.params,
-                form: this._form,
-            });
             this._rendering = true;
             let renderingPromise = this._nextRenderPromise;
             this._resetNextRenderPromise();
-            options.disable = false;
-            for (let solution of dirtySolutions) {
-                up.form.disableWhile(renderingPromise, {
-                    disable: solution.renderOptions.disable,
-                    origin: solution.origin,
-                });
-            }
             try {
                 renderingPromise.resolve(up.render(options));
                 yield renderingPromise;
@@ -3958,6 +4121,40 @@ up.FormValidator = class FormValidator {
             }
         });
     }
+    _mergeRenderOptions(dirtySolutions) {
+        var _a;
+        let dirtyOrigins = u.map(dirtySolutions, 'origin');
+        let dirtyFields = u.flatMap(dirtyOrigins, up.form.fields);
+        let dirtyNames = u.uniq(u.map(dirtyFields, 'name'));
+        let dirtyRenderOptionsList = u.map(dirtySolutions, 'renderOptions');
+        let options = u.mergeDefined(...dirtyRenderOptionsList, up.form.destinationOptions(this._form));
+        options.target = u.map(dirtySolutions, 'target').join(', ');
+        options.origin = this._form;
+        (_a = options.focus) !== null && _a !== void 0 ? _a : (options.focus = 'keep');
+        options.failOptions = false;
+        options.defaultMaybe = true;
+        options.params = up.Params.merge(options.params, ...u.map(dirtyRenderOptionsList, 'params'));
+        options.headers = u.merge(options.headers, ...u.map(dirtyRenderOptionsList, 'headers'));
+        this._addValidateHeader(options.headers, dirtyNames);
+        options.feedback = u.some(dirtyRenderOptionsList, 'feedback');
+        options.data = undefined;
+        options.dataMap = u.mapObject(dirtySolutions, ({ target, element, renderOptions: { data, keepData } }) => [
+            target,
+            keepData ? up.data(element) : data
+        ]);
+        options.preview = undefined;
+        options.previewMap = u.mapObject(dirtySolutions, ({ target, renderOptions: { preview } }) => [target, preview]);
+        options.placeholder = undefined;
+        options.placeholderMap = u.mapObject(dirtySolutions, ({ target, renderOptions: { placeholder } }) => [target, placeholder]);
+        options.disable = dirtySolutions.map((solution) => up.fragment.resolveOrigin(solution.renderOptions.disable, solution));
+        options.guardEvent = up.event.build('up:form:validate', {
+            fields: dirtyFields,
+            log: 'Validating form',
+            params: options.params,
+            form: this._form,
+        });
+        return options;
+    }
     _addValidateHeader(headers, names) {
         let key = up.protocol.headerize('validate');
         let value = names.join(' ');
@@ -3965,20 +4162,6 @@ up.FormValidator = class FormValidator {
             value = ':unknown';
         headers[key] = value;
     }
-    _buildDataMap(solutions) {
-        let dataMap = {};
-        for (let solution of solutions) {
-            let data = u.pluckKey(solution.renderOptions, 'data');
-            let keepData = u.pluckKey(solution.renderOptions, 'keepData');
-            if (keepData) {
-                data = up.data(solution.element);
-            }
-            if (data) {
-                dataMap[solution.target] = data;
-            }
-        }
-        return dataMap;
-    }
     static forElement(element) {
         let form = up.form.get(element);
         return form.upFormValidator || (form.upFormValidator = new this(form));
@@ -3987,19 +4170,23 @@ up.FormValidator = class FormValidator {
 
 
 /***/ }),
-/* 43 */
+/* 42 */
 /***/ (() => {
 
 up.FocusCapsule = class FocusCapsule {
-    constructor(target, cursorProps) {
+    constructor(element, target, cursorProps) {
+        this._element = element;
         this._target = target;
         this._cursorProps = cursorProps;
     }
-    restore(layer, options) {
+    wasLost() {
+        return document.activeElement !== this._element;
+    }
+    restore(layer, focusOptions) {
         let rediscoveredElement = up.fragment.get(this._target, { layer });
         if (rediscoveredElement) {
             up.viewport.copyCursorProps(this._cursorProps, rediscoveredElement);
-            up.focus(rediscoveredElement, options);
+            up.focus(rediscoveredElement, focusOptions);
             return true;
         }
     }
@@ -4011,13 +4198,13 @@ up.FocusCapsule = class FocusCapsule {
         if (!target)
             return;
         const cursorProps = up.viewport.copyCursorProps(focusedElement);
-        return new this(target, cursorProps);
+        return new this(focusedElement, target, cursorProps);
     }
 };
 
 
 /***/ }),
-/* 44 */
+/* 43 */
 /***/ (() => {
 
 const u = up.util;
@@ -4035,14 +4222,14 @@ up.FragmentProcessor = class FragmentProcessor extends up.Record {
         return this.tryProcess(preprocessed);
     }
     preprocess(opt) {
-        return u.parseTokens(opt, { separator: 'or' });
+        return u.getComplexTokens(opt);
     }
     tryProcess(opt) {
         if (u.isArray(opt)) {
             return this.processArray(opt);
         }
         if (u.isFunction(opt)) {
-            let result = up.error.guard(() => opt(this.fragment, this.attributes()));
+            let result = up.error.guard(opt, this.fragment, this.attributes());
             return this.tryProcess(result);
         }
         if (u.isElement(opt)) {
@@ -4082,7 +4269,7 @@ up.FragmentProcessor = class FragmentProcessor extends up.Record {
 
 
 /***/ }),
-/* 45 */
+/* 44 */
 /***/ (() => {
 
 const u = up.util;
@@ -4121,19 +4308,19 @@ up.FragmentFinder = class FragmentFinder {
             if (parts) {
                 let parent = up.fragment.closest(this._origin, parts[1], this._options);
                 if (parent) {
-                    return up.fragment.getDumb(parent, parts[2]);
+                    return up.fragment.getFirstDescendant(parent, parts[2]);
                 }
             }
         });
     }
     _findFirst() {
-        return up.fragment.getDumb(this._document, this._selector, this._options);
+        return up.fragment.getFirstDescendant(this._document, this._selector, this._options);
     }
 };
 
 
 /***/ }),
-/* 46 */
+/* 45 */
 /***/ (() => {
 
 const u = up.util;
@@ -4195,7 +4382,7 @@ up.FragmentFocus = class FragmentFocus extends up.FragmentProcessor {
         return up.viewport.restoreFocus({ layer: this.layer });
     }
     _autofocus() {
-        let autofocusElement = this.fragment && e.subtree(this.fragment, '[autofocus]')[0];
+        let autofocusElement = this.fragment && e.subtreeFirst(this.fragment, '[autofocus]');
         if (autofocusElement) {
             return this._focusElement(autofocusElement);
         }
@@ -4213,13 +4400,14 @@ up.FragmentFocus = class FragmentFocus extends up.FragmentProcessor {
         }
     }
     _wasFocusLost() {
-        return !this.layer.hasFocus();
+        var _a;
+        return (_a = this.focusCapsule) === null || _a === void 0 ? void 0 : _a.wasLost();
     }
 };
 
 
 /***/ }),
-/* 47 */
+/* 46 */
 /***/ (() => {
 
 const e = up.element;
@@ -4289,17 +4477,17 @@ up.FragmentPolling = class FragmentPolling {
             (this._options.ifLayer === 'any' || this._isOnFrontLayer());
     }
     _clearReloadTimer() {
-        clearTimeout(this.reloadTimer);
-        this.reloadTimer = null;
+        clearTimeout(this._reloadTimer);
+        this._reloadTimer = null;
     }
     _scheduleRemainingTime() {
-        if (!this.reloadTimer && !this._loading) {
+        if (!this._reloadTimer && !this._loading) {
             this._clearReloadTimer();
-            this.reloadTimer = setTimeout(this._onTimerReached.bind(this), this._getRemainingDelay());
+            this._reloadTimer = setTimeout(this._onTimerReached.bind(this), this._getRemainingDelay());
         }
     }
     _onTimerReached() {
-        this.reloadTimer = null;
+        this._reloadTimer = null;
         this._tryReload();
     }
     _tryReload() {
@@ -4377,7 +4565,7 @@ up.FragmentPolling = class FragmentPolling {
 
 
 /***/ }),
-/* 48 */
+/* 47 */
 /***/ (() => {
 
 const u = up.util;
@@ -4441,7 +4629,7 @@ up.FragmentScrolling = class FragmentScrolling extends up.FragmentProcessor {
 
 
 /***/ }),
-/* 49 */
+/* 48 */
 /***/ (() => {
 
 const e = up.element;
@@ -4709,7 +4897,7 @@ up.Layer = class Layer extends up.Record {
 
 
 /***/ }),
-/* 50 */
+/* 49 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -4721,289 +4909,298 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var _a;
 const e = up.element;
 const u = up.util;
-up.Layer.Overlay = class Overlay extends up.Layer {
-    keys() {
-        return super.keys().concat([
-            'position',
-            'align',
-            'size',
-            'origin',
-            'class',
-            'backdrop',
-            'openAnimation',
-            'closeAnimation',
-            'openDuration',
-            'closeDuration',
-            'openEasing',
-            'closeEasing',
-            'backdropOpenAnimation',
-            'backdropCloseAnimation',
-            'dismissable',
-            'dismissLabel',
-            'dismissAriaLabel',
-            'trapFocus',
-            'onOpened',
-            'onAccept',
-            'onAccepted',
-            'onDismiss',
-            'onDismissed',
-            'acceptEvent',
-            'dismissEvent',
-            'acceptLocation',
-            'dismissLocation',
-            'opening'
-        ]);
-    }
-    constructor(options) {
-        super(options);
-        if (this.dismissable === true) {
-            this.dismissable = ['button', 'key', 'outside'];
+up.Layer.Overlay = (_a = class Overlay extends up.Layer {
+        keys() {
+            return [
+                ...super.keys(),
+                ...this.constructor.VISUAL_KEYS,
+                'onOpened',
+                'onAccept',
+                'onAccepted',
+                'onDismiss',
+                'onDismissed',
+                'acceptEvent',
+                'dismissEvent',
+                'acceptLocation',
+                'dismissLocation',
+                'opening'
+            ];
         }
-        else if (this.dismissable === false) {
-            this.dismissable = [];
+        constructor(options) {
+            super(options);
+            if (this.dismissable === true) {
+                this.dismissable = ['button', 'key', 'outside'];
+            }
+            else if (this.dismissable === false) {
+                this.dismissable = [];
+            }
+            else {
+                this.dismissable = u.getSimpleTokens(this.dismissable);
+            }
+            if (this.acceptLocation) {
+                this.acceptLocation = new up.URLPattern(this.acceptLocation);
+            }
+            if (this.dismissLocation) {
+                this.dismissLocation = new up.URLPattern(this.dismissLocation);
+            }
         }
-        else {
-            this.dismissable = u.parseTokens(this.dismissable);
+        callback(name) {
+            let fn = this[name];
+            if (fn) {
+                return fn.bind(this);
+            }
         }
-        if (this.acceptLocation) {
-            this.acceptLocation = new up.URLPattern(this.acceptLocation);
+        createElement(parentElement) {
+            this.nesting || (this.nesting = this._suggestVisualNesting());
+            const elementAttrs = u.compactObject(u.pick(this, ['align', 'position', 'size', 'class', 'nesting']));
+            this.element = this.affixPart(parentElement, null, elementAttrs);
         }
-        if (this.dismissLocation) {
-            this.dismissLocation = new up.URLPattern(this.dismissLocation);
+        createBackdropElement(parentElement) {
+            this.backdropElement = this.affixPart(parentElement, 'backdrop');
         }
-    }
-    callback(name) {
-        let fn = this[name];
-        if (fn) {
-            return fn.bind(this);
+        createViewportElement(parentElement) {
+            this.viewportElement = this.affixPart(parentElement, 'viewport', { 'up-viewport': '' });
         }
-    }
-    createElement(parentElement) {
-        this.nesting || (this.nesting = this._suggestVisualNesting());
-        const elementAttrs = u.compactObject(u.pick(this, ['align', 'position', 'size', 'class', 'nesting']));
-        this.element = this.affixPart(parentElement, null, elementAttrs);
-    }
-    createBackdropElement(parentElement) {
-        this.backdropElement = this.affixPart(parentElement, 'backdrop');
-    }
-    createViewportElement(parentElement) {
-        this.viewportElement = this.affixPart(parentElement, 'viewport', { 'up-viewport': '' });
-    }
-    createBoxElement(parentElement) {
-        this.boxElement = this.affixPart(parentElement, 'box');
-    }
-    createContentElement(parentElement) {
-        this.contentElement = this.affixPart(parentElement, 'content');
-    }
-    setContent(content) {
-        this.contentElement.append(content);
-        this.onContentSet();
-    }
-    onContentSet() {
-    }
-    createDismissElement(parentElement) {
-        this.dismissElement = this.affixPart(parentElement, 'dismiss', {
-            'up-dismiss': '":button"',
-            'aria-label': this.dismissAriaLabel
-        });
-        return e.affix(this.dismissElement, 'span[aria-hidden="true"]', { text: this.dismissLabel });
-    }
-    affixPart(parentElement, part, options = {}) {
-        return e.affix(parentElement, this.selector(part), options);
-    }
-    static selector(part) {
-        return u.compact(['up', this.mode, part]).join('-');
-    }
-    _suggestVisualNesting() {
-        const { parent } = this;
-        if (this.mode === parent.mode) {
-            return 1 + parent._suggestVisualNesting();
+        createBoxElement(parentElement) {
+            this.boxElement = this.affixPart(parentElement, 'box');
         }
-        else {
-            return 0;
+        createContentElement(parentElement) {
+            this.contentElement = this.affixPart(parentElement, 'content');
         }
-    }
-    setupHandlers() {
-        var _a, _b;
-        super.setupHandlers();
-        this.overlayFocus = new up.OverlayFocus(this);
-        if (this._supportsDismissMethod('button')) {
-            this.createDismissElement(this.getBoxElement());
-        }
-        if (this._supportsDismissMethod('outside')) {
-            if (this.viewportElement) {
-                up.on(this.viewportElement, 'up:click', event => {
-                    if (event.target === this.viewportElement) {
-                        this._onOutsideClicked(event, true);
-                    }
-                });
+        setContent(content) {
+            this.contentElement.append(content);
+            this.onContentSet();
+        }
+        onContentSet() {
+        }
+        createDismissElement(parentElement) {
+            this.dismissElement = this.affixPart(parentElement, 'dismiss', {
+                'up-dismiss': '":button"',
+                'aria-label': this.dismissARIALabel
+            });
+            return e.affix(this.dismissElement, 'span[aria-hidden="true"]', { text: this.dismissLabel });
+        }
+        affixPart(parentElement, part, options = {}) {
+            return e.affix(parentElement, this.selector(part), options);
+        }
+        static selector(part) {
+            return u.compact(['up', this.mode, part]).join('-');
+        }
+        _suggestVisualNesting() {
+            const { parent } = this;
+            if (this.mode === parent.mode) {
+                return 1 + parent._suggestVisualNesting();
             }
             else {
-                this.unbindParentClicked = this.parent.on('up:click', (event, element) => {
-                    if (!up.layer.isWithinForeignOverlay(element)) {
-                        const originClicked = this.origin && this.origin.contains(element);
-                        this._onOutsideClicked(event, originClicked);
-                    }
-                });
+                return 0;
             }
         }
-        if (this._supportsDismissMethod('key')) {
-            this.unbindEscapePressed = up.event.onEscape(event => this.onEscapePressed(event));
+        setupHandlers() {
+            var _b, _c;
+            super.setupHandlers();
+            this.overlayFocus = new up.OverlayFocus(this);
+            if (this._supportsDismissMethod('button')) {
+                this.createDismissElement(this.getBoxElement());
+            }
+            if (this._supportsDismissMethod('outside')) {
+                if (this.viewportElement) {
+                    up.on(this.viewportElement, 'up:click', event => {
+                        if (event.target === this.viewportElement) {
+                            this._onOutsideClicked(event, true);
+                        }
+                    });
+                }
+                else {
+                    this.unbindParentClicked = this.parent.on('up:click', (event, element) => {
+                        if (!up.layer.isWithinForeignOverlay(element)) {
+                            const originClicked = this.origin && this.origin.contains(element);
+                            this._onOutsideClicked(event, originClicked);
+                        }
+                    });
+                }
+            }
+            if (this._supportsDismissMethod('key')) {
+                this.unbindEscapePressed = up.event.onEscape(event => this.onEscapePressed(event));
+            }
+            this.registerClickCloser('up-accept', (value, closeOptions) => {
+                this.accept(value, closeOptions);
+            });
+            this.registerClickCloser('up-dismiss', (value, closeOptions) => {
+                this.dismiss(value, closeOptions);
+            });
+            (_c = (_b = up.migrate).registerLayerCloser) === null || _c === void 0 ? void 0 : _c.call(_b, this);
+            this._registerEventCloser(this.acceptEvent, this.accept);
+            this._registerEventCloser(this.dismissEvent, this.dismiss);
+            this.on('up:click', 'label[for]', (event, label) => this._onLabelClicked(event, label));
+        }
+        _onLabelClicked(event, label) {
+            let id = label.getAttribute('for');
+            let fieldSelector = up.form.fieldSelector(e.idSelector(id));
+            let fieldsAnywhere = up.fragment.all(fieldSelector, { layer: 'any' });
+            let fieldsInLayer = up.fragment.all(fieldSelector, { layer: this });
+            if (fieldsAnywhere.length > 1 && fieldsInLayer[0] !== fieldsAnywhere[0]) {
+                event.preventDefault();
+                const field = fieldsInLayer[0];
+                field.focus();
+                if (field.matches('input[type=checkbox], input[type=radio]')) {
+                    field.click();
+                }
+            }
         }
-        this.registerClickCloser('up-accept', (value, closeOptions) => {
-            this.accept(value, closeOptions);
-        });
-        this.registerClickCloser('up-dismiss', (value, closeOptions) => {
-            this.dismiss(value, closeOptions);
-        });
-        (_b = (_a = up.migrate).registerLayerCloser) === null || _b === void 0 ? void 0 : _b.call(_a, this);
-        this._registerEventCloser(this.acceptEvent, this.accept);
-        this._registerEventCloser(this.dismissEvent, this.dismiss);
-        this.on('up:click', 'label[for]', (event, label) => this._onLabelClicked(event, label));
-    }
-    _onLabelClicked(event, label) {
-        let id = label.getAttribute('for');
-        let fieldSelector = up.form.fieldSelector(e.idSelector(id));
-        let fieldsAnywhere = up.fragment.all(fieldSelector, { layer: 'any' });
-        let fieldsInLayer = up.fragment.all(fieldSelector, { layer: this });
-        if (fieldsAnywhere.length > 1 && fieldsInLayer[0] !== fieldsAnywhere[0]) {
-            event.preventDefault();
-            const field = fieldsInLayer[0];
-            field.focus();
-            if (field.matches('input[type=checkbox], input[type=radio]')) {
-                field.click();
-            }
-        }
-    }
-    _onOutsideClicked(event, halt) {
-        up.log.putsEvent(event);
-        if (halt)
-            up.event.halt(event);
-        up.error.muteUncriticalSync(() => this.dismiss(':outside', { origin: event.target }));
-    }
-    onEscapePressed(event) {
-        if (this.isFront()) {
-            let field = up.form.focusedField();
-            if (field) {
-                field.blur();
+        _onOutsideClicked(event, halt) {
+            up.log.putsEvent(event);
+            if (halt)
+                up.event.halt(event);
+            up.error.muteUncriticalSync(() => this.dismiss(':outside', { origin: event.target }));
+        }
+        onEscapePressed(event) {
+            if (this.isFront()) {
+                let field = up.form.focusedField();
+                if (field) {
+                    field.blur();
+                }
+                else if (this._supportsDismissMethod('key')) {
+                    up.event.halt(event, { log: true });
+                    up.error.muteUncriticalSync(() => this.dismiss(':key'));
+                }
             }
-            else if (this._supportsDismissMethod('key')) {
+        }
+        registerClickCloser(attribute, closeFn) {
+            let selector = `[${attribute}]`;
+            this.on('up:click', selector, function (event) {
                 up.event.halt(event, { log: true });
-                up.error.muteUncriticalSync(() => this.dismiss(':key'));
+                const origin = event.target.closest(selector);
+                const value = e.jsonAttr(origin, attribute);
+                const closeOptions = { origin };
+                const parser = new up.OptionsParser(origin, closeOptions);
+                parser.booleanOrString('animation');
+                parser.string('easing');
+                parser.number('duration');
+                parser.string('confirm');
+                up.error.muteUncriticalSync(() => closeFn(value, closeOptions));
+            });
+        }
+        _registerEventCloser(eventTypes, closeFn) {
+            if (!eventTypes) {
+                return;
             }
+            return this.on(eventTypes, event => {
+                event.preventDefault();
+                up.error.muteUncriticalSync(() => closeFn.call(this, event, { response: event.response }));
+            });
         }
-    }
-    registerClickCloser(attribute, closeFn) {
-        let selector = `[${attribute}]`;
-        this.on('up:click', selector, function (event) {
-            up.event.halt(event, { log: true });
-            const origin = event.target.closest(selector);
-            const value = e.jsonAttr(origin, attribute);
-            const closeOptions = { origin };
-            const parser = new up.OptionsParser(origin, closeOptions);
-            parser.booleanOrString('animation');
-            parser.string('easing');
-            parser.number('duration');
-            parser.string('confirm');
-            up.error.muteUncriticalSync(() => closeFn(value, closeOptions));
-        });
-    }
-    _registerEventCloser(eventTypes, closeFn) {
-        if (!eventTypes) {
-            return;
+        tryAcceptForLocation(options) {
+            this._tryCloseForLocation(this.acceptLocation, this.accept, options);
         }
-        return this.on(eventTypes, event => {
-            event.preventDefault();
-            up.error.muteUncriticalSync(() => closeFn.call(this, event, { response: event.response }));
-        });
-    }
-    tryAcceptForLocation(options) {
-        this._tryCloseForLocation(this.acceptLocation, this.accept, options);
-    }
-    tryDismissForLocation(options) {
-        this._tryCloseForLocation(this.dismissLocation, this.dismiss, options);
-    }
-    _tryCloseForLocation(urlPattern, closeFn, options) {
-        let location, resolution;
-        if (urlPattern && (location = this.location) && (resolution = urlPattern.recognize(location))) {
-            const closeValue = Object.assign(Object.assign({}, resolution), { location });
-            up.error.muteUncriticalSync(() => closeFn.call(this, closeValue, options));
+        tryDismissForLocation(options) {
+            this._tryCloseForLocation(this.dismissLocation, this.dismiss, options);
         }
-    }
-    teardownHandlers() {
-        var _a, _b;
-        super.teardownHandlers();
-        (_a = this.unbindParentClicked) === null || _a === void 0 ? void 0 : _a.call(this);
-        (_b = this.unbindEscapePressed) === null || _b === void 0 ? void 0 : _b.call(this);
-        this.overlayFocus.teardown();
-    }
-    destroyElements(options) {
-        const animation = () => this.startCloseAnimation(options);
-        const onFinished = () => {
-            var _a;
-            this.onElementsRemoved();
-            (_a = options.onFinished) === null || _a === void 0 ? void 0 : _a.call(options);
-        };
-        const destroyOptions = Object.assign(Object.assign({}, options), { animation, onFinished, log: false });
-        up.destroy(this.element, destroyOptions);
-    }
-    onElementsRemoved() {
-    }
-    _startAnimation(options = {}) {
-        const boxDone = up.animate(this.getBoxElement(), options.boxAnimation, options);
-        let backdropDone;
-        if (this.backdrop && !up.motion.isNone(options.boxAnimation)) {
-            backdropDone = up.animate(this.backdropElement, options.backdropAnimation, options);
+        _tryCloseForLocation(urlPattern, closeFn, options) {
+            let location, resolution;
+            if (urlPattern && (location = this.location) && (resolution = urlPattern.recognize(location))) {
+                const closeValue = Object.assign(Object.assign({}, resolution), { location });
+                up.error.muteUncriticalSync(() => closeFn.call(this, closeValue, options));
+            }
         }
-        return Promise.all([boxDone, backdropDone]);
-    }
-    startOpenAnimation(options = {}) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this._startAnimation({
-                boxAnimation: (_a = options.animation) !== null && _a !== void 0 ? _a : this.evalOption(this.openAnimation),
-                backdropAnimation: 'fade-in',
-                easing: options.easing || this.openEasing,
-                duration: options.duration || this.openDuration
+        teardownHandlers() {
+            var _b, _c;
+            super.teardownHandlers();
+            (_b = this.unbindParentClicked) === null || _b === void 0 ? void 0 : _b.call(this);
+            (_c = this.unbindEscapePressed) === null || _c === void 0 ? void 0 : _c.call(this);
+            this.overlayFocus.teardown();
+        }
+        destroyElements(options) {
+            const animation = () => this.startCloseAnimation(options);
+            const onFinished = () => {
+                var _b;
+                this.onElementsRemoved();
+                (_b = options.onFinished) === null || _b === void 0 ? void 0 : _b.call(options);
+            };
+            const destroyOptions = Object.assign(Object.assign({}, options), { animation, onFinished, log: false });
+            up.destroy(this.element, destroyOptions);
+        }
+        onElementsRemoved() {
+        }
+        _startAnimation(options = {}) {
+            const boxDone = up.animate(this.getBoxElement(), options.boxAnimation, options);
+            let backdropDone;
+            if (this.backdrop && !up.motion.isNone(options.boxAnimation)) {
+                backdropDone = up.animate(this.backdropElement, options.backdropAnimation, options);
+            }
+            return Promise.all([boxDone, backdropDone]);
+        }
+        startOpenAnimation(options = {}) {
+            var _b;
+            return __awaiter(this, void 0, void 0, function* () {
+                let boxAnimation = (_b = options.animation) !== null && _b !== void 0 ? _b : this.evalOption(this.openAnimation);
+                let backdropAnimation = 'fade-in';
+                yield this._startAnimation({
+                    boxAnimation,
+                    backdropAnimation,
+                    easing: options.easing || this.openEasing,
+                    duration: options.duration || this.openDuration
+                });
+                this.wasEverVisible = true;
             });
-            this.wasEverVisible = true;
-        });
-    }
-    startCloseAnimation(options = {}) {
-        var _a;
-        return this._startAnimation({
-            boxAnimation: this.wasEverVisible && ((_a = options.animation) !== null && _a !== void 0 ? _a : this.evalOption(this.closeAnimation)),
-            backdropAnimation: this.wasEverVisible && 'fade-out',
-            easing: options.easing || this.closeEasing,
-            duration: options.duration || this.closeDuration
-        });
-    }
-    accept(value = null, options = {}) {
-        return this._executeCloseChange('accept', value, options);
-    }
-    dismiss(value = null, options = {}) {
-        return this._executeCloseChange('dismiss', value, options);
-    }
-    _supportsDismissMethod(method) {
-        return u.contains(this.dismissable, method);
-    }
-    _executeCloseChange(verb, value, options) {
-        options = Object.assign(Object.assign({}, options), { verb, value, layer: this });
-        return new up.Change.CloseLayer(options).execute();
-    }
-    getFirstSwappableElement() {
-        return this.getContentElement().children[0];
-    }
-    toString() {
-        return `${this.mode} overlay`;
-    }
-};
+        }
+        startCloseAnimation(options = {}) {
+            var _b;
+            let boxAnimation = this.wasEverVisible && ((_b = options.animation) !== null && _b !== void 0 ? _b : this.evalOption(this.closeAnimation));
+            let backdropAnimation = 'fade-out';
+            return this._startAnimation({
+                boxAnimation,
+                backdropAnimation,
+                easing: options.easing || this.closeEasing,
+                duration: options.duration || this.closeDuration
+            });
+        }
+        accept(value = null, options = {}) {
+            return this._executeCloseChange('accept', value, options);
+        }
+        dismiss(value = null, options = {}) {
+            return this._executeCloseChange('dismiss', value, options);
+        }
+        _supportsDismissMethod(method) {
+            return u.contains(this.dismissable, method);
+        }
+        _executeCloseChange(verb, value, options) {
+            options = Object.assign(Object.assign({}, options), { verb, value, layer: this });
+            return new up.Change.CloseLayer(options).execute();
+        }
+        getFirstSwappableElement() {
+            return this.getContentElement().children[0];
+        }
+        toString() {
+            return `${this.mode} overlay`;
+        }
+    },
+    _a.VISUAL_KEYS = [
+        'mode',
+        'position',
+        'align',
+        'size',
+        'origin',
+        'class',
+        'backdrop',
+        'dismissable',
+        'dismissLabel',
+        'dismissARIALabel',
+        'openAnimation',
+        'closeAnimation',
+        'openDuration',
+        'closeDuration',
+        'openEasing',
+        'closeEasing',
+        'trapFocus',
+    ],
+    _a);
 
 
 /***/ }),
-/* 51 */
+/* 50 */
 /***/ (() => {
 
 up.Layer.OverlayWithTether = class OverlayWithTether extends up.Layer.Overlay {
@@ -5042,7 +5239,7 @@ up.Layer.OverlayWithTether = class OverlayWithTether extends up.Layer.Overlay {
 
 
 /***/ }),
-/* 52 */
+/* 51 */
 /***/ (() => {
 
 up.Layer.OverlayWithViewport = class OverlayWithViewport extends up.Layer.Overlay {
@@ -5071,7 +5268,7 @@ up.Layer.OverlayWithViewport = class OverlayWithViewport extends up.Layer.Overla
 
 
 /***/ }),
-/* 53 */
+/* 52 */
 /***/ (() => {
 
 var _a;
@@ -5117,7 +5314,7 @@ up.Layer.Root = (_a = class Root extends up.Layer {
 
 
 /***/ }),
-/* 54 */
+/* 53 */
 /***/ (() => {
 
 var _a;
@@ -5128,7 +5325,7 @@ up.Layer.Modal = (_a = class Modal extends up.Layer.OverlayWithViewport {
 
 
 /***/ }),
-/* 55 */
+/* 54 */
 /***/ (() => {
 
 var _a;
@@ -5139,7 +5336,7 @@ up.Layer.Popup = (_a = class Popup extends up.Layer.OverlayWithTether {
 
 
 /***/ }),
-/* 56 */
+/* 55 */
 /***/ (() => {
 
 var _a;
@@ -5150,7 +5347,7 @@ up.Layer.Drawer = (_a = class Drawer extends up.Layer.OverlayWithViewport {
 
 
 /***/ }),
-/* 57 */
+/* 56 */
 /***/ (() => {
 
 var _a;
@@ -5161,7 +5358,7 @@ up.Layer.Cover = (_a = class Cover extends up.Layer.OverlayWithViewport {
 
 
 /***/ }),
-/* 58 */
+/* 57 */
 /***/ (() => {
 
 var _a;
@@ -5174,7 +5371,7 @@ up.LayerLookup = (_a = class LayerLookup {
                 up.layer.normalizeOptions(options);
             }
             this._options = options;
-            this._values = u.parseTokens(options.layer);
+            this._values = u.getSimpleTokens(options.layer);
         }
         all() {
             let results = u.flatMap(this._values, value => this._resolveValue(value));
@@ -5207,7 +5404,7 @@ up.LayerLookup = (_a = class LayerLookup {
             if (/^\d+$/.test(value)) {
                 return this._forIndex(Number(value));
             }
-            if (u.isElementish(value)) {
+            if (u.isElementLike(value)) {
                 return this._forElement(value);
             }
             switch (value) {
@@ -5274,7 +5471,7 @@ up.LayerLookup = (_a = class LayerLookup {
 
 
 /***/ }),
-/* 59 */
+/* 58 */
 /***/ (() => {
 
 const u = up.util;
@@ -5388,11 +5585,11 @@ up.LayerStack = class LayerStack {
 
 
 /***/ }),
-/* 60 */
+/* 59 */
 /***/ (() => {
 
 const u = up.util;
-up.LinkFeedbackURLs = class LinkFeedbackURLs {
+up.LinkCurrentURLs = class LinkCurrentURLs {
     constructor(link) {
         this._isSafe = up.link.isSafe(link);
         if (this._isSafe) {
@@ -5423,7 +5620,7 @@ up.LinkFeedbackURLs = class LinkFeedbackURLs {
 
 
 /***/ }),
-/* 61 */
+/* 60 */
 /***/ (() => {
 
 const u = up.util;
@@ -5432,12 +5629,13 @@ up.LinkFollowIntent = class LinkFollowIntent {
     constructor(link, callback) {
         this._link = link;
         this._callback = callback;
+        this._lastRequest = null;
         this._on('mouseenter mousedown touchstart', (event) => this._scheduleCallback(event));
         this._on('mouseleave', () => this._unscheduleCallback());
         up.fragment.onAborted(this._link, () => this._unscheduleCallback());
     }
-    _on(eventType, callback) {
-        up.on(this._link, eventType, { passive: true }, callback);
+    _on(eventType, fn) {
+        up.on(this._link, eventType, { passive: true }, fn);
     }
     _scheduleCallback(event) {
         if (!up.link.shouldFollowEvent(event, this._link))
@@ -5453,8 +5651,11 @@ up.LinkFollowIntent = class LinkFollowIntent {
         }
     }
     _unscheduleCallback() {
+        var _a;
         clearTimeout(this._timer);
-        up.network.abort((request) => (request.origin === this._link) && request.background);
+        if ((_a = this._lastRequest) === null || _a === void 0 ? void 0 : _a.background)
+            this._lastRequest.abort();
+        this._lastRequest = null;
     }
     _parseDelay() {
         var _a;
@@ -5462,13 +5663,13 @@ up.LinkFollowIntent = class LinkFollowIntent {
     }
     _runCallback(event) {
         up.log.putsEvent(event);
-        up.error.muteUncriticalRejection(this._callback());
+        this._callback({ onRequestKnown: (request) => this._lastRequest = request });
     }
 };
 
 
 /***/ }),
-/* 62 */
+/* 61 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -5577,7 +5778,7 @@ up.MotionController = class MotionController {
 
 
 /***/ }),
-/* 63 */
+/* 62 */
 /***/ (() => {
 
 const u = up.util;
@@ -5592,33 +5793,34 @@ up.NonceableCallback = class NonceableCallback {
         return new this(match[3], match[2]);
     }
     toFunction(...argNames) {
+        let script = this.script;
         if (this.nonce) {
             let callbackThis = this;
             return function (...args) {
-                return callbackThis._runAsNoncedFunction(this, argNames, args);
+                return callbackThis._runAsNoncedFunction(script, this, argNames, args);
             };
         }
         else {
-            return new Function(...argNames, this.script);
+            return new Function(...argNames, script);
         }
     }
     toString() {
         return `nonce-${this.nonce} ${this.script}`;
     }
-    _runAsNoncedFunction(thisArg, argNames, args) {
+    _runAsNoncedFunction(script, thisArg, argNames, args) {
         let wrappedScript = `
       try {
         up.noncedEval.value = (function(${argNames.join()}) {
-          ${this.script}
+          ${script}
         }).apply(up.noncedEval.thisArg, up.noncedEval.args)
       } catch (error) {
         up.noncedEval.error = error
       }
     `;
-        let script;
+        let scriptElement;
         try {
             up.noncedEval = { args, thisArg: thisArg };
-            script = up.element.affix(document.body, 'script', { nonce: this.nonce, text: wrappedScript });
+            scriptElement = e.affix(document.body, 'script', { nonce: this.nonce, text: wrappedScript });
             if (up.noncedEval.error) {
                 throw up.noncedEval.error;
             }
@@ -5628,8 +5830,8 @@ up.NonceableCallback = class NonceableCallback {
         }
         finally {
             up.noncedEval = undefined;
-            if (script) {
-                script.remove();
+            if (scriptElement) {
+                scriptElement.remove();
             }
         }
     }
@@ -5663,7 +5865,7 @@ up.NonceableCallback = class NonceableCallback {
 
 
 /***/ }),
-/* 64 */
+/* 63 */
 /***/ (() => {
 
 const e = up.element;
@@ -5679,7 +5881,7 @@ up.OverlayFocus = class OverlayFocus {
             return;
         }
         this._active = true;
-        this._unsetAttrs = e.setTemporaryAttrs(this._focusElement, {
+        this._unsetAttrs = e.setAttrsTemp(this._focusElement, {
             'tabindex': '0',
             'role': 'dialog',
             'aria-modal': this._trapFocus.toString()
@@ -5736,7 +5938,7 @@ up.OverlayFocus = class OverlayFocus {
 
 
 /***/ }),
-/* 65 */
+/* 64 */
 /***/ (() => {
 
 const u = up.util;
@@ -5969,6 +6171,134 @@ up.Params = class Params {
 };
 
 
+/***/ }),
+/* 65 */
+/***/ (() => {
+
+const u = up.util;
+const e = up.element;
+up.Preview = class Preview {
+    constructor({ fragment, request, renderOptions, cleaner }) {
+        this.fragment = fragment;
+        this.request = request;
+        this.renderOptions = renderOptions;
+        this._cleaner = cleaner;
+    }
+    undo(...args) {
+        if (this.ended) {
+            reportError(new up.Error('Preview used after end of request'));
+        }
+        else {
+            this._cleaner.guard(...args);
+        }
+    }
+    get origin() {
+        return this.request.origin;
+    }
+    get params() {
+        return this.request.params;
+    }
+    get layer() {
+        return this.request.layer;
+    }
+    get ended() {
+        return this.request.ended;
+    }
+    get expiredResponse() {
+        return this.renderOptions.expiredResponse;
+    }
+    get revalidating() {
+        return !!this.expiredResponse;
+    }
+    run(value, options = {}) {
+        for (let fn of up.status.resolvePreviewFns(value)) {
+            this.undo(up.error.guard(fn, this, options));
+        }
+    }
+    revert() {
+        this._cleaner.clean();
+    }
+    setAttrs(...args) {
+        let [element, attrs] = this._parseMutatorArgs(args, 'val', 'val');
+        this.undo(e.setAttrsTemp(element, attrs));
+    }
+    addClass(...args) {
+        let [element, klass] = this._parseMutatorArgs(args, 'val', 'val');
+        this.undo(e.addClassTemp(element, klass));
+    }
+    addClassBatch(elements, classes) {
+        for (let element of elements) {
+            for (let klass of classes) {
+                this.addClass(element, klass);
+            }
+        }
+    }
+    removeClass(...args) {
+        let [element, klass] = this._parseMutatorArgs(args, 'val', 'val');
+        this.undo(e.removeClassTemp(element, klass));
+    }
+    setStyle(...args) {
+        let [element, styles] = this._parseMutatorArgs(args, 'val', 'val');
+        this.undo(e.setStyleTemp(element, styles));
+    }
+    disable(...args) {
+        let [element] = this._parseMutatorArgs(args, 'val');
+        this.undo(up.form.disable(element));
+    }
+    insert(...args) {
+        let [reference, position = 'beforeend', tempValue] = this._parseMutatorArgs(args, 'val', u.isAdjacentPosition, 'val');
+        this.undo(up.fragment.insertTemp(reference, position, tempValue));
+    }
+    show(...args) {
+        let [element] = this._parseMutatorArgs(args, 'val');
+        this.undo(e.showTemp(element));
+    }
+    hide(...args) {
+        let [element] = this._parseMutatorArgs(args, 'val');
+        this.undo(e.hideTemp(element));
+    }
+    hideContent(...args) {
+        let [parent] = this._parseMutatorArgs(args, 'val');
+        let wrapper = e.wrapChildren(parent);
+        e.hide(wrapper);
+        this.undo(() => e.unwrap(wrapper));
+    }
+    showPlaceholder(...args) {
+        let [parent, placeholderReference] = this._parseMutatorArgs(args, 'val', 'val');
+        let placeholderNodes = up.fragment.provideNodes(placeholderReference, { origin: this.origin });
+        up.puts('[up-placeholder]', 'Showing placeholder %o', placeholderReference);
+        if (parent) {
+            this.swapContent(parent, placeholderNodes);
+        }
+        else if (this.layer === 'new') {
+            this.openLayer(placeholderNodes, { closeAnimation: false });
+            this.renderOptions.openAnimation = false;
+        }
+    }
+    swapContent(...args) {
+        let [parent, newContent] = this._parseMutatorArgs(args, 'val', 'val');
+        this.hideContent(parent);
+        this.insert(parent, newContent);
+    }
+    openLayer(content, options = {}) {
+        let undoDismissValue = ':undo-preview';
+        let onDismiss = ({ value }) => {
+            if (value !== undoDismissValue)
+                this.request.abort({ reason: 'Preview overlay dismissed' });
+        };
+        up.layer.open(Object.assign(Object.assign(Object.assign({}, u.pick(this.renderOptions, [...up.Layer.Overlay.VISUAL_KEYS, 'target'])), options), { content, abort: false, onDismiss }));
+        let overlay = up.layer.front;
+        this.undo(() => overlay.dismiss(undoDismissValue, { preventable: false }));
+        return overlay;
+    }
+    _parseMutatorArgs(args, ...specs) {
+        let [element, ...rest] = u.args(args, ...specs);
+        element = up.fragment.get(element, { layer: this.layer, origin: this.origin }) || this.fragment;
+        return [element, ...rest];
+    }
+};
+
+
 /***/ }),
 /* 66 */
 /***/ (() => {
@@ -5981,7 +6311,7 @@ up.ProgressBar = class ProgressBar {
         this._element = e.affix(document.body, 'up-progress-bar');
         this._element.style.transition = `width ${TRANSITION_DELAY}ms ease-out`;
         this._moveTo(0);
-        up.element.paint(this._element);
+        e.paint(this._element);
         this._width = 31;
         this._nextStep();
     }
@@ -6025,21 +6355,22 @@ up.ProgressBar = class ProgressBar {
 
 const u = up.util;
 up.RenderOptions = (function () {
-    const GLOBAL_DEFAULTS = {
-        useHungry: true,
-        useKeep: true,
-        saveScroll: true,
-        saveFocus: true,
-        focus: 'keep',
-        abort: 'target',
-        failOptions: true,
+    const NO_PREVIEWS = {
+        preview: false,
+        disable: false,
+        placeholder: false,
+        feedback: false,
     };
-    const PRELOAD_OVERRIDES = {
-        abort: false,
+    const NO_INPUT_INTERFERENCE = {
+        scroll: false,
+        focus: 'keep',
         confirm: false,
-        feedback: false,
-        cache: true,
-        background: true,
+    };
+    const NO_MOTION = {
+        transition: false,
+        animation: false,
+        openAnimation: false,
+        closeAnimation: false,
     };
     const PREFLIGHT_KEYS = [
         'url',
@@ -6053,9 +6384,13 @@ up.RenderOptions = (function () {
         'abortable',
         'confirm',
         'feedback',
+        'disable',
+        'placeholder',
+        'preview',
         'origin',
         'originLayer',
         'baseLayer',
+        'navigate',
         'fail',
         'onError',
     ];
@@ -6065,8 +6400,6 @@ up.RenderOptions = (function () {
         'history',
         'source',
         'saveScroll',
-        'navigate',
-        'baseLayer',
     ]);
     const CONTENT_KEYS = [
         'url',
@@ -6090,16 +6423,18 @@ up.RenderOptions = (function () {
             return { url: u.normalizeURL(url) };
         }
     }
-    function preloadOverrides(options) {
-        if (options.preload) {
-            return PRELOAD_OVERRIDES;
-        }
+    function removeUsePrefix(options) {
+        u.renameKey(options, 'useData', 'data');
+        u.renameKey(options, 'useHungry', 'hungry');
+        u.renameKey(options, 'useKeep', 'keep');
     }
     function preprocess(options) {
         var _a, _b;
         (_b = (_a = up.migrate).preprocessRenderOptions) === null || _b === void 0 ? void 0 : _b.call(_a, options);
-        const defaults = u.merge(GLOBAL_DEFAULTS, navigateDefaults(options));
-        return u.merge(u.omit(defaults, LATE_KEYS), { defaults }, { inputDevice: up.event.inputDevice }, options, normalizeURL(options), rememberOriginLayer(options), preloadOverrides(options));
+        up.layer.normalizeOptions(options);
+        removeUsePrefix(options);
+        const defaults = u.merge(up.fragment.config.renderOptions, navigateDefaults(options));
+        return u.merge(u.omit(defaults, LATE_KEYS), { defaults }, { inputDevice: up.event.inputDevice }, options, normalizeURL(options), rememberOriginLayer(options));
     }
     function rememberOriginLayer({ origin, originLayer }) {
         if (origin && !originLayer) {
@@ -6134,12 +6469,11 @@ up.RenderOptions = (function () {
     }
     function deriveFailOptions(preprocessedOptions) {
         let overrides = failOverrides(preprocessedOptions);
-        let layers = rememberOriginLayer(overrides);
         if (preprocessedOptions.failOptions) {
-            return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, preprocessedOptions.defaults), u.pick(preprocessedOptions, SHARED_KEYS)), overrides), layers), { failPrefixForced: true });
+            return Object.assign(Object.assign(Object.assign(Object.assign({}, preprocessedOptions.defaults), u.pick(preprocessedOptions, SHARED_KEYS)), overrides), { failPrefixForced: true });
         }
         else {
-            return Object.assign(Object.assign(Object.assign({}, preprocessedOptions), overrides), layers);
+            return Object.assign(Object.assign({}, preprocessedOptions), overrides);
         }
     }
     return {
@@ -6147,6 +6481,9 @@ up.RenderOptions = (function () {
         finalize,
         assertContentGiven,
         deriveFailOptions,
+        NO_PREVIEWS,
+        NO_MOTION,
+        NO_INPUT_INTERFERENCE,
     };
 })();
 
@@ -6238,7 +6575,6 @@ up.Request = (_a = class Request extends up.Record {
                 'failMode',
                 'failContext',
                 'origin',
-                'fragments',
                 'builtAt',
                 'wrapMethod',
                 'contentType',
@@ -6246,7 +6582,8 @@ up.Request = (_a = class Request extends up.Record {
                 'onLoading',
                 'fail',
                 'abortable',
-                'badResponseTime',
+                'lateDelay',
+                'previews',
             ];
         }
         defaults() {
@@ -6256,10 +6593,11 @@ up.Request = (_a = class Request extends up.Record {
                 headers: {},
                 timeout: up.network.config.timeout,
                 builtAt: new Date(),
+                previews: [],
             };
         }
         constructor(options) {
-            var _b, _c, _d;
+            var _b, _c;
             super(options);
             this.params = new up.Params(this.params);
             if (this.wrapMethod == null) {
@@ -6275,27 +6613,39 @@ up.Request = (_a = class Request extends up.Record {
                 this.mode || (this.mode = this.layer.mode);
                 this.failMode || (this.failMode = (_c = this.failLayer) === null || _c === void 0 ? void 0 : _c.mode);
             }
-            this.deferred = u.newDeferred();
-            (_d = this.badResponseTime) !== null && _d !== void 0 ? _d : (this.badResponseTime = u.evalOption(up.network.config.badResponseTime, this));
+            this.bindLayer = options.bindLayer || this.layer;
+            this._fragments = options.fragments;
+            this._bindFragments = options.bindFragments;
+            this._deferred = u.newDeferred();
             this._setAutoHeaders();
         }
+        get effectiveLateTime() {
+            var _b;
+            if (this.background) {
+                return false;
+            }
+            else {
+                return (_b = this.lateDelay) !== null && _b !== void 0 ? _b : u.evalOption(up.network.config.lateDelay, this);
+            }
+        }
+        isTimed() {
+            return u.isNumber(this.effectiveLateTime);
+        }
         get xhr() {
             var _b;
             return (_b = this._xhr) !== null && _b !== void 0 ? _b : (this._xhr = new XMLHttpRequest());
         }
         get fragments() {
-            if (this._fragments) {
-                return this._fragments;
-            }
-            else {
-                let steps = up.fragment.parseTargetSteps(this.target);
-                let selectors = u.map(steps, 'selector');
-                let lookupOpts = { origin: this.origin, layer: this.layer };
-                return u.compact(u.map(selectors, (selector) => up.fragment.get(selector, lookupOpts)));
-            }
+            return (this._fragments || (this._fragments = this._findFragments()));
         }
-        set fragments(value) {
-            this._fragments = value;
+        _findFragments() {
+            let steps = up.fragment.parseTargetSteps(this.target);
+            let lookupOpts = { origin: this.origin, layer: this.layer };
+            let matches = u.map(steps, (step) => up.fragment.get(step.selector, lookupOpts));
+            return u.compact(matches);
+        }
+        get bindFragments() {
+            return this._bindFragments || this.fragments;
         }
         get fragment() {
             var _b;
@@ -6311,8 +6661,10 @@ up.Request = (_a = class Request extends up.Record {
             u.task(() => {
                 this.layer = undefined;
                 this.failLayer = undefined;
+                this._bindLayer = undefined;
                 this.origin = undefined;
-                this.fragments = undefined;
+                this._fragments = undefined;
+                this._bindFragments = undefined;
             });
         }
         _extractHashFromURL() {
@@ -6366,6 +6718,11 @@ up.Request = (_a = class Request extends up.Record {
                 this.abort({ reason: 'Prevented by event listener' });
             }
         }
+        runPreviews(renderOptions) {
+            if (!this.ended && !this.fromCache) {
+                this._revertPreviews = up.status.runPreviews(this, renderOptions);
+            }
+        }
         _emitLoad() {
             let event = this.emit('up:request:load', { log: ['Loading %s', this.description] });
             return !event.defaultPrevented;
@@ -6395,35 +6752,47 @@ up.Request = (_a = class Request extends up.Record {
             }
         }
         _setAbortedState(reason) {
-            if (this._isSettled())
+            if (this.ended)
                 return;
             let message = 'Aborted request to ' + this.description + (reason ? ': ' + reason : '');
             this.state = 'aborted';
-            this.deferred.reject(new up.Aborted(message));
+            this._reject(new up.Aborted(message));
             this.emit('up:request:aborted', { log: message });
             return true;
         }
         _setOfflineState(reason) {
-            if (this._isSettled())
+            if (this.ended)
                 return;
             let message = 'Cannot load request to ' + this.description + (reason ? ': ' + reason : '');
             this.state = 'offline';
             this.emit('up:request:offline', { log: message });
-            this.deferred.reject(new up.Offline(message));
+            this._reject(new up.Offline(message));
         }
         respondWith(response) {
             this.response = response;
-            if (this._isSettled())
+            if (this.ended)
                 return;
             this.state = 'loaded';
             if (response.ok) {
-                this.deferred.resolve(response);
+                this._resolve(response);
             }
             else {
-                this.deferred.reject(response);
+                this._reject(response);
             }
         }
-        _isSettled() {
+        _resolve(response) {
+            this._onSettle();
+            this._deferred.resolve(response);
+        }
+        _reject(responseOrError) {
+            this._onSettle();
+            this._deferred.reject(responseOrError);
+        }
+        _onSettle() {
+            var _b;
+            (_b = this._revertPreviews) === null || _b === void 0 ? void 0 : _b.call(this);
+        }
+        get ended() {
             return (this.state !== 'new') && (this.state !== 'loading') && (this.state !== 'tracking');
         }
         csrfHeader() {
@@ -6473,7 +6842,7 @@ up.Request = (_a = class Request extends up.Record {
         }
         _buildEventEmitter(args) {
             return up.EventEmitter.fromEmitArgs(args, {
-                layer: this.layer,
+                layer: this.bindLayer,
                 request: this,
                 origin: this.origin
             });
@@ -6487,12 +6856,15 @@ up.Request = (_a = class Request extends up.Record {
         get description() {
             return this.method + ' ' + this.url;
         }
-        isPartOfSubtree(subtreeElements) {
-            subtreeElements = u.wrapList(subtreeElements);
-            return u.some(this.fragments, function (fragment) {
-                return u.some(subtreeElements, (subtreeElement) => subtreeElement.contains(fragment));
+        isBoundToSubtrees(subtreeRoots) {
+            subtreeRoots = u.wrapList(subtreeRoots);
+            return u.some(this.bindFragments, function (fragment) {
+                return u.some(subtreeRoots, (subtreeElement) => subtreeElement.contains(fragment));
             });
         }
+        isBoundToLayers(layers) {
+            return u.contains(layers, this.bindLayer);
+        }
         get age() {
             return new Date() - this.builtAt;
         }
@@ -6555,7 +6927,7 @@ up.Request = (_a = class Request extends up.Record {
         }
     },
     (() => {
-        u.delegate(_a.prototype, ['then', 'catch', 'finally'], function () { return this.deferred; });
+        u.delegatePromise(_a.prototype, '_deferred');
     })(),
     _a);
 
@@ -6605,8 +6977,8 @@ class Route {
                     return true;
                 if (!newValue)
                     return false;
-                let cachedTokens = u.parseTokens(cachedValue, { separator: 'comma' });
-                let newTokens = u.parseTokens(newValue, { separator: 'comma' });
+                let cachedTokens = up.fragment.splitTarget(cachedValue);
+                let newTokens = up.fragment.splitTarget(newValue);
                 return u.containsAll(cachedTokens, newTokens);
             }
             else {
@@ -6667,7 +7039,13 @@ up.Request.Cache = class Cache {
         return __awaiter(this, void 0, void 0, function* () {
             newRequest.trackedRequest = existingRequest;
             newRequest.state = 'tracking';
-            let value = yield u.always(existingRequest);
+            let value;
+            if (existingRequest.ended && existingRequest.response) {
+                value = existingRequest.response;
+            }
+            else {
+                value = yield u.always(existingRequest);
+            }
             if (value instanceof up.Response) {
                 if (options.force || existingRequest.cacheRoute.satisfies(existingRequest, newRequest)) {
                     newRequest.fromCache = true;
@@ -6683,7 +7061,7 @@ up.Request.Cache = class Cache {
             }
             else {
                 newRequest.state = existingRequest.state;
-                newRequest.deferred.reject(value);
+                newRequest._reject(value);
             }
         });
     }
@@ -6766,8 +7144,10 @@ up.Request.Queue = class Queue {
         }
     }
     _scheduleSlowTimer(request) {
-        let timeUntilLate = Math.max(request.badResponseTime - request.age, 0);
-        u.timer(timeUntilLate, () => this._checkLate());
+        if (!request.isTimed())
+            return;
+        let timeUntilLate = Math.max(request.effectiveLateTime - request.age);
+        u.timer(timeUntilLate, () => this._checkForLate());
     }
     _getMaxConcurrency() {
         return u.evalOption(up.network.config.concurrency);
@@ -6797,8 +7177,8 @@ up.Request.Queue = class Queue {
         if ((responseOrError instanceof up.Response) && responseOrError.ok) {
             up.network.registerAliasForRedirect(request, responseOrError);
         }
-        this._checkLate();
         queueMicrotask(() => this._poke());
+        u.task(() => this._checkForRecover());
     }
     _poke() {
         let request;
@@ -6807,10 +7187,7 @@ up.Request.Queue = class Queue {
         }
     }
     abort(...args) {
-        var _a;
-        let options = u.extractOptions(args);
-        let { except, reason, logOnce } = options;
-        let conditions = (_a = args[0]) !== null && _a !== void 0 ? _a : true;
+        let [conditions = true, { except, reason, logOnce }] = u.args(args, 'val', 'options');
         let tester = up.Request.tester(conditions, { except });
         for (let list of [this._currentRequests, this._queuedRequests]) {
             const abortableRequests = u.filter(list, tester);
@@ -6824,22 +7201,25 @@ up.Request.Queue = class Queue {
             }
         }
     }
-    _checkLate() {
-        const currentLate = this._isLate();
-        if (this._emittedLate !== currentLate) {
-            this._emittedLate = currentLate;
-            if (currentLate) {
-                up.emit('up:network:late', { log: 'Server is slow to respond' });
-            }
-            else {
-                up.emit('up:network:recover', { log: 'Slow requests were loaded' });
-            }
+    _checkForLate() {
+        if (!this._emittedLate && this._hasLateTimedRequests()) {
+            this._emittedLate = true;
+            up.emit('up:network:late', { log: 'Server is slow to respond' });
+        }
+    }
+    _checkForRecover() {
+        if (this._emittedLate && !this._timedRequests.length) {
+            this._emittedLate = false;
+            up.emit('up:network:recover', { log: 'Slow requests were loaded' });
         }
     }
-    _isLate() {
-        const allForegroundRequests = u.reject(this.allRequests, 'background');
+    get _timedRequests() {
+        return this.allRequests.filter((request) => request.isTimed());
+    }
+    _hasLateTimedRequests() {
         const timerTolerance = 1;
-        return u.some(allForegroundRequests, (request) => request.age >= (request.badResponseTime - timerTolerance));
+        const isLate = (request) => request.age >= (request.effectiveLateTime - timerTolerance);
+        return u.some(this._timedRequests, isLate);
     }
 };
 
@@ -7000,7 +7380,7 @@ up.Response = class Response extends up.Record {
     }
     get varyHeaderNames() {
         let varyHeaderValue = this.header('Vary');
-        return u.parseTokens(varyHeaderValue, { separator: 'comma' });
+        return u.getSimpleTokens(varyHeaderValue, { separator: ',' });
     }
     get contentType() {
         return this.header('Content-Type');
@@ -7043,15 +7423,15 @@ const u = up.util;
 const e = up.element;
 const FULL_DOCUMENT_PATTERN = /^\s*<(html|!DOCTYPE)\b/i;
 up.ResponseDoc = (_a = class ResponseDoc {
-        constructor({ document, fragment, content, target, origin, cspNonces, match }) {
+        constructor({ document, fragment, content, target, origin, data, cspNonces, match }) {
             if (document) {
-                this._parseDocument(document);
+                this._parseDocument(document, origin, data);
             }
             else if (fragment) {
-                this._parseFragment(fragment);
+                this._parseFragment(fragment, origin, data);
             }
             else {
-                this._parseContent(content || '', target);
+                this._parseContent(content || '', origin, target, data);
             }
             this._cspNonces = cspNonces;
             if (origin) {
@@ -7062,46 +7442,49 @@ up.ResponseDoc = (_a = class ResponseDoc {
             }
             this._match = match;
         }
-        _parseDocument(value) {
+        _parseDocument(value, origin, data) {
             if (value instanceof Document) {
                 this._document = value;
                 this._isFullDocument = true;
             }
             else if (u.isString(value)) {
-                this._document = e.createBrokenDocumentFromHTML(value);
                 this._isFullDocument = FULL_DOCUMENT_PATTERN.test(value);
-                this._isDocumentBroken = true;
+                let htmlParser = (html) => [e.createBrokenDocumentFromHTML(html)];
+                let nodes = up.fragment.provideNodes(value, { origin, data, htmlParser });
+                if (nodes[0] instanceof Document) {
+                    this._document = nodes[0];
+                }
+                else {
+                    this._document = this._buildFauxDocument(nodes);
+                }
             }
             else {
                 this._document = this._buildFauxDocument(value);
-                this._isFullDocument = value.matches('html');
             }
         }
-        _parseFragment(value) {
-            let parsed = u.isString(value) ? e.createFromHTML(value) : value;
-            this._document = this._buildFauxDocument(parsed);
+        _parseDocumentFromHTML(html) {
+            return e.createBrokenDocumentFromHTML(html);
         }
-        _parseContent(value, target) {
+        _parseFragment(value, origin, data) {
+            let element = e.extractSingular(up.fragment.provideNodes(value, { origin, data }));
+            this._document = this._buildFauxDocument(element);
+        }
+        _parseContent(value, origin, target, data) {
             if (!target)
                 up.fail("must pass a { target } when passing { content }");
             let simplifiedTarget = u.map(up.fragment.parseTargetSteps(target), 'selector').join();
-            const matchingElement = e.createFromSelector(simplifiedTarget);
-            if (u.isString(value)) {
-                matchingElement.innerHTML = value;
-            }
-            else {
-                matchingElement.appendChild(value);
-            }
+            let nodes = up.fragment.provideNodes(value, { origin, data });
+            let matchingElement = e.createFromSelector(simplifiedTarget, { content: nodes });
             this._document = this._buildFauxDocument(matchingElement);
         }
-        _buildFauxDocument(node) {
+        _buildFauxDocument(nodes) {
+            nodes = u.wrapList(nodes);
             let fauxDocument = document.createElement('up-document');
-            fauxDocument.append(node);
-            fauxDocument.documentElement = node;
+            fauxDocument.append(...nodes);
             return fauxDocument;
         }
         rootSelector() {
-            return up.fragment.toTarget(this._document.documentElement);
+            return up.fragment.toTarget(this._document.children[0]);
         }
         get title() {
             return this._fromHead(this._getTitleText);
@@ -7183,7 +7566,7 @@ up.ResponseDoc = (_a = class ResponseDoc {
         }
         finalizeElement(element) {
             up.NonceableCallback.adoptNonces(element, this._cspNonces);
-            if (this._isDocumentBroken) {
+            if (this._document instanceof Document) {
                 let brokenElements = e.subtree(element, ':is(noscript,script,audio,video):not(.up-keeping, .up-keeping *)');
                 u.each(brokenElements, e.fixParserDamage);
             }
@@ -7293,17 +7676,18 @@ up.RevealMotion = class RevealMotion {
 /***/ (() => {
 
 const u = up.util;
-const CSS_HAS_SUFFIX_PATTERN = /:has\(([^)]+)\)$/;
+const e = up.element;
 up.Selector = class Selector {
     constructor(selector, elementOrDocument, options = {}) {
         var _a;
         this._filters = [];
-        if (!options.destroying) {
+        let matchingInExternalDocument = elementOrDocument && !document.contains(elementOrDocument);
+        if (!matchingInExternalDocument && !options.destroying) {
             this._filters.push(up.fragment.isNotDestroying);
         }
-        let matchingInExternalDocument = elementOrDocument && !document.contains(elementOrDocument);
+        this._ignoreLayers = matchingInExternalDocument || options.layer === 'any' || up.layer.count === 1;
         let expandTargetLayer;
-        if (matchingInExternalDocument || options.layer === 'any') {
+        if (this._ignoreLayers) {
             expandTargetLayer = up.layer.root;
         }
         else {
@@ -7314,44 +7698,45 @@ up.Selector = class Selector {
             this._filters.push(match => u.some(this._layers, layer => layer.contains(match)));
             expandTargetLayer = this._layers[0];
         }
-        let expandedTargets = up.fragment.expandTargets(selector, Object.assign(Object.assign({}, options), { layer: expandTargetLayer }));
-        this._selectors = expandedTargets.map((target) => {
-            if (!up.browser.canHasSelector()) {
-                target = target.replace(CSS_HAS_SUFFIX_PATTERN, (match, descendantSelector) => {
-                    this._filters.push(element => element.querySelector(descendantSelector));
-                    return '';
-                });
-            }
-            return target || '*';
-        });
+        this._selectors = up.fragment.expandTargets(selector, Object.assign(Object.assign({}, options), { layer: expandTargetLayer }));
         this._unionSelector = this._selectors.join() || 'match-none';
     }
     matches(element) {
-        return element.matches(this._unionSelector) && this._passesFilter(element);
+        return e.elementLikeMatches(element, this._unionSelector) && this._passesFilter(element);
     }
     closest(element) {
-        let parentElement;
-        if (this.matches(element)) {
-            return element;
+        return this._filterOne(element.closest(this._unionSelector));
+    }
+    descendants(root = document) {
+        return this._filterMany(root.querySelectorAll(this._unionSelector));
+    }
+    firstDescendant(root) {
+        if (this._ignoreLayers) {
+            root || (root = document);
+            return this._firstSelectorMatch((selector) => root.querySelectorAll(selector));
         }
-        else if (parentElement = element.parentElement) {
-            return this.closest(parentElement);
+        else {
+            return u.findResult(this._layers, (layer) => {
+                return this._firstSelectorMatch((selector) => e.subtree(layer.element, selector));
+            });
         }
     }
+    subtree(root) {
+        return this._filterMany(e.subtree(root, this._unionSelector));
+    }
+    _firstSelectorMatch(fn) {
+        return u.findResult(this._selectors, (selector) => {
+            return this._filterMany(fn(selector))[0];
+        });
+    }
     _passesFilter(element) {
-        return u.every(this._filters, filter => filter(element));
+        return element && u.every(this._filters, filter => filter(element));
     }
-    descendants(root = document) {
-        const results = u.flatMap(this._selectors, selector => root.querySelectorAll(selector));
-        return u.filter(results, element => this._passesFilter(element));
+    _filterOne(element) {
+        return u.presence(element, this._passesFilter.bind(this));
     }
-    subtree(root) {
-        const results = [];
-        if (!(root instanceof Document) && this.matches(root)) {
-            results.push(root);
-        }
-        results.push(...this.descendants(root));
-        return results;
+    _filterMany(elements) {
+        return u.filter(elements, this._passesFilter.bind(this));
     }
 };
 
@@ -7487,7 +7872,7 @@ up.URLPattern = class URLPattern {
         this._groups = [];
         const positiveList = [];
         const negativeList = [];
-        for (let pattern of u.parseTokens(fullPattern)) {
+        for (let pattern of u.getSimpleTokens(fullPattern)) {
             if (pattern[0] === '-') {
                 negativeList.push(pattern.substring(1));
             }
@@ -7611,7 +7996,7 @@ up.framework = (function () {
         return !supportIssue();
     }
     function supportIssue() {
-        for (let feature of ['URL', 'Proxy', 'Promise', 'DOMParser', 'FormData']) {
+        for (let feature of ['Promise', 'DOMParser', 'FormData', 'reportError']) {
             if (!window[feature]) {
                 return `Browser doesn't support the ${feature} API`;
             }
@@ -7619,6 +8004,11 @@ up.framework = (function () {
         if (document.compatMode === 'BackCompat') {
             return 'Browser is in quirks mode (missing DOCTYPE?)';
         }
+        for (let selector of [':is(*)', ':has(*)']) {
+            if (!CSS.supports(`selector(${selector})`)) {
+                return `Browser doesn't support the ${selector} selector`;
+            }
+        }
     }
     return {
         onEvaled,
@@ -7788,29 +8178,32 @@ up.protocol = (function () {
         return extractHeader(xhr, 'expireCache') || ((_b = (_a = up.migrate).clearCacheFromXHR) === null || _b === void 0 ? void 0 : _b.call(_a, xhr));
     }
     function contextFromXHR(xhr) {
-        return extractHeader(xhr, 'context', JSON.parse);
+        return extractHeader(xhr, 'context', u.parseRelaxedJSON);
     }
     function methodFromXHR(xhr) {
         return extractHeader(xhr, 'method', u.normalizeMethod);
     }
     function titleFromXHR(xhr) {
         var _a, _b, _c;
-        return (_c = (_b = (_a = up.migrate).titleFromXHR) === null || _b === void 0 ? void 0 : _b.call(_a, xhr)) !== null && _c !== void 0 ? _c : extractHeader(xhr, 'title', JSON.parse);
+        return (_c = (_b = (_a = up.migrate).titleFromXHR) === null || _b === void 0 ? void 0 : _b.call(_a, xhr)) !== null && _c !== void 0 ? _c : extractHeader(xhr, 'title', u.parseRelaxedJSON);
     }
     function eventPlansFromXHR(xhr) {
-        return extractHeader(xhr, 'events', JSON.parse);
+        return extractHeader(xhr, 'events', u.parseRelaxedJSON);
     }
     function acceptLayerFromXHR(xhr) {
-        return extractHeader(xhr, 'acceptLayer', JSON.parse);
+        return extractHeader(xhr, 'acceptLayer', u.parseRelaxedJSON);
     }
     function dismissLayerFromXHR(xhr) {
-        return extractHeader(xhr, 'dismissLayer', JSON.parse);
+        return extractHeader(xhr, 'dismissLayer', u.parseRelaxedJSON);
     }
     const initialRequestMethod = u.memoize(function () {
         return u.normalizeMethod(up.browser.popCookie('_up_method'));
     });
     function locationFromXHR(xhr) {
-        return extractHeader(xhr, 'location') || xhr.responseURL;
+        let location = extractHeader(xhr, 'location') || xhr.responseURL;
+        if (location) {
+            return u.normalizeURL(location);
+        }
     }
     const config = new up.Config(() => ({
         methodParam: '_method',
@@ -7975,6 +8368,9 @@ up.script = (function () {
         ],
         nonceableAttributes: [
             'up-watch',
+            'up-on-keep',
+            'up-on-hungry',
+            'up-on-opened',
             'up-on-accepted',
             'up-on-dismissed',
             'up-on-loaded',
@@ -7984,7 +8380,10 @@ up.script = (function () {
             'up-on-offline',
         ],
         scriptSelectors: [
-            'script'
+            'script:not([type])',
+            'script[type="text/javascript"]',
+            'script[type="module"]',
+            'script[type="importmap"]',
         ],
         noScriptSelectors: [
             'script[type="application/ld+json"]'
@@ -8015,10 +8414,13 @@ up.script = (function () {
     function registerAttrCompiler(...args) {
         let [attr, options, valueCallback] = parseProcessorArgs(args);
         let selector = `[${attr}]`;
+        let { defaultValue } = options;
         let callback = (element) => {
-            let value = e.booleanOrStringAttr(element, attr, options.defaultValue);
-            if (!value)
+            let value = e.booleanOrStringAttr(element, attr);
+            if (value === false)
                 return;
+            if (u.isDefined(defaultValue) && value === true)
+                value = defaultValue;
             return valueCallback(element, value);
         };
         registerProcessor([selector, options, callback]);
@@ -8045,11 +8447,7 @@ up.script = (function () {
         }
     }
     const parseProcessorArgs = function (args) {
-        const defaults = u.extractOptions(args);
-        const selector = args.shift();
-        const callback = args.pop();
-        const options = Object.assign(Object.assign({}, defaults), u.extractOptions(args));
-        return [selector, options, callback];
+        return u.args(args, 'val', 'options', 'callback');
     };
     function buildProcessor(args, overrides) {
         let [selector, options, callback] = parseProcessorArgs(args);
@@ -8087,18 +8485,16 @@ up.script = (function () {
         pass.run();
     }
     function registerDestructor(element, destructor) {
-        let destructors = element.upDestructors;
-        if (!destructors) {
-            destructors = [];
-            element.upDestructors = destructors;
-            element.classList.add('up-can-clean');
-        }
-        if (u.isArray(destructor)) {
-            destructors.push(...destructor);
-        }
-        else {
-            destructors.push(destructor);
-        }
+        let fns = u.scanFunctions(destructor);
+        if (!fns.length)
+            return;
+        let registry = (element.upDestructors || (element.upDestructors = buildDestructorRegistry(element)));
+        registry.guard(fns);
+    }
+    function buildDestructorRegistry(element) {
+        let registry = u.cleaner();
+        registry(e.addClassTemp(element, 'up-can-clean'));
+        return registry;
     }
     function hello(element, options = {}) {
         element = up.fragment.get(element, options);
@@ -8115,18 +8511,12 @@ up.script = (function () {
         return element.upData || (element.upData = buildData(element));
     }
     function buildData(element) {
-        if (!element.getAttribute) {
-            return {};
-        }
-        let rawJSON = element.getAttribute('up-data');
-        let parsedJSON;
-        if (rawJSON) {
-            parsedJSON = JSON.parse(rawJSON);
-            if (!u.isOptions(parsedJSON)) {
-                return parsedJSON;
-            }
+        var _a;
+        let parsedJSON = (_a = e.jsonAttr(element, 'up-data')) !== null && _a !== void 0 ? _a : {};
+        if (!u.isOptions(parsedJSON)) {
+            return parsedJSON;
         }
-        return Object.assign(Object.assign(Object.assign({}, element.dataset), parsedJSON), element.upCompileData);
+        return Object.assign(Object.assign(Object.assign(Object.assign({}, element.upTemplateData), element.dataset), parsedJSON), element.upCompileData);
     }
     function findAssets(head = document.head) {
         return head.querySelectorAll(config.selector('assetSelectors'));
@@ -8146,6 +8536,9 @@ up.script = (function () {
         let selector = config.selector('scriptSelectors');
         u.each(e.subtree(root, selector), disableScript);
     }
+    function isScript(value) {
+        return config.matches(value, 'scriptSelectors');
+    }
     function reset() {
         registeredCompilers = u.filter(registeredCompilers, 'isDefault');
         registeredMacros = u.filter(registeredMacros, 'isDefault');
@@ -8163,6 +8556,7 @@ up.script = (function () {
         findAssets,
         assertAssetsOK,
         disableSubtree: disableScriptsInSubtree,
+        isScript,
     };
 })();
 up.compiler = up.script.compiler;
@@ -8312,7 +8706,7 @@ up.history = (function () {
         }
     }
     function updateLang(newLang) {
-        e.toggleAttr(e.root, 'lang', newLang, !!newLang);
+        e.setAttrPresence(e.root, 'lang', newLang, !!newLang);
     }
     up.macro('[up-back]', function (link) {
         if (previousLocation) {
@@ -8354,14 +8748,18 @@ up.fragment = (function () {
             return tagName;
         }
     }
+    const STRONG_TARGET_DERIVERS = [
+        '[up-id]',
+        '[id]',
+        'html',
+        'head',
+        'body',
+    ];
     const config = new up.Config(() => ({
         badTargetClasses: [/^up-/],
+        strongTargetDerivers: STRONG_TARGET_DERIVERS,
         targetDerivers: [
-            '[up-id]',
-            '[id]',
-            'html',
-            'head',
-            'body',
+            ...STRONG_TARGET_DERIVERS,
             'main',
             '[up-main]',
             upTagName,
@@ -8379,10 +8777,19 @@ up.fragment = (function () {
             'form',
         ],
         verifyDerivedTarget: true,
+        renderOptions: {
+            hungry: true,
+            keep: true,
+            saveScroll: true,
+            saveFocus: true,
+            focus: 'keep',
+            abort: 'target',
+            failOptions: true,
+            feedback: true,
+        },
         navigateOptions: {
             cache: 'auto',
             revalidate: 'auto',
-            feedback: true,
             fallback: true,
             focus: 'auto',
             scroll: 'auto',
@@ -8395,7 +8802,7 @@ up.fragment = (function () {
         autoFocus: ['hash', 'autofocus', 'main-if-main', 'keep', 'target-if-lost'],
         autoScroll: ['hash', 'layer-if-main'],
         autoRevalidate: (response) => response.expired,
-        skipResponse: defaultSkipResponse
+        skipResponse: defaultSkipResponse,
     }));
     u.delegate(config, ['mainTargets'], () => up.layer.config.any);
     function defaultSkipResponse({ response, expiredResponse }) {
@@ -8455,14 +8862,12 @@ up.fragment = (function () {
         return fragment.isConnected && isNotDestroying(fragment);
     }
     function getSmart(...args) {
-        const options = u.extractOptions(args);
-        const selector = args.pop();
-        const root = args[0];
-        if (u.isElementish(selector)) {
+        let [root, selector, options] = parseGetArgs(args);
+        if (u.isElementLike(selector)) {
             return e.get(selector);
         }
         if (root) {
-            return getDumb(root, selector, options);
+            return getFirstDescendant(root, selector, options);
         }
         return new up.FragmentFinder({
             selector,
@@ -8471,13 +8876,16 @@ up.fragment = (function () {
             match: options.match,
         }).find();
     }
-    function getDumb(...args) {
-        return getAll(...args)[0];
+    function getFirstDescendant(...args) {
+        let [root, selectorString, options] = parseGetArgs(args);
+        let selector = new up.Selector(selectorString, root, options);
+        return selector.firstDescendant(root);
+    }
+    function parseGetArgs(args) {
+        return u.args(args, 'val', 'val', 'options');
     }
     function getAll(...args) {
-        const options = u.extractOptions(args);
-        let selectorString = args.pop();
-        const root = args[0];
+        let [root, selectorString, options] = parseGetArgs(args);
         if (u.isElement(selectorString)) {
             return [selectorString];
         }
@@ -8585,8 +8993,9 @@ up.fragment = (function () {
     function cannotTarget(element) {
         throw new up.CannotTarget(untargetableMessage(element));
     }
-    function tryToTarget(element, options) {
-        return u.findResult(config.targetDerivers, function (deriver) {
+    function tryToTarget(element, options = {}) {
+        let derivers = options.strong ? config.strongTargetDerivers : config.targetDerivers;
+        return u.findResult(derivers, function (deriver) {
             let target = deriveTarget(element, deriver);
             if (target && isGoodTarget(target, element, options)) {
                 return target;
@@ -8612,7 +9021,7 @@ up.fragment = (function () {
         }
     }
     function deriveTargetFromPattern(element, deriver) {
-        let { includePath, excludeRaw } = up.element.parseSelector(deriver);
+        let { includePath, excludeRaw } = e.parseSelector(deriver);
         if (includePath.length !== 1) {
             throw new up.CannotParse(deriver);
         }
@@ -8650,7 +9059,9 @@ up.fragment = (function () {
         return result;
     }
     function isGoodTarget(target, element, options = {}) {
-        return !isAlive(element) || !config.verifyDerivedTarget || up.fragment.get(target, Object.assign({ layer: element }, options)) === element;
+        var _a;
+        let verify = (_a = options.verify) !== null && _a !== void 0 ? _a : config.verifyDerivedTarget;
+        return !isAlive(element) || !verify || up.fragment.get(target, Object.assign({ layer: element }, options)) === element;
     }
     function matchesPattern(pattern, str) {
         if (u.isRegExp(pattern)) {
@@ -8692,7 +9103,7 @@ up.fragment = (function () {
                 let firstSwappableTarget = toTarget(layer.getFirstSwappableElement(), options);
                 targets.unshift(target.replace(LAYER_PSEUDO, firstSwappableTarget));
             }
-            else if (u.isElementish(target)) {
+            else if (u.isElementLike(target)) {
                 expanded.push(toTarget(target, options));
             }
             else if (u.isString(target)) {
@@ -8719,11 +9130,13 @@ up.fragment = (function () {
             }
         });
     }
-    function resolveOrigin(...args) {
-        return (up.migrate.resolveOrigin || modernResolveOrigin)(...args);
+    function resolveOrigin(target, options) {
+        if (!u.isString(target))
+            return target;
+        return (up.migrate.resolveOrigin || modernResolveOrigin)(target, options);
     }
     function splitTarget(target) {
-        return u.parseTokens(target, { separator: 'comma' });
+        return u.getComplexTokens(target);
     }
     function parseTargetSteps(target, options = {}) {
         var _a;
@@ -8736,7 +9149,7 @@ up.fragment = (function () {
                 continue;
             let placement = defaultPlacement;
             let maybe = defaultMaybe;
-            selector = selector.replace(/\b::?(before|after)\b/, (_match, customPlacement) => {
+            selector = selector.replace(/\b::?(before|after|content)\b/, (_match, customPlacement) => {
                 placement = customPlacement;
                 return '';
             });
@@ -8800,13 +9213,13 @@ up.fragment = (function () {
         let elements;
         if (options.target) {
             elements = getAll(options.target, options);
-            testFn = (request) => request.isPartOfSubtree(elements);
+            testFn = (request) => request.isBoundToSubtrees(elements);
             reason || (reason = 'Aborting requests within fragment');
         }
         else {
             let layers = up.layer.getAll(options);
             elements = u.map(layers, 'element');
-            testFn = (request) => u.contains(layers, request.layer);
+            testFn = (request) => request.isBoundToLayers(layers);
             reason || (reason = 'Aborting requests within ' + layers.join(', '));
         }
         let testFnWithAbortable = (request) => request.abortable && testFn(request);
@@ -8821,8 +9234,8 @@ up.fragment = (function () {
         up.destructor(fragment, unsubscribe);
         return unsubscribe;
     }
-    function onFirstIntersect(origin, callback, { margin = 0 } = {}) {
-        if (e.isIntersectingWindow(origin, { margin })) {
+    function onFirstIntersect(element, callback, { margin = 0 } = {}) {
+        if (e.isIntersectingWindow(element, { margin })) {
             callback();
             return;
         }
@@ -8837,15 +9250,63 @@ up.fragment = (function () {
         }
         let observer = new IntersectionObserver(processIntersectEntries, { rootMargin: `${margin}px` });
         let disconnect = () => observer.disconnect();
-        observer.observe(origin);
-        onAborted(origin, disconnect);
+        observer.observe(element);
+        up.destructor(element, disconnect);
+    }
+    const STARTS_WITH_SELECTOR = /^([\w-]+|\*)?(#|\.|[:[][a-z-]{3,})/;
+    function provideNodes(value, { origin, originLayer, data, htmlParser = e.createNodesFromHTML } = {}) {
+        if (u.isString(value) && STARTS_WITH_SELECTOR.test(value)) {
+            let [parsedValue, parsedData] = u.parseScalarJSONPairs(value)[0];
+            data = Object.assign(Object.assign({}, data), parsedData);
+            value = up.fragment.get(parsedValue, { layer: 'closest', origin, originLayer }) || up.fail(`Cannot find template "%s"`, value);
+        }
+        if (u.isString(value)) {
+            value = htmlParser(value);
+        }
+        if (isTemplate(value)) {
+            value = cloneTemplate(value, data, { htmlParser });
+        }
+        return u.wrapList(value);
+    }
+    function isTemplate(value) {
+        return u.isElement(value) && value.matches('template, script[type]') && !up.script.isScript(value);
+    }
+    function cloneTemplate(templateOrSelector, data = {}, { origin, htmlParser } = {}) {
+        var _a;
+        let template = getSmart(templateOrSelector, { origin }) || up.fail('Template not found: %o', templateOrSelector);
+        let event = up.emit(template, 'up:template:clone', { data, nodes: null, log: ["Using template %o", templateOrSelector] });
+        let nodes = (_a = event.nodes) !== null && _a !== void 0 ? _a : defaultTemplateNodes(template, htmlParser);
+        for (let node of nodes) {
+            node.upTemplateData = data;
+        }
+        return nodes;
+    }
+    function defaultTemplateNodes(template, htmlParser = e.createNodesFromHTML) {
+        let templateText = template.innerHTML;
+        return htmlParser(templateText);
+    }
+    function insertTemp(...args) {
+        let [reference, position = 'beforeend', tempValue] = u.args(args, 'val', u.isAdjacentPosition, 'val');
+        let tempNodes = provideNodes(tempValue, { origin: reference });
+        let tempElement = e.wrapIfRequired(tempNodes);
+        let oldPosition = document.contains(tempElement) && e.documentPosition(tempElement);
+        reference.insertAdjacentElement(position, tempElement);
+        if (oldPosition) {
+            return () => {
+                oldPosition[0].insertAdjacentElement(oldPosition[1], tempElement);
+            };
+        }
+        else {
+            up.hello(tempElement);
+            return () => up.destroy(tempElement);
+        }
     }
     up.on('up:framework:boot', function () {
         const { documentElement } = document;
         documentElement.setAttribute('up-source', normalizeSource(location.href));
         up.hello(documentElement);
         if (!up.browser.canPushState()) {
-            return up.warn('Cannot push history changes. Next fragment update will load in a new page.');
+            return up.warn('Cannot push history changes. Next render pass with history will load a full page.');
         }
     });
     return {
@@ -8855,7 +9316,7 @@ up.fragment = (function () {
         render,
         navigate,
         get: getSmart,
-        getDumb,
+        getFirstDescendant,
         all: getAll,
         subtree: getSubtree,
         contains,
@@ -8889,6 +9350,9 @@ up.fragment = (function () {
         targetForSteps,
         compressNestedSteps,
         containsMainPseudo,
+        insertTemp,
+        provideNodes,
+        cloneTemplate,
     };
 })();
 up.reload = up.fragment.reload;
@@ -8896,6 +9360,7 @@ up.destroy = up.fragment.destroy;
 up.render = up.fragment.render;
 up.navigate = up.fragment.navigate;
 up.visit = up.fragment.visit;
+up.template = { clone: up.fragment.cloneTemplate };
 u.delegate(up, ['context'], () => up.layer.current);
 
 
@@ -8929,7 +9394,7 @@ up.viewport = (function () {
     up.compiler(config.selectorFn('anchoredRightSelectors'), function (element) {
         return bodyShifter.onAnchoredElementInserted(element);
     });
-    function reveal(element, options) {
+    const reveal = up.mockable(function (element, options) {
         var _a, _b;
         options = u.options(options);
         element = f.get(element, options);
@@ -8942,7 +9407,7 @@ up.viewport = (function () {
         const motion = new up.RevealMotion(element, options);
         motion.start();
         return ((_b = (_a = up.migrate).formerlyAsync) === null || _b === void 0 ? void 0 : _b.call(_a, 'up.reveal()')) || true;
-    }
+    });
     function doFocus(element, { preventScroll, force, inputDevice, focusVisible } = {}) {
         if (force) {
             if (!element.hasAttribute('tabindex') && element.tabIndex === -1) {
@@ -8975,7 +9440,7 @@ up.viewport = (function () {
     function revealHash(hash = location.hash, options) {
         let match = firstHashTarget(hash, options);
         if (match) {
-            return up.reveal(match, { top: true });
+            return reveal(match, { top: true });
         }
     }
     function allSelector() {
@@ -9079,11 +9544,11 @@ up.viewport = (function () {
         return new up.FIFOCache({ capacity: 30, normalizeKey: u.matchableURL });
     }
     function parseOptions(args) {
-        const options = u.copy(u.extractOptions(args));
+        const [reference, options] = u.args(args, 'val', 'options');
         options.layer = up.layer.get(options);
         let viewports;
-        if (args[0]) {
-            viewports = [closest(args[0], options)];
+        if (reference) {
+            viewports = [closest(reference, options)];
         }
         else if (options.around) {
             viewports = getAround(options.around, options);
@@ -9144,7 +9609,7 @@ up.viewport = (function () {
     function firstHashTarget(hash, options = {}) {
         if (hash = pureHash(hash)) {
             const selector = [
-                e.attrSelector('id', hash),
+                e.idSelector(hash),
                 'a' + e.attrSelector('name', hash)
             ].join();
             return f.get(selector, options);
@@ -9170,16 +9635,19 @@ up.viewport = (function () {
         }
         return to;
     }
-    let userScrolled = false;
-    up.on('scroll', { once: true, beforeBoot: true }, () => userScrolled = true);
-    up.on('up:framework:boot', function () {
-        u.task(function () {
-            if (!userScrolled) {
-                return revealHash();
-            }
-        });
+    document.addEventListener('DOMContentLoaded', function () {
+        revealHash();
+        u.task(revealHash);
     });
     up.on(window, 'hashchange', () => revealHash());
+    up.on('up:click', 'a[href^="#"]', function (event, link) {
+        if (link.hash !== location.hash)
+            return;
+        if (up.link.isFollowable(link))
+            return;
+        if (revealHash(link.hash))
+            up.event.halt(event);
+    });
     return {
         reveal,
         revealHash,
@@ -9513,7 +9981,7 @@ up.network = (function () {
         cacheSize: 70,
         cacheExpireAge: 15 * 1000,
         cacheEvictAge: 90 * 60 * 1000,
-        badResponseTime: 400,
+        lateDelay: 400,
         fail(response) { return (response.status < 200 || response.status > 299) && response.status !== 304; },
         autoCache(request) { return request.isSafe(); },
         expireCache(request, _response) { return !request.isSafe(); },
@@ -9539,10 +10007,7 @@ up.network = (function () {
     }
     function parseRequestOptions(args) {
         var _a, _b;
-        const options = u.extractOptions(args);
-        if (!options.url) {
-            options.url = args[0];
-        }
+        let options = u.parseArgIntoOptions(args, 'url');
         (_b = (_a = up.migrate).handleRequestOptions) === null || _b === void 0 ? void 0 : _b.call(_a, options);
         return options;
     }
@@ -9698,7 +10163,7 @@ up.layer = (function () {
                 openAnimation: 'fade-in',
                 closeAnimation: 'fade-out',
                 dismissLabel: '×',
-                dismissAriaLabel: 'Dismiss dialog',
+                dismissARIALabel: 'Dismiss dialog',
                 dismissable: true,
                 history: 'auto',
                 trapFocus: true,
@@ -9779,10 +10244,7 @@ up.layer = (function () {
                 }
             }
         }
-        else if (options.mode) {
-            options.layer = 'new';
-        }
-        else if (u.isElementish(options.target)) {
+        else if (u.isElementLike(options.target)) {
             options.layer = stack.get(options.target, { normalizeLayerOptions: false });
         }
         else if (options.origin) {
@@ -9980,7 +10442,7 @@ up.link = (function () {
         parser.boolean('abortable');
         parser.boolean('background');
         parser.string('contentType');
-        parser.number('badResponseTime');
+        parser.booleanOrNumber('lateDelay');
         parser.number('timeout');
         return options;
     }
@@ -9990,7 +10452,6 @@ up.link = (function () {
         options = u.options(options);
         const parser = new up.OptionsParser(link, options, Object.assign({ fail: true }, parserOptions));
         parser.include(parseRequestOptions);
-        parser.boolean('feedback');
         options.origin || (options.origin = link);
         parser.boolean('fail');
         parser.boolean('navigate', { default: true });
@@ -9998,11 +10459,12 @@ up.link = (function () {
         parser.string('target');
         parser.booleanOrString('fallback');
         parser.string('match');
-        parser.string('content');
-        parser.string('fragment');
         parser.string('document');
-        parser.boolean('useKeep');
-        parser.boolean('useHungry');
+        parser.string('fragment');
+        parser.string('content');
+        parser.boolean('keep', { attr: 'up-use-keep' });
+        parser.boolean('hungry', { attr: 'up-use-hungry' });
+        parser.json('data', { attr: 'up-use-data' });
         parser.callback('onLoaded');
         parser.callback('onRendered', { mainKey: 'result' });
         parser.callback('onFinished', { mainKey: 'result' });
@@ -10026,6 +10488,7 @@ up.link = (function () {
         parser.string('acceptLocation');
         parser.string('dismissLocation');
         parser.booleanOrString('history');
+        parser.include(up.status.statusOptions);
         parser.booleanOrString('focus');
         parser.boolean('saveScroll');
         parser.boolean('saveFocus');
@@ -10051,7 +10514,7 @@ up.link = (function () {
             return Promise.reject(new up.Error(issue));
         }
         const guardEvent = up.event.build('up:link:preload', { log: ['Preloading link %o', link] });
-        return follow(link, Object.assign(Object.assign({ abortable: false }, options), { guardEvent, preload: true }));
+        return follow(link, Object.assign(Object.assign(Object.assign(Object.assign({ abort: false, abortable: false, background: true, cache: true }, up.RenderOptions.NO_INPUT_INTERFERENCE), up.RenderOptions.NO_PREVIEWS), options), { guardEvent, preload: true }));
     }
     function preloadIssue(link) {
         if (!isSafe(link)) {
@@ -10169,7 +10632,7 @@ up.link = (function () {
         return follow(link, forcedOptions, { defaults });
     }
     up.attribute('up-defer', { defaultValue: 'insert' }, function (link, condition) {
-        let doLoad = () => up.error.muteUncriticalRejection(loadDeferred(link));
+        let doLoad = (options) => up.error.muteUncriticalRejection(loadDeferred(link, options));
         onLoadCondition(condition, link, doLoad);
     });
     up.on('up:click', config.selectorFn('followSelectors'), function (event, link) {
@@ -10183,15 +10646,16 @@ up.link = (function () {
         let childLink = e.get(area, childLinkSelector);
         if (childLink) {
             e.setMissingAttrs(area, Object.assign({ 'up-href': e.attr(childLink, 'href') }, e.upAttrs(childLink)));
-            area.classList.add(...e.upClasses(childLink));
+            e.addClasses(area, e.upClasses(childLink));
             makeFollowable(area);
         }
     });
     up.compiler(config.selectorFn('preloadSelectors'), function (link) {
-        var _a;
         if (!isPreloadDisabled(link)) {
-            let doPreload = () => up.error.muteUncriticalRejection(preload(link));
-            let condition = (_a = e.booleanOrStringAttr(link, 'up-preload', null)) !== null && _a !== void 0 ? _a : 'hover';
+            let doPreload = (options) => up.error.muteUncriticalRejection(preload(link, options));
+            let condition = e.booleanOrStringAttr(link, 'up-preload');
+            if (condition === true || u.isUndefined(condition))
+                condition = 'hover';
             onLoadCondition(condition, link, doPreload);
         }
     });
@@ -10229,10 +10693,11 @@ up.form = (function () {
     const e = up.element;
     const config = new up.Config(() => ({
         groupSelectors: ['[up-form-group]', 'fieldset', 'label', 'form'],
-        fieldSelectors: ['select', 'input:not([type=submit]):not([type=image])', 'button[type]:not([type=submit])', 'textarea'],
+        fieldSelectors: ['select', 'input:not([type=submit], [type=image], [type=button])', 'button[type]:not([type=submit], [type=button])', 'textarea'],
         submitSelectors: ['form:is([up-submit], [up-target], [up-layer], [up-transition])'],
         noSubmitSelectors: ['[up-submit=false]', '[target]', e.crossOriginSelector('action')],
         submitButtonSelectors: ['input[type=submit]', 'input[type=image]', 'button[type=submit]', 'button:not([type])'],
+        genericButtonSelectors: ['input[type=button]', 'button[type=button]'],
         watchInputEvents: ['input', 'change'],
         watchInputDelay: 0,
         watchChangeEvents: ['change'],
@@ -10257,6 +10722,9 @@ up.form = (function () {
     function findSubmitButtons(root) {
         return e.subtree(root, submitButtonSelector());
     }
+    function findGenericButtons(root) {
+        return e.subtree(root, config.selector('genericButtonSelectors'));
+    }
     function isSubmitButton(element) {
         return element === null || element === void 0 ? void 0 : element.matches(submitButtonSelector());
     }
@@ -10272,7 +10740,6 @@ up.form = (function () {
         let parser = new up.OptionsParser(form, options, parserOptions);
         parser.include(destinationOptions);
         parser.string('failTarget', { default: up.fragment.tryToTarget(form) });
-        parser.booleanOrString('disable');
         options.guardEvent || (options.guardEvent = up.event.build('up:form:submit', {
             submitButton: options.submitButton,
             log: 'Submitting form',
@@ -10280,6 +10747,7 @@ up.form = (function () {
             form,
         }));
         options.origin || (options.origin = up.viewport.focusedElementWithin(form) || options.submitButton || form);
+        options.activeElements = u.uniq([options.origin, options.submitButton, form].filter(u.isElement));
         parser.include(up.link.followOptions);
         return options;
     }
@@ -10287,8 +10755,7 @@ up.form = (function () {
         var _a;
         options = u.options(options);
         let parser = new up.OptionsParser(field, options, Object.assign(Object.assign({}, parserOptions), { closest: true, attrPrefix: 'up-watch-' }));
-        parser.boolean('feedback');
-        parser.booleanOrString('disable');
+        parser.include(up.status.statusOptions);
         parser.string('event');
         parser.number('delay');
         let config = up.form.config;
@@ -10303,61 +10770,52 @@ up.form = (function () {
         return options;
     }
     function disableContainer(container) {
-        let focusedElement = document.activeElement;
+        let controls = [
+            ...findFields(container),
+            ...findSubmitButtons(container),
+            ...findGenericButtons(container),
+        ];
+        return u.sequence(u.map(controls, disableControl));
+    }
+    function disableControl(control) {
+        if (control.disabled)
+            return;
         let focusFallback;
-        let controls = [...findFields(container), ...findSubmitButtons(container)];
-        for (let control of controls) {
-            if (control === focusedElement) {
-                focusFallback = findGroup(focusedElement);
-            }
-            raiseDisableStack(control);
-        }
-        if (focusFallback) {
+        if (document.activeElement === control) {
+            focusFallback = findGroup(control);
+            control.disabled = true;
             up.focus(focusFallback, { force: true, preventScroll: true });
         }
-        return function () {
-            controls.forEach(lowerDisableStack);
-        };
-    }
-    function raiseDisableStack(control) {
-        if (!control.upDisableCount) {
-            control.upDisableCount || (control.upDisableCount = 0);
-            control.upOriginalDisabled = control.disabled;
-        }
-        control.upDisableCount++;
-        control.disabled = true;
-    }
-    function lowerDisableStack(control) {
-        if (control.upDisableCount) {
-            if (!control.disabled) {
-                control.upDisableCount = 0;
-            }
-            else {
-                control.upDisableCount--;
-                if (!control.upDisableCount) {
-                    control.disabled = control.upOriginalDisabled;
-                }
-            }
+        else {
+            control.disabled = true;
         }
+        return () => { control.disabled = false; };
     }
-    function disableWhile(promise, options) {
-        let undoDisable = handleDisableOption(options);
-        u.always(promise, undoDisable);
-    }
-    function handleDisableOption({ disable, origin }) {
-        if (!disable)
-            return u.noop;
-        let missingOption = (key) => { up.fail("Cannot process { disable: '%s' } option without { %s }", disable, key); };
-        let getOrigin = () => origin || missingOption('origin');
-        let getOriginForm = () => getScope(getOrigin());
-        let containers;
+    function getDisableContainers(disable, origin) {
+        let originScope = () => getScope(origin);
         if (disable === true) {
-            containers = [getOriginForm()];
+            return [originScope()];
+        }
+        else if (u.isElement(disable)) {
+            return [disable];
         }
         else if (u.isString(disable)) {
-            containers = up.fragment.subtree(getOriginForm(), disable, { origin });
+            return up.fragment.subtree(originScope(), disable, { origin });
+        }
+        else if (u.isArray(disable)) {
+            return u.flatMap(disable, (d) => getDisableContainers(d, origin));
         }
-        return u.sequence(containers.map(disableContainer));
+        else {
+            return [];
+        }
+    }
+    function getDisablePreviewFn(disable, origin) {
+        return function (preview) {
+            let containers = getDisableContainers(disable, origin);
+            for (let container of containers) {
+                preview.disable(container);
+            }
+        };
     }
     function destinationOptions(form, options, parserOptions) {
         var _a;
@@ -10386,10 +10844,10 @@ up.form = (function () {
         }
         return options;
     }
-    function watch(root, ...args) {
+    function watch(...args) {
+        let [root, options, callback] = u.args(args, 'val', 'options', 'callback');
         root = up.element.get(root);
-        const callback = u.extractCallback(args) || watchCallbackFromElement(root) || up.fail('No callback given for up.watch()');
-        let options = u.extractOptions(args);
+        callback || (callback = watchCallbackFromElement(root) || up.fail('No callback given for up.watch()'));
         const watcher = new up.FieldWatcher(root, options, callback);
         watcher.start();
         return () => watcher.stop();
@@ -10397,12 +10855,12 @@ up.form = (function () {
     function watchCallbackFromElement(element) {
         let rawCallback = element.getAttribute('up-watch');
         if (rawCallback) {
-            return up.NonceableCallback.fromString(rawCallback).toFunction('value', 'name').bind(element);
+            return up.NonceableCallback.fromString(rawCallback).toFunction('value', 'name', 'options').bind(element);
         }
     }
     function autosubmit(target, options = {}) {
         const onChange = (_diff, renderOptions) => submit(target, renderOptions);
-        return watch(target, { options, batch: true }, onChange);
+        return watch(target, Object.assign(Object.assign({}, options), { batch: true }), onChange);
     }
     function getGroupSelectors() {
         var _a, _b;
@@ -10415,10 +10873,10 @@ up.form = (function () {
         return u.findResult(getGroupSelectors(), function (groupSelector) {
             let group = field.closest(groupSelector);
             if (group) {
-                let goodDerivedGroupTarget = up.fragment.tryToTarget(group);
+                let strongDerivedGroupTarget = up.fragment.tryToTarget(group, { strong: true });
                 let goodDerivedFieldTarget = up.fragment.tryToTarget(field);
                 let groupHasFieldTarget = goodDerivedFieldTarget && (group !== field) && `${groupSelector}:has(${goodDerivedFieldTarget})`;
-                let target = goodDerivedGroupTarget || groupHasFieldTarget;
+                let target = strongDerivedGroupTarget || groupHasFieldTarget;
                 if (target) {
                     return {
                         target,
@@ -10510,7 +10968,7 @@ up.form = (function () {
         target.classList.add('up-switched');
     });
     function parseSwitchTokens(str) {
-        return u.parseTokens(str, { json: true });
+        return u.getSimpleTokens(str, { json: true });
     }
     function findSwitcherForTarget(target) {
         const form = getScope(target);
@@ -10525,8 +10983,13 @@ up.form = (function () {
         const element = up.fragment.get(elementOrSelector, options);
         return element.form || element.closest('form');
     }
-    function getScope(element, options) {
-        return getForm(element, options) || up.layer.get(element).element;
+    function getScope(origin, options) {
+        if (origin) {
+            return getForm(origin, options) || up.layer.get(origin).element;
+        }
+        else {
+            return up.layer.current.element;
+        }
     }
     function focusedField() {
         return u.presence(document.activeElement, isField);
@@ -10578,8 +11041,8 @@ up.form = (function () {
         submitButtons: findSubmitButtons,
         focusedField,
         switchTarget,
-        disableWhile,
         disable: disableContainer,
+        getDisablePreviewFn,
         group: findGroup,
         groupSolution: findGroupSolution,
         groupSelectors: getGroupSelectors,
@@ -10597,22 +11060,24 @@ up.validate = up.form.validate;
 /* 98 */
 /***/ (() => {
 
-up.feedback = (function () {
+up.status = (function () {
     const u = up.util;
     const e = up.element;
+    let namedPreviewFns = {};
     const config = new up.Config(() => ({
         currentClasses: ['up-current'],
+        activeClasses: ['up-active'],
+        loadingClasses: ['up-loading'],
         navSelectors: ['[up-nav]', 'nav'],
         noNavSelectors: ['[up-nav=false]'],
     }));
     function reset() {
         up.layer.root.feedbackLocation = null;
+        namedPreviewFns = u.pickBy(namedPreviewFns, 'isDefault');
     }
-    const CLASS_ACTIVE = 'up-active';
-    const CLASS_LOADING = 'up-loading';
     const SELECTOR_LINK = 'a, [up-href]';
-    function linkURLs(link) {
-        return link.upFeedbackURLs || (link.upFeedbackURLs = new up.LinkFeedbackURLs(link));
+    function linkCurrentURLs(link) {
+        return link.upCurrentURLs || (link.upCurrentURLs = new up.LinkCurrentURLs(link));
     }
     function updateFragment(fragment, { layer } = {}) {
         layer || (layer = up.layer.get(fragment));
@@ -10621,11 +11086,11 @@ up.feedback = (function () {
         const navLinkSelector = `${navSelector} :is(${SELECTOR_LINK}), ${navSelector}:is(${SELECTOR_LINK})`;
         const links = up.fragment.all(navLinkSelector, { layer });
         for (let link of links) {
-            const isCurrent = linkURLs(link).isCurrent(layerLocation);
+            const isCurrent = linkCurrentURLs(link).isCurrent(layerLocation);
             for (let currentClass of config.currentClasses) {
                 link.classList.toggle(currentClass, isCurrent);
             }
-            e.toggleAttr(link, 'aria-current', 'page', isCurrent);
+            e.setAttrPresence(link, 'aria-current', 'page', isCurrent);
         }
     }
     function getMatchableLayerLocation(layer) {
@@ -10634,24 +11099,88 @@ up.feedback = (function () {
     function findActivatableArea(element) {
         return e.ancestor(element, SELECTOR_LINK) || element;
     }
-    function showAroundRequest(request, options) {
-        if (!options.feedback) {
+    function runPreviews(request, renderOptions) {
+        let { bindLayer } = request;
+        let focusCapsule = up.FocusCapsule.preserve(bindLayer);
+        let applyPreviews = () => doRunPreviews(request, renderOptions);
+        let revertPreviews = bindLayer.asCurrent(applyPreviews);
+        up.on('focusin', { once: true }, () => focusCapsule = null);
+        return () => {
+            bindLayer.asCurrent(revertPreviews);
+            focusCapsule === null || focusCapsule === void 0 ? void 0 : focusCapsule.restore(bindLayer, { preventScroll: true });
+        };
+    }
+    function doRunPreviews(request, renderOptions) {
+        let { fragment, fragments, origin } = request;
+        let cleaner = u.cleaner();
+        let previewForFragment = (fragment) => new up.Preview({ fragment, request, renderOptions, cleaner });
+        let singlePreview = previewForFragment(fragment);
+        singlePreview.run(resolvePreviewFns(renderOptions.preview));
+        singlePreview.run(getPlaceholderPreviewFn(renderOptions.placeholder));
+        singlePreview.run(getFeedbackClassesPreviewFn(renderOptions.feedback, fragments));
+        singlePreview.run(up.form.getDisablePreviewFn(renderOptions.disable, origin));
+        for (let fragment of fragments) {
+            let eachPreview = previewForFragment(fragment);
+            eachPreview.run(e.matchSelectorMap(renderOptions.previewMap, fragment));
+            eachPreview.run(e.matchSelectorMap(renderOptions.placeholderMap, fragment).flatMap(getPlaceholderPreviewFn));
+        }
+        return cleaner.clean;
+    }
+    function getPlaceholderPreviewFn(placeholder) {
+        if (!placeholder)
             return;
+        return function (preview) {
+            preview.showPlaceholder(placeholder);
+        };
+    }
+    function resolvePreviewFns(value) {
+        if (u.isFunction(value)) {
+            return [value];
+        }
+        else if (u.isString(value)) {
+            return resolvePreviewString(value);
         }
-        let clean = (fn) => u.always(request, fn);
-        let activeElement = getActiveElementFromRenderOptions(request);
-        if (activeElement) {
-            clean(e.addTemporaryClass(activeElement, CLASS_ACTIVE));
+        else if (u.isArray(value)) {
+            return value.flatMap(resolvePreviewFns);
         }
-        for (let fragment of request.fragments) {
-            clean(e.addTemporaryClass(fragment, CLASS_LOADING));
+        else {
+            return [];
         }
     }
-    function getActiveElementFromRenderOptions(request) {
-        let activeElement = request.origin;
-        if (activeElement) {
-            return findActivatableArea(activeElement);
-        }
+    function resolvePreviewString(str) {
+        return u.map(u.parseScalarJSONPairs(str), ([name, parsedOptions]) => {
+            let previewFn = namedPreviewFns[name] || up.fail('Unknown preview "%s"', name);
+            return function (preview, runOptions) {
+                up.puts('[up-preview]', 'Showing preview %o', name);
+                return previewFn(preview, parsedOptions || runOptions);
+            };
+        });
+    }
+    function getActiveElements({ origin, activeElements }) {
+        activeElements || (activeElements = u.wrapList(origin));
+        return activeElements.map(findActivatableArea);
+    }
+    function registerPreview(name, previewFn) {
+        previewFn.isDefault = up.framework.evaling;
+        namedPreviewFns[name] = previewFn;
+    }
+    function getFeedbackClassesPreviewFn(feedbackOption, fragments) {
+        if (!feedbackOption)
+            return;
+        return function (preview) {
+            preview.addClassBatch(getActiveElements(preview.renderOptions), config.activeClasses);
+            preview.addClassBatch(fragments, config.loadingClasses);
+        };
+    }
+    function statusOptions(element, options, parserOptions) {
+        options = u.options(options);
+        const parser = new up.OptionsParser(element, options, parserOptions);
+        parser.booleanOrString('disable');
+        parser.boolean('feedback');
+        parser.string('preview');
+        parser.booleanOrString('revalidatePreview');
+        parser.string('placeholder');
+        return options;
     }
     function updateLayerIfLocationChanged(layer) {
         const processedLocation = layer.feedbackLocation;
@@ -10679,9 +11208,13 @@ up.feedback = (function () {
     up.on('up:framework:reset', reset);
     return {
         config,
-        showAroundRequest,
+        preview: registerPreview,
+        resolvePreviewFns,
+        runPreviews,
+        statusOptions,
     };
 })();
+up.preview = up.status.preview;
 
 
 /***/ }),
@@ -10696,9 +11229,9 @@ up.radio = (function () {
         pollInterval: 30000,
     }));
     function hungrySteps(renderOptions) {
-        let { useHungry, origin, layer: renderLayer } = renderOptions;
+        let { hungry, origin, layer: renderLayer, meta } = renderOptions;
         let steps = { current: [], other: [] };
-        if (!useHungry)
+        if (!hungry)
             return steps;
         let hungrySelector = config.selector('hungrySelectors');
         const layerPreference = [renderLayer, ...renderLayer.ancestors, ...renderLayer.descendants];
@@ -10715,7 +11248,8 @@ up.radio = (function () {
                 let motionOptions = up.motion.motionOptions(element);
                 let selectEvent = up.event.build('up:fragment:hungry', { log: false });
                 let selectCallback = e.callbackAttr(element, 'up-on-hungry', { exposedKeys: ['newFragment', 'renderOptions'] });
-                let step = Object.assign(Object.assign({ selector, oldElement: element, layer: elementLayer, origin }, motionOptions), { placement: 'swap', useKeep: true, maybe: true, selectEvent,
+                let step = Object.assign(Object.assign({ selector, oldElement: element, layer: elementLayer, origin }, motionOptions), { placement: 'swap', keep: true, maybe: true, meta,
+                    selectEvent,
                     selectCallback, originalRenderOptions: renderOptions });
                 if (applicableLayers.includes(renderLayer)) {
                     let list = renderLayer === elementLayer ? steps.current : steps.other;
@@ -10738,6 +11272,7 @@ up.radio = (function () {
         parser.number('interval', { default: config.pollInterval });
         parser.string('ifLayer', { default: 'front' });
         parser.include(up.link.requestOptions);
+        parser.include(up.status.statusOptions);
         return options;
     }
     up.attribute('up-poll', function (fragment) {