unpoly-rails 3.9.5 → 3.10.0.rc1

data/assets/unpoly/unpoly.js

@@ -5,7 +5,7 @@
 /***/ (() => {
 
 window.up = {
-    version: '3.9.5'
+    version: '3.10.0-rc1'
 };
 
 
@@ -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,8 +214,8 @@ up.util = (function () {
     function isJQuery(object) {
         return up.browser.canJQuery() && object instanceof jQuery;
     }
-    function isElementish(object) {
-        return !!(object && (object.addEventListener || object[0]?.addEventListener));
+    function isElementLike(object) {
+        return !!(object && (object.addEventListener || (isJQuery(object) && object[0]?.addEventListener)));
     }
     function isPromise(object) {
         return isObject(object) && isFunction(object.then);
@@ -240,6 +243,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;
@@ -297,10 +303,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;
     }
@@ -468,7 +473,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))) {
@@ -554,26 +561,34 @@ 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) {
+        let parts = up.migrate.splitAtOr?.(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);
@@ -585,18 +600,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;
     }
@@ -627,6 +637,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;
@@ -736,6 +749,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,
@@ -779,14 +908,16 @@ up.util = (function () {
         isBoolean,
         isNumber,
         isElement,
+        isTextNode,
         isJQuery,
-        isElementish,
+        isElementLike,
         isPromise,
         isOptions,
         isArray,
         isFormData,
         isList,
         isRegExp,
+        isAdjacentPosition,
         timer: scheduleTimer,
         contains,
         containsAll,
@@ -817,21 +948,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,
     };
 })();
 
@@ -863,17 +1003,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) {
@@ -905,7 +1040,6 @@ up.migrate = {
 /***/ (() => {
 
 up.browser = (function () {
-    const u = up.util;
     function submitForm(form) {
         form.submit();
     }
@@ -915,7 +1049,6 @@ up.browser = (function () {
     function canJQuery() {
         return !!window.jQuery;
     }
-    const canHasSelector = u.memoize(() => CSS.supports('selector(:has(*))'));
     function popCookie(name) {
         let value = document.cookie.match(new RegExp(name + "=(\\w+)"))?.[1];
         if (value) {
@@ -936,7 +1069,6 @@ up.browser = (function () {
         canJQuery,
         assertConfirmed,
         popCookie,
-        canHasSelector,
     };
 })();
 
@@ -949,18 +1081,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);
@@ -1001,24 +1138,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 toggleAttr(element, attr, value, newPresent) {
-        if (newPresent == null) {
-            newPresent = !element.hasAttribute(attr);
+    function hideTemp(element) {
+        return setVisibleTemp(element, false);
+    }
+    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);
         }
@@ -1037,11 +1188,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);
     }
@@ -1049,8 +1198,8 @@ up.element = (function () {
         const selector = "meta" + attrSelector('name', name);
         return first(selector)?.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);
@@ -1058,7 +1207,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';
             }
@@ -1066,25 +1215,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?.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);
@@ -1093,7 +1231,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);
@@ -1101,14 +1244,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,
@@ -1128,14 +1281,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 ||= '"';
+                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;
         });
@@ -1145,33 +1299,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;
@@ -1210,14 +1339,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;
@@ -1226,7 +1363,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;
     }
@@ -1259,19 +1396,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) {
@@ -1285,76 +1431,90 @@ up.element = (function () {
             }
         }
     }
+    function parseAttr(element, attribute, ...parsers) {
+        if (!element.hasAttribute?.(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) {
-        let json = element.getAttribute?.(attribute)?.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?.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 addClassTemp(element, klass) {
+        return setClassStateTemp(element, klass, true);
+    }
+    function removeClassTemp(element, klass) {
+        return setClassStateTemp(element, klass, false);
     }
-    function addTemporaryClass(element, klass) {
-        element.classList.add(klass);
-        return () => element.classList.remove(klass);
+    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);
@@ -1394,16 +1554,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);
     }
@@ -1430,8 +1598,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,
@@ -1440,12 +1629,14 @@ up.element = (function () {
         list: getList,
         toggle,
         hide,
+        hideTemp,
         show,
+        showTemp,
         metaContent,
         insertBefore,
         createFromSelector,
         setAttrs,
-        setTemporaryAttrs,
+        setAttrsTemp,
         affix,
         idSelector,
         classSelector,
@@ -1454,7 +1645,9 @@ up.element = (function () {
         tagName: elementTagName,
         createBrokenDocumentFromHTML,
         fixParserDamage,
+        createNodesFromHTML,
         createFromHTML,
+        extractSingular,
         get root() { return getRoot(); },
         paint,
         concludeCSSTransition,
@@ -1464,13 +1657,15 @@ up.element = (function () {
         setMissingAttr,
         unwrap,
         wrapChildren,
+        wrapIfRequired,
         attr: stringAttr,
         booleanAttr,
         numberAttr,
         jsonAttr,
         callbackAttr,
         booleanOrStringAttr,
-        setTemporaryStyle,
+        booleanOrNumberAttr,
+        setStyleTemp,
         style: computedStyle,
         styleNumber: computedStyleNumber,
         inlineStyle,
@@ -1478,14 +1673,19 @@ up.element = (function () {
         isVisible,
         upAttrs,
         upClasses,
-        toggleAttr,
-        addTemporaryClass,
+        setAttrPresence,
+        addClasses,
+        addClassTemp,
+        removeClassTemp,
         cleanJQuery,
         parseSelector,
         isEmpty,
         crossOriginSelector,
         isIntersectingWindow,
         unionSelector,
+        matchSelectorMap,
+        elementLikeMatches,
+        documentPosition,
     };
 })();
 
@@ -1682,6 +1882,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);
     }
@@ -1801,16 +2004,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)
@@ -1826,7 +2030,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');
@@ -1838,13 +2042,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));
     }
 };
 
