unpoly-rails 3.6.1.1 → 3.7.0.1

data/assets/unpoly/unpoly.es6.js

@@ -5,7 +5,7 @@
 /***/ (() => {
 
 window.up = {
-    version: '3.6.1'
+    version: '3.7.0'
 };
 
 
@@ -957,15 +957,8 @@ up.element = (function () {
         return Node.prototype.contains.call(root, element);
     }
     function ancestor(element, selector) {
-        let parentElement = element.parentElement;
-        if (parentElement) {
-            if (parentElement.matches(selector)) {
-                return parentElement;
-            }
-            else {
-                return ancestor(parentElement, selector);
-            }
-        }
+        var _a;
+        return (_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.closest(selector);
     }
     function around(element, selector) {
         return getList(element.closest(selector), subtree(element, selector));
@@ -2005,12 +1998,19 @@ const u = up.util;
 up.RenderJob = (_a = class RenderJob {
         constructor(options) {
             this.options = up.RenderOptions.preprocess(options);
-            this._rendered = this._execute();
         }
-        _execute() {
+        execute() {
+            this._rendered = this._executePromise();
+            return this;
+        }
+        getPreflightFragments() {
+            return this._getChange().getPreflightProps().fragments;
+        }
+        _executePromise() {
             return __awaiter(this, void 0, void 0, function* () {
                 try {
-                    let result = yield this._makeChange();
+                    this._guardRender();
+                    let result = yield this._getChange().execute();
                     this._handleResult(result);
                     return result;
                 }
@@ -2035,7 +2035,7 @@ up.RenderJob = (_a = class RenderJob {
         _handleError(error) {
             let prefix = error instanceof up.Aborted ? 'Rendering was aborted' : 'Error while rendering';
             up.puts('up.render()', `${prefix}: ${error.name}: ${error.message}`);
-            up.error.guard(() => { var _a, _b; return (_b = (_a = this.options).onError) === null || _b === void 0 ? void 0 : _b.call(_a, error); });
+            up.error.guard(() => { var _b, _c; return (_c = (_b = this.options).onError) === null || _c === void 0 ? void 0 : _c.call(_b, error); });
         }
         get finished() {
             return this._awaitFinished();
@@ -2056,21 +2056,19 @@ up.RenderJob = (_a = class RenderJob {
                 }
             });
         }
-        _makeChange() {
-            this._guardRender();
+        _getChange() {
             if (this.options.url) {
                 let onRequest = (request) => this._handleAbortOption(request);
-                this.change = new up.Change.FromURL(Object.assign(Object.assign({}, this.options), { onRequest }));
+                return new up.Change.FromURL(Object.assign(Object.assign({}, this.options), { onRequest }));
             }
             else if (this.options.response) {
-                this.change = new up.Change.FromResponse(this.options);
-                this._handleAbortOption(null);
+                let onRender = () => this._handleAbortOption(null);
+                return new up.Change.FromResponse(Object.assign(Object.assign({}, this.options), { onRender }));
             }
             else {
-                this.change = new up.Change.FromContent(this.options);
-                this._handleAbortOption(null);
+                let onRender = () => this._handleAbortOption(null);
+                return new up.Change.FromContent(Object.assign(Object.assign({}, this.options), { onRender }));
             }
-            return this.change.execute();
         }
         _guardRender() {
             up.browser.assertConfirmed(this.options);
@@ -2087,7 +2085,7 @@ up.RenderJob = (_a = class RenderJob {
             let { abort } = this.options;
             if (!abort || !up.network.isBusy())
                 return;
-            let { fragments, layer, origin, newLayer } = this.change.getPreflightProps();
+            let { fragments, layer, origin, newLayer } = this._getChange().getPreflightProps();
             let abortOptions = {
                 except: request,
                 logOnce: ['up.render()', 'Change with { abort } option will abort other requests'],
@@ -2114,7 +2112,8 @@ up.RenderJob = (_a = class RenderJob {
     (() => {
         u.delegate(_a.prototype, ['then', 'catch', 'finally'], function () { return this._rendered; });
         u.memoizeMethod(_a.prototype, {
-            _awaitFinished: true
+            _awaitFinished: true,
+            _getChange: true,
         });
     })(),
     _a);
@@ -2313,7 +2312,8 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
         const fragmentFocus = new up.FragmentFocus({
             fragment: this._content,
             layer: this.layer,
-            autoMeans: ['autofocus', 'layer']
+            autoMeans: ['autofocus', 'layer'],
+            inputDevice: this.options.inputDevice,
         });
         fragmentFocus.process(this.options.focus);
     }
@@ -2766,7 +2766,7 @@ up.Change.CloseLayer = class CloseLayer extends up.Change.Removal {
         this._layer.overlayFocus.teardown();
         (_a = formerParent.overlayFocus) === null || _a === void 0 ? void 0 : _a.moveToFront();
         let newFocusElement = this._layer.origin || formerParent.element;
-        newFocusElement.focus({ preventScroll: true });
+        up.focus(newFocusElement, { preventScroll: true });
     }
 };
 
@@ -2784,7 +2784,7 @@ up.Change.FromURL = (_a = class FromURL extends up.Change {
             this.options.normalizeLayerOptions = false;
         }
         execute() {
-            var _a, _b;
+            var _b, _c;
             let _newPageReason = this._newPageReason();
             if (_newPageReason) {
                 up.puts('up.render()', _newPageReason);
@@ -2792,7 +2792,7 @@ up.Change.FromURL = (_a = class FromURL extends up.Change {
                 return u.unresolvablePromise();
             }
             this.request = up.request(this._getRequestAttrs());
-            (_b = (_a = this.options).onRequest) === null || _b === void 0 ? void 0 : _b.call(_a, this.request);
+            (_c = (_b = this.options).onRequest) === null || _c === void 0 ? void 0 : _c.call(_b, this.request);
             up.feedback.showAroundRequest(this.request, this.options);
             up.form.disableWhile(this.request, this.options);
             if (this.options.preload) {
@@ -2873,14 +2873,14 @@ up.Change.FromResponse = (_a = class FromResponse extends up.Change {
             this._request = this._response.request;
         }
         execute() {
-            var _a;
+            var _b;
             if (up.fragment.config.skipResponse(this._loadedEventProps())) {
                 this._skip();
             }
             else {
                 this._request.assertEmitted('up:fragment:loaded', Object.assign(Object.assign({}, this._loadedEventProps()), { callback: this.options.onLoaded, log: ['Loaded fragment from %s', this._response.description], skip: () => this._skip() }));
             }
-            let fail = (_a = u.evalOption(this.options.fail, this._response)) !== null && _a !== void 0 ? _a : !this._response.ok;
+            let fail = (_b = u.evalOption(this.options.fail, this._response)) !== null && _b !== void 0 ? _b : !this._response.ok;
             if (fail) {
                 throw this._updateContentFromResponse(this.deriveFailOptions());
             }
@@ -2938,13 +2938,13 @@ up.Change.FromResponse = (_a = class FromResponse extends up.Change {
             };
         }
         _compilerPassMeta() {
-            var _a, _b;
+            var _b, _c;
             let meta = { revalidating: !!this.options.expiredResponse };
-            (_b = (_a = up.migrate).processCompilerPassMeta) === null || _b === void 0 ? void 0 : _b.call(_a, meta, this._response);
+            (_c = (_b = up.migrate).processCompilerPassMeta) === null || _c === void 0 ? void 0 : _c.call(_b, meta, this._response);
             return meta;
         }
         _augmentOptionsFromResponse(renderOptions) {
-            var _a, _b;
+            var _b, _c;
             const responseURL = this._response.url;
             let serverLocation = responseURL;
             let hash = this._request.hash;
@@ -2975,8 +2975,8 @@ up.Change.FromResponse = (_a = class FromResponse extends up.Change {
             }
             renderOptions.context = u.merge(renderOptions.context, this._response.context);
             renderOptions.cspNonces = this._response.cspNonces;
-            (_a = renderOptions.time) !== null && _a !== void 0 ? _a : (renderOptions.time = this._response.lastModified);
-            (_b = renderOptions.etag) !== null && _b !== void 0 ? _b : (renderOptions.etag = this._response.etag);
+            (_b = renderOptions.time) !== null && _b !== void 0 ? _b : (renderOptions.time = this._response.lastModified);
+            (_c = renderOptions.etag) !== null && _c !== void 0 ? _c : (renderOptions.etag = this._response.etag);
         }
     },
     (() => {
@@ -3041,6 +3041,7 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
             return !(error instanceof up.CannotMatch);
         }
         _onPlanApplicable(plan) {
+            var _b, _c;
             let primaryPlan = this._getPlans()[0];
             if (plan !== primaryPlan) {
                 up.puts('up.render()', 'Could not match primary target "%s". Updating a fallback target "%s".', primaryPlan.target, plan.target);
@@ -3049,9 +3050,10 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
             if (assets) {
                 up.script.assertAssetsOK(assets, plan.options);
             }
+            (_c = (_b = this.options).onRender) === null || _c === void 0 ? void 0 : _c.call(_b);
         }
         _getResponseDoc() {
-            var _a, _b;
+            var _b, _c;
             if (this._preview)
                 return;
             const docOptions = u.pick(this.options, [
@@ -3063,19 +3065,19 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
                 'cspNonces',
                 'origin',
             ]);
-            (_b = (_a = up.migrate).handleResponseDocOptions) === null || _b === void 0 ? void 0 : _b.call(_a, docOptions);
+            (_c = (_b = up.migrate).handleResponseDocOptions) === null || _c === void 0 ? void 0 : _c.call(_b, docOptions);
             if (this._defaultPlacement() === 'content') {
                 docOptions.target = this._firstExpandedTarget(docOptions.target);
             }
             return new up.ResponseDoc(docOptions);
         }
         _improveOptionsFromResponseDoc() {
-            var _a;
+            var _b;
             if (this._preview)
                 return;
             let responseDoc = this._getResponseDoc();
             if (this.options.fragment) {
-                (_a = this.options).target || (_a.target = responseDoc.rootSelector());
+                (_b = this.options).target || (_b.target = responseDoc.rootSelector());
             }
             this.options.title = this.improveHistoryValue(this.options.title, responseDoc.title);
             this.options.metaTags = this.improveHistoryValue(this.options.metaTags, responseDoc.metaTags);
@@ -3504,6 +3506,7 @@ up.EventListener = class EventListener extends up.Record {
             'baseLayer',
             'passive',
             'once',
+            'capture',
             'beforeBoot',
         ];
     }
@@ -3525,7 +3528,7 @@ up.EventListener = class EventListener extends up.Record {
         this.element.addEventListener(...this._addListenerArg());
     }
     _addListenerArg() {
-        let options = u.compactObject(u.pick(this, ['once', 'passive']));
+        let options = u.compactObject(u.pick(this, ['once', 'passive', 'capture']));
         return [this.eventType, this.nativeCallback, options];
     }
     unbind() {
@@ -3610,6 +3613,7 @@ up.EventListenerGroup = class EventListenerGroup extends up.Record {
             'baseLayer',
             'passive',
             'once',
+            'capture',
             'beforeBoot',
         ];
     }
@@ -3681,56 +3685,67 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 const u = up.util;
 up.FieldWatcher = class FieldWatcher {
-    constructor(fields, options, callback) {
-        this._callback = callback;
-        this._fields = fields;
+    constructor(root, options, callback) {
         this._options = options;
+        this._root = root;
+        this._scope = up.form.getScope(root);
+        this._callback = callback;
         this._batch = options.batch;
-        this._unbindFns = [];
-    }
-    _fieldOptions(field) {
-        let options = u.copy(this._options);
-        return up.form.watchOptions(field, options, { defaults: { event: 'input' } });
+        this._abortable = options.abortable;
     }
     start() {
         this._scheduledValues = null;
         this._processedValues = this._readFieldValues();
         this._currentTimer = null;
         this._callbackRunning = false;
-        for (let field of this._fields) {
-            this._watchField(field);
+        this._unbindFns = [];
+        this._watchFieldsWithin(this._root);
+        this._root.addEventListener('up:fragment:inserted', ({ target }) => {
+            if (target !== this._root)
+                this._watchFieldsWithin(target);
+        });
+        for (let abortableElement of this._abortableElements()) {
+            this._unbindFns.push(up.fragment.onAborted(abortableElement, () => this._abort()));
         }
-    }
-    _watchField(field) {
-        let _fieldOptions = this._fieldOptions(field);
-        this._unbindFns.push(up.on(field, _fieldOptions.event, (event) => this._check(event, _fieldOptions)));
-        this._unbindFns.push(up.fragment.onAborted(field, () => this._cancelTimer()));
+        this._unbindFns.push(up.on(this._scope, 'reset', () => this._onFormReset()));
     }
     stop() {
+        this._abort();
         for (let unbindFn of this._unbindFns)
             unbindFn();
-        this._cancelTimer();
     }
-    _cancelTimer() {
-        clearTimeout(this._currentTimer);
-        this._currentTimer = null;
+    _fieldOptions(field) {
+        let rootOptions = u.copy(this._options);
+        return up.form.watchOptions(field, rootOptions, { defaults: { event: 'input' } });
+    }
+    _abortableElements() {
+        var _a;
+        if (this._abortable === false) {
+            return [];
+        }
+        else {
+            return u.wrapList((_a = this._abortable) !== null && _a !== void 0 ? _a : this._scope);
+        }
     }
-    _isAnyFieldAttached() {
-        return u.some(this._fields, 'isConnected');
+    _watchFieldsWithin(container) {
+        for (let field of up.form.fields(container)) {
+            this._watchField(field);
+        }
+    }
+    _watchField(field) {
+        let fieldOptions = this._fieldOptions(field);
+        this._unbindFns.push(up.on(field, fieldOptions.event, () => this._check(fieldOptions)));
+    }
+    _abort() {
+        this._scheduledValues = null;
     }
-    _scheduleValues(values, event, _fieldOptions) {
-        this._cancelTimer();
+    _scheduleValues(values, fieldOptions) {
+        clearTimeout(this._currentTimer);
         this._scheduledValues = values;
-        let delay = u.evalOption(_fieldOptions.delay, event);
+        let delay = fieldOptions.delay || 0;
         this._currentTimer = u.timer(delay, () => {
-            this._currentTimer = null;
-            if (this._isAnyFieldAttached()) {
-                this.scheduledFieldOptions = _fieldOptions;
-                this._requestCallback();
-            }
-            else {
-                this._scheduledValues = null;
-            }
+            this._scheduledFieldOptions = fieldOptions;
+            this._requestCallback();
         });
     }
     _isNewValues(values) {
@@ -3738,32 +3753,36 @@ up.FieldWatcher = class FieldWatcher {
     }
     _requestCallback() {
         return __awaiter(this, void 0, void 0, function* () {
-            let _fieldOptions = this.scheduledFieldOptions;
-            if ((this._scheduledValues !== null) && !this._currentTimer && !this._callbackRunning) {
-                const diff = this._changedValues(this._processedValues, this._scheduledValues);
-                this._processedValues = this._scheduledValues;
-                this._scheduledValues = null;
-                this._callbackRunning = true;
-                this.scheduledFieldOptions = null;
-                let callbackOptions = Object.assign(Object.assign({}, _fieldOptions), { disable: false });
-                const callbackReturnValues = [];
-                if (this._batch) {
-                    callbackReturnValues.push(this._runCallback(diff, callbackOptions));
-                }
-                else {
-                    for (let name in diff) {
-                        const value = diff[name];
-                        callbackReturnValues.push(this._runCallback(value, name, callbackOptions));
-                    }
-                }
-                if (u.some(callbackReturnValues, u.isPromise)) {
-                    let callbackDone = Promise.allSettled(callbackReturnValues);
-                    up.form.disableWhile(callbackDone, _fieldOptions);
-                    yield callbackDone;
+            if (!this._scheduledValues)
+                return;
+            if (this._callbackRunning)
+                return;
+            if (!this._scope.isConnected)
+                return;
+            let fieldOptions = this._scheduledFieldOptions;
+            const diff = this._changedValues(this._processedValues, this._scheduledValues);
+            this._processedValues = this._scheduledValues;
+            this._scheduledValues = null;
+            this._callbackRunning = true;
+            this._scheduledFieldOptions = null;
+            let callbackOptions = Object.assign(Object.assign({}, fieldOptions), { disable: false });
+            const callbackReturnValues = [];
+            if (this._batch) {
+                callbackReturnValues.push(this._runCallback(diff, callbackOptions));
+            }
+            else {
+                for (let name in diff) {
+                    const value = diff[name];
+                    callbackReturnValues.push(this._runCallback(value, name, callbackOptions));
                 }
-                this._callbackRunning = false;
-                this._requestCallback();
             }
+            if (u.some(callbackReturnValues, u.isPromise)) {
+                let callbackDone = Promise.allSettled(callbackReturnValues);
+                up.form.disableWhile(callbackDone, fieldOptions);
+                yield callbackDone;
+            }
+            this._callbackRunning = false;
+            this._requestCallback();
         });
     }
     _runCallback(...args) {
@@ -3784,14 +3803,17 @@ up.FieldWatcher = class FieldWatcher {
         return changes;
     }
     _readFieldValues() {
-        return up.Params.fromFields(this._fields).toObject();
+        return up.Params.fromContainer(this._root).toObject();
     }
-    _check(event, _fieldOptions) {
+    _check(fieldOptions = {}) {
         const values = this._readFieldValues();
         if (this._isNewValues(values)) {
-            this._scheduleValues(values, event, _fieldOptions);
+            this._scheduleValues(values, fieldOptions);
         }
     }
+    _onFormReset() {
+        u.task(() => this._check());
+    }
 };
 
 
@@ -4153,7 +4175,8 @@ up.FragmentFocus = class FragmentFocus extends up.FragmentProcessor {
     keys() {
         return super.keys().concat([
             'hash',
-            'focusCapsule'
+            'focusCapsule',
+            'inputDevice',
         ]);
     }
     processPrimitive(opt) {
@@ -4211,7 +4234,7 @@ up.FragmentFocus = class FragmentFocus extends up.FragmentProcessor {
     }
     _focusElement(element) {
         if (element) {
-            up.focus(element, Object.assign({ force: true }, PREVENT_SCROLL_OPTIONS));
+            up.focus(element, Object.assign(Object.assign({ force: true }, PREVENT_SCROLL_OPTIONS), { inputDevice: this.inputDevice }));
             return true;
         }
     }
@@ -5889,8 +5912,11 @@ up.Params = class Params {
         return this.entries.length === 0;
     }
     static fromForm(form) {
-        form = up.fragment.get(form);
-        return this.fromFields(up.form.fields(form));
+        return this.fromContainer(form);
+    }
+    static fromContainer(container) {
+        let fields = up.form.fields(container);
+        return this.fromFields(fields);
     }
     static fromFields(fields) {
         const params = new (this)();
@@ -6075,7 +6101,7 @@ up.RenderOptions = (function () {
         var _a, _b;
         (_b = (_a = up.migrate).preprocessRenderOptions) === null || _b === void 0 ? void 0 : _b.call(_a, options);
         const defaults = u.merge(GLOBAL_DEFAULTS, navigateDefaults(options));
-        return u.merge(u.omit(defaults, LATE_KEYS), { defaults }, options, preloadOverrides(options));
+        return u.merge(u.omit(defaults, LATE_KEYS), { defaults }, { inputDevice: up.event.inputDevice }, options, preloadOverrides(options));
     }
     function finalize(preprocessedOptions, lateDefaults) {
         return u.merge(preprocessedOptions.defaults, lateDefaults, preprocessedOptions);
@@ -6227,7 +6253,7 @@ up.Request = (_a = class Request extends up.Record {
             };
         }
         constructor(options) {
-            var _a, _b, _c;
+            var _b, _c, _d;
             super(options);
             this.params = new up.Params(this.params);
             if (this.wrapMethod == null) {
@@ -6239,17 +6265,17 @@ up.Request = (_a = class Request extends up.Record {
                 this.layer = up.layer.get(this.layer, layerLookupOptions);
                 this.failLayer = up.layer.get(this.failLayer, layerLookupOptions);
                 this.context || (this.context = this.layer.context || {});
-                this.failContext || (this.failContext = ((_a = this.failLayer) === null || _a === void 0 ? void 0 : _a.context) || {});
+                this.failContext || (this.failContext = ((_b = this.failLayer) === null || _b === void 0 ? void 0 : _b.context) || {});
                 this.mode || (this.mode = this.layer.mode);
-                this.failMode || (this.failMode = (_b = this.failLayer) === null || _b === void 0 ? void 0 : _b.mode);
+                this.failMode || (this.failMode = (_c = this.failLayer) === null || _c === void 0 ? void 0 : _c.mode);
             }
             this.deferred = u.newDeferred();
-            (_c = this.badResponseTime) !== null && _c !== void 0 ? _c : (this.badResponseTime = u.evalOption(up.network.config.badResponseTime, this));
+            (_d = this.badResponseTime) !== null && _d !== void 0 ? _d : (this.badResponseTime = u.evalOption(up.network.config.badResponseTime, this));
             this._addAutoHeaders();
         }
         get xhr() {
-            var _a;
-            return (_a = this._xhr) !== null && _a !== void 0 ? _a : (this._xhr = new XMLHttpRequest());
+            var _b;
+            return (_b = this._xhr) !== null && _b !== void 0 ? _b : (this._xhr = new XMLHttpRequest());
         }
         get fragments() {
             if (this._fragments) {
@@ -6266,8 +6292,8 @@ up.Request = (_a = class Request extends up.Record {
             this._fragments = value;
         }
         get fragment() {
-            var _a;
-            return (_a = this.fragments) === null || _a === void 0 ? void 0 : _a[0];
+            var _b;
+            return (_b = this.fragments) === null || _b === void 0 ? void 0 : _b[0];
         }
         _normalize() {
             this.method = u.normalizeMethod(this.method);
@@ -6284,8 +6310,8 @@ up.Request = (_a = class Request extends up.Record {
             });
         }
         _extractHashFromURL() {
-            var _a;
-            let match = (_a = this.url) === null || _a === void 0 ? void 0 : _a.match(/^([^#]*)(#.+)$/);
+            var _b;
+            let match = (_b = this.url) === null || _b === void 0 ? void 0 : _b.match(/^([^#]*)(#.+)$/);
             if (match) {
                 this.url = match[1];
                 return this.hash = match[2];
@@ -6311,18 +6337,18 @@ up.Request = (_a = class Request extends up.Record {
             return u.evalAutoOption(this.cache, up.network.config.autoCache, this);
         }
         runQueuedCallbacks() {
-            var _a;
+            var _b;
             u.always(this, () => this._evictExpensiveAttrs());
-            (_a = this.onQueued) === null || _a === void 0 ? void 0 : _a.call(this, this);
+            (_b = this.onQueued) === null || _b === void 0 ? void 0 : _b.call(this, this);
         }
         load() {
-            var _a;
+            var _b;
             if (this.state !== 'new')
                 return;
             if (this._emitLoad()) {
                 this.state = 'loading';
                 this._normalize();
-                (_a = this.onLoading) === null || _a === void 0 ? void 0 : _a.call(this);
+                (_b = this.onLoading) === null || _b === void 0 ? void 0 : _b.call(this);
                 this.expired = false;
                 new up.Request.XHRRenderer(this).buildAndSend({
                     onload: () => this._onXHRLoad(),
@@ -7064,8 +7090,8 @@ up.ResponseDoc = (_a = class ResponseDoc {
             return this._fromHead(up.script.findAssets);
         }
         _getTitleText(head) {
-            var _a;
-            return (_a = head.querySelector('title')) === null || _a === void 0 ? void 0 : _a.textContent;
+            var _b;
+            return (_b = head.querySelector('title')) === null || _b === void 0 ? void 0 : _b.textContent;
         }
         select(selector) {
             let finder = new up.FragmentFinder({
@@ -7142,16 +7168,16 @@ const e = up.element;
 const u = up.util;
 up.RevealMotion = class RevealMotion {
     constructor(element, options = {}) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         this._element = element;
-        this._options = options;
-        this._viewport = e.get(this._options.viewport) || up.viewport.get(this._element);
+        this._viewport = e.get(options.viewport) || up.viewport.get(this._element);
         this._obstructionsLayer = up.layer.get(this._viewport);
+        this._behavior = (_a = options.behavior) !== null && _a !== void 0 ? _a : 'instant';
         const viewportConfig = up.viewport.config;
-        this._snap = (_b = (_a = this._options.snap) !== null && _a !== void 0 ? _a : this._options.revealSnap) !== null && _b !== void 0 ? _b : viewportConfig.revealSnap;
-        this._padding = (_d = (_c = this._options.padding) !== null && _c !== void 0 ? _c : this._options.revealPadding) !== null && _d !== void 0 ? _d : viewportConfig.revealPadding;
-        this._top = (_f = (_e = this._options.top) !== null && _e !== void 0 ? _e : this._options.revealTop) !== null && _f !== void 0 ? _f : viewportConfig.revealTop;
-        this._max = (_h = (_g = this._options.max) !== null && _g !== void 0 ? _g : this._options.revealMax) !== null && _h !== void 0 ? _h : viewportConfig.revealMax;
+        this._snap = (_c = (_b = options.snap) !== null && _b !== void 0 ? _b : options.revealSnap) !== null && _c !== void 0 ? _c : viewportConfig.revealSnap;
+        this._padding = (_e = (_d = options.padding) !== null && _d !== void 0 ? _d : options.revealPadding) !== null && _e !== void 0 ? _e : viewportConfig.revealPadding;
+        this._top = (_g = (_f = options.top) !== null && _f !== void 0 ? _f : options.revealTop) !== null && _g !== void 0 ? _g : viewportConfig.revealTop;
+        this._max = (_j = (_h = options.max) !== null && _h !== void 0 ? _h : options.revealMax) !== null && _j !== void 0 ? _j : viewportConfig.revealMax;
         this._topObstructionSelector = viewportConfig.selector('fixedTopSelectors');
         this._bottomObstructionSelector = viewportConfig.selector('fixedBottomSelectors');
     }
@@ -7185,7 +7211,7 @@ up.RevealMotion = class RevealMotion {
             newScrollTop = 0;
         }
         if (newScrollTop !== originalScrollTop) {
-            this._viewport.scrollTo(Object.assign(Object.assign({}, this._options), { top: newScrollTop }));
+            this._viewport.scrollTo({ top: newScrollTop, behavior: this._behavior });
         }
     }
     _getViewportRect() {
@@ -7667,6 +7693,16 @@ up.event = (function () {
         up.emit(element, forkedEvent);
     }
     on('up:click', 'a[up-emit]', executeEmitAttr);
+    let inputDevices = ['unknown'];
+    function getInputDevice() {
+        return u.last(inputDevices);
+    }
+    function observeInputDevice(newModality) {
+        inputDevices.push(newModality);
+        setTimeout(() => inputDevices.pop());
+    }
+    on('keydown keyup', { capture: true }, () => observeInputDevice('key'));
+    on('pointerdown pointerup', { capture: true }, () => observeInputDevice('pointer'));
     on('up:framework:reset', reset);
     return {
         on,
@@ -7679,6 +7715,7 @@ up.event = (function () {
         isUnmodified,
         fork,
         keyModifiers,
+        get inputDevice() { return getInputDevice(); }
     };
 })();
 up.on = up.event.on;
@@ -8340,7 +8377,7 @@ up.fragment = (function () {
     }
     const render = up.mockable((...args) => {
         let options = parseTargetAndOptions(args);
-        return new up.RenderJob(options);
+        return new up.RenderJob(options).execute();
     });
     const navigate = up.mockable((...args) => {
         const options = parseTargetAndOptions(args);
@@ -8817,6 +8854,7 @@ up.viewport = (function () {
         revealPadding: 0,
         revealTop: false,
         revealMax() { return 0.5 * window.innerHeight; },
+        autoFocusVisible({ element, inputDevice }) { return inputDevice === 'key' || up.form.isField(element); }
     }));
     const bodyShifter = new up.BodyShifter();
     up.compiler(config.selectorFn('anchoredRightSelectors'), function (element) {
@@ -8836,25 +8874,35 @@ up.viewport = (function () {
         motion.start();
         return ((_b = (_a = up.migrate).formerlyAsync) === null || _b === void 0 ? void 0 : _b.call(_a, 'up.reveal()')) || true;
     }
-    function doFocus(element, options = {}) {
-        if (options.force) {
-            makeFocusable(element);
+    function doFocus(element, { preventScroll, force, inputDevice, focusVisible } = {}) {
+        if (force) {
+            if (!element.hasAttribute('tabindex') && element.tabIndex === -1) {
+                element.setAttribute('tabindex', '-1');
+            }
         }
-        element.focus({ preventScroll: true });
-        if (!options.preventScroll) {
+        inputDevice !== null && inputDevice !== void 0 ? inputDevice : (inputDevice = up.event.inputDevice);
+        focusVisible !== null && focusVisible !== void 0 ? focusVisible : (focusVisible = 'auto');
+        focusVisible = u.evalAutoOption(focusVisible, config.autoFocusVisible, { element, inputDevice });
+        element.focus({
+            preventScroll: true,
+            focusVisible,
+        });
+        removeFocusClasses(element);
+        element.classList.add(focusVisible ? 'up-focus-visible' : 'up-focus-hidden');
+        if (!preventScroll) {
             return reveal(element);
         }
     }
+    function removeFocusClasses(element) {
+        element === null || element === void 0 ? void 0 : element.classList.remove('up-focus-hidden', 'up-focus-visible');
+    }
+    up.on('focusin', function ({ relatedTarget }) {
+        removeFocusClasses(relatedTarget);
+    });
     function tryFocus(element, options) {
         doFocus(element, options);
         return element === document.activeElement;
     }
-    function makeFocusable(element) {
-        if (!element.hasAttribute('tabindex') && element.tabIndex === -1) {
-            element.setAttribute('tabindex', '-1');
-            element.classList.add('up-focusable-content');
-        }
-    }
     function revealHash(hash = location.hash, options) {
         let match = firstHashTarget(hash, options);
         if (match) {
@@ -10134,8 +10182,11 @@ up.form = (function () {
         return config.selector('submitButtonSelectors');
     }
     const submit = up.mockable((form, options) => {
-        return up.render(submitOptions(form, options));
+        return buildSubmitJob(form, options).execute();
     });
+    function buildSubmitJob(form, options) {
+        return new up.RenderJob(submitOptions(form, options));
+    }
     function submitOptions(form, options, parserOptions) {
         form = getForm(form);
         options = u.options(options);
@@ -10152,6 +10203,9 @@ up.form = (function () {
         parser.include(up.link.followOptions);
         return options;
     }
+    function getPreflightFragments(form) {
+        return buildSubmitJob(form).getPreflightFragments();
+    }
     function watchOptions(field, options, parserOptions = {}) {
         var _a;
         options = u.options(options);
@@ -10218,7 +10272,7 @@ up.form = (function () {
             return u.noop;
         let missingOption = (key) => { up.fail("Cannot process { disable: '%s' } option without { %s }", disable, key); };
         let getOrigin = () => origin || missingOption('origin');
-        let getOriginForm = () => getContainer(getOrigin());
+        let getOriginForm = () => getScope(getOrigin());
         let containers;
         if (disable === true) {
             containers = [getOriginForm()];
@@ -10261,17 +10315,13 @@ up.form = (function () {
             button.focus();
         }
     });
-    function watch(container, ...args) {
-        const fields = findFields(container);
-        const unnamedFields = u.reject(fields, 'name');
-        if (unnamedFields.length) {
-            up.puts('up.watch()', 'Will not watch fields without a [name]: %o', unnamedFields);
-        }
-        const callback = u.extractCallback(args) || watchCallbackFromElement(container) || up.fail('No callback given for up.watch()');
+    function watch(root, ...args) {
+        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);
-        const watch = new up.FieldWatcher(fields, options, callback);
-        watch.start();
-        return () => watch.stop();
+        const watcher = new up.FieldWatcher(root, options, callback);
+        watcher.start();
+        return () => watcher.stop();
     }
     function watchCallbackFromElement(element) {
         let rawCallback = element.getAttribute('up-watch');
@@ -10279,8 +10329,12 @@ up.form = (function () {
             return up.NonceableCallback.fromString(rawCallback).toFunction('value', 'name').bind(element);
         }
     }
-    function autosubmit(target, options) {
-        return watch(target, options, (_value, _name, renderOptions) => submit(target, renderOptions));
+    function autosubmit(target, options = {}) {
+        var _a;
+        const form = getForm(target);
+        (_a = options.abortable) !== null && _a !== void 0 ? _a : (options.abortable = [form, ...getPreflightFragments(form)]);
+        const onChange = (_value, _name, renderOptions) => submit(target, renderOptions);
+        return watch(target, options, onChange);
     }
     function getGroupSelectors() {
         var _a, _b;
@@ -10335,7 +10389,7 @@ up.form = (function () {
             }
         }
         else if (field.matches('input[type=radio]')) {
-            const form = getContainer(field);
+            const form = getScope(field);
             const groupName = field.getAttribute('name');
             const checkedButton = form.querySelector(`input[type=radio]${e.attrSelector('name', groupName)}:checked`);
             if (checkedButton) {
@@ -10364,7 +10418,7 @@ up.form = (function () {
     }
     function switchTargets(switcher, options = {}) {
         const targetSelector = options.target || options.target || switcher.getAttribute('up-switch');
-        const form = getContainer(switcher);
+        const form = getScope(switcher);
         targetSelector || up.fail("No switch target given for %o", switcher);
         const fieldValues = switcherValues(switcher);
         for (let target of up.fragment.all(form, targetSelector)) {
@@ -10391,7 +10445,7 @@ up.form = (function () {
         return u.parseTokens(str, { json: true });
     }
     function findSwitcherForTarget(target) {
-        const form = getContainer(target);
+        const form = getScope(target);
         const switchers = form.querySelectorAll('[up-switch]');
         const switcher = u.find(switchers, function (switcher) {
             const targetSelector = switcher.getAttribute('up-switch');
@@ -10403,7 +10457,7 @@ up.form = (function () {
         const element = up.fragment.get(elementOrSelector, options);
         return element.form || element.closest('form');
     }
-    function getContainer(element, options) {
+    function getScope(element, options) {
         return getForm(element, options) || up.layer.get(element).element;
     }
     function focusedField() {
@@ -10459,6 +10513,7 @@ up.form = (function () {
         groupSolution: findGroupSolution,
         groupSelectors: getGroupSelectors,
         get: getForm,
+        getScope,
     };
 })();
 up.submit = up.form.submit;