unpoly-rails 3.6.1.1 → 3.7.0.1

data/assets/unpoly/unpoly.js

@@ -5,7 +5,7 @@
 /***/ (() => {
 
 window.up = {
-    version: '3.6.1'
+    version: '3.7.0'
 };
 
 
@@ -954,15 +954,7 @@ 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);
-            }
-        }
+        return element.parentNode?.closest(selector);
     }
     function around(element, selector) {
         return getList(element.closest(selector), subtree(element, selector));
@@ -1992,11 +1984,18 @@ const u = up.util;
 up.RenderJob = (_a = class RenderJob {
         constructor(options) {
             this.options = up.RenderOptions.preprocess(options);
-            this._rendered = this._execute();
         }
-        async _execute() {
+        execute() {
+            this._rendered = this._executePromise();
+            return this;
+        }
+        getPreflightFragments() {
+            return this._getChange().getPreflightProps().fragments;
+        }
+        async _executePromise() {
             try {
-                let result = await this._makeChange();
+                this._guardRender();
+                let result = await this._getChange().execute();
                 this._handleResult(result);
                 return result;
             }
@@ -2039,21 +2038,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({ ...this.options, onRequest });
+                return new up.Change.FromURL({ ...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({ ...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({ ...this.options, onRender });
             }
-            return this.change.execute();
         }
         _guardRender() {
             up.browser.assertConfirmed(this.options);
@@ -2070,7 +2067,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'],
@@ -2097,7 +2094,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);
@@ -2272,7 +2270,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);
     }
@@ -2745,7 +2744,7 @@ up.Change.CloseLayer = class CloseLayer extends up.Change.Removal {
         this._layer.overlayFocus.teardown();
         formerParent.overlayFocus?.moveToFront();
         let newFocusElement = this._layer.origin || formerParent.element;
-        newFocusElement.focus({ preventScroll: true });
+        up.focus(newFocusElement, { preventScroll: true });
     }
 };
 
@@ -3033,6 +3032,7 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
             if (assets) {
                 up.script.assertAssetsOK(assets, plan.options);
             }
+            this.options.onRender?.();
         }
         _getResponseDoc() {
             if (this._preview)
@@ -3482,6 +3482,7 @@ up.EventListener = class EventListener extends up.Record {
             'baseLayer',
             'passive',
             'once',
+            'capture',
             'beforeBoot',
         ];
     }
@@ -3501,7 +3502,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() {
@@ -3585,6 +3586,7 @@ up.EventListenerGroup = class EventListenerGroup extends up.Record {
             'baseLayer',
             'passive',
             'once',
+            'capture',
             'beforeBoot',
         ];
     }
@@ -3647,88 +3649,102 @@ up.EventListenerGroup = class EventListenerGroup extends up.Record {
 
 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() {
+        if (this._abortable === false) {
+            return [];
+        }
+        else {
+            return u.wrapList(this._abortable ?? this._scope);
+        }
+    }
+    _watchFieldsWithin(container) {
+        for (let field of up.form.fields(container)) {
+            this._watchField(field);
+        }
     }
-    _isAnyFieldAttached() {
-        return u.some(this._fields, 'isConnected');
+    _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) {
         return !u.isEqual(values, this._processedValues) && !u.isEqual(this._scheduledValues, values);
     }
     async _requestCallback() {
-        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 = { ..._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);
-                await 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 = { ...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);
+            await callbackDone;
+        }
+        this._callbackRunning = false;
+        this._requestCallback();
     }
     _runCallback(...args) {
         return up.error.guard(() => this._callback(...args));
@@ -3748,14 +3764,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());
+    }
 };
 
 
@@ -4091,7 +4110,8 @@ up.FragmentFocus = class FragmentFocus extends up.FragmentProcessor {
     keys() {
         return super.keys().concat([
             'hash',
-            'focusCapsule'
+            'focusCapsule',
+            'inputDevice',
         ]);
     }
     processPrimitive(opt) {
@@ -4148,7 +4168,7 @@ up.FragmentFocus = class FragmentFocus extends up.FragmentProcessor {
     }
     _focusElement(element) {
         if (element) {
-            up.focus(element, { force: true, ...PREVENT_SCROLL_OPTIONS });
+            up.focus(element, { force: true, ...PREVENT_SCROLL_OPTIONS, inputDevice: this.inputDevice });
             return true;
         }
     }
@@ -5789,8 +5809,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)();
@@ -5974,7 +5997,7 @@ up.RenderOptions = (function () {
     function preprocess(options) {
         up.migrate.preprocessRenderOptions?.(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);
@@ -7014,14 +7037,14 @@ const u = up.util;
 up.RevealMotion = class RevealMotion {
     constructor(element, options = {}) {
         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 = options.behavior ?? 'instant';
         const viewportConfig = up.viewport.config;
-        this._snap = this._options.snap ?? this._options.revealSnap ?? viewportConfig.revealSnap;
-        this._padding = this._options.padding ?? this._options.revealPadding ?? viewportConfig.revealPadding;
-        this._top = this._options.top ?? this._options.revealTop ?? viewportConfig.revealTop;
-        this._max = this._options.max ?? this._options.revealMax ?? viewportConfig.revealMax;
+        this._snap = options.snap ?? options.revealSnap ?? viewportConfig.revealSnap;
+        this._padding = options.padding ?? options.revealPadding ?? viewportConfig.revealPadding;
+        this._top = options.top ?? options.revealTop ?? viewportConfig.revealTop;
+        this._max = options.max ?? options.revealMax ?? viewportConfig.revealMax;
         this._topObstructionSelector = viewportConfig.selector('fixedTopSelectors');
         this._bottomObstructionSelector = viewportConfig.selector('fixedBottomSelectors');
     }
@@ -7055,7 +7078,7 @@ up.RevealMotion = class RevealMotion {
             newScrollTop = 0;
         }
         if (newScrollTop !== originalScrollTop) {
-            this._viewport.scrollTo({ ...this._options, top: newScrollTop });
+            this._viewport.scrollTo({ top: newScrollTop, behavior: this._behavior });
         }
     }
     _getViewportRect() {
@@ -7534,6 +7557,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,
@@ -7546,6 +7579,7 @@ up.event = (function () {
         isUnmodified,
         fork,
         keyModifiers,
+        get inputDevice() { return getInputDevice(); }
     };
 })();
 up.on = up.event.on;
@@ -8208,7 +8242,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);
@@ -8689,6 +8723,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) {
@@ -8707,25 +8742,35 @@ up.viewport = (function () {
         motion.start();
         return up.migrate.formerlyAsync?.('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 ??= up.event.inputDevice;
+        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?.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) {
@@ -9998,8 +10043,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);
@@ -10016,6 +10064,9 @@ up.form = (function () {
         parser.include(up.link.followOptions);
         return options;
     }
+    function getPreflightFragments(form) {
+        return buildSubmitJob(form).getPreflightFragments();
+    }
     function watchOptions(field, options, parserOptions = {}) {
         options = u.options(options);
         let parser = new up.OptionsParser(field, options, { ...parserOptions, closest: true, attrPrefix: 'up-watch-' });
@@ -10081,7 +10132,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()];
@@ -10124,17 +10175,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');
@@ -10142,8 +10189,11 @@ 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 = {}) {
+        const form = getForm(target);
+        options.abortable ??= [form, ...getPreflightFragments(form)];
+        const onChange = (_value, _name, renderOptions) => submit(target, renderOptions);
+        return watch(target, options, onChange);
     }
     function getGroupSelectors() {
         return up.migrate.migratedFormGroupSelectors?.() || config.groupSelectors;
@@ -10197,7 +10247,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) {
@@ -10226,7 +10276,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)) {
@@ -10253,7 +10303,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');
@@ -10265,7 +10315,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() {
@@ -10321,6 +10371,7 @@ up.form = (function () {
         groupSolution: findGroupSolution,
         groupSelectors: getGroupSelectors,
         get: getForm,
+        getScope,
     };
 })();
 up.submit = up.form.submit;

data/assets/unpoly/unpoly.min.css

@@ -1,6 +1,6 @@
 [hidden][hidden]{display:none !important}
 up-wrapper{display:inline-block}
-up-bounds{position:absolute}.up-focusable-content:focus,.up-focusable-content:focus-visible{outline:0}
+up-bounds{position:absolute}.up-focus-hidden:focus-visible{outline:none !important}
 .up-request-loader{display:none}up-progress-bar{position:fixed;top:0;left:0;z-index:999999999;height:3px;background-color:#007bff}
 up-focus-trap{position:fixed;top:0;left:0;width:0;height:0}up-cover-viewport,up-drawer-viewport,up-modal-viewport,up-drawer-backdrop,up-modal-backdrop,up-cover,up-drawer,up-modal{top:0;left:0;bottom:0;right:0}up-drawer-box,up-modal-box{box-shadow:0 0 10px 1px rgba(0,0,0,.3)}up-popup{box-shadow:0 0 4px rgba(0,0,0,.3)}up-popup:focus,up-cover-box:focus,up-drawer-box:focus,up-modal-box:focus,up-cover:focus,up-drawer:focus,up-modal:focus,up-popup:focus-visible,up-cover-box:focus-visible,up-drawer-box:focus-visible,up-modal-box:focus-visible,up-cover:focus-visible,up-drawer:focus-visible,up-modal:focus-visible{outline:none}up-cover,up-drawer,up-modal{z-index:2000;position:fixed}up-drawer-backdrop,up-modal-backdrop{position:absolute;background:rgba(0,0,0,.4)}up-cover-viewport,up-drawer-viewport,up-modal-viewport{position:absolute;overflow-y:scroll;overflow-x:hidden;overscroll-behavior:contain;display:flex;align-items:flex-start;justify-content:center}up-popup,up-cover-box,up-drawer-box,up-modal-box{position:relative;box-sizing:border-box;max-width:100%;background-color:#fff;padding:20px;overflow-x:hidden}up-popup-content,up-cover-content,up-drawer-content,up-modal-content{display:block}up-popup{z-index:1000}up-popup-dismiss,up-cover-dismiss,up-drawer-dismiss,up-modal-dismiss{color:#888;position:absolute;top:10px;right:10px;font-size:1.7rem;line-height:.5}up-modal[nesting="0"] up-modal-viewport{padding:25px 15px}up-modal[nesting="1"] up-modal-viewport{padding:50px 30px}up-modal[nesting="2"] up-modal-viewport{padding:75px 45px}up-modal[nesting="3"] up-modal-viewport{padding:100px 60px}up-modal[nesting="4"] up-modal-viewport{padding:125px 75px}up-modal[size=small] up-modal-box{width:350px}up-modal[size=medium] up-modal-box{width:650px}up-modal[size=large] up-modal-box{width:1000px}up-modal[size=grow] up-modal-box{width:auto}up-modal[size=full] up-modal-box{width:100%}up-drawer-viewport{justify-content:flex-start}up-drawer[position=right] up-drawer-viewport{justify-content:flex-end}up-drawer-box{min-height:100vh}up-drawer[size=small] up-drawer-box{width:150px}up-drawer[size=medium] up-drawer-box{width:340px}up-drawer[size=large] up-drawer-box{width:600px}up-drawer[size=grow] up-drawer-box{width:auto}up-drawer[size=full] up-drawer-box{width:100%}up-cover-box{width:100%;min-height:100vh;padding:0}up-popup{padding:15px;text-align:left}up-popup[size=small]{width:180px}up-popup[size=medium]{width:300px}up-popup[size=large]{width:550px}up-popup[size=grow] up-popup{width:auto}up-popup[size=full] up-popup{width:100%}
 [up-href],[up-clickable]{cursor:pointer}