unpoly-rails 3.2.2.1 → 3.3.0

data/assets/unpoly/unpoly.es6.js

@@ -5,7 +5,7 @@
 /***/ (() => {
 
 window.up = {
-    version: '3.2.2'
+    version: '3.3.0'
 };
 
 
@@ -1836,8 +1836,8 @@ up.Change.Addition = class Addition extends up.Change {
             this.layer.dismiss(this.dismissLayer, this.responseOption());
         }
     }
-    abortWhenLayerClosed() {
-        if (this.layer.isClosed()) {
+    abortWhenLayerClosed(layer = this.layer) {
+        if (layer.isClosed()) {
             throw new up.Aborted('Layer was closed');
         }
     }
@@ -2110,23 +2110,23 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
         up.hello(this.layer.element, Object.assign(Object.assign({}, this.options), { layer: this.layer }));
         this.handleLayerChangeRequests();
         this.handleScroll();
-        let renderResult = new up.RenderResult({
+        this.renderResult = new up.RenderResult({
             layer: this.layer,
             fragments: [this.content],
             target: this.target,
         });
-        renderResult.finished = this.finish(renderResult);
+        this.renderResult.finished = this.finish();
         this.layer.opening = false;
         this.emitOpenedEvent();
         this.abortWhenLayerClosed();
-        return renderResult;
+        return this.renderResult;
     }
-    finish(renderResult) {
+    finish() {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.layer.startOpenAnimation();
             this.abortWhenLayerClosed();
             this.handleFocus();
-            return renderResult;
+            return this.renderResult;
         });
     }
     buildLayer() {
@@ -2174,25 +2174,22 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
             log: `Opened new ${this.layer}`
         });
     }
+    getHungrySteps() {
+        return up.radio.hungrySteps({
+            layer: null,
+            history: (this.layer && this.layer.isHistoryVisible()),
+            origin: this.options.origin,
+        });
+    }
 };
 
 
 /***/ }),
 /* 29 */
