quasar 2.9.2 → 2.10.1

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.9.2
+ * Quasar Framework v2.10.1
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1398,6 +1398,8 @@
   const tabsKey = '_q_tabs_';
   const uploaderKey = '_q_u_';
 
+  const emptyRenderFn = () => {};
+
   const globalConfig = {};
   let globalConfigIsFrozen = false;
 
@@ -1610,7 +1612,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.9.2' };
+      const $q = { version: '2.10.1' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -2369,7 +2371,7 @@
       return () => vue.h('div', {
         class: classes.value,
         style: style.value,
-        role: 'alert',
+        role: 'status',
         'aria-label': props.label
       }, hMergeSlot(slots.default, props.label !== void 0 ? [ props.label ] : []))
     }
@@ -3300,7 +3302,7 @@
       }
   );
 
-  const padding = {
+  const btnPadding = {
     none: 0,
     xs: 4,
     sm: 8,
@@ -3320,6 +3322,21 @@
   const formTypes = [ 'button', 'submit', 'reset' ];
   const mediaTypeRE = /[^\s]\/[^\s]/;
 
+  const btnDesignOptions = [ 'flat', 'outline', 'push', 'unelevated' ];
+  const getBtnDesign = (props, defaultValue) => {
+    if (props.flat === true) return 'flat'
+    if (props.outline === true) return 'outline'
+    if (props.push === true) return 'push'
+    if (props.unelevated === true) return 'unelevated'
+    return defaultValue
+  };
+  const getBtnDesignAttr = props => {
+    const design = getBtnDesign(props);
+    return design !== void 0
+      ? { [ design ]: true }
+      : {}
+  };
+
   const useBtnProps = {
     ...useSizeProps,
     ...useRouterLinkProps,
@@ -3333,13 +3350,14 @@
     icon: String,
     iconRight: String,
 
-    round: Boolean,
+    ...btnDesignOptions.reduce(
+      (acc, val) => (acc[ val ] = Boolean) && acc,
+      {}
+    ),
+
     square: Boolean,
-    outline: Boolean,
-    flat: Boolean,
-    unelevated: Boolean,
+    round: Boolean,
     rounded: Boolean,
-    push: Boolean,
     glossy: Boolean,
 
     size: String,
@@ -3389,7 +3407,7 @@
         ? Object.assign({}, obj, {
           padding: props.padding
             .split(/\s+/)
-            .map(v => (v in padding ? padding[ v ] + 'px' : v))
+            .map(v => (v in btnPadding ? btnPadding[ v ] + 'px' : v))
             .join(' '),
           minWidth: '0',
           minHeight: '0'
@@ -3409,13 +3427,7 @@
       isActionable.value === true ? props.tabindex || 0 : -1
     ));
 
-    const design = vue.computed(() => {
-      if (props.flat === true) return 'flat'
-      if (props.outline === true) return 'outline'
-      if (props.push === true) return 'push'
-      if (props.unelevated === true) return 'unelevated'
-      return 'standard'
-    });
+    const design = vue.computed(() => getBtnDesign(props, 'standard'));
 
     const attributes = vue.computed(() => {
       const acc = { tabindex: tabIndex.value };
@@ -4175,7 +4187,7 @@
   };
 
   const useModelToggleEmits = [
-    'before-show', 'show', 'before-hide', 'hide'
+    'beforeShow', 'show', 'beforeHide', 'hide'
   ];
 
   // handleShow/handleHide -> removeTick(), self (& emit show)
@@ -4235,7 +4247,7 @@
 
       showing.value = true;
 
-      emit('before-show', evt);
+      emit('beforeShow', evt);
 
       if (handleShow !== void 0) {
         handleShow(evt);
@@ -4274,7 +4286,7 @@
 
       showing.value = false;
 
-      emit('before-hide', evt);
+      emit('beforeHide', evt);
 
       if (handleHide !== void 0) {
         handleHide(evt);
@@ -4396,8 +4408,8 @@
 
   function getPortalProxy (el) {
     return portalProxyList.find(proxy =>
-      proxy.__qPortalInnerRef.value !== null
-      && proxy.__qPortalInnerRef.value.contains(el)
+      proxy.contentEl !== null
+      && proxy.contentEl.contains(el)
     )
   }
 
@@ -4411,7 +4423,7 @@
           return getParentProxy(proxy)
         }
       }
-      else if (proxy.__qPortalInnerRef !== void 0) {
+      else if (proxy.__qPortal === true) {
         // treat it as point of separation if parent is QPopupProxy
         // (so mobile matches desktop behavior)
         // and hide it too
@@ -4432,7 +4444,7 @@
 
   function closePortals (proxy, evt, depth) {
     while (depth !== 0 && proxy !== void 0 && proxy !== null) {
-      if (proxy.__qPortalInnerRef !== void 0) {
+      if (proxy.__qPortal === true) {
         depth--;
 
         if (proxy.$options.name === 'QMenu') {
@@ -4524,7 +4536,10 @@
     vue.onUnmounted(() => { hidePortal(true); });
 
     // needed for portal vm detection
-    vm.proxy.__qPortalInnerRef = innerRef;
+    vm.proxy.__qPortal = true;
+
+    // public way of accessing the rendered content
+    injectProp(vm.proxy, 'contentEl', () => innerRef.value);
 
     return {
       showPortal,
@@ -4562,18 +4577,24 @@
     }
   };
 
-  function useTransition (props, showing) {
-    const transitionState = vue.ref(showing.value);
+  function useTransition (props, defaultShowFn = () => {}, defaultHideFn = () => {}) {
+    return {
+      transitionProps: vue.computed(() => {
+        const show = `q-transition--${ props.transitionShow || defaultShowFn() }`;
+        const hide = `q-transition--${ props.transitionHide || defaultHideFn() }`;
 
-    vue.watch(showing, val => {
-      vue.nextTick(() => { transitionState.value = val; });
-    });
+        return {
+          appear: true,
 
-    // return transition
-    return {
-      transition: vue.computed(() => 'q-transition--' + (
-        transitionState.value === true ? props.transitionHide : props.transitionShow
-      )),
+          enterFromClass: `${ show }-enter-from`,
+          enterActiveClass: `${ show }-enter-active`,
+          enterToClass: `${ show }-enter-to`,
+
+          leaveFromClass: `${ hide }-leave-from`,
+          leaveActiveClass: `${ hide }-leave-active`,
+          leaveToClass: `${ hide }-leave-to`
+        }
+      }),
 
       transitionStyle: vue.computed(() => `--q-transition-duration: ${ props.transitionDuration }ms`)
     }
@@ -5296,7 +5317,7 @@
 
     emits: [
       ...useModelToggleEmits,
-      'click', 'escape-key'
+      'click', 'escapeKey'
     ],
 
     setup (props, { slots, emit, attrs }) {
@@ -5317,7 +5338,7 @@
       const isDark = useDark(props, $q);
       const { registerTick, removeTick } = useTick();
       const { registerTimeout } = useTimeout();
-      const { transition, transitionStyle } = useTransition(props, showing);
+      const { transitionProps, transitionStyle } = useTransition(props);
       const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget);
 
       const { anchorEl, canShow } = useAnchor({ showing });
@@ -5397,7 +5418,10 @@
           let node = innerRef.value;
 
           if (node && node.contains(document.activeElement) !== true) {
-            node = node.querySelector('[autofocus], [data-autofocus]') || node;
+            node = node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
+              || node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
+              || node.querySelector('[autofocus], [data-autofocus]')
+              || node;
             node.focus({ preventScroll: true });
           }
         });
@@ -5534,7 +5558,7 @@
       }
 
       function onEscapeKey (evt) {
-        emit('escape-key');
+        emit('escapeKey');
         hide(evt);
       }
 
@@ -5562,7 +5586,7 @@
       function renderPortalContent () {
         return vue.h(
           vue.Transition,
-          { name: transition.value, appear: true },
+          transitionProps.value,
           () => (
             showing.value === true
               ? vue.h('div', {
@@ -5667,11 +5691,25 @@
       + hexBytes[ b[ 14 ] ] + hexBytes[ b[ 15 ] ]
   }
 
+  const btnPropsList = Object.keys(useBtnProps);
+
+  const passBtnProps = props => btnPropsList.reduce(
+    (acc, key) => {
+      const val = props[ key ];
+      if (val !== void 0) {
+        acc[ key ] = val;
+      }
+      return acc
+    },
+    {}
+  );
+
   var QBtnDropdown = createComponent({
     name: 'QBtnDropdown',
 
     props: {
       ...useBtnProps,
+      ...useTransitionProps,
 
       modelValue: Boolean,
       split: Boolean,
@@ -5703,7 +5741,7 @@
       toggleAriaLabel: String
     },
 
-    emits: [ 'update:modelValue', 'click', 'before-show', 'show', 'before-hide', 'hide' ],
+    emits: [ 'update:modelValue', 'click', 'beforeShow', 'show', 'beforeHide', 'hide' ],
 
     setup (props, { slots, emit }) {
       const { proxy } = vue.getCurrentInstance();
@@ -5712,7 +5750,7 @@
       const menuRef = vue.ref(null);
       const targetUid = uid$3();
 
-      const attributes = vue.computed(() => {
+      const ariaAttrs = vue.computed(() => {
         const acc = {
           'aria-expanded': showing.value === true ? 'true' : 'false',
           'aria-haspopup': 'true',
@@ -5740,6 +5778,9 @@
         + (props.split === false ? ' q-btn-dropdown__arrow-container' : '')
       );
 
+      const btnDesignAttr = vue.computed(() => getBtnDesignAttr(props));
+      const btnProps = vue.computed(() => passBtnProps(props));
+
       vue.watch(() => props.modelValue, val => {
         menuRef.value !== null && menuRef.value[ val ? 'show' : 'hide' ]();
       });
@@ -5748,7 +5789,7 @@
 
       function onBeforeShow (e) {
         showing.value = true;
-        emit('before-show', e);
+        emit('beforeShow', e);
       }
 
       function onShow (e) {
@@ -5758,7 +5799,7 @@
 
       function onBeforeHide (e) {
         showing.value = false;
-        emit('before-hide', e);
+        emit('beforeHide', e);
       }
 
       function onHide (e) {
@@ -5820,6 +5861,9 @@
             self: props.menuSelf,
             offset: props.menuOffset,
             separateClosePopup: true,
+            transitionShow: props.transitionShow,
+            transitionHide: props.transitionHide,
+            transitionDuration: props.transitionDuration,
             onBeforeShow,
             onShow,
             onBeforeHide,
@@ -5830,11 +5874,11 @@
         if (props.split === false) {
           return vue.h(QBtn, {
             class: 'q-btn-dropdown q-btn-dropdown--simple',
-            ...props,
+            ...btnProps.value,
+            ...ariaAttrs.value,
             disable: props.disable === true || props.disableMainBtn === true,
             noWrap: true,
             round: false,
-            ...attributes.value,
             onClick
           }, {
             default: () => hSlot(slots.label, []).concat(Arrow),
@@ -5844,21 +5888,17 @@
 
         return vue.h(QBtnGroup, {
           class: 'q-btn-dropdown q-btn-dropdown--split no-wrap q-btn-item',
-          outline: props.outline,
-          flat: props.flat,
           rounded: props.rounded,
           square: props.square,
-          push: props.push,
-          unelevated: props.unelevated,
+          ...btnDesignAttr.value,
           glossy: props.glossy,
           stretch: props.stretch
         }, () => [
           vue.h(QBtn, {
             class: 'q-btn-dropdown--current',
-            ...props,
+            ...btnProps.value,
             disable: props.disable === true || props.disableMainBtn === true,
             noWrap: true,
-            iconRight: props.iconRight,
             round: false,
             onClick: onClickHide
           }, {
@@ -5868,16 +5908,15 @@
 
           vue.h(QBtn, {
             class: 'q-btn-dropdown__arrow-container q-anchor--skip',
-            ...attributes.value,
+            ...ariaAttrs.value,
+            ...btnDesignAttr.value,
             disable: props.disable === true || props.disableDropdown === true,
-            outline: props.outline,
-            flat: props.flat,
             rounded: props.rounded,
-            push: props.push,
-            size: props.size,
             color: props.color,
             textColor: props.textColor,
             dense: props.dense,
+            size: props.size,
+            padding: props.padding,
             ripple: props.ripple
           }, () => Arrow)
         ])
@@ -5984,6 +6023,14 @@
 
       const injectFormInput = useFormInject(formAttrs);
 
+      const btnDesignAttr = vue.computed(() => getBtnDesignAttr(props));
+
+      const btnOptionDesign = vue.computed(() => ({
+        rounded: props.rounded,
+        dense: props.dense,
+        ...btnDesignAttr.value
+      }));
+
       const btnOptions = vue.computed(() => props.options.map((item, i) => {
         const { attrs, value, slot, ...opt } = item;
 
@@ -5991,19 +6038,11 @@
           slot,
           props: {
             key: i,
-            onClick (e) { set(value, item, e); },
 
             'aria-pressed': value === props.modelValue ? 'true' : 'false',
-
             ...attrs,
             ...opt,
-
-            outline: props.outline,
-            flat: props.flat,
-            rounded: props.rounded,
-            push: props.push,
-            unelevated: props.unelevated,
-            dense: props.dense,
+            ...btnOptionDesign.value,
 
             disable: props.disable === true || opt.disable === true,
 
@@ -6021,7 +6060,9 @@
             padding: mergeOpt(opt, 'padding'),
             ripple: mergeOpt(opt, 'ripple'),
             stack: mergeOpt(opt, 'stack') === true,
-            stretch: mergeOpt(opt, 'stretch') === true
+            stretch: mergeOpt(opt, 'stretch') === true,
+
+            onClick (e) { set(value, item, e); }
           }
         }
       }));
@@ -6060,12 +6101,9 @@
 
       return () => vue.h(QBtnGroup, {
         class: 'q-btn-toggle',
-        outline: props.outline,
-        flat: props.flat,
+        ...btnDesignAttr.value,
         rounded: props.rounded,
-        push: props.push,
         stretch: props.stretch,
-        unelevated: props.unelevated,
         glossy: props.glossy,
         spread: props.spread
       }, getContent)
@@ -6523,7 +6561,7 @@
     keepAliveMax: Number
   };
 
-  const usePanelEmits = [ 'update:modelValue', 'before-transition', 'transition' ];
+  const usePanelEmits = [ 'update:modelValue', 'beforeTransition', 'transition' ];
 
   function usePanel () {
     const { props, emit, proxy } = vue.getCurrentInstance();
@@ -6595,7 +6633,7 @@
 
       if (panelIndex.value !== index) {
         panelIndex.value = index;
-        emit('before-transition', newVal, oldVal);
+        emit('beforeTransition', newVal, oldVal);
         vue.nextTick(() => {
           emit('transition', newVal, oldVal);
         });
@@ -7506,7 +7544,7 @@
     const attributes = vue.computed(() => {
       const attrs = {
         tabindex: tabindex.value,
-        role: 'checkbox',
+        role: type === 'toggle' ? 'switch' : 'checkbox',
         'aria-label': props.label,
         'aria-checked': isIndeterminate.value === true
           ? 'mixed'
@@ -7771,16 +7809,19 @@
           + (isDark.value === true ? ' q-chip--dark q-dark' : '')
       });
 
-      const attributes = vue.computed(() => (
-        props.disable === true
+      const attributes = vue.computed(() => {
+        const chip = props.disable === true
           ? { tabindex: -1, 'aria-disabled': 'true' }
-          : {
-              tabindex: props.tabindex || 0,
-              role: 'button',
-              'aria-hidden': 'false',
-              'aria-label': props.removeAriaLabel || $q.lang.label.remove
-            }
-      ));
+          : { tabindex: props.tabindex || 0 };
+        const remove = {
+          ...chip,
+          role: 'button',
+          'aria-hidden': 'false',
+          'aria-label': props.removeAriaLabel || $q.lang.label.remove
+        };
+
+        return { chip, remove }
+      });
 
       function onKeyup (e) {
         e.keyCode === 13 /* ENTER */ && onClick(e);
@@ -7838,7 +7879,7 @@
           vue.h(QIcon, {
             class: 'q-chip__icon q-chip__icon--remove cursor-pointer',
             name: removeIcon.value,
-            ...attributes.value,
+            ...attributes.value.remove,
             onClick: onRemove,
             onKeyup: onRemove
           })
@@ -7857,7 +7898,7 @@
 
         isClickable.value === true && Object.assign(
           data,
-          attributes.value,
+          attributes.value.chip,
           { onClick, onKeyup }
         );
 
@@ -9341,17 +9382,21 @@
       if (hasObserver === true) {
         let observer;
 
-        vue.onMounted(() => {
-          vue.nextTick(() => {
-            targetEl = proxy.$el.parentNode;
+        // initialize as soon as possible
+        const init = stop => {
+          targetEl = proxy.$el.parentNode;
 
-            if (targetEl) {
-              observer = new ResizeObserver(trigger);
-              observer.observe(targetEl);
-              emitEvent();
-            }
-          });
-        });
+          if (targetEl) {
+            observer = new ResizeObserver(trigger);
+            observer.observe(targetEl);
+            emitEvent();
+          }
+          else if (stop !== true) {
+            vue.nextTick(() => { init(true); });
+          }
+        };
+
+        vue.onMounted(() => { init(); });
 
         vue.onBeforeUnmount(() => {
           clearTimeout(timer);
@@ -10035,13 +10080,6 @@
         }
       }
 
-      /*
-       * Vue has an aggressive diff (in-place replacement) so we cannot
-       * ensure that the instance getting destroyed is the actual tab
-       * reported here. As a result, we cannot use its name or check
-       * if it's a route one to make the necessary updates. We need to
-       * always check the existing list again and infer the changes.
-       */
       function unregisterTab (tabData) {
         tabDataList.splice(tabDataList.indexOf(tabData), 1);
         tabDataListLen.value--;
@@ -10173,9 +10211,11 @@
   };
 
   function useTab (props, slots, emit, routeData) {
-    const $tabs = vue.inject(tabsKey, () => {
+    const $tabs = vue.inject(tabsKey, emptyRenderFn);
+    if ($tabs === emptyRenderFn) {
       console.error('QTab/QRouteTab component needs to be child of QTabs');
-    });
+      return emptyRenderFn
+    }
 
     const { proxy } = vue.getCurrentInstance();
 
@@ -10451,7 +10491,7 @@
     props: usePanelChildProps,
 
     setup (_, { slots }) {
-      return () => vue.h('div', { class: 'q-tab-panel' }, hSlot(slots.default))
+      return () => vue.h('div', { class: 'q-tab-panel', role: 'tabpanel' }, hSlot(slots.default))
     }
   });
 
@@ -13053,7 +13093,7 @@
 
     emits: [
       ...useDatetimeEmits,
-      'range-start', 'range-end', 'navigation'
+      'rangeStart', 'rangeEnd', 'navigation'
     ],
 
     setup (props, { slots, emit }) {
@@ -14362,7 +14402,7 @@
             finalHash: initHash
           };
 
-          emit('range-start', getShortDate(day));
+          emit('rangeStart', getShortDate(day));
         }
         else {
           const
@@ -14375,7 +14415,7 @@
           editRange.value = null;
           addToModel(initHash === finalHash ? day : { target: day, ...payload });
 
-          emit('range-end', {
+          emit('rangeEnd', {
             from: getShortDate(payload.from),
             to: getShortDate(payload.to)
           });
@@ -14680,7 +14720,7 @@
     left: 'fixed-left items-center'
   };
 
-  const transitions = {
+  const defaultTransitions = {
     standard: [ 'scale', 'scale' ],
     top: [ 'slide-down', 'slide-up' ],
     bottom: [ 'slide-up', 'slide-down' ],
@@ -14697,8 +14737,8 @@
       ...useModelToggleProps,
       ...useTransitionProps,
 
-      transitionShow: String,
-      transitionHide: String,
+      transitionShow: String, // override useTransitionProps
+      transitionHide: String, // override useTransitionProps
 
       persistent: Boolean,
       autoClose: Boolean,
@@ -14729,7 +14769,7 @@
 
     emits: [
       ...useModelToggleEmits,
-      'shake', 'click', 'escape-key'
+      'shake', 'click', 'escapeKey'
     ],
 
     setup (props, { slots, emit, attrs }) {
@@ -14737,7 +14777,6 @@
 
       const innerRef = vue.ref(null);
       const showing = vue.ref(false);
-      const transitionState = vue.ref(false);
       const animating = vue.ref(false);
 
       let shakeTimeout, refocusTarget = null, isMaximized, avoidAutoClose;
@@ -14752,6 +14791,12 @@
       const { registerTimeout } = useTimeout();
       const { registerTick, removeTick } = useTick();
 
+      const { transitionProps, transitionStyle } = useTransition(
+        props,
+        () => defaultTransitions[ props.position ][ 0 ],
+        () => defaultTransitions[ props.position ][ 1 ]
+      );
+
       const { showPortal, hidePortal, portalIsAccessible, renderPortal } = usePortal(
         vm, innerRef, renderPortalContent, /* pls do check if on a global dialog */ true
       );
@@ -14776,26 +14821,6 @@
         + (props.square === true ? ' q-dialog__inner--square' : '')
       );
 
-      const transitionShow = vue.computed(() =>
-        'q-transition--'
-        + (props.transitionShow === void 0 ? transitions[ props.position ][ 0 ] : props.transitionShow)
-      );
-
-      const transitionHide = vue.computed(() =>
-        'q-transition--'
-        + (props.transitionHide === void 0 ? transitions[ props.position ][ 1 ] : props.transitionHide)
-      );
-
-      const transition = vue.computed(() => (
-        transitionState.value === true
-          ? transitionHide.value
-          : transitionShow.value
-      ));
-
-      const transitionStyle = vue.computed(
-        () => `--q-transition-duration: ${ props.transitionDuration }ms`
-      );
-
       const useBackdrop = vue.computed(() => showing.value === true && props.seamless !== true);
 
       const onEvents = vue.computed(() => (
@@ -14810,12 +14835,6 @@
         attrs.class
       ]);
 
-      vue.watch(showing, val => {
-        vue.nextTick(() => {
-          transitionState.value = val;
-        });
-      });
-
       vue.watch(() => props.maximized, state => {
         showing.value === true && updateMaximized(state);
       });
@@ -14915,13 +14934,23 @@
             return
           }
 
-          node = node.querySelector(selector || '[autofocus], [data-autofocus]') || node;
+          node = (selector !== '' ? node.querySelector(selector) : null)
+            || node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
+            || node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
+            || node.querySelector('[autofocus], [data-autofocus]')
+            || node;
           node.focus({ preventScroll: true });
         });
       }
 
-      function shake () {
-        focus();
+      function shake (refocusTarget) {
+        if (refocusTarget && typeof refocusTarget.focus === 'function') {
+          refocusTarget.focus({ preventScroll: true });
+        }
+        else {
+          focus();
+        }
+
         emit('shake');
 
         const node = innerRef.value;
@@ -14947,7 +14976,7 @@
             props.maximized !== true && props.noShake !== true && shake();
           }
           else {
-            emit('escape-key');
+            emit('escapeKey');
             hide();
           }
         }
@@ -15002,7 +15031,7 @@
           hide(e);
         }
         else if (props.noShake !== true) {
-          shake();
+          shake(e.relatedTarget);
         }
       }
 
@@ -15031,7 +15060,8 @@
 
       function renderPortalContent () {
         return vue.h('div', {
-          'aria-modal': 'true',
+          role: 'dialog',
+          'aria-modal': useBackdrop.value === true ? 'true' : 'false',
           ...attrs,
           class: rootClasses.value
         }, [
@@ -15044,14 +15074,15 @@
                 class: 'q-dialog__backdrop fixed-full',
                 style: transitionStyle.value,
                 'aria-hidden': 'true',
-                onMousedown: onBackdropClick
+                tabindex: -1,
+                onFocusin: onBackdropClick
               })
               : null
           )),
 
           vue.h(
             vue.Transition,
-            { name: transition.value, appear: true },
+            transitionProps.value,
             () => (
               showing.value === true
                 ? vue.h('div', {
@@ -15124,7 +15155,7 @@
 
     emits: [
       ...useModelToggleEmits,
-      'on-layout', 'mini-state'
+      'onLayout', 'miniState'
     ],
 
     setup (props, { slots, emit, attrs }) {
@@ -15135,9 +15166,11 @@
       const { preventBodyScroll } = usePreventScroll();
       const { registerTimeout, removeTimeout } = useTimeout();
 
-      const $layout = vue.inject(layoutKey, () => {
+      const $layout = vue.inject(layoutKey, emptyRenderFn);
+      if ($layout === emptyRenderFn) {
         console.error('QDrawer needs to be child of QLayout');
-      });
+        return emptyRenderFn
+      }
 
       let lastDesktopState, timerMini, layoutTotalWidthWatcher;
 
@@ -15455,7 +15488,7 @@
       vue.watch(offset, val => { updateLayout('offset', val); });
 
       vue.watch(onLayout, val => {
-        emit('on-layout', val);
+        emit('onLayout', val);
         updateLayout('space', val);
       });
 
@@ -15479,7 +15512,7 @@
         }
       });
 
-      vue.watch(isMini, val => { emit('mini-state', val); });
+      vue.watch(isMini, val => { emit('miniState', val); });
 
       function applyPosition (position) {
         if (position === void 0) {
@@ -15644,8 +15677,8 @@
       }
 
       vue.onMounted(() => {
-        emit('on-layout', onLayout.value);
-        emit('mini-state', isMini.value);
+        emit('onLayout', onLayout.value);
+        emit('miniState', isMini.value);
 
         lastDesktopState = props.showIfAbove === true;
 
@@ -16198,7 +16231,7 @@
 
       const { registerTick, removeTick } = useTick();
       const { registerTimeout } = useTimeout();
-      const { transition, transitionStyle } = useTransition(props, showing);
+      const { transitionProps, transitionStyle } = useTransition(props);
       const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget);
 
       const { anchorEl, canShow, anchorEvents } = useAnchor({ showing, configureAnchorEl });
@@ -16389,16 +16422,13 @@
               attrs.style,
               transitionStyle.value
             ],
-            role: 'complementary'
+            role: 'tooltip'
           }, hSlot(slots.default))
           : null
       }
 
       function renderPortalContent () {
-        return vue.h(vue.Transition, {
-          name: transition.value,
-          appear: true
-        }, getTooltipContent)
+        return vue.h(vue.Transition, transitionProps.value, getTooltipContent)
       }
 
       vue.onBeforeUnmount(anchorCleanup);
@@ -16538,6 +16568,7 @@
           ref: rootRef,
           class: classes.value,
           style: style.value,
+          role: 'listitem',
           onClick,
           onKeyup
         };
@@ -17771,7 +17802,7 @@
 
     emits: [
       ...useModelToggleEmits,
-      'click', 'after-show', 'after-hide'
+      'click', 'afterShow', 'afterHide'
     ],
 
     setup (props, { slots, emit }) {
@@ -17880,11 +17911,11 @@
       }
 
       function onShow () {
-        emit('after-show');
+        emit('afterShow');
       }
 
       function onHide () {
-        emit('after-hide');
+        emit('afterHide');
       }
 
       function enterGroup () {
@@ -18712,7 +18743,7 @@
     maxlength: [ Number, String ]
   };
 
-  const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popup-show', 'popup-hide' ];
+  const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popupShow', 'popupHide' ];
 
   function useFieldState () {
     const { props, attrs, proxy, vnode } = vue.getCurrentInstance();
@@ -19442,7 +19473,14 @@
 
     function onDragleave (e) {
       stopAndPrevent(e);
-      e.relatedTarget !== dndRef.value && (dnd.value = false);
+
+      // Safari bug: relatedTarget is null for over 10 years
+      // https://bugs.webkit.org/show_bug.cgi?id=66547
+      const gone = e.relatedTarget !== null || client.is.safari !== true
+        ? e.relatedTarget !== dndRef.value
+        : document.elementsFromPoint(e.clientX, e.clientY).includes(dndRef.value) === false;
+
+      gone === true && (dnd.value = false);
     }
 
     function onDrop (e) {
@@ -19476,6 +19514,7 @@
       pickFiles,
       addFiles,
       onDragover,
+      onDragleave,
       processFiles,
       getDndNode,
 
@@ -19799,9 +19838,11 @@
       Object.assign(proxy, {
         removeAtIndex,
         removeFile,
-        getNativeElement: () => inputRef.value
+        getNativeElement: () => inputRef.value // deprecated
       });
 
+      injectProp(proxy, 'nativeEl', () => inputRef.value);
+
       return useField(state)
     }
   });
@@ -19829,9 +19870,11 @@
     setup (props, { slots, emit }) {
       const { proxy: { $q } } = vue.getCurrentInstance();
 
-      const $layout = vue.inject(layoutKey, () => {
+      const $layout = vue.inject(layoutKey, emptyRenderFn);
+      if ($layout === emptyRenderFn) {
         console.error('QFooter needs to be child of QLayout');
-      });
+        return emptyRenderFn
+      }
 
       const size = vue.ref(parseInt(props.heightHint, 10));
       const revealed = vue.ref(true);
@@ -20010,7 +20053,7 @@
       onSubmit: Function
     },
 
-    emits: [ 'reset', 'validation-success', 'validation-error' ],
+    emits: [ 'reset', 'validationSuccess', 'validationError' ],
 
     setup (props, { slots, emit }) {
       const vm = vue.getCurrentInstance();
@@ -20027,7 +20070,7 @@
         const index = ++validateIndex;
 
         const emitEvent = (res, ref) => {
-          emit('validation-' + (res === true ? 'success' : 'error'), ref);
+          emit('validation' + (res === true ? 'Success' : 'Error'), ref);
         };
 
         const validateComponent = comp => {
@@ -20129,7 +20172,9 @@
         addFocusFn(() => {
           if (rootRef.value === null) { return }
 
-          const target = rootRef.value.querySelector('[autofocus], [data-autofocus]')
+          const target = rootRef.value.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
+            || rootRef.value.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
+            || rootRef.value.querySelector('[autofocus], [data-autofocus]')
             || Array.prototype.find.call(rootRef.value.querySelectorAll('[tabindex]'), el => el.tabIndex > -1);
 
           target !== null && target !== void 0 && target.focus({ preventScroll: true });
@@ -20249,9 +20294,11 @@
     setup (props, { slots, emit }) {
       const { proxy: { $q } } = vue.getCurrentInstance();
 
-      const $layout = vue.inject(layoutKey, () => {
+      const $layout = vue.inject(layoutKey, emptyRenderFn);
+      if ($layout === emptyRenderFn) {
         console.error('QHeader needs to be child of QLayout');
-      });
+        return emptyRenderFn
+      }
 
       const size = vue.ref(parseInt(props.heightHint, 10));
       const revealed = vue.ref(true);
@@ -20940,7 +20987,7 @@
       const vm = vue.getCurrentInstance();
       const isDark = useDark(props, vm.proxy.$q);
 
-      const { transition, transitionStyle } = useTransition(props, vue.computed(() => props.showing));
+      const { transitionProps, transitionStyle } = useTransition(props);
 
       const classes = vue.computed(() =>
         'q-inner-loading absolute-full column flex-center'
@@ -20984,10 +21031,7 @@
           : null
       }
 
-      return () => vue.h(vue.Transition, {
-        name: transition.value,
-        appear: true
-      }, getContent)
+      return () => vue.h(vue.Transition, transitionProps.value, getContent)
     }
   });
 
@@ -21155,7 +21199,7 @@
           '^'
           + unmask.join('')
           + '(' + (unmaskChar === '' ? '.' : '[^' + unmaskChar + ']') + '+)?'
-          + '[' + unmaskChar + ']*$'
+          + (unmaskChar === '' ? '' : '[' + unmaskChar + ']*') + '$'
         ),
         extractLast = extract.length - 1,
         extractMatcher = extract.map((re, index) => {
@@ -21175,7 +21219,7 @@
 
       computedMask = mask;
       computedUnmask = val => {
-        const unmaskMatch = unmaskMatcher.exec(val);
+        const unmaskMatch = unmaskMatcher.exec(props.reverseFillMask === true ? val : val.slice(0, mask.length));
         if (unmaskMatch !== null) {
           val = unmaskMatch.slice(1).join('');
         }
@@ -21964,9 +22008,11 @@
       Object.assign(proxy, {
         focus,
         select,
-        getNativeElement: () => inputRef.value
+        getNativeElement: () => inputRef.value // deprecated
       });
 
+      injectProp(proxy, 'nativeEl', () => inputRef.value);
+
       return renderFn
     }
   });
@@ -22165,7 +22211,12 @@
       bordered: Boolean,
       dense: Boolean,
       separator: Boolean,
-      padding: Boolean
+      padding: Boolean,
+
+      tag: {
+        type: String,
+        default: 'div'
+      }
     },
 
     setup (props, { slots }) {
@@ -22181,7 +22232,7 @@
         + (props.padding === true ? ' q-list--padding' : '')
       );
 
-      return () => vue.h('div', { class: classes.value }, hSlot(slots.default))
+      return () => vue.h(props.tag, { class: classes.value, role: 'list' }, hSlot(slots.default))
     }
   });
 
@@ -22219,7 +22270,7 @@
       readonly: Boolean
     },
 
-    emits: [ 'update:modelValue', 'change', 'drag-value' ],
+    emits: [ 'update:modelValue', 'change', 'dragValue' ],
 
     setup (props, { slots, emit }) {
       const { proxy } = vue.getCurrentInstance();
@@ -22266,7 +22317,7 @@
         )
       );
 
-      const decimals = vue.computed(() => (String(props.step).trim('0').split('.')[ 1 ] || '').length);
+      const decimals = vue.computed(() => (String(props.step).trim().split('.')[ 1 ] || '').length);
       const step = vue.computed(() => (props.step === 0 ? 1 : props.step));
       const instantFeedback = vue.computed(() => props.instantFeedback === true || dragging.value === true);
 
@@ -22401,7 +22452,7 @@
 
         newModel = between(newModel, innerMin.value, innerMax.value);
 
-        emit('drag-value', newModel);
+        emit('dragValue', newModel);
 
         if (model.value !== newModel) {
           model.value = newModel;
@@ -22576,6 +22627,8 @@
 
       const { proxy } = vue.getCurrentInstance();
 
+      vue.watch(() => proxy.$q.lang.rtl, emitEvent);
+
       vue.onMounted(() => {
         parentEl = proxy.$el.parentNode;
         configureScrollTarget();
@@ -22676,7 +22729,7 @@
         if (height.value !== newHeight) {
           resized = true;
           height.value = newHeight;
-          props.onScrollHeight !== void 0 && emit('scroll-height', newHeight);
+          props.onScrollHeight !== void 0 && emit('scrollHeight', newHeight);
           updateScrollbarWidth();
         }
         if (width.value !== newWidth) {
@@ -23222,7 +23275,7 @@
       );
 
       const attrs = vue.computed(() => {
-        const attrs = {};
+        const attrs = { role: 'group' };
 
         if (props.type === 'radio') {
           attrs.role = 'radiogroup';
@@ -23287,10 +23340,17 @@
     setup (props, { slots }) {
       const { proxy: { $q } } = vue.getCurrentInstance();
 
-      const $layout = vue.inject(layoutKey);
-      vue.inject(pageContainerKey, () => {
+      const $layout = vue.inject(layoutKey, emptyRenderFn);
+      if ($layout === emptyRenderFn) {
+        console.error('QPage needs to be a deep child of QLayout');
+        return emptyRenderFn
+      }
+
+      const $pageContainer = vue.inject(pageContainerKey, emptyRenderFn);
+      if ($pageContainer === emptyRenderFn) {
         console.error('QPage needs to be child of QPageContainer');
-      });
+        return emptyRenderFn
+      }
 
       const style = vue.computed(() => {
         const offset
@@ -23333,9 +23393,11 @@
     setup (_, { slots }) {
       const { proxy: { $q } } = vue.getCurrentInstance();
 
-      const $layout = vue.inject(layoutKey, () => {
+      const $layout = vue.inject(layoutKey, emptyRenderFn);
+      if ($layout === emptyRenderFn) {
         console.error('QPageContainer needs to be child of QLayout');
-      });
+        return emptyRenderFn
+      }
 
       vue.provide(pageContainerKey, true);
 
@@ -23385,9 +23447,11 @@
   function usePageSticky () {
     const { props, proxy: { $q } } = vue.getCurrentInstance();
 
-    const $layout = vue.inject(layoutKey, () => {
+    const $layout = vue.inject(layoutKey, emptyRenderFn);
+    if ($layout === emptyRenderFn) {
       console.error('QPageSticky needs to be child of QLayout');
-    });
+      return emptyRenderFn
+    }
 
     const attach = vue.computed(() => {
       const pos = props.position;
@@ -23600,6 +23664,12 @@
     }
   });
 
+  function getBool (val, otherwise) {
+    return [ true, false ].includes(val)
+      ? val
+      : otherwise
+  }
+
   var QPagination = createComponent({
     name: 'QPagination',
 
@@ -23611,22 +23681,20 @@
         required: true
       },
       min: {
-        type: Number,
+        type: [ Number, String ],
         default: 1
       },
       max: {
-        type: Number,
+        type: [ Number, String ],
         required: true
       },
-
-      color: {
-        type: String,
-        default: 'primary'
+      maxPages: {
+        type: [ Number, String ],
+        default: 0,
+        validator: v => (
+          (typeof v === 'string' ? parseInt(v, 10) : v) >= 0
+        )
       },
-      textColor: String,
-
-      activeColor: String,
-      activeTextColor: String,
 
       inputStyle: [ Array, String, Object ],
       inputClass: [ Array, String, Object ],
@@ -23660,11 +23728,6 @@
         type: Boolean,
         default: null
       },
-      maxPages: {
-        type: Number,
-        default: 0,
-        validator: v => v >= 0
-      },
 
       ripple: {
         type: [ Boolean, Object ],
@@ -23680,7 +23743,21 @@
       push: Boolean,
       glossy: Boolean,
 
-      dense: Boolean,
+      color: {
+        type: String,
+        default: 'primary'
+      },
+      textColor: String,
+
+      activeDesign: {
+        type: String,
+        default: '',
+        values: v => v === '' || btnDesignOptions.includes(v)
+      },
+      activeColor: String,
+      activeTextColor: String,
+
+      gutter: String,
       padding: {
         type: String,
         default: '3px 2px'
@@ -23695,6 +23772,16 @@
 
       const isDark = useDark(props, $q);
 
+      const minProp = vue.computed(() => parseInt(props.min, 10));
+      const maxProp = vue.computed(() => parseInt(props.max, 10));
+      const maxPagesProp = vue.computed(() => parseInt(props.maxPages, 10));
+
+      const inputPlaceholder = vue.computed(() => model.value + ' / ' + maxProp.value);
+      const boundaryLinksProp = vue.computed(() => getBool(props.boundaryLinks, props.input));
+      const boundaryNumbersProp = vue.computed(() => getBool(props.boundaryNumbers, !props.input));
+      const directionLinksProp = vue.computed(() => getBool(props.directionLinks, props.input));
+      const ellipsesProp = vue.computed(() => getBool(props.ellipses, !props.input));
+
       const newPage = vue.ref(null);
       const model = vue.computed({
         get: () => props.modelValue,
@@ -23703,32 +23790,33 @@
           if (props.disable || isNaN(val)) {
             return
           }
-          const value = between(val, props.min, props.max);
+          const value = between(val, minProp.value, maxProp.value);
           if (props.modelValue !== value) {
             emit('update:modelValue', value);
           }
         }
       });
 
-      vue.watch(() => props.min + props.max, () => {
+      vue.watch(() => `${ minProp.value }|${ maxProp.value }`, () => {
         model.value = props.modelValue;
       });
 
-      function getBool (val, otherwise) {
-        return [ true, false ].includes(val)
-          ? val
-          : otherwise
-      }
-
       const classes = vue.computed(() =>
         'q-pagination row no-wrap items-center'
         + (props.disable === true ? ' disabled' : '')
       );
-      const inputPlaceholder = vue.computed(() => model.value + ' / ' + props.max);
-      const __boundaryLinks = vue.computed(() => getBool(props.boundaryLinks, props.input));
-      const __boundaryNumbers = vue.computed(() => getBool(props.boundaryNumbers, !props.input));
-      const __directionLinks = vue.computed(() => getBool(props.directionLinks, props.input));
-      const __ellipses = vue.computed(() => getBool(props.ellipses, !props.input));
+
+      const gutterProp = vue.computed(() => (
+        props.gutter in btnPadding
+          ? `${ btnPadding[ props.gutter ] }px`
+          : props.gutter || null
+      ));
+      const gutterStyle = vue.computed(() => (
+        gutterProp.value !== null
+          ? `--q-pagination-gutter-parent:-${ gutterProp.value };--q-pagination-gutter-child:${ gutterProp.value }`
+          : null
+      ));
+
       const icons = vue.computed(() => {
         const ico = [
           props.iconFirst || $q.iconSet.pagination.first,
@@ -23739,38 +23827,90 @@
         return $q.lang.rtl === true ? ico.reverse() : ico
       });
 
-      const attrs = vue.computed(() => (
-        props.disable === true
-          ? { 'aria-disabled': 'true' }
-          : {}
-      ));
+      const attrs = vue.computed(() => ({
+        'aria-disabled': props.disable === true ? 'true' : 'false',
+        role: 'navigation'
+      }));
 
+      const btnDesignProp = vue.computed(() => getBtnDesign(props, 'flat'));
       const btnProps = vue.computed(() => ({
+        [ btnDesignProp.value ]: true,
+
         round: props.round,
         rounded: props.rounded,
 
-        outline: props.outline,
-        unelevated: props.unelevated,
-        push: props.push,
-        glossy: props.glossy,
-
-        dense: props.dense,
         padding: props.padding,
 
         color: props.color,
-        flat: true,
+        textColor: props.textColor,
+
         size: props.size,
         ripple: props.ripple !== null
           ? props.ripple
           : true
       }));
 
+      const btnActiveDesignProp = vue.computed(() => {
+        // we also reset non-active design
+        const acc = { [ btnDesignProp.value ]: false };
+        if (props.activeDesign !== '') {
+          acc[ props.activeDesign ] = true;
+        }
+        return acc
+      });
       const activeBtnProps = vue.computed(() => ({
-        flat: props.flat,
+        ...btnActiveDesignProp.value,
         color: props.activeColor || props.color,
         textColor: props.activeTextColor || props.textColor
       }));
 
+      const btnConfig = vue.computed(() => {
+        let maxPages = Math.max(
+          maxPagesProp.value,
+          1 + (ellipsesProp.value ? 2 : 0) + (boundaryNumbersProp.value ? 2 : 0)
+        );
+
+        const acc = {
+          pgFrom: minProp.value,
+          pgTo: maxProp.value,
+          ellipsesStart: false,
+          ellipsesEnd: false,
+          boundaryStart: false,
+          boundaryEnd: false,
+          marginalStyle: {
+            minWidth: `${ Math.max(2, String(maxProp.value).length) }em`
+          }
+        };
+
+        if (maxPagesProp.value && maxPages < (maxProp.value - minProp.value + 1)) {
+          maxPages = 1 + Math.floor(maxPages / 2) * 2;
+          acc.pgFrom = Math.max(minProp.value, Math.min(maxProp.value - maxPages + 1, props.modelValue - Math.floor(maxPages / 2)));
+          acc.pgTo = Math.min(maxProp.value, acc.pgFrom + maxPages - 1);
+
+          if (boundaryNumbersProp.value) {
+            acc.boundaryStart = true;
+            acc.pgFrom++;
+          }
+
+          if (ellipsesProp.value && acc.pgFrom > (minProp.value + (boundaryNumbersProp.value ? 1 : 0))) {
+            acc.ellipsesStart = true;
+            acc.pgFrom++;
+          }
+
+          if (boundaryNumbersProp.value) {
+            acc.boundaryEnd = true;
+            acc.pgTo--;
+          }
+
+          if (ellipsesProp.value && acc.pgTo < (maxProp.value - (boundaryNumbersProp.value ? 1 : 0))) {
+            acc.ellipsesEnd = true;
+            acc.pgTo--;
+          }
+        }
+
+        return acc
+      });
+
       function set (value) {
         model.value = value;
       }
@@ -23779,20 +23919,40 @@
         model.value = model.value + offset;
       }
 
-      function updateModel () {
-        model.value = newPage.value;
-        newPage.value = null;
-      }
+      const inputEvents = vue.computed(() => {
+        function updateModel () {
+          model.value = newPage.value;
+          newPage.value = null;
+        }
+
+        return {
+          'onUpdate:modelValue': val => { newPage.value = val; },
+          onKeyup: e => { isKeyCode(e, 13) === true && updateModel(); },
+          onBlur: updateModel
+        }
+      });
+
+      function getBtn (cfg, page, active) {
+        const data = {
+          'aria-label': page,
+          'aria-current': 'false',
+          ...btnProps.value,
+          ...cfg
+        };
 
-      function getBtn (cfg, page) {
-        const data = { ...btnProps.value, ...cfg };
+        if (active === true) {
+          Object.assign(data, {
+            'aria-current': 'true',
+            ...activeBtnProps.value
+          });
+        }
 
         if (page !== void 0) {
           if (props.toFn !== void 0) {
             data.to = props.toFn(page);
           }
           else {
-            data.onClick = () => set(page);
+            data.onClick = () => { set(page); };
           }
         }
 
@@ -23803,147 +23963,107 @@
       Object.assign(proxy, { set, setByOffset });
 
       return () => {
-        const
-          contentStart = [],
-          contentEnd = [],
-          contentMiddle = [];
+        const contentStart = [];
+        const contentEnd = [];
+        let contentMiddle;
+
+        if (boundaryLinksProp.value === true) {
+          contentStart.push(
+            getBtn({
+              key: 'bls',
+              disable: props.disable || props.modelValue <= minProp.value,
+              icon: icons.value[ 0 ]
+            }, minProp.value)
+          );
 
-        if (__boundaryLinks.value) {
-          contentStart.push(getBtn({
-            key: 'bls',
-            disable: props.disable || props.modelValue <= props.min,
-            icon: icons.value[ 0 ]
-          }, props.min));
-          contentEnd.unshift(getBtn({
-            key: 'ble',
-            disable: props.disable || props.modelValue >= props.max,
-            icon: icons.value[ 3 ]
-          }, props.max));
-        }
-
-        if (__directionLinks.value) {
-          contentStart.push(getBtn({
-            key: 'bdp',
-            disable: props.disable || props.modelValue <= props.min,
-            icon: icons.value[ 1 ]
-          }, props.modelValue - 1));
-          contentEnd.unshift(getBtn({
-            key: 'bdn',
-            disable: props.disable || props.modelValue >= props.max,
-            icon: icons.value[ 2 ]
-          }, props.modelValue + 1));
-        }
-
-        if (props.input === true) {
-          contentMiddle.push(vue.h(QInput, {
-            class: 'inline',
-            style: {
-              width: `${ inputPlaceholder.value.length / 1.5 }em`
-            },
-            type: 'number',
-            dense: true,
-            value: newPage.value,
-            disable: props.disable,
-            dark: isDark.value,
-            borderless: true,
-            inputClass: props.inputClass,
-            inputStyle: props.inputStyle,
-            placeholder: inputPlaceholder.value,
-            min: props.min,
-            max: props.max,
-            'onUpdate:modelValue' (value) { newPage.value = value; },
-            onKeyup (e) { isKeyCode(e, 13) === true && updateModel(); },
-            onBlur: updateModel
-          }));
+          contentEnd.unshift(
+            getBtn({
+              key: 'ble',
+              disable: props.disable || props.modelValue >= maxProp.value,
+              icon: icons.value[ 3 ]
+            }, maxProp.value)
+          );
         }
-        else { // is type select
-          let
-            maxPages = Math.max(
-              props.maxPages,
-              1 + (__ellipses.value ? 2 : 0) + (__boundaryNumbers.value ? 2 : 0)
-            ),
-            pgFrom = props.min,
-            pgTo = props.max,
-            ellipsesStart = false,
-            ellipsesEnd = false,
-            boundaryStart = false,
-            boundaryEnd = false;
-
-          if (props.maxPages && maxPages < (props.max - props.min + 1)) {
-            maxPages = 1 + Math.floor(maxPages / 2) * 2;
-            pgFrom = Math.max(props.min, Math.min(props.max - maxPages + 1, props.modelValue - Math.floor(maxPages / 2)));
-            pgTo = Math.min(props.max, pgFrom + maxPages - 1);
-            if (__boundaryNumbers.value) {
-              boundaryStart = true;
-              pgFrom += 1;
-            }
-            if (__ellipses.value && pgFrom > (props.min + (__boundaryNumbers.value ? 1 : 0))) {
-              ellipsesStart = true;
-              pgFrom += 1;
-            }
-            if (__boundaryNumbers.value) {
-              boundaryEnd = true;
-              pgTo -= 1;
-            }
-            if (__ellipses.value && pgTo < (props.max - (__boundaryNumbers.value ? 1 : 0))) {
-              ellipsesEnd = true;
-              pgTo -= 1;
-            }
+
+        if (directionLinksProp.value === true) {
+          contentStart.push(
+            getBtn({
+              key: 'bdp',
+              disable: props.disable || props.modelValue <= minProp.value,
+              icon: icons.value[ 1 ]
+            }, props.modelValue - 1)
+          );
+
+          contentEnd.unshift(
+            getBtn({
+              key: 'bdn',
+              disable: props.disable || props.modelValue >= maxProp.value,
+              icon: icons.value[ 2 ]
+            }, props.modelValue + 1)
+          );
+        }
+
+        if (props.input !== true) { // has buttons instead of inputbox
+          contentMiddle = [];
+          const { pgFrom, pgTo, marginalStyle: style } = btnConfig.value;
+
+          if (btnConfig.value.boundaryStart === true) {
+            const active = minProp.value === props.modelValue;
+            contentStart.push(
+              getBtn({
+                key: 'bns',
+                style,
+                disable: props.disable,
+                label: minProp.value
+              }, minProp.value, active)
+            );
           }
-          const style = {
-            minWidth: `${ Math.max(2, String(props.max).length) }em`
-          };
-          if (boundaryStart) {
-            const active = props.min === props.modelValue;
-            contentStart.push(getBtn({
-              key: 'bns',
-              style,
-              disable: props.disable,
-              flat: !active,
-              label: props.min,
-              ...(active ? activeBtnProps.value : {})
-            }, props.min));
-          }
-          if (boundaryEnd) {
-            const active = props.max === props.modelValue;
-            contentEnd.unshift(getBtn({
-              key: 'bne',
-              style,
-              disable: props.disable,
-              flat: !active,
-              label: props.max,
-              ...(active ? activeBtnProps.value : {})
-            }, props.max));
-          }
-          if (ellipsesStart) {
-            contentStart.push(getBtn({
-              key: 'bes',
-              style,
-              disable: props.disable,
-              label: '…',
-              ripple: false
-            }, pgFrom - 1));
-          }
-          if (ellipsesEnd) {
-            contentEnd.unshift(getBtn({
-              key: 'bee',
-              style,
-              disable: props.disable,
-              label: '…',
-              ripple: false
-            }, pgTo + 1));
+
+          if (btnConfig.value.boundaryEnd === true) {
+            const active = maxProp.value === props.modelValue;
+            contentEnd.unshift(
+              getBtn({
+                key: 'bne',
+                style,
+                disable: props.disable,
+                label: maxProp.value
+              }, maxProp.value, active)
+            );
+          }
+
+          if (btnConfig.value.ellipsesStart === true) {
+            contentStart.push(
+              getBtn({
+                key: 'bes',
+                style,
+                disable: props.disable,
+                label: '…',
+                ripple: false
+              }, pgFrom - 1)
+            );
+          }
+
+          if (btnConfig.value.ellipsesEnd === true) {
+            contentEnd.unshift(
+              getBtn({
+                key: 'bee',
+                style,
+                disable: props.disable,
+                label: '…',
+                ripple: false
+              }, pgTo + 1)
+            );
           }
+
           for (let i = pgFrom; i <= pgTo; i++) {
-            const btn = {
-              key: `bpg${ i }`,
-              style,
-              disable: props.disable,
-              label: i
-            };
-            if (i === props.modelValue) {
-              Object.assign(btn, activeBtnProps.value);
-            }
-            contentMiddle.push(getBtn(btn, i));
+            contentMiddle.push(
+              getBtn({
+                key: `bpg${ i }`,
+                style,
+                disable: props.disable,
+                label: i
+              }, i, i === props.modelValue)
+            );
           }
         }
 
@@ -23951,15 +24071,35 @@
           class: classes.value,
           ...attrs.value
         }, [
-          contentStart,
-
           vue.h('div', {
-            class: 'row justify-center'
+            class: 'q-pagination__content row no-wrap items-center',
+            style: gutterStyle.value
           }, [
-            contentMiddle
-          ]),
+            ...contentStart,
+
+            props.input === true
+              ? vue.h(QInput, {
+                class: 'inline',
+                style: { width: `${ inputPlaceholder.value.length / 1.5 }em` },
+                type: 'number',
+                dense: true,
+                value: newPage.value,
+                disable: props.disable,
+                dark: isDark.value,
+                borderless: true,
+                inputClass: props.inputClass,
+                inputStyle: props.inputStyle,
+                placeholder: inputPlaceholder.value,
+                min: minProp.value,
+                max: maxProp.value,
+                ...inputEvents.value
+              })
+              : vue.h('div', {
+                class: 'q-pagination__middle row justify-center'
+              }, contentMiddle),
 
-          contentEnd
+            ...contentEnd
+          ])
         ])
       }
     }
@@ -24240,7 +24380,7 @@
 
     emits: [
       'update:modelValue', 'save', 'cancel',
-      'before-show', 'show', 'before-hide', 'hide'
+      'beforeShow', 'show', 'beforeHide', 'hide'
     ],
 
     setup (props, { slots, emit }) {
@@ -24304,7 +24444,7 @@
         validated = false;
         initialValue.value = cloneDeep(props.modelValue);
         currentModel.value = cloneDeep(props.modelValue);
-        emit('before-show');
+        emit('beforeShow');
       }
 
       function onShow () {
@@ -24322,7 +24462,7 @@
           }
         }
 
-        emit('before-hide');
+        emit('beforeHide');
       }
 
       function onHide () {
@@ -25591,7 +25731,7 @@
       scroll.horizontal.percentage = vue.computed(() => {
         const diff = scroll.horizontal.size.value - container.horizontal.value;
         if (diff <= 0) { return 0 }
-        const p = between(scroll.horizontal.position.value / diff, 0, 1);
+        const p = between(Math.abs(scroll.horizontal.position.value) / diff, 0, 1);
         return Math.round(p * 10000) / 10000
       });
       scroll.horizontal.thumbHidden = vue.computed(() =>
@@ -25617,7 +25757,7 @@
         return {
           ...props.thumbStyle,
           ...props.horizontalThumbStyle,
-          left: `${ scroll.horizontal.thumbStart.value }px`,
+          [ proxy.$q.lang.rtl === true ? 'right' : 'left' ]: `${ scroll.horizontal.thumbStart.value }px`,
           width: `${ scroll.horizontal.thumbSize.value }px`
         }
       });
@@ -25811,6 +25951,15 @@
 
       let scrollPosition = null;
 
+      vue.watch(() => proxy.$q.lang.rtl, rtl => {
+        if (targetRef.value !== null) {
+          setHorizontalScrollPosition(
+            targetRef.value,
+            Math.abs(scroll.horizontal.position.value) * (rtl === true ? -1 : 1)
+          );
+        }
+      });
+
       vue.onDeactivated(() => {
         scrollPosition = {
           top: scroll.vertical.position.value,
@@ -25847,7 +25996,9 @@
         setScrollPercentage (axis, percentage, duration) {
           localSetScrollPosition(
             axis,
-            percentage * (scroll[ axis ].size.value - container[ axis ].value),
+            percentage
+              * (scroll[ axis ].size.value - container[ axis ].value)
+              * (axis === 'horizontal' && proxy.$q.lang.rtl === true ? -1 : 1),
             duration
           );
         }
@@ -26596,7 +26747,7 @@
 
     function emitScroll (index) {
       if (prevToIndex !== index) {
-        props.onVirtualScroll !== void 0 && emit('virtual-scroll', {
+        props.onVirtualScroll !== void 0 && emit('virtualScroll', {
           index,
           from: virtualScrollSliceRange.value.from,
           to: virtualScrollSliceRange.value.to - 1,
@@ -26768,9 +26919,9 @@
 
     emits: [
       ...useFieldEmits,
-      'add', 'remove', 'input-value', 'new-value',
+      'add', 'remove', 'inputValue', 'newValue',
       'keyup', 'keypress', 'keydown',
-      'filter-abort'
+      'filterAbort'
     ],
 
     setup (props, { slots, emit }) {
@@ -26909,20 +27060,16 @@
 
       const tabindex = vue.computed(() => (state.focused.value === true ? props.tabindex : -1));
 
-      const comboboxAttrs = vue.computed(() => {
-        const attrs = {
-          tabindex: props.tabindex,
-          role: 'combobox',
-          'aria-label': props.label,
-          'aria-readonly': props.readonly === true ? 'true' : 'false',
-          'aria-autocomplete': props.useInput === true ? 'list' : 'none',
-          'aria-expanded': menu.value === true ? 'true' : 'false',
-          'aria-owns': `${ state.targetUid.value }_lb`,
-          'aria-controls': `${ state.targetUid.value }_lb`
-        };
-
-        return attrs
-      });
+      const comboboxAttrs = vue.computed(() => ({
+        tabindex: props.tabindex,
+        role: 'combobox',
+        'aria-label': props.label,
+        'aria-readonly': props.readonly === true ? 'true' : 'false',
+        'aria-autocomplete': props.useInput === true ? 'list' : 'none',
+        'aria-expanded': menu.value === true ? 'true' : 'false',
+        'aria-owns': `${ state.targetUid.value }_lb`,
+        'aria-controls': `${ state.targetUid.value }_lb`
+      }));
 
       const listboxAttrs = vue.computed(() => {
         const attrs = {
@@ -27518,7 +27665,7 @@
           };
 
           if (props.onNewValue !== void 0) {
-            emit('new-value', inputValue.value, done);
+            emit('newValue', inputValue.value, done);
           }
           else {
             done(inputValue.value);
@@ -27541,8 +27688,8 @@
         return hasDialog === true
           ? menuContentRef.value
           : (
-              menuRef.value !== null && menuRef.value.__qPortalInnerRef.value !== null
-                ? menuRef.value.__qPortalInnerRef.value
+              menuRef.value !== null && menuRef.value.contentEl !== null
+                ? menuRef.value.contentEl
                 : void 0
             )
       }
@@ -27685,7 +27832,7 @@
       function setInputValue (val) {
         if (inputValue.value !== val) {
           inputValue.value = val;
-          emit('input-value', val);
+          emit('inputValue', val);
         }
       }
 
@@ -27709,7 +27856,7 @@
         }
 
         if (state.innerLoading.value === true) {
-          emit('filter-abort');
+          emit('filterAbort');
         }
         else {
           state.innerLoading.value = true;
@@ -27926,7 +28073,7 @@
           filterId = void 0;
 
           if (state.innerLoading.value === true) {
-            emit('filter-abort');
+            emit('filterAbort');
             state.innerLoading.value = false;
             innerLoadingIndicator.value = false;
           }
@@ -28012,14 +28159,14 @@
 
       function onControlPopupShow (e) {
         e !== void 0 && stop(e);
-        emit('popup-show', e);
+        emit('popupShow', e);
         state.hasPopupOpen = true;
         state.onControlFocusin(e);
       }
 
       function onControlPopupHide (e) {
         e !== void 0 && stop(e);
-        emit('popup-hide', e);
+        emit('popupHide', e);
         state.hasPopupOpen = false;
         state.onControlFocusout(e);
       }
@@ -30878,9 +31025,11 @@
     setup (props, { slots, emit }) {
       const { proxy: { $q } } = vue.getCurrentInstance();
 
-      const $stepper = vue.inject(stepperKey, () => {
-        console.error('QStep needs to be child of QStepper');
-      });
+      const $stepper = vue.inject(stepperKey, emptyRenderFn);
+      if ($stepper === emptyRenderFn) {
+        console.error('QStep needs to be a child of QStepper');
+        return emptyRenderFn
+      }
 
       const { getCacheWithFn } = useCache();
 
@@ -30938,7 +31087,7 @@
 
       return () => vue.h(
         'div',
-        { ref: rootRef, class: 'q-stepper__step', ...scrollEvent.value },
+        { ref: rootRef, class: 'q-stepper__step', role: 'tabpanel', ...scrollEvent.value },
         $stepper.value.vertical === true
           ? [
               vue.h(StepHeader, {
@@ -32008,7 +32157,7 @@
     },
 
     emits: [
-      'request', 'virtual-scroll',
+      'request', 'virtualScroll',
       ...useFullscreenEmits,
       ...useTableRowExpandEmits,
       ...useTableRowSelectionEmits
@@ -32242,7 +32391,7 @@
 
           scrollTarget.scrollTop = offsetTop;
 
-          emit('virtual-scroll', {
+          emit('virtualScroll', {
             index: toIndex,
             from: 0,
             to: innerPagination.value.rowsPerPage - 1,
@@ -32252,7 +32401,7 @@
       }
 
       function onVScroll (info) {
-        emit('virtual-scroll', info);
+        emit('virtualScroll', info);
       }
 
       function getProgress () {
@@ -34003,9 +34152,11 @@
     },
 
     setup (props, { slots }) {
-      const $timeline = vue.inject(timelineKey, () => {
+      const $timeline = vue.inject(timelineKey, emptyRenderFn);
+      if ($timeline === emptyRenderFn) {
         console.error('QTimelineEntry needs to be child of QTimeline');
-      });
+        return emptyRenderFn
+      }
 
       const classes = vue.computed(() =>
         `q-timeline__entry q-timeline__entry--${ props.side }`
@@ -34094,7 +34245,7 @@
         + (props.inset === true ? ' q-toolbar--inset' : '')
       );
 
-      return () => vue.h('div', { class: classes.value }, hSlot(slots.default))
+      return () => vue.h('div', { class: classes.value, role: 'toolbar' }, hSlot(slots.default))
     }
   });
 
@@ -34178,9 +34329,9 @@
       'update:expanded',
       'update:ticked',
       'update:selected',
-      'lazy-load',
-      'after-show',
-      'after-hide'
+      'lazyLoad',
+      'afterShow',
+      'afterHide'
     ],
 
     setup (props, { slots, emit }) {
@@ -34429,7 +34580,7 @@
           if (Array.isArray(node[ props.childrenKey ]) !== true) {
             node[ props.childrenKey ] = [];
           }
-          emit('lazy-load', {
+          emit('lazyLoad', {
             node,
             key,
             done: children => {
@@ -34576,11 +34727,11 @@
       }
 
       function onShow () {
-        emit('after-show');
+        emit('afterShow');
       }
 
       function onHide () {
-        emit('after-hide');
+        emit('afterHide');
       }
 
       function getNode (node) {
@@ -35423,7 +35574,7 @@
             helpers.queuedFiles.value = helpers.queuedFiles.value.concat(files);
             files.forEach(f => { helpers.updateFileStatus(f, 'failed'); });
 
-            emit('factory-failed', err, files);
+            emit('factoryFailed', err, files);
             workingThreads.value--;
           }
         };
@@ -35582,9 +35733,13 @@
     name: 'QUploaderAddTrigger',
 
     setup () {
-      return vue.inject(uploaderKey, () => {
+      const $trigger = vue.inject(uploaderKey, emptyRenderFn);
+
+      if ($trigger === emptyRenderFn) {
         console.error('QUploaderAddTrigger needs to be child of QUploader');
-      })
+      }
+
+      return $trigger
     }
   });
 
@@ -37904,6 +38059,7 @@
                 action.class
               ],
               tabindex: 0,
+              role: 'listitem',
               onClick () { onOk(action); },
               onKeyup (e) { e.keyCode === 13 && onOk(action); }
             }, [
@@ -37936,8 +38092,7 @@
               tabindex: 0,
               clickable: true,
               dark: isDark.value,
-              onClick () { onOk(action); },
-              onKeyup (e) { e.keyCode === 13 && onOk(action); }
+              onClick () { onOk(action); }
             }, () => [
               vue.h(
                 QItemSection,
@@ -37979,9 +38134,12 @@
         child.push(
           props.grid === true
             ? vue.h('div', {
-              class: 'row items-stretch justify-start'
+              class: 'row items-stretch justify-start',
+              role: 'list'
             }, getGrid())
-            : vue.h('div', getList())
+            : vue.h('div', {
+              role: 'list'
+            }, getList())
         );
 
         return child
@@ -38563,12 +38721,12 @@
       function getPrompt () {
         return [
           vue.h(QInput, {
-            modelValue: model.value,
-            ...formProps.value,
             color: vmColor.value,
             dense: true,
             autofocus: true,
             dark: isDark.value,
+            ...formProps.value,
+            modelValue: model.value,
             'onUpdate:modelValue': onUpdateModel,
             onKeyup: onInputKeyup
           })
@@ -38578,11 +38736,11 @@
       function getOptions () {
         return [
           vue.h(QOptionGroup, {
-            modelValue: model.value,
-            ...formProps.value,
             color: vmColor.value,
             options: props.options.items,
             dark: isDark.value,
+            ...formProps.value,
+            modelValue: model.value,
             'onUpdate:modelValue': onUpdateModel
           })
         ]
@@ -40325,7 +40483,7 @@
    */
 
   var index_umd = {
-    version: '2.9.2',
+    version: '2.10.1',
     install (app, opts) {
       installQuasar(app, {
         components,