unpoly-rails 3.2.2.1 → 3.3.0

data/assets/unpoly/unpoly.js

@@ -5,7 +5,7 @@
 /***/ (() => {
 
 window.up = {
-    version: '3.2.2'
+    version: '3.3.0'
 };
 
 
@@ -1833,8 +1833,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');
         }
     }
@@ -2072,22 +2072,22 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
         up.hello(this.layer.element, { ...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;
     }
-    async finish(renderResult) {
+    async finish() {
         await this.layer.startOpenAnimation();
         this.abortWhenLayerClosed();
         this.handleFocus();
-        return renderResult;
+        return this.renderResult;
     }
     buildLayer() {
         const buildOptions = { ...this.options, opening: true };
@@ -2138,6 +2138,13 @@ 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,
+        });
+    }
 };
 
 
@@ -2147,7 +2154,6 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
 
 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);
@@ -2171,7 +2177,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();
@@ -2206,163 +2212,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;
-        }
-        async finish(motionEndPromises) {
-            await 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 = {
-                            ...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 = {
-                        ...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({ ...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) {
@@ -2372,59 +2229,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();
+            this.steps = this.responseDoc.selectSteps(this.steps);
         }
-        filterSteps(condition) {
-            this.steps = u.filter(this.steps, condition);
-        }
-        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;
@@ -2433,26 +2254,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({
-                ...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({
-                ...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));
@@ -2461,9 +2262,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, [
@@ -2479,6 +2277,204 @@ up.Change.UpdateLayer = (_a = class UpdateLayer extends up.Change.Addition {
 /* 30 */
 /***/ (() => {
 
+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) {
+        this.responseDoc = responseDoc;
+        this.steps = responseDoc.selectSteps(this.steps);
+        if (!this.steps.length) {
+            return this.executeNone();
+        }
+        this.renderResult = new up.RenderResult({
+            layer: this.steps[0]?.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();
+    }
+    async finish(motionEndPromises) {
+        await 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 = {
+                        ...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 = {
+                    ...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({ ...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({
+            ...options,
+            fragment,
+            autoMeans: up.fragment.config.autoFocus,
+        });
+        return fragmentFocus.process(options.focus);
+    }
+    handleScroll(fragment, options) {
+        const scrolling = new up.FragmentScrolling({
+            ...options,
+            fragment,
+            autoMeans: up.fragment.config.autoScroll
+        });
+        return scrolling.process(options.scroll);
+    }
+};
+
+
+/***/ }),
+/* 31 */
+/***/ (() => {
+
 const u = up.util;
 up.Change.CloseLayer = class CloseLayer extends up.Change.Removal {
     constructor(options) {
@@ -2547,7 +2543,7 @@ up.Change.CloseLayer = class CloseLayer extends up.Change.Removal {
 
 
 /***/ }),
-/* 31 */
+/* 32 */
 /***/ (() => {
 
 var _a;
@@ -2630,7 +2626,7 @@ up.Change.FromURL = (_a = class FromURL extends up.Change {
 
 
 /***/ }),
-/* 32 */
+/* 33 */
 /***/ (() => {
 
 var _a;
@@ -2767,7 +2763,7 @@ up.Change.FromResponse = (_a = class FromResponse extends up.Change {
 
 
 /***/ }),
-/* 33 */
+/* 34 */
 /***/ (() => {
 
 var _a;
@@ -2815,9 +2811,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];
@@ -2887,7 +2905,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;
                     }
                 }
@@ -2905,7 +2923,7 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
 
 
 /***/ }),
-/* 34 */
+/* 35 */
 /***/ (() => {
 
 const u = up.util;
@@ -3015,7 +3033,7 @@ up.CompilerPass = class CompilerPass {
 
 
 /***/ }),
-/* 35 */
+/* 36 */
 /***/ (() => {
 
 const u = up.util;
@@ -3126,7 +3144,7 @@ up.CSSTransition = class CSSTransition {
 
 
 /***/ }),
-/* 36 */
+/* 37 */
 /***/ (() => {
 
 const u = up.util;
@@ -3167,7 +3185,7 @@ up.DestructorPass = class DestructorPass {
 
 
 /***/ }),
-/* 37 */
+/* 38 */
 /***/ (() => {
 
 const u = up.util;
@@ -3266,7 +3284,7 @@ up.EventEmitter = class EventEmitter extends up.Record {
 
 
 /***/ }),
-/* 38 */
+/* 39 */
 /***/ (() => {
 
 const u = up.util;
@@ -3371,7 +3389,7 @@ up.EventListener = class EventListener extends up.Record {
 
 
 /***/ }),
-/* 39 */
+/* 40 */
 /***/ (() => {
 
 const u = up.util;
@@ -3443,7 +3461,7 @@ up.EventListenerGroup = class EventListenerGroup extends up.Record {
 
 
 /***/ }),
-/* 40 */
+/* 41 */
 /***/ (() => {
 
 const u = up.util;
@@ -3559,7 +3577,7 @@ up.FieldWatcher = class FieldWatcher {
 
 
 /***/ }),
-/* 41 */
+/* 42 */
 /***/ (() => {
 
 const u = up.util;
@@ -3733,7 +3751,7 @@ up.FormValidator = class FormValidator {
 
 
 /***/ }),
-/* 42 */
+/* 43 */
 /***/ (() => {
 
 up.FocusCapsule = class FocusCapsule {
@@ -3763,7 +3781,7 @@ up.FocusCapsule = class FocusCapsule {
 
 
 /***/ }),
-/* 43 */
+/* 44 */
 /***/ (() => {
 
 const u = up.util;
@@ -3827,7 +3845,7 @@ up.FragmentProcessor = class FragmentProcessor extends up.Record {
 
 
 /***/ }),
-/* 44 */
+/* 45 */
 /***/ (() => {
 
 const DESCENDANT_SELECTOR = /^([^ >+(]+) (.+)$/;
@@ -3870,7 +3888,7 @@ up.FragmentFinder = class FragmentFinder {
 
 
 /***/ }),
-/* 45 */
+/* 46 */
 /***/ (() => {
 
 const u = up.util;
@@ -3954,7 +3972,7 @@ up.FragmentFocus = class FragmentFocus extends up.FragmentProcessor {
 
 
 /***/ }),
-/* 46 */
+/* 47 */
 /***/ (() => {
 
 const e = up.element;
@@ -4059,7 +4077,7 @@ up.FragmentPolling = class FragmentPolling {
 
 
 /***/ }),
-/* 47 */
+/* 48 */
 /***/ (() => {
 
 const u = up.util;
@@ -4123,7 +4141,7 @@ up.FragmentScrolling = class FragmentScrolling extends up.FragmentProcessor {
 
 
 /***/ }),
-/* 48 */
+/* 49 */
 /***/ (() => {
 
 const e = up.element;
@@ -4346,7 +4364,7 @@ up.Layer = class Layer extends up.Record {
 
 
 /***/ }),
-/* 49 */
+/* 50 */
 /***/ (() => {
 
 const e = up.element;
@@ -4621,7 +4639,7 @@ up.Layer.Overlay = class Overlay extends up.Layer {
 
 
 /***/ }),
-/* 50 */
+/* 51 */
 /***/ (() => {
 
 up.Layer.OverlayWithTether = class OverlayWithTether extends up.Layer.Overlay {
@@ -4658,7 +4676,7 @@ up.Layer.OverlayWithTether = class OverlayWithTether extends up.Layer.Overlay {
 
 
 /***/ }),
-/* 51 */
+/* 52 */
 /***/ (() => {
 
 var _a;
@@ -4696,7 +4714,7 @@ up.Layer.OverlayWithViewport = (_a = class OverlayWithViewport extends up.Layer.
 
 
 /***/ }),
-/* 52 */
+/* 53 */
 /***/ (() => {
 
 var _a;
@@ -4742,7 +4760,7 @@ up.Layer.Root = (_a = class Root extends up.Layer {
 
 
 /***/ }),
-/* 53 */
+/* 54 */
 /***/ (() => {
 
 var _a;
@@ -4753,7 +4771,7 @@ up.Layer.Modal = (_a = class Modal extends up.Layer.OverlayWithViewport {
 
 
 /***/ }),
-/* 54 */
+/* 55 */
 /***/ (() => {
 
 var _a;
@@ -4764,7 +4782,7 @@ up.Layer.Popup = (_a = class Popup extends up.Layer.OverlayWithTether {
 
 
 /***/ }),
-/* 55 */
+/* 56 */
 /***/ (() => {
 
 var _a;
@@ -4775,7 +4793,7 @@ up.Layer.Drawer = (_a = class Drawer extends up.Layer.OverlayWithViewport {
 
 
 /***/ }),
-/* 56 */
+/* 57 */
 /***/ (() => {
 
 var _a;
@@ -4786,7 +4804,7 @@ up.Layer.Cover = (_a = class Cover extends up.Layer.OverlayWithViewport {
 
 
 /***/ }),
-/* 57 */
+/* 58 */
 /***/ (() => {
 
 const u = up.util;
@@ -4876,7 +4894,7 @@ up.LayerLookup = class LayerLookup {
 
 
 /***/ }),
-/* 58 */
+/* 59 */
 /***/ (() => {
 
 const u = up.util;
@@ -4989,7 +5007,7 @@ up.LayerStack = class LayerStack extends Array {
 
 
 /***/ }),
-/* 59 */
+/* 60 */
 /***/ (() => {
 
 up.LinkFeedbackURLs = class LinkFeedbackURLs {
@@ -5020,7 +5038,7 @@ up.LinkFeedbackURLs = class LinkFeedbackURLs {
 
 
 /***/ }),
-/* 60 */
+/* 61 */
 /***/ (() => {
 
 const u = up.util;
@@ -5088,7 +5106,7 @@ up.LinkPreloader = class LinkPreloader {
 
 
 /***/ }),
-/* 61 */
+/* 62 */
 /***/ (() => {
 
 const u = up.util;
@@ -5184,7 +5202,7 @@ up.MotionController = class MotionController {
 
 
 /***/ }),
-/* 62 */
+/* 63 */
 /***/ (() => {
 
 const u = up.util;
@@ -5276,7 +5294,7 @@ up.NonceableCallback = class NonceableCallback {
 
 
 /***/ }),
-/* 63 */
+/* 64 */
 /***/ (() => {
 
 const u = up.util;
@@ -5353,7 +5371,7 @@ up.OptionsParser = class OptionsParser {
 
 
 /***/ }),
-/* 64 */
+/* 65 */
 /***/ (() => {
 
 const e = up.element;
@@ -5421,7 +5439,7 @@ up.OverlayFocus = class OverlayFocus {
 
 
 /***/ }),
-/* 65 */
+/* 66 */
 /***/ (() => {
 
 const u = up.util;
@@ -5652,7 +5670,7 @@ up.Params = class Params {
 
 
 /***/ }),
-/* 66 */
+/* 67 */
 /***/ (() => {
 
 const e = up.element;
@@ -5702,7 +5720,7 @@ up.ProgressBar = class ProgressBar {
 
 
 /***/ }),
-/* 67 */
+/* 68 */
 /***/ (() => {
 
 const u = up.util;
@@ -5826,7 +5844,7 @@ up.RenderOptions = (function () {
 
 
 /***/ }),
-/* 68 */
+/* 69 */
 /***/ (() => {
 
 up.RenderResult = class RenderResult extends up.Record {
@@ -5850,11 +5868,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;
@@ -6191,7 +6215,7 @@ up.Request = (_a = class Request extends up.Record {
 
 
 /***/ }),
-/* 70 */
+/* 71 */
 /***/ (() => {
 
 const u = up.util;
@@ -6331,7 +6355,7 @@ up.Request.Cache = class Cache {
 
 
 /***/ }),
-/* 71 */
+/* 72 */
 /***/ (() => {
 
 const u = up.util;
@@ -6439,7 +6463,7 @@ up.Request.Queue = class Queue {
 
 
 /***/ }),
-/* 72 */
+/* 73 */
 /***/ (() => {
 
 const u = up.util;
@@ -6478,7 +6502,7 @@ up.Request.FormRenderer = class FormRenderer {
 
 
 /***/ }),
-/* 73 */
+/* 74 */
 /***/ (() => {
 
 var _a;
@@ -6550,7 +6574,7 @@ up.Request.XHRRenderer = (_a = class XHRRenderer {
 
 
 /***/ }),
-/* 74 */
+/* 75 */
 /***/ (() => {
 
 const u = up.util;
@@ -6631,7 +6655,7 @@ up.Response = class Response extends up.Record {
 
 
 /***/ }),
-/* 75 */
+/* 76 */
 /***/ (() => {
 
 var _a;
@@ -6697,6 +6721,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) {
@@ -6711,7 +6746,7 @@ up.ResponseDoc = (_a = class ResponseDoc {
 
 
 /***/ }),
-/* 76 */
+/* 77 */
 /***/ (() => {
 
 const e = up.element;
@@ -6805,7 +6840,7 @@ up.RevealMotion = class RevealMotion {
 
 
 /***/ }),
-/* 77 */
+/* 78 */
 /***/ (() => {
 
 const u = up.util;
@@ -6846,7 +6881,7 @@ up.Selector = class Selector {
 
 
 /***/ }),
-/* 78 */
+/* 79 */
 /***/ (() => {
 
 const u = up.util;
@@ -6966,7 +7001,7 @@ up.Tether = class Tether {
 
 
 /***/ }),
-/* 79 */
+/* 80 */
 /***/ (() => {
 
 const u = up.util;
@@ -7046,7 +7081,7 @@ up.URLPattern = class URLPattern {
 
 
 /***/ }),
-/* 80 */
+/* 81 */
 /***/ (() => {
 
 up.framework = (function () {
@@ -7130,7 +7165,7 @@ up.boot = up.framework.boot;
 
 
 /***/ }),
-/* 81 */
+/* 82 */
 /***/ (() => {
 
 up.event = (function () {
@@ -7233,7 +7268,7 @@ up.emit = up.event.emit;
 
 
 /***/ }),
-/* 82 */
+/* 83 */
 /***/ (() => {
 
 up.protocol = (function () {
@@ -7374,7 +7409,7 @@ up.protocol = (function () {
 
 
 /***/ }),
-/* 83 */
+/* 84 */
 /***/ (() => {
 
 up.log = (function () {
@@ -7459,7 +7494,7 @@ up.warn = up.log.warn;
 
 
 /***/ }),
-/* 84 */
+/* 85 */
 /***/ (() => {
 
 up.syntax = (function () {
@@ -7609,7 +7644,7 @@ up.hello = up.syntax.hello;
 
 
 /***/ }),
-/* 85 */
+/* 86 */
 /***/ (() => {
 
 up.history = (function () {
@@ -7746,10 +7781,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 () {
@@ -8196,6 +8231,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;
@@ -8270,6 +8320,8 @@ up.fragment = (function () {
         splitTarget,
         parseTargetSteps,
         isAlive,
+        targetForSteps,
+        compressNestedSteps,
     };
 })();
 up.reload = up.fragment.reload;
@@ -8281,7 +8333,7 @@ u.delegate(up, ['context'], () => up.layer.current);
 
 
 /***/ }),
-/* 87 */
+/* 88 */
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -8290,10 +8342,10 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /***/ }),
-/* 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;
@@ -8605,7 +8657,7 @@ up.viewport = (function () {
         tryFocus,
         newStateCache,
         focusedElementWithin,
-        copyCursorProps
+        copyCursorProps,
     };
 })();
 up.focus = up.viewport.focus;
@@ -8613,7 +8665,7 @@ up.reveal = up.viewport.reveal;
 
 
 /***/ }),
-/* 89 */
+/* 90 */
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -8622,7 +8674,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /***/ }),
-/* 90 */
+/* 91 */
 /***/ (() => {
 
 up.motion = (function () {
@@ -8880,10 +8932,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(() => ({
@@ -9026,7 +9078,7 @@ up.cache = up.network.cache;
 
 
 /***/ }),
-/* 92 */
+/* 93 */
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -9035,10 +9087,10 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /***/ }),
-/* 93 */
+/* 94 */
 /***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
 
-__webpack_require__(94);
+__webpack_require__(95);
 const u = up.util;
 const e = up.element;
 up.layer = (function () {
@@ -9279,7 +9331,7 @@ up.layer = (function () {
 
 
 /***/ }),
-/* 94 */
+/* 95 */
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -9288,10 +9340,10 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /***/ }),
-/* 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;
@@ -9586,7 +9638,7 @@ up.follow = up.link.follow;
 
 
 /***/ }),
-/* 96 */
+/* 97 */
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -9595,7 +9647,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /***/ }),
-/* 97 */
+/* 98 */
 /***/ (() => {
 
 up.form = (function () {
@@ -9989,7 +10041,7 @@ up.validate = up.form.validate;
 
 
 /***/ }),
-/* 98 */
+/* 99 */
 /***/ (() => {
 
 up.feedback = (function () {
@@ -10106,7 +10158,7 @@ up.feedback = (function () {
 
 
 /***/ }),
-/* 99 */
+/* 100 */
 /***/ (() => {
 
 up.radio = (function () {
@@ -10121,7 +10173,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) => {
@@ -10135,10 +10187,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 = {}) {
@@ -10174,7 +10237,7 @@ up.radio = (function () {
     up.on('up:framework:reset', reset);
     return {
         config,
-        hungrySolutions,
+        hungrySteps,
         startPolling,
         stopPolling,
         pollIssue,
@@ -10183,7 +10246,7 @@ up.radio = (function () {
 
 
 /***/ }),
-/* 100 */
+/* 101 */
 /***/ (() => {
 
 (function () {
@@ -10333,15 +10396,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();
 
 })();