-/***/ (function() {
+/***/ (() => {
 
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var _a;
 const u = up.util;
-const e = up.element;
 up.Change.UpdateLayer = (_a = class UpdateLayer extends up.Change.Addition {
         constructor(options) {
             options = up.RenderOptions.finalize(options);
@@ -2216,7 +2213,7 @@ up.Change.UpdateLayer = (_a = class UpdateLayer extends up.Change.Addition {
         }
         bestPreflightSelector() {
             this.matchPreflight();
-            return u.map(this.steps, 'selector').join(', ') || ':none';
+            return up.fragment.targetForSteps(this.steps);
         }
         getFragments() {
             this.matchPreflight();
@@ -2251,152 +2248,14 @@ up.Change.UpdateLayer = (_a = class UpdateLayer extends up.Change.Addition {
                 this.layer.updateHistory(this.options);
             }
             this.handleLayerChangeRequests();
-            this.renderResult = new up.RenderResult({
-                layer: this.layer,
-                target: this.target,
-            });
-            this.steps.reverse();
-            const motionEndPromises = this.steps.map(step => this.executeStep(step));
-            this.renderResult.finished = this.finish(motionEndPromises);
-            if (!this.steps.length) {
-                this.handleFocus(null, this.options);
-                this.handleScroll(null, this.options);
-            }
-            return this.renderResult;
-        }
-        finish(motionEndPromises) {
-            return __awaiter(this, void 0, void 0, function* () {
-                yield Promise.all(motionEndPromises);
-                this.abortWhenLayerClosed();
-                return this.renderResult;
-            });
-        }
-        addToResult(fragment) {
-            let newFragments = fragment.matches('up-wrapper') ? fragment.children : [fragment];
-            this.renderResult.fragments.unshift(...newFragments);
-        }
-        executeStep(step) {
-            this.setReloadAttrs(step);
-            switch (step.placement) {
-                case 'swap': {
-                    let keepPlan = this.findKeepPlan(step);
-                    if (keepPlan) {
-                        this.handleFocus(step.oldElement, step);
-                        this.handleScroll(step.oldElement, step);
-                        return Promise.resolve();
-                    }
-                    else {
-                        this.preserveKeepables(step);
-                        const parent = step.oldElement.parentNode;
-                        const morphOptions = Object.assign(Object.assign({}, step), { beforeStart() {
-                                up.fragment.markAsDestroying(step.oldElement);
-                            }, afterInsert: () => {
-                                this.responseDoc.finalizeElement(step.newElement);
-                                this.restoreKeepables(step);
-                                up.hello(step.newElement, step);
-                                this.addToResult(step.newElement);
-                            }, beforeDetach: () => {
-                                up.syntax.clean(step.oldElement, { layer: this.layer });
-                            }, afterDetach() {
-                                up.element.cleanJQuery();
-                                up.fragment.emitDestroyed(step.oldElement, { parent, log: false });
-                            }, scrollNew: () => {
-                                this.handleFocus(step.newElement, step);
-                                this.handleScroll(step.newElement, step);
-                            } });
-                        return up.morph(step.oldElement, step.newElement, step.transition, morphOptions);
-                    }
-                }
-                case 'content': {
-                    let oldWrapper = e.wrapChildren(step.oldElement);
-                    let newWrapper = e.wrapChildren(step.newElement);
-                    let wrapperStep = Object.assign(Object.assign({}, step), { placement: 'swap', oldElement: oldWrapper, newElement: newWrapper, focus: false });
-                    return this.executeStep(wrapperStep).then(() => {
-                        e.unwrap(newWrapper);
-                        this.handleFocus(step.oldElement, step);
-                    });
-                }
-                case 'before':
-                case 'after': {
-                    let wrapper = e.wrapChildren(step.newElement);
-                    let position = step.placement === 'before' ? 'afterbegin' : 'beforeend';
-                    step.oldElement.insertAdjacentElement(position, wrapper);
-                    this.responseDoc.finalizeElement(wrapper);
-                    up.hello(wrapper, step);
-                    this.addToResult(wrapper);
-                    this.handleFocus(wrapper, step);
-                    this.handleScroll(wrapper, step);
-                    return up.animate(wrapper, step.transition, step).then(() => e.unwrap(wrapper));
-                }
-                default: {
-                    up.fail('Unknown placement: %o', step.placement);
-                }
-            }
-        }
-        findKeepPlan(options) {
-            if (!this.useKeep) {
-                return;
-            }
-            const { oldElement, newElement } = options;
-            let doKeep = e.booleanAttr(oldElement, 'up-keep');
-            if (!doKeep) {
-                return;
-            }
-            let partner;
-            let partnerSelector = up.fragment.toTarget(oldElement);
-            const lookupOpts = { layer: this.layer };
-            if (options.descendantsOnly) {
-                partner = up.fragment.get(newElement, partnerSelector, lookupOpts);
-            }
-            else {
-                partner = up.fragment.subtree(newElement, partnerSelector, lookupOpts)[0];
-            }
-            if (partner && e.booleanAttr(partner, 'up-keep')) {
-                const plan = {
-                    oldElement,
-                    newElement: partner,
-                    newData: up.syntax.data(partner)
-                };
-                if (!up.fragment.emitKeep(plan).defaultPrevented) {
-                    return plan;
-                }
-            }
-        }
-        preserveKeepables(step) {
-            const keepPlans = [];
-            if (this.useKeep) {
-                for (let keepable of step.oldElement.querySelectorAll('[up-keep]')) {
-                    let keepPlan = this.findKeepPlan(Object.assign(Object.assign({}, step), { oldElement: keepable, descendantsOnly: true }));
-                    if (keepPlan) {
-                        const keepableClone = keepable.cloneNode(true);
-                        keepable.insertAdjacentElement('beforebegin', keepableClone);
-                        let viewports = up.viewport.subtree(keepPlan.oldElement);
-                        keepPlan.revivers = viewports.map(function (viewport) {
-                            let cursorProps = up.viewport.copyCursorProps(viewport);
-                            return () => up.viewport.copyCursorProps(cursorProps, viewport);
-                        });
-                        if (this.willChangeElement(document.body)) {
-                            keepPlan.newElement.replaceWith(keepable);
-                        }
-                        else {
-                            document.body.append(keepable);
-                        }
-                        keepPlans.push(keepPlan);
-                    }
-                }
-            }
-            step.keepPlans = keepPlans;
-        }
-        restoreKeepables(step) {
-            for (let keepPlan of step.keepPlans) {
-                keepPlan.newElement.replaceWith(keepPlan.oldElement);
-                for (let reviver of keepPlan.revivers) {
-                    reviver();
-                }
-            }
+            let renderResult = new up.Change.UpdateSteps({
+                steps: this.steps,
+                noneOptions: this.options,
+            }).execute(responseDoc);
+            return renderResult;
         }
         matchPreflight() {
-            this.filterSteps((step) => {
+            this.steps = this.steps.filter((step) => {
                 const finder = new up.FragmentFinder(step);
                 step.oldElement || (step.oldElement = finder.find());
                 if (step.oldElement) {
@@ -2406,59 +2265,23 @@ up.Change.UpdateLayer = (_a = class UpdateLayer extends up.Change.Addition {
                     throw new up.CannotMatch();
                 }
             });
-            this.resolveOldNesting();
+            this.steps = up.fragment.compressNestedSteps(this.steps);
         }
         matchPostflight() {
             this.matchPreflight();
-            if (this.options.useHungry) {
-                this.addHungrySteps();
-            }
-            this.filterSteps((step) => {
-                step.newElement = this.responseDoc.select(step.selector);
-                if (step.newElement) {
-                    return true;
-                }
-                else if (!step.maybe) {
-                    throw new up.CannotMatch();
-                }
-            });
-            this.resolveOldNesting();
-        }
-        filterSteps(condition) {
-            this.steps = u.filter(this.steps, condition);
+            this.steps = this.responseDoc.selectSteps(this.steps);
         }
-        addHungrySteps() {
-            const hungrySolutions = up.radio.hungrySolutions({
+        getHungrySteps() {
+            return up.radio.hungrySteps({
                 layer: this.layer,
                 history: this.hasHistory(),
                 origin: this.options.origin
             });
-            for (let { element: oldElement, target: selector } of hungrySolutions) {
-                const transition = e.booleanOrStringAttr(oldElement, 'transition');
-                const step = {
-                    selector,
-                    oldElement,
-                    transition,
-                    placement: 'swap',
-                    maybe: true
-                };
-                this.steps.push(step);
-            }
-        }
-        containedByRivalStep(steps, candidateStep) {
-            return u.some(steps, function (rivalStep) {
-                return (rivalStep !== candidateStep) &&
-                    ((rivalStep.placement === 'swap') || (rivalStep.placement === 'content')) &&
-                    rivalStep.oldElement.contains(candidateStep.oldElement);
-            });
-        }
-        resolveOldNesting() {
-            let compressed = u.uniqBy(this.steps, 'oldElement');
-            compressed = u.reject(compressed, step => this.containedByRivalStep(compressed, step));
-            this.steps = compressed;
         }
         setScrollAndFocusOptions() {
+            let focusCapsule = up.FocusCapsule.preserve(this.layer);
             this.steps.forEach((step, i) => {
+                step.focusCapsule = focusCapsule;
                 if (i > 0) {
                     step.scroll = false;
                     step.focus = false;
@@ -2467,15 +2290,6 @@ up.Change.UpdateLayer = (_a = class UpdateLayer extends up.Change.Addition {
                     step.scrollBehavior = 'instant';
                 }
             });
-            this.focusCapsule = up.FocusCapsule.preserve(this.layer);
-        }
-        handleFocus(fragment, options) {
-            const fragmentFocus = new up.FragmentFocus(Object.assign(Object.assign({}, options), { fragment, layer: this.layer, focusCapsule: this.focusCapsule, autoMeans: up.fragment.config.autoFocus }));
-            return fragmentFocus.process(options.focus);
-        }
-        handleScroll(fragment, options) {
-            const scrolling = new up.FragmentScrolling(Object.assign(Object.assign({}, options), { fragment, layer: this.layer, autoMeans: up.fragment.config.autoScroll }));
-            return scrolling.process(options.scroll);
         }
         hasHistory() {
             return u.evalAutoOption(this.options.history, this.hasAutoHistory.bind(this));
@@ -2484,9 +2298,6 @@ up.Change.UpdateLayer = (_a = class UpdateLayer extends up.Change.Addition {
             const oldFragments = u.map(this.steps, 'oldElement');
             return u.some(oldFragments, up.fragment.hasAutoHistory);
         }
-        willChangeElement(element) {
-            return u.some(this.steps, (step) => step.oldElement.contains(element));
-        }
     },
     (() => {
         u.memoizeMethod(_a.prototype, [
@@ -2500,6 +2311,195 @@ up.Change.UpdateLayer = (_a = class UpdateLayer extends up.Change.Addition {
 
 /***/ }),
 /* 30 */
+/***/ (function() {
+
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const u = up.util;
+const e = up.element;
+up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
+    constructor(options) {
+        super(options);
+        this.noneOptions = options.noneOptions || {};
+        this.steps = u.copy(options.steps);
+    }
+    execute(responseDoc) {
+        var _a;
+        this.responseDoc = responseDoc;
+        this.steps = responseDoc.selectSteps(this.steps);
+        if (!this.steps.length) {
+            return this.executeNone();
+        }
+        this.renderResult = new up.RenderResult({
+            layer: (_a = this.steps[0]) === null || _a === void 0 ? void 0 : _a.layer,
+            target: up.fragment.targetForSteps(this.steps),
+        });
+        this.steps.reverse();
+        const motionEndPromises = this.steps.map(step => this.executeStep(step));
+        this.renderResult.finished = this.finish(motionEndPromises);
+        return this.renderResult;
+    }
+    executeNone() {
+        this.handleFocus(null, this.noneOptions);
+        this.handleScroll(null, this.noneOptions);
+        return up.RenderResult.buildNone();
+    }
+    finish(motionEndPromises) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Promise.all(motionEndPromises);
+            for (let step of this.steps) {
+                this.abortWhenLayerClosed(step.layer);
+            }
+            return this.renderResult;
+        });
+    }
+    addToResult(fragment) {
+        let newFragments = fragment.matches('up-wrapper') ? fragment.children : [fragment];
+        this.renderResult.fragments.unshift(...newFragments);
+    }
+    executeStep(step) {
+        this.setReloadAttrs(step);
+        switch (step.placement) {
+            case 'swap': {
+                let keepPlan = this.findKeepPlan(step);
+                if (keepPlan) {
+                    this.handleFocus(step.oldElement, step);
+                    this.handleScroll(step.oldElement, step);
+                    return Promise.resolve();
+                }
+                else {
+                    this.preserveKeepables(step);
+                    const parent = step.oldElement.parentNode;
+                    const morphOptions = Object.assign(Object.assign({}, step), { beforeStart() {
+                            up.fragment.markAsDestroying(step.oldElement);
+                        }, afterInsert: () => {
+                            this.responseDoc.finalizeElement(step.newElement);
+                            this.restoreKeepables(step);
+                            up.hello(step.newElement, step);
+                            this.addToResult(step.newElement);
+                        }, beforeDetach: () => {
+                            up.syntax.clean(step.oldElement, { layer: step.layer });
+                        }, afterDetach() {
+                            up.element.cleanJQuery();
+                            up.fragment.emitDestroyed(step.oldElement, { parent, log: false });
+                        }, scrollNew: () => {
+                            this.handleFocus(step.newElement, step);
+                            this.handleScroll(step.newElement, step);
+                        } });
+                    return up.morph(step.oldElement, step.newElement, step.transition, morphOptions);
+                }
+            }
+            case 'content': {
+                let oldWrapper = e.wrapChildren(step.oldElement);
+                let newWrapper = e.wrapChildren(step.newElement);
+                let wrapperStep = Object.assign(Object.assign({}, step), { placement: 'swap', oldElement: oldWrapper, newElement: newWrapper, focus: false });
+                return this.executeStep(wrapperStep).then(() => {
+                    e.unwrap(newWrapper);
+                    this.handleFocus(step.oldElement, step);
+                });
+            }
+            case 'before':
+            case 'after': {
+                let wrapper = e.wrapChildren(step.newElement);
+                let position = step.placement === 'before' ? 'afterbegin' : 'beforeend';
+                step.oldElement.insertAdjacentElement(position, wrapper);
+                this.responseDoc.finalizeElement(wrapper);
+                up.hello(wrapper, step);
+                this.addToResult(wrapper);
+                this.handleFocus(wrapper, step);
+                this.handleScroll(wrapper, step);
+                return up.animate(wrapper, step.transition, step).then(() => e.unwrap(wrapper));
+            }
+            default: {
+                up.fail('Unknown placement: %o', step.placement);
+            }
+        }
+    }
+    findKeepPlan(options) {
+        if (!options.useKeep) {
+            return;
+        }
+        const { oldElement, newElement } = options;
+        let doKeep = e.booleanAttr(oldElement, 'up-keep');
+        if (!doKeep) {
+            return;
+        }
+        let partner;
+        let partnerSelector = up.fragment.toTarget(oldElement);
+        const lookupOpts = { layer: options.layer };
+        if (options.descendantsOnly) {
+            partner = up.fragment.get(newElement, partnerSelector, lookupOpts);
+        }
+        else {
+            partner = up.fragment.subtree(newElement, partnerSelector, lookupOpts)[0];
+        }
+        if (partner && e.booleanAttr(partner, 'up-keep')) {
+            const plan = {
+                oldElement,
+                newElement: partner,
+                newData: up.syntax.data(partner)
+            };
+            if (!up.fragment.emitKeep(plan).defaultPrevented) {
+                return plan;
+            }
+        }
+    }
+    preserveKeepables(step) {
+        const keepPlans = [];
+        if (step.useKeep) {
+            for (let keepable of step.oldElement.querySelectorAll('[up-keep]')) {
+                let keepPlan = this.findKeepPlan(Object.assign(Object.assign({}, step), { oldElement: keepable, descendantsOnly: true }));
+                if (keepPlan) {
+                    const keepableClone = keepable.cloneNode(true);
+                    keepable.insertAdjacentElement('beforebegin', keepableClone);
+                    let viewports = up.viewport.subtree(keepPlan.oldElement);
+                    keepPlan.revivers = viewports.map(function (viewport) {
+                        let cursorProps = up.viewport.copyCursorProps(viewport);
+                        return () => up.viewport.copyCursorProps(cursorProps, viewport);
+                    });
+                    if (this.willChangeElement(document.body)) {
+                        keepPlan.newElement.replaceWith(keepable);
+                    }
+                    else {
+                        document.body.append(keepable);
+                    }
+                    keepPlans.push(keepPlan);
+                }
+            }
+        }
+        step.keepPlans = keepPlans;
+    }
+    restoreKeepables(step) {
+        for (let keepPlan of step.keepPlans) {
+            keepPlan.newElement.replaceWith(keepPlan.oldElement);
+            for (let reviver of keepPlan.revivers) {
+                reviver();
+            }
+        }
+    }
+    willChangeElement(element) {
+        return u.some(this.steps, (step) => step.oldElement.contains(element));
+    }
+    handleFocus(fragment, options) {
+        const fragmentFocus = new up.FragmentFocus(Object.assign(Object.assign({}, options), { fragment, autoMeans: up.fragment.config.autoFocus }));
+        return fragmentFocus.process(options.focus);
+    }
+    handleScroll(fragment, options) {
+        const scrolling = new up.FragmentScrolling(Object.assign(Object.assign({}, options), { fragment, autoMeans: up.fragment.config.autoScroll }));
+        return scrolling.process(options.scroll);
+    }
+};
+
+
+/***/ }),
+/* 31 */
 /***/ (() => {
 
 const u = up.util;
@@ -2572,7 +2572,7 @@ up.Change.CloseLayer = class CloseLayer extends up.Change.Removal {
 
 
 /***/ }),
-/* 31 */
+/* 32 */
 /***/ (() => {
 
 var _a;
@@ -2652,7 +2652,7 @@ up.Change.FromURL = (_a = class FromURL extends up.Change {
 
 
 /***/ }),
-/* 32 */
+/* 33 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -2787,7 +2787,7 @@ up.Change.FromResponse = (_a = class FromResponse extends up.Change {
 
 
 /***/ }),
-/* 33 */
+/* 34 */
 /***/ (() => {
 
 var _a;
@@ -2835,9 +2835,31 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
             return this.seekPlan(this.executePlan.bind(this)) || this.cannotMatchPostflightTarget();
         }
         executePlan(matchedPlan) {
-            let result = matchedPlan.execute(this.getResponseDoc(), this.onPlanApplicable.bind(this, matchedPlan));
-            result.options = this.options;
-            return result;
+            let result;
+            try {
+                result = matchedPlan.execute(this.getResponseDoc(), this.onPlanApplicable.bind(this, matchedPlan));
+                result.options = this.options;
+                this.executeHungry(matchedPlan, result);
+                return result;
+            }
+            catch (error) {
+                if (this.isApplicablePlanError(error)) {
+                    this.executeHungry(matchedPlan, result);
+                }
+                throw error;
+            }
+        }
+        isApplicablePlanError(error) {
+            return !(error instanceof up.CannotMatch);
+        }
+        executeHungry(plan, originalResult) {
+            if (!this.options.useHungry)
+                return;
+            let hungrySteps = plan.getHungrySteps();
+            let hungryResult = new up.Change.UpdateSteps({ steps: hungrySteps }).execute(this.getResponseDoc());
+            if (originalResult) {
+                originalResult.fragments.push(...hungryResult.fragments);
+            }
         }
         onPlanApplicable(plan) {
             let primaryPlan = this.getPlans()[0];
@@ -2908,7 +2930,7 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
                     return fn(plan);
                 }
                 catch (error) {
-                    if (!(error instanceof up.CannotMatch)) {
+                    if (this.isApplicablePlanError(error)) {
                         throw error;
                     }
                 }
@@ -2926,7 +2948,7 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
 
 
 /***/ }),
-/* 34 */
+/* 35 */
 /***/ (() => {
 
 const u = up.util;
@@ -3037,7 +3059,7 @@ up.CompilerPass = class CompilerPass {
 
 
 /***/ }),
-/* 35 */
+/* 36 */
 /***/ (() => {
 
 const u = up.util;
@@ -3150,7 +3172,7 @@ up.CSSTransition = class CSSTransition {
 
 
 /***/ }),
-/* 36 */
+/* 37 */
 /***/ (() => {
 
 const u = up.util;
@@ -3191,7 +3213,7 @@ up.DestructorPass = class DestructorPass {
 
 
 /***/ }),
-/* 37 */
+/* 38 */
 /***/ (() => {
 
 const u = up.util;
@@ -3292,7 +3314,7 @@ up.EventEmitter = class EventEmitter extends up.Record {
 
 
 /***/ }),
-/* 38 */
+/* 39 */
 /***/ (() => {
 
 const u = up.util;
@@ -3398,7 +3420,7 @@ up.EventListener = class EventListener extends up.Record {
 
 
 /***/ }),
-/* 39 */
+/* 40 */
 /***/ (() => {
 
 const u = up.util;
@@ -3470,7 +3492,7 @@ up.EventListenerGroup = class EventListenerGroup extends up.Record {
 
 
 /***/ }),
-/* 40 */
+/* 41 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -3597,7 +3619,7 @@ up.FieldWatcher = class FieldWatcher {
 
 
 /***/ }),
-/* 41 */
+/* 42 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -3795,7 +3817,7 @@ up.FormValidator = class FormValidator {
 
 
 /***/ }),
-/* 42 */
+/* 43 */
 /***/ (() => {
 
 up.FocusCapsule = class FocusCapsule {
@@ -3825,7 +3847,7 @@ up.FocusCapsule = class FocusCapsule {
 
 
 /***/ }),
-/* 43 */
+/* 44 */
 /***/ (() => {
 
 const u = up.util;
@@ -3889,7 +3911,7 @@ up.FragmentProcessor = class FragmentProcessor extends up.Record {
 
 
 /***/ }),
-/* 44 */
+/* 45 */
 /***/ (() => {
 
 const DESCENDANT_SELECTOR = /^([^ >+(]+) (.+)$/;
@@ -3932,7 +3954,7 @@ up.FragmentFinder = class FragmentFinder {
 
 
 /***/ }),
-/* 45 */
+/* 46 */
 /***/ (() => {
 
 const u = up.util;
@@ -4017,7 +4039,7 @@ up.FragmentFocus = class FragmentFocus extends up.FragmentProcessor {
 
 
 /***/ }),
-/* 46 */
+/* 47 */
 /***/ (() => {
 
 const e = up.element;
@@ -4123,7 +4145,7 @@ up.FragmentPolling = class FragmentPolling {
 
 
 /***/ }),
-/* 47 */
+/* 48 */
 /***/ (() => {
 
 const u = up.util;
@@ -4187,7 +4209,7 @@ up.FragmentScrolling = class FragmentScrolling extends up.FragmentProcessor {
 
 
 /***/ }),
-/* 48 */
+/* 49 */
 /***/ (() => {
 
 const e = up.element;
@@ -4410,7 +4432,7 @@ up.Layer = class Layer extends up.Record {
 
 
 /***/ }),
-/* 49 */
+/* 50 */
 /***/ (() => {
 
 const e = up.element;
@@ -4690,7 +4712,7 @@ up.Layer.Overlay = class Overlay extends up.Layer {
 
 
 /***/ }),
-/* 50 */
+/* 51 */
 /***/ (() => {
 
 up.Layer.OverlayWithTether = class OverlayWithTether extends up.Layer.Overlay {
@@ -4727,7 +4749,7 @@ up.Layer.OverlayWithTether = class OverlayWithTether extends up.Layer.Overlay {
 
 
 /***/ }),
-/* 51 */
+/* 52 */
 /***/ (() => {
 
 var _a;
@@ -4765,7 +4787,7 @@ up.Layer.OverlayWithViewport = (_a = class OverlayWithViewport extends up.Layer.
 
 
 /***/ }),
-/* 52 */
+/* 53 */
 /***/ (() => {
 
 var _a;
@@ -4811,7 +4833,7 @@ up.Layer.Root = (_a = class Root extends up.Layer {
 
 
 /***/ }),
-/* 53 */
+/* 54 */
 /***/ (() => {
 
 var _a;
@@ -4822,7 +4844,7 @@ up.Layer.Modal = (_a = class Modal extends up.Layer.OverlayWithViewport {
 
 
 /***/ }),
-/* 54 */
+/* 55 */
 /***/ (() => {
 
 var _a;
@@ -4833,7 +4855,7 @@ up.Layer.Popup = (_a = class Popup extends up.Layer.OverlayWithTether {
 
 
 /***/ }),
-/* 55 */
+/* 56 */
 /***/ (() => {
 
 var _a;
@@ -4844,7 +4866,7 @@ up.Layer.Drawer = (_a = class Drawer extends up.Layer.OverlayWithViewport {
 
 
 /***/ }),
-/* 56 */
+/* 57 */
 /***/ (() => {
 
 var _a;
@@ -4855,7 +4877,7 @@ up.Layer.Cover = (_a = class Cover extends up.Layer.OverlayWithViewport {
 
 
 /***/ }),
-/* 57 */
+/* 58 */
 /***/ (() => {
 
 const u = up.util;
@@ -4945,7 +4967,7 @@ up.LayerLookup = class LayerLookup {
 
 
 /***/ }),
-/* 58 */
+/* 59 */
 /***/ (() => {
 
 const u = up.util;
@@ -5058,7 +5080,7 @@ up.LayerStack = class LayerStack extends Array {
 
 
 /***/ }),
-/* 59 */
+/* 60 */
 /***/ (() => {
 
 up.LinkFeedbackURLs = class LinkFeedbackURLs {
@@ -5089,7 +5111,7 @@ up.LinkFeedbackURLs = class LinkFeedbackURLs {
 
 
 /***/ }),
-/* 60 */
+/* 61 */
 /***/ (() => {
 
 const u = up.util;
@@ -5159,7 +5181,7 @@ up.LinkPreloader = class LinkPreloader {
 
 
 /***/ }),
-/* 61 */
+/* 62 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -5268,7 +5290,7 @@ up.MotionController = class MotionController {
 
 
 /***/ }),
-/* 62 */
+/* 63 */
 /***/ (() => {
 
 const u = up.util;
@@ -5360,7 +5382,7 @@ up.NonceableCallback = class NonceableCallback {
 
 
 /***/ }),
-/* 63 */
+/* 64 */
 /***/ (() => {
 
 const u = up.util;
@@ -5438,7 +5460,7 @@ up.OptionsParser = class OptionsParser {
 
 
 /***/ }),
-/* 64 */
+/* 65 */
 /***/ (() => {
 
 const e = up.element;
@@ -5506,7 +5528,7 @@ up.OverlayFocus = class OverlayFocus {
 
 
 /***/ }),
-/* 65 */
+/* 66 */
 /***/ (() => {
 
 const u = up.util;
@@ -5737,7 +5759,7 @@ up.Params = class Params {
 
 
 /***/ }),
-/* 66 */
+/* 67 */
 /***/ (() => {
 
 const e = up.element;
@@ -5787,7 +5809,7 @@ up.ProgressBar = class ProgressBar {
 
 
 /***/ }),
-/* 67 */
+/* 68 */
 /***/ (() => {
 
 const u = up.util;
@@ -5904,7 +5926,7 @@ up.RenderOptions = (function () {
 
 
 /***/ }),
-/* 68 */
+/* 69 */
 /***/ (() => {
 
 up.RenderResult = class RenderResult extends up.Record {
@@ -5928,11 +5950,17 @@ up.RenderResult = class RenderResult extends up.Record {
     get fragment() {
         return this.fragments[0];
     }
+    static buildNone() {
+        return new this({
+            target: ':none',
+            finished: Promise.resolve(),
+        });
+    }
 };
 
 
 /***/ }),
-/* 69 */
+/* 70 */
 /***/ (() => {
 
 var _a;
@@ -6275,7 +6303,7 @@ up.Request = (_a = class Request extends up.Record {
 
 
 /***/ }),
-/* 70 */
+/* 71 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -6429,7 +6457,7 @@ up.Request.Cache = class Cache {
 
 
 /***/ }),
-/* 71 */
+/* 72 */
 /***/ (() => {
 
 const u = up.util;
@@ -6538,7 +6566,7 @@ up.Request.Queue = class Queue {
 
 
 /***/ }),
-/* 72 */
+/* 73 */
 /***/ (() => {
 
 const u = up.util;
@@ -6577,7 +6605,7 @@ up.Request.FormRenderer = class FormRenderer {
 
 
 /***/ }),
-/* 73 */
+/* 74 */
 /***/ (() => {
 
 var _a;
@@ -6649,7 +6677,7 @@ up.Request.XHRRenderer = (_a = class XHRRenderer {
 
 
 /***/ }),
-/* 74 */
+/* 75 */
 /***/ (() => {
 
 const u = up.util;
@@ -6732,7 +6760,7 @@ up.Response = class Response extends up.Record {
 
 
 /***/ }),
-/* 75 */
+/* 76 */
 /***/ (() => {
 
 var _a;
@@ -6799,6 +6827,17 @@ up.ResponseDoc = (_a = class ResponseDoc {
             });
             return finder.find();
         }
+        selectSteps(steps) {
+            return steps.filter((step) => {
+                step.newElement || (step.newElement = this.select(step.selector));
+                if (step.newElement) {
+                    return true;
+                }
+                else if (!step.maybe) {
+                    throw new up.CannotMatch();
+                }
+            });
+        }
         finalizeElement(element) {
             up.NonceableCallback.adoptNonces(element, this.cspNonces);
             if (this.scriptishNeedFix) {
@@ -6813,7 +6852,7 @@ up.ResponseDoc = (_a = class ResponseDoc {
 
 
 /***/ }),
-/* 76 */
+/* 77 */
 /***/ (() => {
 
 const e = up.element;
@@ -6908,7 +6947,7 @@ up.RevealMotion = class RevealMotion {
 
 
 /***/ }),
-/* 77 */
+/* 78 */
 /***/ (() => {
 
 const u = up.util;
@@ -6949,7 +6988,7 @@ up.Selector = class Selector {
 
 
 /***/ }),
-/* 78 */
+/* 79 */
 /***/ (() => {
 
 const u = up.util;
@@ -7070,7 +7109,7 @@ up.Tether = class Tether {
 
 
 /***/ }),
-/* 79 */
+/* 80 */
 /***/ (() => {
 
 const u = up.util;
@@ -7151,7 +7190,7 @@ up.URLPattern = class URLPattern {
 
 
 /***/ }),
-/* 80 */
+/* 81 */
 /***/ (() => {
 
 up.framework = (function () {
@@ -7235,7 +7274,7 @@ up.boot = up.framework.boot;
 
 
 /***/ }),
-/* 81 */
+/* 82 */
 /***/ (() => {
 
 up.event = (function () {
@@ -7338,7 +7377,7 @@ up.emit = up.event.emit;
 
 
 /***/ }),
-/* 82 */
+/* 83 */
 /***/ (() => {
 
 up.protocol = (function () {
@@ -7481,7 +7520,7 @@ up.protocol = (function () {
 
 
 /***/ }),
-/* 83 */
+/* 84 */
 /***/ (() => {
 
 up.log = (function () {
@@ -7566,7 +7605,7 @@ up.warn = up.log.warn;
 
 
 /***/ }),
-/* 84 */
+/* 85 */
 /***/ (() => {
 
 up.syntax = (function () {
@@ -7712,7 +7751,7 @@ up.hello = up.syntax.hello;
 
 
 /***/ }),
-/* 85 */
+/* 86 */
 /***/ (() => {
 
 up.history = (function () {
@@ -7850,10 +7889,10 @@ up.history = (function () {
 
 
 /***/ }),
-/* 86 */
+/* 87 */
 /***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
 
-__webpack_require__(87);
+__webpack_require__(88);
 const u = up.util;
 const e = up.element;
 up.fragment = (function () {
@@ -8301,6 +8340,21 @@ up.fragment = (function () {
     function shouldRevalidate(request, response, options = {}) {
         return request.fromCache && u.evalAutoOption(options.revalidate, config.autoRevalidate, response);
     }
+    function targetForSteps(steps) {
+        return u.map(steps, 'selector').join(', ') || ':none';
+    }
+    function isContainedByRivalStep(steps, candidateStep) {
+        return u.some(steps, function (rivalStep) {
+            return (rivalStep !== candidateStep) &&
+                ((rivalStep.placement === 'swap') || (rivalStep.placement === 'content')) &&
+                rivalStep.oldElement.contains(candidateStep.oldElement);
+        });
+    }
+    function compressNestedSteps(steps) {
+        let compressed = u.uniqBy(steps, 'oldElement');
+        compressed = u.reject(compressed, step => isContainedByRivalStep(compressed, step));
+        return compressed;
+    }
     function abort(...args) {
         let options = parseTargetAndOptions(args);
         let testFn;
@@ -8375,6 +8429,8 @@ up.fragment = (function () {
         splitTarget,
         parseTargetSteps,
         isAlive,
+        targetForSteps,
+        compressNestedSteps,
     };
 })();
 up.reload = up.fragment.reload;
@@ -8386,16 +8442,16 @@ u.delegate(up, ['context'], () => up.layer.current);
 
 
 /***/ }),
-/* 87 */
+/* 88 */
 /***/ (() => {
 
 
 
 /***/ }),
-/* 88 */
+/* 89 */
 /***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
 
-__webpack_require__(89);
+__webpack_require__(90);
 up.viewport = (function () {
     const u = up.util;
     const e = up.element;
@@ -8709,7 +8765,7 @@ up.viewport = (function () {
         tryFocus,
         newStateCache,
         focusedElementWithin,
-        copyCursorProps
+        copyCursorProps,
     };
 })();
 up.focus = up.viewport.focus;
@@ -8717,13 +8773,13 @@ up.reveal = up.viewport.reveal;
 
 
 /***/ }),
-/* 89 */
+/* 90 */
 /***/ (() => {
 
 
 
 /***/ }),
-/* 90 */
+/* 91 */
 /***/ (function() {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -8992,10 +9048,10 @@ up.animate = up.motion.animate;
 
 
 /***/ }),
-/* 91 */
+/* 92 */
 /***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
 
-__webpack_require__(92);
+__webpack_require__(93);
 const u = up.util;
 up.network = (function () {
     const config = new up.Config(() => ({
@@ -9141,13 +9197,13 @@ up.cache = up.network.cache;
 
 
 /***/ }),
-/* 92 */
+/* 93 */
 /***/ (() => {
 
 
 
 /***/ }),
-/* 93 */
+/* 94 */
 /***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
 
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -9159,7 +9215,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-__webpack_require__(94);
+__webpack_require__(95);
 const u = up.util;
 const e = up.element;
 up.layer = (function () {
@@ -9400,16 +9456,16 @@ up.layer = (function () {
 
 
 /***/ }),
-/* 94 */
+/* 95 */
 /***/ (() => {
 
 
 
 /***/ }),
-/* 95 */
+/* 96 */
 /***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
 
-__webpack_require__(96);
+__webpack_require__(97);
 up.link = (function () {
     const u = up.util;
     const e = up.element;
@@ -9699,13 +9755,13 @@ up.follow = up.link.follow;
 
 
 /***/ }),
-/* 96 */
+/* 97 */
 /***/ (() => {
 
 
 
 /***/ }),
-/* 97 */
+/* 98 */
 /***/ (() => {
 
 up.form = (function () {
@@ -10101,7 +10157,7 @@ up.validate = up.form.validate;
 
 
 /***/ }),
-/* 98 */
+/* 99 */
 /***/ (() => {
 
 up.feedback = (function () {
@@ -10218,7 +10274,7 @@ up.feedback = (function () {
 
 
 /***/ }),
-/* 99 */
+/* 100 */
 /***/ (() => {
 
 up.radio = (function () {
@@ -10233,7 +10289,7 @@ up.radio = (function () {
     function reset() {
         config.reset();
     }
-    function hungrySolutions({ layer, history, origin }) {
+    function hungrySteps({ layer, history, origin }) {
         let hungrySelector = config.hungrySelectors.join(', ');
         let hungries = up.fragment.all(hungrySelector, { layer: 'any' });
         return u.filterMap(hungries, (element) => {
@@ -10247,10 +10303,21 @@ up.radio = (function () {
                 return;
             }
             let ifLayer = e.attr(element, 'up-if-layer');
-            if (ifLayer !== 'any' && layer !== up.layer.get(element)) {
+            let elementLayer = up.layer.get(element);
+            if (ifLayer !== 'any' && layer !== elementLayer) {
                 return;
             }
-            return { target, element };
+            let transition = e.booleanOrStringAttr(element, 'up-transition');
+            return {
+                selector: target,
+                oldElement: element,
+                layer: elementLayer,
+                origin,
+                transition,
+                placement: 'swap',
+                useKeep: true,
+                maybe: true,
+            };
         });
     }
     function startPolling(fragment, options = {}) {
@@ -10287,7 +10354,7 @@ up.radio = (function () {
     up.on('up:framework:reset', reset);
     return {
         config,
-        hungrySolutions,
+        hungrySteps,
         startPolling,
         stopPolling,
         pollIssue,
@@ -10296,7 +10363,7 @@ up.radio = (function () {
 
 
 /***/ }),
-/* 100 */
+/* 101 */
 /***/ (() => {
 
 (function () {
@@ -10435,15 +10502,16 @@ __webpack_require__(83);
 __webpack_require__(84);
 __webpack_require__(85);
 __webpack_require__(86);
-__webpack_require__(88);
-__webpack_require__(90);
+__webpack_require__(87);
+__webpack_require__(89);
 __webpack_require__(91);
-__webpack_require__(93);
-__webpack_require__(95);
-__webpack_require__(97);
+__webpack_require__(92);
+__webpack_require__(94);
+__webpack_require__(96);
 __webpack_require__(98);
 __webpack_require__(99);
 __webpack_require__(100);
+__webpack_require__(101);
 up.framework.onEvaled();
 
 })();