quasar 2.9.2 → 2.10.1

package/dist/quasar.esm.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.
  */
@@ -1396,6 +1396,8 @@ const formKey = '_q_fo_';
 const tabsKey = '_q_tabs_';
 const uploaderKey = '_q_u_';
 
+const emptyRenderFn = () => {};
+
 const globalConfig = {};
 let globalConfigIsFrozen = false;
 
@@ -1608,7 +1610,7 @@ function prepareApp (app, uiOpts, pluginOpts) {
 }
 
 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) {
@@ -2367,7 +2369,7 @@ var QBadge = createComponent({
     return () => 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 ] : []))
   }
@@ -3298,7 +3300,7 @@ var Ripple = createDirective({
     }
 );
 
-const padding = {
+const btnPadding = {
   none: 0,
   xs: 4,
   sm: 8,
@@ -3318,6 +3320,21 @@ const defaultSizes$2 = {
 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,
@@ -3331,13 +3348,14 @@ const useBtnProps = {
   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,
@@ -3387,7 +3405,7 @@ function useBtn (props) {
       ? 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'
@@ -3407,13 +3425,7 @@ function useBtn (props) {
     isActionable.value === true ? props.tabindex || 0 : -1
   ));
 
-  const design = 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 = computed(() => getBtnDesign(props, 'standard'));
 
   const attributes = computed(() => {
     const acc = { tabindex: tabIndex.value };
@@ -4173,7 +4185,7 @@ const useModelToggleProps = {
 };
 
 const useModelToggleEmits = [
-  'before-show', 'show', 'before-hide', 'hide'
+  'beforeShow', 'show', 'beforeHide', 'hide'
 ];
 
 // handleShow/handleHide -> removeTick(), self (& emit show)
@@ -4233,7 +4245,7 @@ function useModelToggle ({
 
     showing.value = true;
 
-    emit('before-show', evt);
+    emit('beforeShow', evt);
 
     if (handleShow !== void 0) {
       handleShow(evt);
@@ -4272,7 +4284,7 @@ function useModelToggle ({
 
     showing.value = false;
 
-    emit('before-hide', evt);
+    emit('beforeHide', evt);
 
     if (handleHide !== void 0) {
       handleHide(evt);
@@ -4394,8 +4406,8 @@ const portalProxyList = [];
 
 function getPortalProxy (el) {
   return portalProxyList.find(proxy =>
-    proxy.__qPortalInnerRef.value !== null
-    && proxy.__qPortalInnerRef.value.contains(el)
+    proxy.contentEl !== null
+    && proxy.contentEl.contains(el)
   )
 }
 
@@ -4409,7 +4421,7 @@ function closePortalMenus (proxy, evt) {
         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
@@ -4430,7 +4442,7 @@ function closePortalMenus (proxy, evt) {
 
 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') {
@@ -4522,7 +4534,10 @@ function usePortal (vm, innerRef, renderPortalContent, checkGlobalDialog) {
   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,
@@ -4560,18 +4575,24 @@ const useTransitionProps = {
   }
 };
 
-function useTransition (props, showing) {
-  const transitionState = ref(showing.value);
+function useTransition (props, defaultShowFn = () => {}, defaultHideFn = () => {}) {
+  return {
+    transitionProps: computed(() => {
+      const show = `q-transition--${ props.transitionShow || defaultShowFn() }`;
+      const hide = `q-transition--${ props.transitionHide || defaultHideFn() }`;
 
-  watch(showing, val => {
-    nextTick(() => { transitionState.value = val; });
-  });
+      return {
+        appear: true,
 
-  // return transition
-  return {
-    transition: 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: computed(() => `--q-transition-duration: ${ props.transitionDuration }ms`)
   }
@@ -5294,7 +5315,7 @@ var QMenu = createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'click', 'escape-key'
+    'click', 'escapeKey'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -5315,7 +5336,7 @@ var QMenu = createComponent({
     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 });
@@ -5395,7 +5416,10 @@ var QMenu = createComponent({
         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 });
         }
       });
@@ -5532,7 +5556,7 @@ var QMenu = createComponent({
     }
 
     function onEscapeKey (evt) {
-      emit('escape-key');
+      emit('escapeKey');
       hide(evt);
     }
 
@@ -5560,7 +5584,7 @@ var QMenu = createComponent({
     function renderPortalContent () {
       return h(
         Transition,
-        { name: transition.value, appear: true },
+        transitionProps.value,
         () => (
           showing.value === true
             ? h('div', {
@@ -5665,11 +5689,25 @@ function uid$3 () {
     + 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,
@@ -5701,7 +5739,7 @@ var QBtnDropdown = createComponent({
     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 } = getCurrentInstance();
@@ -5710,7 +5748,7 @@ var QBtnDropdown = createComponent({
     const menuRef = ref(null);
     const targetUid = uid$3();
 
-    const attributes = computed(() => {
+    const ariaAttrs = computed(() => {
       const acc = {
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
@@ -5738,6 +5776,9 @@ var QBtnDropdown = createComponent({
       + (props.split === false ? ' q-btn-dropdown__arrow-container' : '')
     );
 
+    const btnDesignAttr = computed(() => getBtnDesignAttr(props));
+    const btnProps = computed(() => passBtnProps(props));
+
     watch(() => props.modelValue, val => {
       menuRef.value !== null && menuRef.value[ val ? 'show' : 'hide' ]();
     });
@@ -5746,7 +5787,7 @@ var QBtnDropdown = createComponent({
 
     function onBeforeShow (e) {
       showing.value = true;
-      emit('before-show', e);
+      emit('beforeShow', e);
     }
 
     function onShow (e) {
@@ -5756,7 +5797,7 @@ var QBtnDropdown = createComponent({
 
     function onBeforeHide (e) {
       showing.value = false;
-      emit('before-hide', e);
+      emit('beforeHide', e);
     }
 
     function onHide (e) {
@@ -5818,6 +5859,9 @@ var QBtnDropdown = createComponent({
           self: props.menuSelf,
           offset: props.menuOffset,
           separateClosePopup: true,
+          transitionShow: props.transitionShow,
+          transitionHide: props.transitionHide,
+          transitionDuration: props.transitionDuration,
           onBeforeShow,
           onShow,
           onBeforeHide,
@@ -5828,11 +5872,11 @@ var QBtnDropdown = createComponent({
       if (props.split === false) {
         return 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),
@@ -5842,21 +5886,17 @@ var QBtnDropdown = createComponent({
 
       return 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
       }, () => [
         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
         }, {
@@ -5866,16 +5906,15 @@ var QBtnDropdown = createComponent({
 
         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)
       ])
@@ -5982,6 +6021,14 @@ var QBtnToggle = createComponent({
 
     const injectFormInput = useFormInject(formAttrs);
 
+    const btnDesignAttr = computed(() => getBtnDesignAttr(props));
+
+    const btnOptionDesign = computed(() => ({
+      rounded: props.rounded,
+      dense: props.dense,
+      ...btnDesignAttr.value
+    }));
+
     const btnOptions = computed(() => props.options.map((item, i) => {
       const { attrs, value, slot, ...opt } = item;
 
@@ -5989,19 +6036,11 @@ var QBtnToggle = createComponent({
         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,
 
@@ -6019,7 +6058,9 @@ var QBtnToggle = createComponent({
           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); }
         }
       }
     }));
@@ -6058,12 +6099,9 @@ var QBtnToggle = createComponent({
 
     return () => 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)
@@ -6521,7 +6559,7 @@ const usePanelProps = {
   keepAliveMax: Number
 };
 
-const usePanelEmits = [ 'update:modelValue', 'before-transition', 'transition' ];
+const usePanelEmits = [ 'update:modelValue', 'beforeTransition', 'transition' ];
 
 function usePanel () {
   const { props, emit, proxy } = getCurrentInstance();
@@ -6593,7 +6631,7 @@ function usePanel () {
 
     if (panelIndex.value !== index) {
       panelIndex.value = index;
-      emit('before-transition', newVal, oldVal);
+      emit('beforeTransition', newVal, oldVal);
       nextTick(() => {
         emit('transition', newVal, oldVal);
       });
@@ -7504,7 +7542,7 @@ function useCheckbox (type, getInner) {
   const attributes = computed(() => {
     const attrs = {
       tabindex: tabindex.value,
-      role: 'checkbox',
+      role: type === 'toggle' ? 'switch' : 'checkbox',
       'aria-label': props.label,
       'aria-checked': isIndeterminate.value === true
         ? 'mixed'
@@ -7769,16 +7807,19 @@ var QChip = createComponent({
         + (isDark.value === true ? ' q-chip--dark q-dark' : '')
     });
 
-    const attributes = computed(() => (
-      props.disable === true
+    const attributes = 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);
@@ -7836,7 +7877,7 @@ var QChip = createComponent({
         h(QIcon, {
           class: 'q-chip__icon q-chip__icon--remove cursor-pointer',
           name: removeIcon.value,
-          ...attributes.value,
+          ...attributes.value.remove,
           onClick: onRemove,
           onKeyup: onRemove
         })
@@ -7855,7 +7896,7 @@ var QChip = createComponent({
 
       isClickable.value === true && Object.assign(
         data,
-        attributes.value,
+        attributes.value.chip,
         { onClick, onKeyup }
       );
 
@@ -9339,17 +9380,21 @@ var QResizeObserver = createComponent({
     if (hasObserver === true) {
       let observer;
 
-      onMounted(() => {
-        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) {
+          nextTick(() => { init(true); });
+        }
+      };
+
+      onMounted(() => { init(); });
 
       onBeforeUnmount(() => {
         clearTimeout(timer);
@@ -10033,13 +10078,6 @@ var QTabs = createComponent({
       }
     }
 
-    /*
-     * 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--;
@@ -10171,9 +10209,11 @@ const useTabProps = {
 };
 
 function useTab (props, slots, emit, routeData) {
-  const $tabs = inject(tabsKey, () => {
+  const $tabs = inject(tabsKey, emptyRenderFn);
+  if ($tabs === emptyRenderFn) {
     console.error('QTab/QRouteTab component needs to be child of QTabs');
-  });
+    return emptyRenderFn
+  }
 
   const { proxy } = getCurrentInstance();
 
@@ -10449,7 +10489,7 @@ var QTabPanel = createComponent({
   props: usePanelChildProps,
 
   setup (_, { slots }) {
-    return () => h('div', { class: 'q-tab-panel' }, hSlot(slots.default))
+    return () => h('div', { class: 'q-tab-panel', role: 'tabpanel' }, hSlot(slots.default))
   }
 });
 
@@ -13051,7 +13091,7 @@ var QDate = createComponent({
 
   emits: [
     ...useDatetimeEmits,
-    'range-start', 'range-end', 'navigation'
+    'rangeStart', 'rangeEnd', 'navigation'
   ],
 
   setup (props, { slots, emit }) {
@@ -14360,7 +14400,7 @@ var QDate = createComponent({
           finalHash: initHash
         };
 
-        emit('range-start', getShortDate(day));
+        emit('rangeStart', getShortDate(day));
       }
       else {
         const
@@ -14373,7 +14413,7 @@ var QDate = createComponent({
         editRange.value = null;
         addToModel(initHash === finalHash ? day : { target: day, ...payload });
 
-        emit('range-end', {
+        emit('rangeEnd', {
           from: getShortDate(payload.from),
           to: getShortDate(payload.to)
         });
@@ -14678,7 +14718,7 @@ const positionClass$1 = {
   left: 'fixed-left items-center'
 };
 
-const transitions = {
+const defaultTransitions = {
   standard: [ 'scale', 'scale' ],
   top: [ 'slide-down', 'slide-up' ],
   bottom: [ 'slide-up', 'slide-down' ],
@@ -14695,8 +14735,8 @@ var QDialog = createComponent({
     ...useModelToggleProps,
     ...useTransitionProps,
 
-    transitionShow: String,
-    transitionHide: String,
+    transitionShow: String, // override useTransitionProps
+    transitionHide: String, // override useTransitionProps
 
     persistent: Boolean,
     autoClose: Boolean,
@@ -14727,7 +14767,7 @@ var QDialog = createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'shake', 'click', 'escape-key'
+    'shake', 'click', 'escapeKey'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -14735,7 +14775,6 @@ var QDialog = createComponent({
 
     const innerRef = ref(null);
     const showing = ref(false);
-    const transitionState = ref(false);
     const animating = ref(false);
 
     let shakeTimeout, refocusTarget = null, isMaximized, avoidAutoClose;
@@ -14750,6 +14789,12 @@ var QDialog = createComponent({
     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
     );
@@ -14774,26 +14819,6 @@ var QDialog = createComponent({
       + (props.square === true ? ' q-dialog__inner--square' : '')
     );
 
-    const transitionShow = computed(() =>
-      'q-transition--'
-      + (props.transitionShow === void 0 ? transitions[ props.position ][ 0 ] : props.transitionShow)
-    );
-
-    const transitionHide = computed(() =>
-      'q-transition--'
-      + (props.transitionHide === void 0 ? transitions[ props.position ][ 1 ] : props.transitionHide)
-    );
-
-    const transition = computed(() => (
-      transitionState.value === true
-        ? transitionHide.value
-        : transitionShow.value
-    ));
-
-    const transitionStyle = computed(
-      () => `--q-transition-duration: ${ props.transitionDuration }ms`
-    );
-
     const useBackdrop = computed(() => showing.value === true && props.seamless !== true);
 
     const onEvents = computed(() => (
@@ -14808,12 +14833,6 @@ var QDialog = createComponent({
       attrs.class
     ]);
 
-    watch(showing, val => {
-      nextTick(() => {
-        transitionState.value = val;
-      });
-    });
-
     watch(() => props.maximized, state => {
       showing.value === true && updateMaximized(state);
     });
@@ -14913,13 +14932,23 @@ var QDialog = createComponent({
           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;
@@ -14945,7 +14974,7 @@ var QDialog = createComponent({
           props.maximized !== true && props.noShake !== true && shake();
         }
         else {
-          emit('escape-key');
+          emit('escapeKey');
           hide();
         }
       }
@@ -15000,7 +15029,7 @@ var QDialog = createComponent({
         hide(e);
       }
       else if (props.noShake !== true) {
-        shake();
+        shake(e.relatedTarget);
       }
     }
 
@@ -15029,7 +15058,8 @@ var QDialog = createComponent({
 
     function renderPortalContent () {
       return h('div', {
-        'aria-modal': 'true',
+        role: 'dialog',
+        'aria-modal': useBackdrop.value === true ? 'true' : 'false',
         ...attrs,
         class: rootClasses.value
       }, [
@@ -15042,14 +15072,15 @@ var QDialog = createComponent({
               class: 'q-dialog__backdrop fixed-full',
               style: transitionStyle.value,
               'aria-hidden': 'true',
-              onMousedown: onBackdropClick
+              tabindex: -1,
+              onFocusin: onBackdropClick
             })
             : null
         )),
 
         h(
           Transition,
-          { name: transition.value, appear: true },
+          transitionProps.value,
           () => (
             showing.value === true
               ? h('div', {
@@ -15122,7 +15153,7 @@ var QDrawer = createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'on-layout', 'mini-state'
+    'onLayout', 'miniState'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -15133,9 +15164,11 @@ var QDrawer = createComponent({
     const { preventBodyScroll } = usePreventScroll();
     const { registerTimeout, removeTimeout } = useTimeout();
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn);
+    if ($layout === emptyRenderFn) {
       console.error('QDrawer needs to be child of QLayout');
-    });
+      return emptyRenderFn
+    }
 
     let lastDesktopState, timerMini, layoutTotalWidthWatcher;
 
@@ -15453,7 +15486,7 @@ var QDrawer = createComponent({
     watch(offset, val => { updateLayout('offset', val); });
 
     watch(onLayout, val => {
-      emit('on-layout', val);
+      emit('onLayout', val);
       updateLayout('space', val);
     });
 
@@ -15477,7 +15510,7 @@ var QDrawer = createComponent({
       }
     });
 
-    watch(isMini, val => { emit('mini-state', val); });
+    watch(isMini, val => { emit('miniState', val); });
 
     function applyPosition (position) {
       if (position === void 0) {
@@ -15642,8 +15675,8 @@ var QDrawer = createComponent({
     }
 
     onMounted(() => {
-      emit('on-layout', onLayout.value);
-      emit('mini-state', isMini.value);
+      emit('onLayout', onLayout.value);
+      emit('miniState', isMini.value);
 
       lastDesktopState = props.showIfAbove === true;
 
@@ -16196,7 +16229,7 @@ var QTooltip = createComponent({
 
     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 });
@@ -16387,16 +16420,13 @@ var QTooltip = createComponent({
             attrs.style,
             transitionStyle.value
           ],
-          role: 'complementary'
+          role: 'tooltip'
         }, hSlot(slots.default))
         : null
     }
 
     function renderPortalContent () {
-      return h(Transition, {
-        name: transition.value,
-        appear: true
-      }, getTooltipContent)
+      return h(Transition, transitionProps.value, getTooltipContent)
     }
 
     onBeforeUnmount(anchorCleanup);
@@ -16536,6 +16566,7 @@ var QItem = createComponent({
         ref: rootRef,
         class: classes.value,
         style: style.value,
+        role: 'listitem',
         onClick,
         onKeyup
       };
@@ -17769,7 +17800,7 @@ var QExpansionItem = createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'click', 'after-show', 'after-hide'
+    'click', 'afterShow', 'afterHide'
   ],
 
   setup (props, { slots, emit }) {
@@ -17878,11 +17909,11 @@ var QExpansionItem = createComponent({
     }
 
     function onShow () {
-      emit('after-show');
+      emit('afterShow');
     }
 
     function onHide () {
-      emit('after-hide');
+      emit('afterHide');
     }
 
     function enterGroup () {
@@ -18710,7 +18741,7 @@ const useFieldProps = {
   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 } = getCurrentInstance();
@@ -19440,7 +19471,14 @@ function useFile ({
 
   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) {
@@ -19474,6 +19512,7 @@ function useFile ({
     pickFiles,
     addFiles,
     onDragover,
+    onDragleave,
     processFiles,
     getDndNode,
 
@@ -19797,9 +19836,11 @@ var QFile = createComponent({
     Object.assign(proxy, {
       removeAtIndex,
       removeFile,
-      getNativeElement: () => inputRef.value
+      getNativeElement: () => inputRef.value // deprecated
     });
 
+    injectProp(proxy, 'nativeEl', () => inputRef.value);
+
     return useField(state)
   }
 });
@@ -19827,9 +19868,11 @@ var QFooter = createComponent({
   setup (props, { slots, emit }) {
     const { proxy: { $q } } = getCurrentInstance();
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn);
+    if ($layout === emptyRenderFn) {
       console.error('QFooter needs to be child of QLayout');
-    });
+      return emptyRenderFn
+    }
 
     const size = ref(parseInt(props.heightHint, 10));
     const revealed = ref(true);
@@ -20008,7 +20051,7 @@ var QForm = createComponent({
     onSubmit: Function
   },
 
-  emits: [ 'reset', 'validation-success', 'validation-error' ],
+  emits: [ 'reset', 'validationSuccess', 'validationError' ],
 
   setup (props, { slots, emit }) {
     const vm = getCurrentInstance();
@@ -20025,7 +20068,7 @@ var QForm = createComponent({
       const index = ++validateIndex;
 
       const emitEvent = (res, ref) => {
-        emit('validation-' + (res === true ? 'success' : 'error'), ref);
+        emit('validation' + (res === true ? 'Success' : 'Error'), ref);
       };
 
       const validateComponent = comp => {
@@ -20127,7 +20170,9 @@ var QForm = createComponent({
       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 });
@@ -20247,9 +20292,11 @@ var QHeader = createComponent({
   setup (props, { slots, emit }) {
     const { proxy: { $q } } = getCurrentInstance();
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn);
+    if ($layout === emptyRenderFn) {
       console.error('QHeader needs to be child of QLayout');
-    });
+      return emptyRenderFn
+    }
 
     const size = ref(parseInt(props.heightHint, 10));
     const revealed = ref(true);
@@ -20943,7 +20990,7 @@ var QInnerLoading = createComponent({
     const vm = getCurrentInstance();
     const isDark = useDark(props, vm.proxy.$q);
 
-    const { transition, transitionStyle } = useTransition(props, computed(() => props.showing));
+    const { transitionProps, transitionStyle } = useTransition(props);
 
     const classes = computed(() =>
       'q-inner-loading absolute-full column flex-center'
@@ -20987,10 +21034,7 @@ var QInnerLoading = createComponent({
         : null
     }
 
-    return () => h(Transition, {
-      name: transition.value,
-      appear: true
-    }, getContent)
+    return () => h(Transition, transitionProps.value, getContent)
   }
 });
 
@@ -21158,7 +21202,7 @@ function useMask (props, emit, emitValue, inputRef) {
         '^'
         + unmask.join('')
         + '(' + (unmaskChar === '' ? '.' : '[^' + unmaskChar + ']') + '+)?'
-        + '[' + unmaskChar + ']*$'
+        + (unmaskChar === '' ? '' : '[' + unmaskChar + ']*') + '$'
       ),
       extractLast = extract.length - 1,
       extractMatcher = extract.map((re, index) => {
@@ -21178,7 +21222,7 @@ function useMask (props, emit, emitValue, inputRef) {
 
     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('');
       }
@@ -21967,9 +22011,11 @@ var QInput = createComponent({
     Object.assign(proxy, {
       focus,
       select,
-      getNativeElement: () => inputRef.value
+      getNativeElement: () => inputRef.value // deprecated
     });
 
+    injectProp(proxy, 'nativeEl', () => inputRef.value);
+
     return renderFn
   }
 });
@@ -22168,7 +22214,12 @@ var QList = createComponent({
     bordered: Boolean,
     dense: Boolean,
     separator: Boolean,
-    padding: Boolean
+    padding: Boolean,
+
+    tag: {
+      type: String,
+      default: 'div'
+    }
   },
 
   setup (props, { slots }) {
@@ -22184,7 +22235,7 @@ var QList = createComponent({
       + (props.padding === true ? ' q-list--padding' : '')
     );
 
-    return () => h('div', { class: classes.value }, hSlot(slots.default))
+    return () => h(props.tag, { class: classes.value, role: 'list' }, hSlot(slots.default))
   }
 });
 
@@ -22222,7 +22273,7 @@ var QKnob = createComponent({
     readonly: Boolean
   },
 
-  emits: [ 'update:modelValue', 'change', 'drag-value' ],
+  emits: [ 'update:modelValue', 'change', 'dragValue' ],
 
   setup (props, { slots, emit }) {
     const { proxy } = getCurrentInstance();
@@ -22269,7 +22320,7 @@ var QKnob = createComponent({
       )
     );
 
-    const decimals = computed(() => (String(props.step).trim('0').split('.')[ 1 ] || '').length);
+    const decimals = computed(() => (String(props.step).trim().split('.')[ 1 ] || '').length);
     const step = computed(() => (props.step === 0 ? 1 : props.step));
     const instantFeedback = computed(() => props.instantFeedback === true || dragging.value === true);
 
@@ -22404,7 +22455,7 @@ var QKnob = createComponent({
 
       newModel = between(newModel, innerMin.value, innerMax.value);
 
-      emit('drag-value', newModel);
+      emit('dragValue', newModel);
 
       if (model.value !== newModel) {
         model.value = newModel;
@@ -22579,6 +22630,8 @@ var QScrollObserver = createComponent({
 
     const { proxy } = getCurrentInstance();
 
+    watch(() => proxy.$q.lang.rtl, emitEvent);
+
     onMounted(() => {
       parentEl = proxy.$el.parentNode;
       configureScrollTarget();
@@ -22679,7 +22732,7 @@ var QLayout = createComponent({
       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) {
@@ -23225,7 +23278,7 @@ var QOptionGroup = createComponent({
     );
 
     const attrs = computed(() => {
-      const attrs = {};
+      const attrs = { role: 'group' };
 
       if (props.type === 'radio') {
         attrs.role = 'radiogroup';
@@ -23290,10 +23343,17 @@ var QPage = createComponent({
   setup (props, { slots }) {
     const { proxy: { $q } } = getCurrentInstance();
 
-    const $layout = inject(layoutKey);
-    inject(pageContainerKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn);
+    if ($layout === emptyRenderFn) {
+      console.error('QPage needs to be a deep child of QLayout');
+      return emptyRenderFn
+    }
+
+    const $pageContainer = inject(pageContainerKey, emptyRenderFn);
+    if ($pageContainer === emptyRenderFn) {
       console.error('QPage needs to be child of QPageContainer');
-    });
+      return emptyRenderFn
+    }
 
     const style = computed(() => {
       const offset
@@ -23336,9 +23396,11 @@ var QPageContainer = createComponent({
   setup (_, { slots }) {
     const { proxy: { $q } } = getCurrentInstance();
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn);
+    if ($layout === emptyRenderFn) {
       console.error('QPageContainer needs to be child of QLayout');
-    });
+      return emptyRenderFn
+    }
 
     provide(pageContainerKey, true);
 
@@ -23388,9 +23450,11 @@ const usePageStickyProps = {
 function usePageSticky () {
   const { props, proxy: { $q } } = getCurrentInstance();
 
-  const $layout = inject(layoutKey, () => {
+  const $layout = inject(layoutKey, emptyRenderFn);
+  if ($layout === emptyRenderFn) {
     console.error('QPageSticky needs to be child of QLayout');
-  });
+    return emptyRenderFn
+  }
 
   const attach = computed(() => {
     const pos = props.position;
@@ -23603,6 +23667,12 @@ var QPageSticky = createComponent({
   }
 });
 
+function getBool (val, otherwise) {
+  return [ true, false ].includes(val)
+    ? val
+    : otherwise
+}
+
 var QPagination = createComponent({
   name: 'QPagination',
 
@@ -23614,22 +23684,20 @@ var QPagination = createComponent({
       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 ],
@@ -23663,11 +23731,6 @@ var QPagination = createComponent({
       type: Boolean,
       default: null
     },
-    maxPages: {
-      type: Number,
-      default: 0,
-      validator: v => v >= 0
-    },
 
     ripple: {
       type: [ Boolean, Object ],
@@ -23683,7 +23746,21 @@ var QPagination = createComponent({
     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'
@@ -23698,6 +23775,16 @@ var QPagination = createComponent({
 
     const isDark = useDark(props, $q);
 
+    const minProp = computed(() => parseInt(props.min, 10));
+    const maxProp = computed(() => parseInt(props.max, 10));
+    const maxPagesProp = computed(() => parseInt(props.maxPages, 10));
+
+    const inputPlaceholder = computed(() => model.value + ' / ' + maxProp.value);
+    const boundaryLinksProp = computed(() => getBool(props.boundaryLinks, props.input));
+    const boundaryNumbersProp = computed(() => getBool(props.boundaryNumbers, !props.input));
+    const directionLinksProp = computed(() => getBool(props.directionLinks, props.input));
+    const ellipsesProp = computed(() => getBool(props.ellipses, !props.input));
+
     const newPage = ref(null);
     const model = computed({
       get: () => props.modelValue,
@@ -23706,32 +23793,33 @@ var QPagination = createComponent({
         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);
         }
       }
     });
 
-    watch(() => props.min + props.max, () => {
+    watch(() => `${ minProp.value }|${ maxProp.value }`, () => {
       model.value = props.modelValue;
     });
 
-    function getBool (val, otherwise) {
-      return [ true, false ].includes(val)
-        ? val
-        : otherwise
-    }
-
     const classes = computed(() =>
       'q-pagination row no-wrap items-center'
       + (props.disable === true ? ' disabled' : '')
     );
-    const inputPlaceholder = computed(() => model.value + ' / ' + props.max);
-    const __boundaryLinks = computed(() => getBool(props.boundaryLinks, props.input));
-    const __boundaryNumbers = computed(() => getBool(props.boundaryNumbers, !props.input));
-    const __directionLinks = computed(() => getBool(props.directionLinks, props.input));
-    const __ellipses = computed(() => getBool(props.ellipses, !props.input));
+
+    const gutterProp = computed(() => (
+      props.gutter in btnPadding
+        ? `${ btnPadding[ props.gutter ] }px`
+        : props.gutter || null
+    ));
+    const gutterStyle = computed(() => (
+      gutterProp.value !== null
+        ? `--q-pagination-gutter-parent:-${ gutterProp.value };--q-pagination-gutter-child:${ gutterProp.value }`
+        : null
+    ));
+
     const icons = computed(() => {
       const ico = [
         props.iconFirst || $q.iconSet.pagination.first,
@@ -23742,38 +23830,90 @@ var QPagination = createComponent({
       return $q.lang.rtl === true ? ico.reverse() : ico
     });
 
-    const attrs = computed(() => (
-      props.disable === true
-        ? { 'aria-disabled': 'true' }
-        : {}
-    ));
+    const attrs = computed(() => ({
+      'aria-disabled': props.disable === true ? 'true' : 'false',
+      role: 'navigation'
+    }));
 
+    const btnDesignProp = computed(() => getBtnDesign(props, 'flat'));
     const btnProps = 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 = computed(() => {
+      // we also reset non-active design
+      const acc = { [ btnDesignProp.value ]: false };
+      if (props.activeDesign !== '') {
+        acc[ props.activeDesign ] = true;
+      }
+      return acc
+    });
     const activeBtnProps = computed(() => ({
-      flat: props.flat,
+      ...btnActiveDesignProp.value,
       color: props.activeColor || props.color,
       textColor: props.activeTextColor || props.textColor
     }));
 
+    const btnConfig = 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;
     }
@@ -23782,20 +23922,40 @@ var QPagination = createComponent({
       model.value = model.value + offset;
     }
 
-    function updateModel () {
-      model.value = newPage.value;
-      newPage.value = null;
-    }
+    const inputEvents = 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); };
         }
       }
 
@@ -23806,147 +23966,107 @@ var QPagination = createComponent({
     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(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)
+          );
         }
       }
 
@@ -23954,15 +24074,35 @@ var QPagination = createComponent({
         class: classes.value,
         ...attrs.value
       }, [
-        contentStart,
-
         h('div', {
-          class: 'row justify-center'
+          class: 'q-pagination__content row no-wrap items-center',
+          style: gutterStyle.value
         }, [
-          contentMiddle
-        ]),
+          ...contentStart,
+
+          props.input === true
+            ? 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
+            })
+            : h('div', {
+              class: 'q-pagination__middle row justify-center'
+            }, contentMiddle),
 
-        contentEnd
+          ...contentEnd
+        ])
       ])
     }
   }
@@ -24243,7 +24383,7 @@ var QPopupEdit = createComponent({
 
   emits: [
     'update:modelValue', 'save', 'cancel',
-    'before-show', 'show', 'before-hide', 'hide'
+    'beforeShow', 'show', 'beforeHide', 'hide'
   ],
 
   setup (props, { slots, emit }) {
@@ -24307,7 +24447,7 @@ var QPopupEdit = createComponent({
       validated = false;
       initialValue.value = cloneDeep(props.modelValue);
       currentModel.value = cloneDeep(props.modelValue);
-      emit('before-show');
+      emit('beforeShow');
     }
 
     function onShow () {
@@ -24325,7 +24465,7 @@ var QPopupEdit = createComponent({
         }
       }
 
-      emit('before-hide');
+      emit('beforeHide');
     }
 
     function onHide () {
@@ -25594,7 +25734,7 @@ var QScrollArea = createComponent({
     scroll.horizontal.percentage = 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 = computed(() =>
@@ -25620,7 +25760,7 @@ var QScrollArea = createComponent({
       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`
       }
     });
@@ -25814,6 +25954,15 @@ var QScrollArea = createComponent({
 
     let scrollPosition = null;
 
+    watch(() => proxy.$q.lang.rtl, rtl => {
+      if (targetRef.value !== null) {
+        setHorizontalScrollPosition(
+          targetRef.value,
+          Math.abs(scroll.horizontal.position.value) * (rtl === true ? -1 : 1)
+        );
+      }
+    });
+
     onDeactivated(() => {
       scrollPosition = {
         top: scroll.vertical.position.value,
@@ -25850,7 +25999,9 @@ var QScrollArea = createComponent({
       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
         );
       }
@@ -26599,7 +26750,7 @@ function useVirtualScroll ({
 
   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,
@@ -26771,9 +26922,9 @@ var QSelect = createComponent({
 
   emits: [
     ...useFieldEmits,
-    'add', 'remove', 'input-value', 'new-value',
+    'add', 'remove', 'inputValue', 'newValue',
     'keyup', 'keypress', 'keydown',
-    'filter-abort'
+    'filterAbort'
   ],
 
   setup (props, { slots, emit }) {
@@ -26912,20 +27063,16 @@ var QSelect = createComponent({
 
     const tabindex = computed(() => (state.focused.value === true ? props.tabindex : -1));
 
-    const comboboxAttrs = 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 = 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 = computed(() => {
       const attrs = {
@@ -27521,7 +27668,7 @@ var QSelect = createComponent({
         };
 
         if (props.onNewValue !== void 0) {
-          emit('new-value', inputValue.value, done);
+          emit('newValue', inputValue.value, done);
         }
         else {
           done(inputValue.value);
@@ -27544,8 +27691,8 @@ var QSelect = createComponent({
       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
           )
     }
@@ -27688,7 +27835,7 @@ var QSelect = createComponent({
     function setInputValue (val) {
       if (inputValue.value !== val) {
         inputValue.value = val;
-        emit('input-value', val);
+        emit('inputValue', val);
       }
     }
 
@@ -27712,7 +27859,7 @@ var QSelect = createComponent({
       }
 
       if (state.innerLoading.value === true) {
-        emit('filter-abort');
+        emit('filterAbort');
       }
       else {
         state.innerLoading.value = true;
@@ -27929,7 +28076,7 @@ var QSelect = createComponent({
         filterId = void 0;
 
         if (state.innerLoading.value === true) {
-          emit('filter-abort');
+          emit('filterAbort');
           state.innerLoading.value = false;
           innerLoadingIndicator.value = false;
         }
@@ -28015,14 +28162,14 @@ var QSelect = createComponent({
 
     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);
     }
@@ -30881,9 +31028,11 @@ var QStep = createComponent({
   setup (props, { slots, emit }) {
     const { proxy: { $q } } = getCurrentInstance();
 
-    const $stepper = inject(stepperKey, () => {
-      console.error('QStep needs to be child of QStepper');
-    });
+    const $stepper = inject(stepperKey, emptyRenderFn);
+    if ($stepper === emptyRenderFn) {
+      console.error('QStep needs to be a child of QStepper');
+      return emptyRenderFn
+    }
 
     const { getCacheWithFn } = useCache();
 
@@ -30941,7 +31090,7 @@ var QStep = createComponent({
 
     return () => h(
       'div',
-      { ref: rootRef, class: 'q-stepper__step', ...scrollEvent.value },
+      { ref: rootRef, class: 'q-stepper__step', role: 'tabpanel', ...scrollEvent.value },
       $stepper.value.vertical === true
         ? [
             h(StepHeader, {
@@ -32011,7 +32160,7 @@ var QTable = createComponent({
   },
 
   emits: [
-    'request', 'virtual-scroll',
+    'request', 'virtualScroll',
     ...useFullscreenEmits,
     ...useTableRowExpandEmits,
     ...useTableRowSelectionEmits
@@ -32245,7 +32394,7 @@ var QTable = createComponent({
 
         scrollTarget.scrollTop = offsetTop;
 
-        emit('virtual-scroll', {
+        emit('virtualScroll', {
           index: toIndex,
           from: 0,
           to: innerPagination.value.rowsPerPage - 1,
@@ -32255,7 +32404,7 @@ var QTable = createComponent({
     }
 
     function onVScroll (info) {
-      emit('virtual-scroll', info);
+      emit('virtualScroll', info);
     }
 
     function getProgress () {
@@ -34006,9 +34155,11 @@ var QTimelineEntry = createComponent({
   },
 
   setup (props, { slots }) {
-    const $timeline = inject(timelineKey, () => {
+    const $timeline = inject(timelineKey, emptyRenderFn);
+    if ($timeline === emptyRenderFn) {
       console.error('QTimelineEntry needs to be child of QTimeline');
-    });
+      return emptyRenderFn
+    }
 
     const classes = computed(() =>
       `q-timeline__entry q-timeline__entry--${ props.side }`
@@ -34097,7 +34248,7 @@ var QToolbar = createComponent({
       + (props.inset === true ? ' q-toolbar--inset' : '')
     );
 
-    return () => h('div', { class: classes.value }, hSlot(slots.default))
+    return () => h('div', { class: classes.value, role: 'toolbar' }, hSlot(slots.default))
   }
 });
 
@@ -34181,9 +34332,9 @@ var QTree = createComponent({
     'update:expanded',
     'update:ticked',
     'update:selected',
-    'lazy-load',
-    'after-show',
-    'after-hide'
+    'lazyLoad',
+    'afterShow',
+    'afterHide'
   ],
 
   setup (props, { slots, emit }) {
@@ -34432,7 +34583,7 @@ var QTree = createComponent({
         if (Array.isArray(node[ props.childrenKey ]) !== true) {
           node[ props.childrenKey ] = [];
         }
-        emit('lazy-load', {
+        emit('lazyLoad', {
           node,
           key,
           done: children => {
@@ -34579,11 +34730,11 @@ var QTree = createComponent({
     }
 
     function onShow () {
-      emit('after-show');
+      emit('afterShow');
     }
 
     function onHide () {
-      emit('after-hide');
+      emit('afterHide');
     }
 
     function getNode (node) {
@@ -35426,7 +35577,7 @@ function injectPlugin ({ props, emit, helpers }) {
           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--;
         }
       };
@@ -35585,9 +35736,13 @@ var QUploaderAddTrigger = createComponent({
   name: 'QUploaderAddTrigger',
 
   setup () {
-    return inject(uploaderKey, () => {
+    const $trigger = inject(uploaderKey, emptyRenderFn);
+
+    if ($trigger === emptyRenderFn) {
       console.error('QUploaderAddTrigger needs to be child of QUploader');
-    })
+    }
+
+    return $trigger
   }
 });
 
@@ -37765,6 +37920,7 @@ var BottomSheet$1 = createComponent({
               action.class
             ],
             tabindex: 0,
+            role: 'listitem',
             onClick () { onOk(action); },
             onKeyup (e) { e.keyCode === 13 && onOk(action); }
           }, [
@@ -37797,8 +37953,7 @@ var BottomSheet$1 = createComponent({
             tabindex: 0,
             clickable: true,
             dark: isDark.value,
-            onClick () { onOk(action); },
-            onKeyup (e) { e.keyCode === 13 && onOk(action); }
+            onClick () { onOk(action); }
           }, () => [
             h(
               QItemSection,
@@ -37840,9 +37995,12 @@ var BottomSheet$1 = createComponent({
       child.push(
         props.grid === true
           ? h('div', {
-            class: 'row items-stretch justify-start'
+            class: 'row items-stretch justify-start',
+            role: 'list'
           }, getGrid())
-          : h('div', getList())
+          : h('div', {
+            role: 'list'
+          }, getList())
       );
 
       return child
@@ -38432,12 +38590,12 @@ var DialogPlugin = createComponent({
     function getPrompt () {
       return [
         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
         })
@@ -38447,11 +38605,11 @@ var DialogPlugin = createComponent({
     function getOptions () {
       return [
         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
         })
       ]
@@ -40138,7 +40296,7 @@ function runSequentialPromises (
  */
 
 const Quasar = {
-  version: '2.9.2',
+  version: '2.10.1',
   install: installQuasar,
   lang: Plugin$8,
   iconSet: Plugin$7