@@ -1861,9 +2059,6 @@ up.Change = class Change {
     execute() {
         throw new up.NotImplemented();
     }
-    onFinished(renderResult) {
-        return this.options.onFinished?.(renderResult);
-    }
     improveHistoryValue(existingValue, newValue) {
         if ((existingValue === false) || u.isString(existingValue)) {
             return existingValue;
@@ -1894,30 +2089,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({ ...eventPlan, ...this.responseOption() });
+                up.emit({ ...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) {
@@ -1925,7 +2120,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));
         }
@@ -1933,18 +2128,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) {
@@ -1969,8 +2164,10 @@ up.RenderJob = (_a = class RenderJob {
         }
         async _executePromise() {
             try {
-                this._guardRender();
+                this._emitGuardEvent();
                 this.options = up.RenderOptions.preprocess(this.options);
+                up.browser.assertConfirmed(this.options);
+                up.RenderOptions.assertContentGiven(this.options);
                 let result = await this._getChange().execute();
                 this._handleResult(result);
                 return result;
@@ -2016,20 +2213,20 @@ up.RenderJob = (_a = class RenderJob {
         }
         _getChange() {
             if (this.options.url) {
-                let onRequest = (request) => this._handleAbortOption(request);
-                return new up.Change.FromURL({ ...this.options, onRequest });
-            }
-            else if (this.options.response) {
-                let onRender = () => this._handleAbortOption(null);
-                return new up.Change.FromResponse({ ...this.options, onRender });
+                let onRequestProcessed = (request) => this._handleAbortOption(request);
+                return new up.Change.FromURL({ ...this.options, onRequestProcessed });
             }
             else {
                 let onRender = () => this._handleAbortOption(null);
-                return new up.Change.FromContent({ ...this.options, onRender });
+                if (this.options.response) {
+                    return new up.Change.FromResponse({ ...this.options, onRender });
+                }
+                else {
+                    return new up.Change.FromContent({ ...this.options, onRender });
+                }
             }
         }
-        _guardRender() {
-            up.browser.assertConfirmed(this.options);
+        _emitGuardEvent() {
             let guardEvent = u.pluckKey(this.options, 'guardEvent');
             if (guardEvent) {
                 guardEvent.renderOptions = this.options;
@@ -2037,24 +2234,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, { ...abortOptions });
             }
             else if (abort === 'layer') {
-                up.fragment.abort({ ...abortOptions, layer });
+                up.fragment.abort({ ...abortOptions, layer: bindLayer });
             }
             else if (abort === 'all' || abort === true) {
                 up.fragment.abort({ ...abortOptions, layer: 'any' });
@@ -2063,12 +2259,12 @@ up.RenderJob = (_a = class RenderJob {
                 abort(abortOptions);
             }
             else {
-                up.fragment.abort(abort, { ...abortOptions, layer });
+                up.fragment.abort(abort, { ...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,
@@ -2081,21 +2277,14 @@ up.RenderJob = (_a = class RenderJob {
 /* 26 */
 /***/ (() => {
 
-up.Change.Removal = class Removal extends up.Change {
-};
-
-
-/***/ }),
-/* 27 */
-/***/ (() => {
-
-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;
@@ -2111,12 +2300,12 @@ up.Change.DestroyFragment = class DestroyFragment extends up.Change.Removal {
         this._emitDestroyed();
         await this._animate();
         this._wipe();
-        this.onFinished();
+        this._onFinished?.();
     }
     _destroyNow() {
         this._wipe();
         this._emitDestroyed();
-        this.onFinished();
+        this._onFinished?.();
     }
     _animate() {
         return up.motion.animate(this._element, this._animation, this.options);
@@ -2136,7 +2325,7 @@ up.Change.DestroyFragment = class DestroyFragment extends up.Change.Removal {
 
 
 /***/ }),
-/* 28 */
+/* 27 */
 /***/ (() => {
 
 let u = up.util;
@@ -2153,9 +2342,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) {
@@ -2205,7 +2395,7 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
             fragments: [this._content],
             target: this.target,
         });
-        up.hello(this.layer.element, { ...this.options, layer: this.layer });
+        up.hello(this.layer.element, { ...this.options, layer: this.layer, dataRoot: this._content });
         this._handleScroll();
         this._newOverlayResult.finished = this._finish();
         this.layer.opening = false;
@@ -2290,7 +2480,7 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
 
 
 /***/ }),
-/* 29 */
+/* 28 */
 /***/ (() => {
 
 var _a;
@@ -2306,14 +2496,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() {
@@ -2439,7 +2631,7 @@ up.Change.UpdateLayer = (_a = class UpdateLayer extends up.Change.Addition {
 
 
 /***/ }),
-/* 30 */
+/* 29 */
 /***/ (() => {
 
 const u = up.util;
@@ -2511,7 +2703,7 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
                             up.script.clean(step.oldElement, { layer: step.layer });
                         },
                         afterDetach() {
-                            up.element.cleanJQuery();
+                            e.cleanJQuery();
                             up.fragment.emitDestroyed(step.oldElement, { parent, log: false });
                         },
                         scrollNew: () => {
@@ -2555,7 +2747,7 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
         }
     }
     _findKeepPlan(options) {
-        if (!options.useKeep) {
+        if (!options.keep) {
             return;
         }
         const { oldElement, newElement } = options;
@@ -2570,7 +2762,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 = {
@@ -2586,7 +2778,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({ ...step, oldElement: keepable, descendantsOnly: true });
                 if (keepPlan) {
@@ -2647,11 +2839,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) {
         super(options);
         this._verb = options.verb;
@@ -2723,27 +2915,29 @@ up.Change.CloseLayer = class CloseLayer extends up.Change.Removal {
 
 
 /***/ }),
-/* 32 */
+/* 31 */
 /***/ (() => {
 
 var _a;
 const u = up.util;
 up.Change.FromURL = (_a = class FromURL extends up.Change {
-        execute() {
-            let _newPageReason = this._newPageReason();
-            if (_newPageReason) {
-                up.puts('up.render()', _newPageReason);
+        async execute() {
+            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());
-            this.options.onRequest?.(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));
+            this._onRequestProcessed();
+            return await u.always(this.request, responseOrError => this._onRequestSettled(responseOrError));
+        }
+        _onRequestProcessed() {
+            this.options.onRequestProcessed?.(this.request);
+            this.request.runPreviews(this.options);
         }
         _newPageReason() {
             if (u.isCrossOrigin(this.options.url)) {
@@ -2759,15 +2953,16 @@ up.Change.FromURL = (_a = class FromURL extends up.Change {
             return {
                 ...this.options,
                 ...successAttrs,
-                ...u.renameKeys(failAttrs, up.fragment.failKey)
+                ...u.withRenamedKeys(failAttrs, up.fragment.failKey),
+                onProcessed: this._onRequestProcessed.bind(this),
             };
         }
         getPreflightProps() {
             return this._getRequestAttrs();
         }
-        _preflightPropsForRenderOptions(renderOptions, requestAttributesOptions) {
-            const preview = new up.Change.FromContent({ ...renderOptions, preview: true });
-            return preview.getPreflightProps(requestAttributesOptions);
+        _preflightPropsForRenderOptions(renderOptions, getPreflightPropsOptions) {
+            const preflightChange = new up.Change.FromContent({ ...renderOptions, preflight: true });
+            return preflightChange.getPreflightProps(getPreflightPropsOptions);
         }
         _onRequestSettled(response) {
             if (response instanceof up.Response) {
@@ -2801,7 +2996,7 @@ up.Change.FromURL = (_a = class FromURL extends up.Change {
 
 
 /***/ }),
-/* 33 */
+/* 32 */
 /***/ (() => {
 
 var _a;
@@ -2862,17 +3057,17 @@ up.Change.FromResponse = (_a = class FromResponse extends up.Change {
                 up.puts('up.render()', 'Revalidating cached response for target "%s"', effectiveTarget);
                 let verifyResult = await up.reload(effectiveTarget, {
                     ...originalRenderOptions,
+                    ...up.RenderOptions.NO_MOTION,
+                    ...up.RenderOptions.NO_INPUT_INTERFERENCE,
+                    ...up.RenderOptions.NO_PREVIEWS,
                     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,
+                    preview: this._revalidatePreview(originalRenderOptions),
+                    abort: false,
+                    cache: false,
+                    background: true,
                 });
                 if (!verifyResult.none) {
                     renderResult = verifyResult;
@@ -2880,6 +3075,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 {
@@ -2939,7 +3142,7 @@ up.Change.FromResponse = (_a = class FromResponse extends up.Change {
 
 
 /***/ }),
-/* 34 */
+/* 33 */
 /***/ (() => {
 
 var _a;
@@ -2948,7 +3151,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() {
@@ -3003,7 +3206,7 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
             this.options.onRender?.();
         }
         _getResponseDoc() {
-            if (this._preview)
+            if (this._preflight)
                 return;
             const docOptions = u.pick(this.options, [
                 'target',
@@ -3013,6 +3216,7 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
                 'html',
                 'cspNonces',
                 'origin',
+                'data',
             ]);
             up.migrate.handleResponseDocOptions?.(docOptions);
             if (this._defaultPlacement() === 'content') {
@@ -3021,7 +3225,7 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
             return new up.ResponseDoc(docOptions);
         }
         _improveOptionsFromResponseDoc() {
-            if (this._preview)
+            if (this._preflight)
                 return;
             let responseDoc = this._getResponseDoc();
             if (this.options.fragment) {
@@ -3093,17 +3297,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 ||= 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.layer = layer;
@@ -3119,7 +3324,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) {
@@ -3154,10 +3359,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];
@@ -3166,18 +3368,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 });
     }
@@ -3195,7 +3392,7 @@ up.CompilerPass = class CompilerPass {
 
 
 /***/ }),
-/* 36 */
+/* 35 */
 /***/ (() => {
 
 const u = up.util;
@@ -3279,7 +3476,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);
         }
@@ -3300,7 +3497,7 @@ up.CSSTransition = class CSSTransition {
 
 
 /***/ }),
-/* 37 */
+/* 36 */
 /***/ (() => {
 
 const u = up.util;
@@ -3311,27 +3508,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?.clean(cleanable);
         }
     }
     _selectCleanables() {
         const selectOptions = { ...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;
@@ -3393,7 +3582,7 @@ up.EventEmitter = class EventEmitter extends up.Record {
     static fromEmitArgs(args, defaults = {}) {
         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) {
@@ -3430,7 +3619,7 @@ up.EventEmitter = class EventEmitter extends up.Record {
 
 
 /***/ }),
-/* 39 */
+/* 38 */
 /***/ (() => {
 
 const u = up.util;
@@ -3534,7 +3723,7 @@ up.EventListener = class EventListener extends up.Record {
 
 
 /***/ }),
-/* 40 */
+/* 39 */
 /***/ (() => {
 
 const u = up.util;
@@ -3554,13 +3743,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) {
@@ -3593,7 +3782,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);
@@ -3607,7 +3796,7 @@ up.EventListenerGroup = class EventListenerGroup extends up.Record {
 
 
 /***/ }),
-/* 41 */
+/* 40 */
 /***/ (() => {
 
 const u = up.util;
@@ -3618,26 +3807,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);
@@ -3650,7 +3837,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;
@@ -3677,13 +3864,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 = { ...fieldOptions, disable: false };
         const callbackReturnValues = [];
         if (this._batch) {
             callbackReturnValues.push(this._runCallback(diff, callbackOptions));
@@ -3696,14 +3882,13 @@ up.FieldWatcher = class FieldWatcher {
         }
         if (u.some(callbackReturnValues, u.isPromise)) {
             let callbackDone = Promise.allSettled(callbackReturnValues);
-            up.form.disableWhile(callbackDone, fieldOptions);
             await callbackDone;
         }
         this._callbackRunning = false;
         this._requestCallback();
     }
     _runCallback(...args) {
-        return up.error.guard(() => this._callback(...args));
+        return up.error.guard(this._callback, ...args);
     }
     _changedValues(previous, next) {
         const changes = {};
@@ -3735,7 +3920,7 @@ up.FieldWatcher = class FieldWatcher {
 
 
 /***/ }),
-/* 42 */
+/* 41 */
 /***/ (() => {
 
 const u = up.util;
@@ -3854,47 +4039,52 @@ up.FormValidator = class FormValidator {
             return;
         if (this._nextRenderTimer)
             return;
-        let dirtySolutions = this._dirtySolutions;
+        let options = this._mergeRenderOptions(this._dirtySolutions);
         this._dirtySolutions = [];
+        this._rendering = true;
+        let renderingPromise = this._nextRenderPromise;
+        this._resetNextRenderPromise();
+        try {
+            renderingPromise.resolve(up.render(options));
+            await renderingPromise;
+        }
+        finally {
+            this._rendering = false;
+            this._renderDirtySolutions();
+        }
+    }
+    _mergeRenderOptions(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));
+        let options = u.mergeDefined(...dirtyRenderOptionsList, up.form.destinationOptions(this._form));
         options.target = u.map(dirtySolutions, 'target').join(', ');
-        options.feedback = u.some(dirtyRenderOptionsList, 'feedback');
         options.origin = this._form;
         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'));
+        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,
         });
-        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));
-            await renderingPromise;
-        }
-        finally {
-            this._rendering = false;
-            this._renderDirtySolutions();
-        }
+        return options;
     }
     _addValidateHeader(headers, names) {
         let key = up.protocol.headerize('validate');
@@ -3903,20 +4093,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 ||= new this(form);
@@ -3925,19 +4101,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;
         }
     }
@@ -3949,13 +4129,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;
@@ -3973,14 +4153,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)) {
@@ -4020,7 +4200,7 @@ up.FragmentProcessor = class FragmentProcessor extends up.Record {
 
 
 /***/ }),
-/* 45 */
+/* 44 */
 /***/ (() => {
 
 const u = up.util;
@@ -4057,19 +4237,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;
@@ -4130,7 +4310,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);
         }
@@ -4148,13 +4328,13 @@ up.FragmentFocus = class FragmentFocus extends up.FragmentProcessor {
         }
     }
     _wasFocusLost() {
-        return !this.layer.hasFocus();
+        return this.focusCapsule?.wasLost();
     }
 };
 
 
 /***/ }),
-/* 47 */
+/* 46 */
 /***/ (() => {
 
 const e = up.element;
@@ -4223,17 +4403,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() {
@@ -4309,7 +4489,7 @@ up.FragmentPolling = class FragmentPolling {
 
 
 /***/ }),
-/* 48 */
+/* 47 */
 /***/ (() => {
 
 const u = up.util;
@@ -4373,7 +4553,7 @@ up.FragmentScrolling = class FragmentScrolling extends up.FragmentProcessor {
 
 
 /***/ }),
-/* 49 */
+/* 48 */
 /***/ (() => {
 
 const e = up.element;
@@ -4639,285 +4819,294 @@ up.Layer = class Layer extends up.Record {
 
 
 /***/ }),
-/* 50 */
+/* 49 */
 /***/ (() => {
 
+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'
+            ];
+        }
+        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 if (this.dismissable === false) {
-            this.dismissable = [];
+        callback(name) {
+            let fn = this[name];
+            if (fn) {
+                return fn.bind(this);
+            }
         }
-        else {
-            this.dismissable = u.parseTokens(this.dismissable);
+        createElement(parentElement) {
+            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.acceptLocation) {
-            this.acceptLocation = new up.URLPattern(this.acceptLocation);
+        createBackdropElement(parentElement) {
+            this.backdropElement = this.affixPart(parentElement, 'backdrop');
         }
-        if (this.dismissLocation) {
-            this.dismissLocation = new up.URLPattern(this.dismissLocation);
+        createViewportElement(parentElement) {
+            this.viewportElement = this.affixPart(parentElement, 'viewport', { 'up-viewport': '' });
         }
-    }
-    callback(name) {
-        let fn = this[name];
-        if (fn) {
-            return fn.bind(this);
+        createBoxElement(parentElement) {
+            this.boxElement = this.affixPart(parentElement, 'box');
         }
-    }
-    createElement(parentElement) {
-        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();
+        createContentElement(parentElement) {
+            this.contentElement = this.affixPart(parentElement, 'content');
         }
-        else {
-            return 0;
+        setContent(content) {
+            this.contentElement.append(content);
+            this.onContentSet();
         }
-    }
-    setupHandlers() {
-        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);
-                    }
-                });
+        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;
+            }
+        }
+        setupHandlers() {
+            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);
+            });
+            up.migrate.registerLayerCloser?.(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();
+                }
             }
         }
-        if (this._supportsDismissMethod('key')) {
-            this.unbindEscapePressed = up.event.onEscape(event => this.onEscapePressed(event));
+        _onOutsideClicked(event, halt) {
+            up.log.putsEvent(event);
+            if (halt)
+                up.event.halt(event);
+            up.error.muteUncriticalSync(() => this.dismiss(':outside', { origin: event.target }));
         }
-        this.registerClickCloser('up-accept', (value, closeOptions) => {
-            this.accept(value, closeOptions);
-        });
-        this.registerClickCloser('up-dismiss', (value, closeOptions) => {
-            this.dismiss(value, closeOptions);
-        });
-        up.migrate.registerLayerCloser?.(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();
+        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 = { ...resolution, location };
-            up.error.muteUncriticalSync(() => closeFn.call(this, closeValue, options));
+        tryDismissForLocation(options) {
+            this._tryCloseForLocation(this.dismissLocation, this.dismiss, options);
         }
-    }
-    teardownHandlers() {
-        super.teardownHandlers();
-        this.unbindParentClicked?.();
-        this.unbindEscapePressed?.();
-        this.overlayFocus.teardown();
-    }
-    destroyElements(options) {
-        const animation = () => this.startCloseAnimation(options);
-        const onFinished = () => {
-            this.onElementsRemoved();
-            options.onFinished?.();
-        };
-        const destroyOptions = { ...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 = { ...resolution, location };
+                up.error.muteUncriticalSync(() => closeFn.call(this, closeValue, options));
+            }
         }
-        return Promise.all([boxDone, backdropDone]);
-    }
-    async startOpenAnimation(options = {}) {
-        await this._startAnimation({
-            boxAnimation: options.animation ?? this.evalOption(this.openAnimation),
-            backdropAnimation: 'fade-in',
-            easing: options.easing || this.openEasing,
-            duration: options.duration || this.openDuration
-        });
-        this.wasEverVisible = true;
-    }
-    startCloseAnimation(options = {}) {
-        return this._startAnimation({
-            boxAnimation: this.wasEverVisible && (options.animation ?? 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 = { ...options, verb, value, layer: this };
-        return new up.Change.CloseLayer(options).execute();
-    }
-    getFirstSwappableElement() {
-        return this.getContentElement().children[0];
-    }
-    toString() {
-        return `${this.mode} overlay`;
-    }
-};
+        teardownHandlers() {
+            super.teardownHandlers();
+            this.unbindParentClicked?.();
+            this.unbindEscapePressed?.();
+            this.overlayFocus.teardown();
+        }
+        destroyElements(options) {
+            const animation = () => this.startCloseAnimation(options);
+            const onFinished = () => {
+                this.onElementsRemoved();
+                options.onFinished?.();
+            };
+            const destroyOptions = { ...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]);
+        }
+        async startOpenAnimation(options = {}) {
+            let boxAnimation = options.animation ?? this.evalOption(this.openAnimation);
+            let backdropAnimation = 'fade-in';
+            await this._startAnimation({
+                boxAnimation,
+                backdropAnimation,
+                easing: options.easing || this.openEasing,
+                duration: options.duration || this.openDuration
+            });
+            this.wasEverVisible = true;
+        }
+        startCloseAnimation(options = {}) {
+            let boxAnimation = this.wasEverVisible && (options.animation ?? 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 = { ...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 {
@@ -4956,7 +5145,7 @@ up.Layer.OverlayWithTether = class OverlayWithTether extends up.Layer.Overlay {
 
 
 /***/ }),
-/* 52 */
+/* 51 */
 /***/ (() => {
 
 up.Layer.OverlayWithViewport = class OverlayWithViewport extends up.Layer.Overlay {
@@ -4985,7 +5174,7 @@ up.Layer.OverlayWithViewport = class OverlayWithViewport extends up.Layer.Overla
 
 
 /***/ }),
-/* 53 */
+/* 52 */
 /***/ (() => {
 
 var _a;
@@ -5031,7 +5220,7 @@ up.Layer.Root = (_a = class Root extends up.Layer {
 
 
 /***/ }),
-/* 54 */
+/* 53 */
 /***/ (() => {
 
 var _a;
@@ -5042,7 +5231,7 @@ up.Layer.Modal = (_a = class Modal extends up.Layer.OverlayWithViewport {
 
 
 /***/ }),
-/* 55 */
+/* 54 */
 /***/ (() => {
 
 var _a;
@@ -5053,7 +5242,7 @@ up.Layer.Popup = (_a = class Popup extends up.Layer.OverlayWithTether {
 
 
 /***/ }),
-/* 56 */
+/* 55 */
 /***/ (() => {
 
 var _a;
@@ -5064,7 +5253,7 @@ up.Layer.Drawer = (_a = class Drawer extends up.Layer.OverlayWithViewport {
 
 
 /***/ }),
-/* 57 */
+/* 56 */
 /***/ (() => {
 
 var _a;
@@ -5075,7 +5264,7 @@ up.Layer.Cover = (_a = class Cover extends up.Layer.OverlayWithViewport {
 
 
 /***/ }),
-/* 58 */
+/* 57 */
 /***/ (() => {
 
 var _a;
@@ -5088,7 +5277,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));
@@ -5121,7 +5310,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) {
@@ -5188,7 +5377,7 @@ up.LayerLookup = (_a = class LayerLookup {
 
 
 /***/ }),
-/* 59 */
+/* 58 */
 /***/ (() => {
 
 const u = up.util;
@@ -5302,11 +5491,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) {
@@ -5336,7 +5525,7 @@ up.LinkFeedbackURLs = class LinkFeedbackURLs {
 
 
 /***/ }),
-/* 61 */
+/* 60 */
 /***/ (() => {
 
 const u = up.util;
@@ -5380,7 +5569,7 @@ up.LinkFollowIntent = class LinkFollowIntent {
 
 
 /***/ }),
-/* 62 */
+/* 61 */
 /***/ (() => {
 
 const u = up.util;
@@ -5476,7 +5665,7 @@ up.MotionController = class MotionController {
 
 
 /***/ }),
-/* 63 */
+/* 62 */
 /***/ (() => {
 
 const u = up.util;
@@ -5491,33 +5680,36 @@ up.NonceableCallback = class NonceableCallback {
         return new this(match[3], match[2]);
     }
     toFunction(...argNames) {
+        let scriptExpression = this.script;
+        if (!/\b(;|return|throw)\b/.test(scriptExpression))
+            scriptExpression = `return ${scriptExpression}`;
         if (this.nonce) {
             let callbackThis = this;
             return function (...args) {
-                return callbackThis._runAsNoncedFunction(this, argNames, args);
+                return callbackThis._runAsNoncedFunction(scriptExpression, this, argNames, args);
             };
         }
         else {
-            return new Function(...argNames, this.script);
+            return new Function(...argNames, scriptExpression);
         }
     }
     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;
             }
@@ -5527,8 +5719,8 @@ up.NonceableCallback = class NonceableCallback {
         }
         finally {
             up.noncedEval = undefined;
-            if (script) {
-                script.remove();
+            if (scriptElement) {
+                scriptElement.remove();
             }
         }
     }
@@ -5562,7 +5754,7 @@ up.NonceableCallback = class NonceableCallback {
 
 
 /***/ }),
-/* 64 */
+/* 63 */
 /***/ (() => {
 
 const e = up.element;
@@ -5578,7 +5770,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()
@@ -5635,7 +5827,7 @@ up.OverlayFocus = class OverlayFocus {
 
 
 /***/ }),
-/* 65 */
+/* 64 */
 /***/ (() => {
 
 const u = up.util;
@@ -5868,6 +6060,140 @@ 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({
+            ...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 */
 /***/ (() => {
@@ -5880,7 +6206,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();
     }
@@ -5924,21 +6250,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',
@@ -5952,9 +6279,13 @@ up.RenderOptions = (function () {
         'abortable',
         'confirm',
         'feedback',
+        'disable',
+        'placeholder',
+        'preview',
         'origin',
         'originLayer',
         'baseLayer',
+        'navigate',
         'fail',
         'onError',
     ];
@@ -5964,8 +6295,6 @@ up.RenderOptions = (function () {
         'history',
         'source',
         'saveScroll',
-        'navigate',
-        'baseLayer',
     ]);
     const CONTENT_KEYS = [
         'url',
@@ -5989,15 +6318,17 @@ 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) {
         up.migrate.preprocessRenderOptions?.(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) {
@@ -6032,13 +6363,11 @@ up.RenderOptions = (function () {
     }
     function deriveFailOptions(preprocessedOptions) {
         let overrides = failOverrides(preprocessedOptions);
-        let layers = rememberOriginLayer(overrides);
         if (preprocessedOptions.failOptions) {
             return {
                 ...preprocessedOptions.defaults,
                 ...u.pick(preprocessedOptions, SHARED_KEYS),
                 ...overrides,
-                ...layers,
                 ...{ failPrefixForced: true }
             };
         }
@@ -6046,7 +6375,6 @@ up.RenderOptions = (function () {
             return {
                 ...preprocessedOptions,
                 ...overrides,
-                ...layers,
             };
         }
     }
@@ -6055,6 +6383,9 @@ up.RenderOptions = (function () {
         finalize,
         assertContentGiven,
         deriveFailOptions,
+        NO_PREVIEWS,
+        NO_MOTION,
+        NO_INPUT_INTERFERENCE,
     };
 })();
 
@@ -6135,7 +6466,6 @@ up.Request = (_a = class Request extends up.Record {
                 'failMode',
                 'failContext',
                 'origin',
-                'fragments',
                 'builtAt',
                 'wrapMethod',
                 'contentType',
@@ -6143,7 +6473,8 @@ up.Request = (_a = class Request extends up.Record {
                 'onLoading',
                 'fail',
                 'abortable',
-                'badResponseTime',
+                'lateDelay',
+                'previews',
             ];
         }
         defaults() {
@@ -6153,6 +6484,7 @@ up.Request = (_a = class Request extends up.Record {
                 headers: {},
                 timeout: up.network.config.timeout,
                 builtAt: new Date(),
+                previews: [],
             };
         }
         constructor(options) {
@@ -6171,26 +6503,37 @@ up.Request = (_a = class Request extends up.Record {
                 this.mode ||= this.layer.mode;
                 this.failMode ||= this.failLayer?.mode;
             }
-            this.deferred = u.newDeferred();
-            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() {
+            if (this.background) {
+                return false;
+            }
+            else {
+                return this.lateDelay ?? u.evalOption(up.network.config.lateDelay, this);
+            }
+        }
+        isTimed() {
+            return u.isNumber(this.effectiveLateTime);
+        }
         get xhr() {
             return 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._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() {
             return this.fragments?.[0];
@@ -6205,8 +6548,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() {
@@ -6258,6 +6603,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;
@@ -6287,35 +6637,46 @@ 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() {
+            this._revertPreviews?.();
+        }
+        get ended() {
             return (this.state !== 'new') && (this.state !== 'loading') && (this.state !== 'tracking');
         }
         csrfHeader() {
@@ -6365,7 +6726,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
             });
@@ -6379,12 +6740,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;
         }
@@ -6447,7 +6811,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);
 
@@ -6488,8 +6852,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 {
@@ -6546,7 +6910,13 @@ up.Request.Cache = class Cache {
     async track(existingRequest, newRequest, options = {}) {
         newRequest.trackedRequest = existingRequest;
         newRequest.state = 'tracking';
-        let value = await u.always(existingRequest);
+        let value;
+        if (existingRequest.ended && existingRequest.response) {
+            value = existingRequest.response;
+        }
+        else {
+            value = await u.always(existingRequest);
+        }
         if (value instanceof up.Response) {
             if (options.force || existingRequest.cacheRoute.satisfies(existingRequest, newRequest)) {
                 newRequest.fromCache = true;
@@ -6562,7 +6932,7 @@ up.Request.Cache = class Cache {
         }
         else {
             newRequest.state = existingRequest.state;
-            newRequest.deferred.reject(value);
+            newRequest._reject(value);
         }
     }
     willHaveSameResponse(existingRequest, newRequest) {
@@ -6642,8 +7012,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);
@@ -6673,8 +7045,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;
@@ -6683,9 +7055,7 @@ up.Request.Queue = class Queue {
         }
     }
     abort(...args) {
-        let options = u.extractOptions(args);
-        let { except, reason, logOnce } = options;
-        let conditions = args[0] ?? 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);
@@ -6699,22 +7069,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);
     }
 };
 
@@ -6873,7 +7246,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');
@@ -6916,15 +7289,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) {
@@ -6935,46 +7308,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);
+        }
+        _parseFragment(value, origin, data) {
+            let element = e.extractSingular(up.fragment.provideNodes(value, { origin, data }));
+            this._document = this._buildFauxDocument(element);
         }
-        _parseContent(value, target) {
+        _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);
@@ -7055,7 +7431,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);
             }
@@ -7164,16 +7540,17 @@ 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 = {}) {
         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 {
@@ -7184,44 +7561,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, { ...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, { ...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 ||= 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));
     }
 };
 
@@ -7356,7 +7734,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));
             }
@@ -7479,7 +7857,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`;
             }
@@ -7487,6 +7865,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,
@@ -7655,22 +8038,22 @@ up.protocol = (function () {
         return extractHeader(xhr, 'expireCache') || up.migrate.clearCacheFromXHR?.(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) {
-        return up.migrate.titleFromXHR?.(xhr) ?? extractHeader(xhr, 'title', JSON.parse);
+        return up.migrate.titleFromXHR?.(xhr) ?? 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'));
@@ -7841,6 +8224,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',
@@ -7848,9 +8234,13 @@ up.script = (function () {
             'up-on-finished',
             'up-on-error',
             'up-on-offline',
+            'up-placeholder',
         ],
         scriptSelectors: [
-            'script'
+            'script:not([type])',
+            'script[type="text/javascript"]',
+            'script[type="module"]',
+            'script[type="importmap"]',
         ],
         noScriptSelectors: [
             'script[type="application/ld+json"]'
@@ -7881,10 +8271,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]);
@@ -7911,11 +8304,7 @@ up.script = (function () {
         }
     }
     const parseProcessorArgs = function (args) {
-        const defaults = u.extractOptions(args);
-        const selector = args.shift();
-        const callback = args.pop();
-        const options = { ...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);
@@ -7953,18 +8342,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 ||= 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);
@@ -7981,18 +8368,12 @@ up.script = (function () {
         return 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;
-            }
+        let parsedJSON = e.jsonAttr(element, 'up-data') ?? {};
+        if (!u.isOptions(parsedJSON)) {
+            return parsedJSON;
         }
         return {
+            ...element.upTemplateData,
             ...element.dataset,
             ...parsedJSON,
             ...element.upCompileData,
@@ -8016,6 +8397,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');
@@ -8033,6 +8417,7 @@ up.script = (function () {
         findAssets,
         assertAssetsOK,
         disableSubtree: disableScriptsInSubtree,
+        isScript,
     };
 })();
 up.compiler = up.script.compiler;
@@ -8181,7 +8566,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) {
@@ -8223,14 +8608,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,
@@ -8248,10 +8637,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',
@@ -8264,7 +8662,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 }) {
@@ -8323,14 +8721,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,
@@ -8339,13 +8735,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];
         }
@@ -8451,8 +8850,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;
@@ -8478,7 +8878,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);
         }
@@ -8516,7 +8916,8 @@ up.fragment = (function () {
         return result;
     }
     function isGoodTarget(target, element, options = {}) {
-        return !isAlive(element) || !config.verifyDerivedTarget || up.fragment.get(target, { layer: element, ...options }) === element;
+        let verify = options.verify ?? config.verifyDerivedTarget;
+        return !isAlive(element) || !verify || up.fragment.get(target, { layer: element, ...options }) === element;
     }
     function matchesPattern(pattern, str) {
         if (u.isRegExp(pattern)) {
@@ -8558,7 +8959,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)) {
@@ -8585,11 +8986,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 = {}) {
         let defaultPlacement = options.defaultPlacement || 'swap';
@@ -8669,13 +9072,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 ||= '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 ||= 'Aborting requests within ' + layers.join(', ');
         }
         let testFnWithAbortable = (request) => request.abortable && testFn(request);
@@ -8690,8 +9093,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;
         }
@@ -8706,15 +9109,62 @@ 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 = { ...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 } = {}) {
+        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 = event.nodes ?? 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 {
@@ -8724,7 +9174,7 @@ up.fragment = (function () {
         render,
         navigate,
         get: getSmart,
-        getDumb,
+        getFirstDescendant,
         all: getAll,
         subtree: getSubtree,
         contains,
@@ -8758,6 +9208,9 @@ up.fragment = (function () {
         targetForSteps,
         compressNestedSteps,
         containsMainPseudo,
+        insertTemp,
+        provideNodes,
+        cloneTemplate,
     };
 })();
 up.reload = up.fragment.reload;
@@ -8765,6 +9218,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);
 
 
@@ -8801,7 +9255,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) {
         options = u.options(options);
         element = f.get(element, options);
         if (!(options.layer = up.layer.get(element))) {
@@ -8813,7 +9267,7 @@ up.viewport = (function () {
         const motion = new up.RevealMotion(element, options);
         motion.start();
         return up.migrate.formerlyAsync?.('up.reveal()') || true;
-    }
+    });
     function doFocus(element, { preventScroll, force, inputDevice, focusVisible } = {}) {
         if (force) {
             if (!element.hasAttribute('tabindex') && element.tabIndex === -1) {
@@ -8846,7 +9300,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() {
@@ -8950,11 +9404,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);
@@ -9040,16 +9494,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,
@@ -9374,7 +9831,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(); },
@@ -9399,10 +9856,7 @@ up.network = (function () {
         return request;
     }
     function parseRequestOptions(args) {
-        const options = u.extractOptions(args);
-        if (!options.url) {
-            options.url = args[0];
-        }
+        let options = u.parseArgIntoOptions(args, 'url');
         up.migrate.handleRequestOptions?.(options);
         return options;
     }
@@ -9550,7 +10004,7 @@ up.layer = (function () {
                 openAnimation: 'fade-in',
                 closeAnimation: 'fade-out',
                 dismissLabel: '×',
-                dismissAriaLabel: 'Dismiss dialog',
+                dismissARIALabel: 'Dismiss dialog',
                 dismissable: true,
                 history: 'auto',
                 trapFocus: true,
@@ -9630,10 +10084,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) {
@@ -9834,7 +10285,7 @@ up.link = (function () {
         parser.boolean('abortable');
         parser.boolean('background');
         parser.string('contentType');
-        parser.number('badResponseTime');
+        parser.booleanOrNumber('lateDelay');
         parser.number('timeout');
         return options;
     }
@@ -9843,7 +10294,6 @@ up.link = (function () {
         options = u.options(options);
         const parser = new up.OptionsParser(link, options, { fail: true, ...parserOptions });
         parser.include(parseRequestOptions);
-        parser.boolean('feedback');
         options.origin ||= link;
         parser.boolean('fail');
         parser.boolean('navigate', { default: true });
@@ -9851,11 +10301,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' });
@@ -9879,6 +10330,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');
@@ -9905,10 +10357,15 @@ up.link = (function () {
         }
         const guardEvent = up.event.build('up:link:preload', { log: ['Preloading link %o', link] });
         return follow(link, {
+            abort: false,
             abortable: false,
+            background: true,
+            cache: true,
+            ...up.RenderOptions.NO_INPUT_INTERFERENCE,
+            ...up.RenderOptions.NO_PREVIEWS,
             ...options,
             guardEvent,
-            preload: true
+            preload: true,
         });
     }
     function preloadIssue(link) {
@@ -10048,14 +10505,16 @@ up.link = (function () {
                 '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) {
         if (!isPreloadDisabled(link)) {
             let doPreload = () => up.error.muteUncriticalRejection(preload(link));
-            let condition = e.booleanOrStringAttr(link, 'up-preload', null) ?? 'hover';
+            let condition = e.booleanOrStringAttr(link, 'up-preload');
+            if (condition === true || u.isUndefined(condition))
+                condition = 'hover';
             onLoadCondition(condition, link, doPreload);
         }
     });
@@ -10096,10 +10555,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'],
@@ -10124,6 +10584,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?.matches(submitButtonSelector());
     }
@@ -10139,7 +10602,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 ||= up.event.build('up:form:submit', {
             submitButton: options.submitButton,
             log: 'Submitting form',
@@ -10147,14 +10609,14 @@ up.form = (function () {
             form,
         });
         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;
     }
     function watchOptions(field, options, parserOptions = {}) {
         options = u.options(options);
         let parser = new up.OptionsParser(field, options, { ...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;
@@ -10169,61 +10631,58 @@ 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 ||= 0;
-            control.upOriginalDisabled = control.disabled;
+        else {
+            control.disabled = true;
         }
-        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;
-                }
+        return () => {
+            control.disabled = false;
+            if (focusFallback && document.activeElement === focusFallback && control.isConnected) {
+                up.focus(control, { preventScroll: true });
             }
-        }
-    }
-    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 givenOrigin = () => origin || up.fail('Missing { origin }');
+        let originScope = () => getScope(givenOrigin());
         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));
+        }
+        else {
+            return [];
         }
-        return u.sequence(containers.map(disableContainer));
+    }
+    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) {
         options = u.options(options);
@@ -10251,10 +10710,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 ||= watchCallbackFromElement(root) || up.fail('No callback given for up.watch()');
         const watcher = new up.FieldWatcher(root, options, callback);
         watcher.start();
         return () => watcher.stop();
@@ -10262,12 +10721,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, { ...options, batch: true }, onChange);
     }
     function getGroupSelectors() {
         return up.migrate.migratedFormGroupSelectors?.() || config.groupSelectors;
@@ -10279,10 +10738,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,
@@ -10374,7 +10833,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);
@@ -10442,8 +10901,8 @@ up.form = (function () {
         submitButtons: findSubmitButtons,
         focusedField,
         switchTarget,
-        disableWhile,
         disable: disableContainer,
+        getDisablePreviewFn,
         group: findGroup,
         groupSolution: findGroupSolution,
         groupSelectors: getGroupSelectors,
@@ -10461,22 +10920,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 ||= new up.LinkFeedbackURLs(link);
+    function linkCurrentURLs(link) {
+        return link.upCurrentURLs ||= new up.LinkCurrentURLs(link);
     }
     function updateFragment(fragment, { layer } = {}) {
         layer ||= up.layer.get(fragment);
@@ -10485,11 +10946,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) {
@@ -10498,24 +10959,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?.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 ||= 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;
@@ -10543,9 +11068,13 @@ up.feedback = (function () {
     up.on('up:framework:reset', reset);
     return {
         config,
-        showAroundRequest,
+        preview: registerPreview,
+        resolvePreviewFns,
+        runPreviews,
+        statusOptions,
     };
 })();
+up.preview = up.status.preview;
 
 
 /***/ }),
@@ -10560,9 +11089,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];
@@ -10586,8 +11115,9 @@ up.radio = (function () {
                     origin,
                     ...motionOptions,
                     placement: 'swap',
-                    useKeep: true,
+                    keep: true,
                     maybe: true,
+                    meta,
                     selectEvent,
                     selectCallback,
                     originalRenderOptions: renderOptions,
@@ -10613,6 +11143,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) {