quasar 2.10.1 → 2.11.0

package/src/components/linear-progress/QLinearProgress.js

@@ -72,9 +72,11 @@ export default createComponent({
     )
 
     const trackStyle = computed(() => width(props.buffer !== void 0 ? props.buffer : 1, widthReverse.value, proxy.$q))
+    const transitionSuffix = computed(() => `with${ props.instantFeedback === true ? 'out' : '' }-transition`)
+
     const trackClass = computed(() =>
       'q-linear-progress__track absolute-full'
-      + ` q-linear-progress__track--with${ props.instantFeedback === true ? 'out' : '' }-transition`
+      + ` q-linear-progress__track--${ transitionSuffix.value }`
       + ` q-linear-progress__track--${ isDark.value === true ? 'dark' : 'light' }`
       + (props.trackColor !== void 0 ? ` bg-${ props.trackColor }` : '')
     )
@@ -82,13 +84,14 @@ export default createComponent({
     const modelStyle = computed(() => width(motion.value === true ? 1 : props.value, widthReverse.value, proxy.$q))
     const modelClass = computed(() =>
       'q-linear-progress__model absolute-full'
-      + ` q-linear-progress__model--with${ props.instantFeedback === true ? 'out' : '' }-transition`
+      + ` q-linear-progress__model--${ transitionSuffix.value }`
       + ` q-linear-progress__model--${ motion.value === true ? 'in' : '' }determinate`
     )
 
     const stripeStyle = computed(() => ({ width: `${ props.value * 100 }%` }))
     const stripeClass = computed(() =>
       `q-linear-progress__stripe absolute-${ props.reverse === true ? 'right' : 'left' }`
+      + ` q-linear-progress__stripe--${ transitionSuffix.value }`
     )
 
     return () => {

package/src/components/linear-progress/QLinearProgress.sass

@@ -52,10 +52,12 @@
       background: rgba(255,255,255,.6)
 
   &__stripe
-    transition: width var(--q-linear-progress-speed)
     background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0)) !important
     background-size: 40px 40px !important
 
+    &--with-transition
+      transition: width var(--q-linear-progress-speed)
+
 @keyframes q-linear-progress--indeterminate
   0%
     transform: translate3d(-35%, 0, 0) scale3d(.35, 1, 1)

package/src/components/menu/QMenu.js

@@ -258,7 +258,10 @@ export default createComponent({
           || evt.qClickOutside !== true
         )
       ) {
-        refocusTarget.focus()
+        ((evt && evt.type.indexOf('key') === 0
+          ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+          : void 0
+        ) || refocusTarget).focus()
         refocusTarget = null
       }
 

package/src/components/menu/QMenu.sass

@@ -14,3 +14,6 @@
 
   &--square
     border-radius: 0
+
+  &--dark
+    box-shadow: $menu-box-shadow-dark

package/src/components/popup-proxy/QPopupProxy.js

@@ -6,6 +6,7 @@ import QMenu from '../menu/QMenu.js'
 import useAnchor, { useAnchorProps } from '../../composables/private/use-anchor.js'
 
 import { createComponent } from '../../utils/private/create.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 export default createComponent({
   name: 'QPopupProxy',
@@ -67,6 +68,11 @@ export default createComponent({
       toggle (evt) { popupRef.value.toggle(evt) }
     })
 
+    injectProp(proxy, 'currentComponent', () => ({
+      type: type.value,
+      ref: popupRef.value
+    }))
+
     return () => {
       const data = {
         ref: popupRef,

package/src/components/popup-proxy/QPopupProxy.json

@@ -61,5 +61,24 @@
     "toggle": {
       "extends": "toggle"
     }
+  },
+
+  "computedProps": {
+    "currentComponent": {
+      "type": "Object",
+      "desc": "Access current underlying component (QMenu or QDialog)",
+      "definition": {
+        "type": {
+          "type": "String",
+          "desc": "Component type",
+          "values": [ "dialog", "menu" ]
+        },
+        "ref": {
+          "type": "Component",
+          "tsType": "QPopupProxyInnerComponent",
+          "desc": "The actual component (QMenu or QDialog); Access it directly, without '.value'"
+        }
+      }
+    }
   }
 }

package/src/components/select/QSelect.js

@@ -251,6 +251,11 @@ export default createComponent({
         .join(', ')
     )
 
+    const ariaCurrentValue = computed(() => (props.displayValue !== void 0
+      ? props.displayValue
+      : selectedString.value
+    ))
+
     const needsHtmlFn = computed(() => (
       props.optionsHtml === true
         ? () => true
@@ -268,22 +273,15 @@ export default createComponent({
 
     const tabindex = computed(() => (state.focused.value === true ? props.tabindex : -1))
 
-    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 comboboxAttrs = computed(() => {
       const attrs = {
-        id: `${ state.targetUid.value }_lb`,
-        role: 'listbox',
-        'aria-multiselectable': props.multiple === true ? 'true' : 'false'
+        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-controls': `${ state.targetUid.value }_lb`
       }
 
       if (optionIndex.value >= 0) {
@@ -293,6 +291,12 @@ export default createComponent({
       return attrs
     })
 
+    const listboxAttrs = computed(() => ({
+      id: `${ state.targetUid.value }_lb`,
+      role: 'listbox',
+      'aria-multiselectable': props.multiple === true ? 'true' : 'false'
+    }))
+
     const selectedScope = computed(() => {
       return innerValue.value.map((opt, i) => ({
         index: i,
@@ -788,7 +792,9 @@ export default createComponent({
         && props.useInput !== true
         && e.key !== void 0
         && e.key.length === 1 // printable char
-        && e.altKey === e.ctrlKey // not kbd shortcut
+        && e.altKey === false // not kbd shortcut
+        && e.ctrlKey === false // not kbd shortcut
+        && e.metaKey === false // not kbd shortcut, especially on macOS with Command key
         && (e.keyCode !== 32 || searchBuffer.length > 0) // space in middle of search
       ) {
         menu.value !== true && showPopup(e)
@@ -935,9 +941,7 @@ export default createComponent({
 
       return [
         h('span', {
-          [ valueAsHtml.value === true ? 'innerHTML' : 'textContent' ]: props.displayValue !== void 0
-            ? props.displayValue
-            : selectedString.value
+          [ valueAsHtml.value === true ? 'innerHTML' : 'textContent' ]: ariaCurrentValue.value
         })
       ]
     }
@@ -992,7 +996,7 @@ export default createComponent({
         id: isTarget === true ? state.targetUid.value : void 0,
         maxlength: props.maxlength,
         autocomplete: props.autocomplete,
-        'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
+        'data-autofocus': fromDialog === true || props.autofocus === true || void 0,
         disabled: props.disable === true,
         readonly: props.readonly === true,
         ...inputControlEvents.value
@@ -1492,8 +1496,9 @@ export default createComponent({
               key: 'd_t',
               class: 'q-select__focus-target',
               id: isTarget === true ? state.targetUid.value : void 0,
+              value: ariaCurrentValue.value,
               readonly: true,
-              'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
+              'data-autofocus': fromDialog === true || props.autofocus === true || void 0,
               ...attrs,
               onKeydown: onTargetKeydown,
               onKeyup: onTargetKeyup,

package/src/components/stepper/QStepper.js

@@ -66,8 +66,8 @@ export default createComponent({
 
     const classes = computed(() =>
       `q-stepper q-stepper--${ props.vertical === true ? 'vertical' : 'horizontal' }`
-      + (props.flat === true || isDark.value === true ? ' q-stepper--flat no-shadow' : '')
-      + (props.bordered === true || (isDark.value === true && props.flat === false) ? ' q-stepper--bordered' : '')
+      + (props.flat === true ? ' q-stepper--flat' : '')
+      + (props.bordered === true ? ' q-stepper--bordered' : '')
       + (isDark.value === true ? ' q-stepper--dark q-dark' : '')
     )
 

package/src/components/stepper/QStepper.sass

@@ -32,6 +32,8 @@
     flex-direction: row
 
   &--dark
+    box-shadow: $dark-shadow-2
+
     .q-stepper__dot span
       color: #000
 
@@ -118,6 +120,9 @@
   &__nav
     padding-top: 24px
 
+  &--flat
+    box-shadow: none
+
   &--bordered
     border: 1px solid $separator-color
 

package/src/components/table/QTable.sass

@@ -119,6 +119,15 @@
   &--col-auto-width
     width: 1px
 
+// positioning selector here
+// so user-land overwrites with !important are not required
+// and also for --flat/--grid to not require !important by default
+.q-table__card--dark,
+.q-table--dark
+  box-shadow: $table-box-shadow-dark
+
+.q-table
+
   &--flat
     box-shadow: none
   &--bordered
@@ -263,7 +272,8 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
 /*
  * On dark background
  */
-.q-table__card--dark, .q-table--dark
+.q-table__card--dark,
+.q-table--dark
   border-color: $table-dark-border-color
 
 .q-table--dark

package/src/components/time/QTime.sass

@@ -184,3 +184,4 @@
 
   &--dark
     border-color: $separator-dark-color
+    box-shadow: $dark-shadow-2

package/src/components/toggle/QToggle.sass

@@ -74,8 +74,11 @@ $toggle-transition: .22s cubic-bezier(.4,0,.2,1)
       color: #fff
       &--truthy
         color: var(--q-primary)
-    .q-toggle__thumb:before
-      opacity: .32 !important
+    .q-toggle__thumb
+      &:after
+        box-shadow: none
+      &:before
+        opacity: .32 !important
 
   &--dense
 
@@ -129,4 +132,3 @@ body.desktop
     &:hover
       .q-toggle__thumb:before
         transform: scale3d(1.5, 1.5, 1)
-

package/src/components/uploader/QUploader.sass

@@ -125,6 +125,7 @@
 
   &--dark
     border-color: $separator-dark-color
+    box-shadow: $dark-shadow-2
 
     .q-uploader__file
       border-color: $separator-dark-color

package/src/css/core/elevation.sass

@@ -7,12 +7,25 @@
   .shadow-up-#{$z}
     box-shadow: nth($shadows-up, $z)
 
-.no-shadow, .shadow-0
-  box-shadow: none !important
 .inset-shadow
-  box-shadow: $inset-shadow !important
+  box-shadow: $inset-shadow
 .inset-shadow-down
-  box-shadow: $inset-shadow-down !important
+  box-shadow: $inset-shadow-down
+
+body.body--dark
+  @for $z from 1 through 24
+    .shadow-#{$z}
+      box-shadow: nth($dark-shadows, $z)
+    .shadow-up-#{$z}
+      box-shadow: nth($dark-shadows-up, $z)
+
+  .inset-shadow
+    box-shadow: $inset-dark-shadow
+  .inset-shadow-down
+    box-shadow: $inset-dark-shadow-down
+
+.no-shadow, .shadow-0
+  box-shadow: none !important
 
 .z-marginals
   z-index: $z-marginals

package/src/css/core/visibility.sass

@@ -36,8 +36,10 @@
 
 .hidden
   display: none !important
-.invisible
+.invisible, .invisible *
   visibility: hidden !important
+  transition: none !important
+  animation: none !important
 .transparent
   background: transparent !important
 

package/src/css/variables.sass

@@ -459,6 +459,72 @@ $shadow-up-24 : 0 -11px 15px -7px $elevation-umbra, 0 -24px 38px 3px $elevation-
 // sorry for long line; we need .sass and it doesn't support multi-line list
 $shadows-up: ($shadow-up-1, $shadow-up-2, $shadow-up-3, $shadow-up-4, $shadow-up-5, $shadow-up-6, $shadow-up-7, $shadow-up-8, $shadow-up-9, $shadow-up-10, $shadow-up-11, $shadow-up-12, $shadow-up-13, $shadow-up-14, $shadow-up-15, $shadow-up-16, $shadow-up-17, $shadow-up-18, $shadow-up-19, $shadow-up-20, $shadow-up-21, $shadow-up-22, $shadow-up-23, $shadow-up-24)
 
+$dark-shadow-color         : #fff !default
+$inset-dark-shadow         : 0 7px 9px -7px rgba($dark-shadow-color, .7) inset !default
+$inset-dark-shadow-down    : 0 -7px 9px -7px rgba($dark-shadow-color, .7) inset !default
+
+$elevation-dark-umbra      : rgba($dark-shadow-color, .2) !default
+$elevation-dark-penumbra   : rgba($dark-shadow-color, .14) !default
+$elevation-dark-ambient    : rgba($dark-shadow-color, .12) !default
+
+$dark-shadow-0  : 0 0 0 $elevation-dark-umbra, 0 0 0 $elevation-dark-penumbra, 0 0 0 $elevation-dark-ambient !default
+$dark-shadow-1  : 0 1px 3px $elevation-dark-umbra, 0 1px 1px $elevation-dark-penumbra, 0 2px 1px -1px $elevation-dark-ambient !default
+$dark-shadow-2  : 0 1px 5px $elevation-dark-umbra, 0 2px 2px $elevation-dark-penumbra, 0 3px 1px -2px $elevation-dark-ambient !default
+$dark-shadow-3  : 0 1px 8px $elevation-dark-umbra, 0 3px 4px $elevation-dark-penumbra, 0 3px 3px -2px $elevation-dark-ambient !default
+$dark-shadow-4  : 0 2px 4px -1px $elevation-dark-umbra, 0 4px 5px $elevation-dark-penumbra, 0 1px 10px $elevation-dark-ambient !default
+$dark-shadow-5  : 0 3px 5px -1px $elevation-dark-umbra, 0 5px 8px $elevation-dark-penumbra, 0 1px 14px $elevation-dark-ambient !default
+$dark-shadow-6  : 0 3px 5px -1px $elevation-dark-umbra, 0 6px 10px $elevation-dark-penumbra, 0 1px 18px $elevation-dark-ambient !default
+$dark-shadow-7  : 0 4px 5px -2px $elevation-dark-umbra, 0 7px 10px 1px $elevation-dark-penumbra, 0 2px 16px 1px $elevation-dark-ambient !default
+$dark-shadow-8  : 0 5px 5px -3px $elevation-dark-umbra, 0 8px 10px 1px $elevation-dark-penumbra, 0 3px 14px 2px $elevation-dark-ambient !default
+$dark-shadow-9  : 0 5px 6px -3px $elevation-dark-umbra, 0 9px 12px 1px $elevation-dark-penumbra, 0 3px 16px 2px $elevation-dark-ambient !default
+$dark-shadow-10 : 0 6px 6px -3px $elevation-dark-umbra, 0 10px 14px 1px $elevation-dark-penumbra, 0 4px 18px 3px $elevation-dark-ambient !default
+$dark-shadow-11 : 0 6px 7px -4px $elevation-dark-umbra, 0 11px 15px 1px $elevation-dark-penumbra, 0 4px 20px 3px $elevation-dark-ambient !default
+$dark-shadow-12 : 0 7px 8px -4px $elevation-dark-umbra, 0 12px 17px 2px $elevation-dark-penumbra, 0 5px 22px 4px $elevation-dark-ambient !default
+$dark-shadow-13 : 0 7px 8px -4px $elevation-dark-umbra, 0 13px 19px 2px $elevation-dark-penumbra, 0 5px 24px 4px $elevation-dark-ambient !default
+$dark-shadow-14 : 0 7px 9px -4px $elevation-dark-umbra, 0 14px 21px 2px $elevation-dark-penumbra, 0 5px 26px 4px $elevation-dark-ambient !default
+$dark-shadow-15 : 0 8px 9px -5px $elevation-dark-umbra, 0 15px 22px 2px $elevation-dark-penumbra, 0 6px 28px 5px $elevation-dark-ambient !default
+$dark-shadow-16 : 0 8px 10px -5px $elevation-dark-umbra, 0 16px 24px 2px $elevation-dark-penumbra, 0 6px 30px 5px $elevation-dark-ambient !default
+$dark-shadow-17 : 0 8px 11px -5px $elevation-dark-umbra, 0 17px 26px 2px $elevation-dark-penumbra, 0 6px 32px 5px $elevation-dark-ambient !default
+$dark-shadow-18 : 0 9px 11px -5px $elevation-dark-umbra, 0 18px 28px 2px $elevation-dark-penumbra, 0 7px 34px 6px $elevation-dark-ambient !default
+$dark-shadow-19 : 0 9px 12px -6px $elevation-dark-umbra, 0 19px 29px 2px $elevation-dark-penumbra, 0 7px 36px 6px $elevation-dark-ambient !default
+$dark-shadow-20 : 0 10px 13px -6px $elevation-dark-umbra, 0 20px 31px 3px $elevation-dark-penumbra, 0 8px 38px 7px $elevation-dark-ambient !default
+$dark-shadow-21 : 0 10px 13px -6px $elevation-dark-umbra, 0 21px 33px 3px $elevation-dark-penumbra, 0 8px 40px 7px $elevation-dark-ambient !default
+$dark-shadow-22 : 0 10px 14px -6px $elevation-dark-umbra, 0 22px 35px 3px $elevation-dark-penumbra, 0 8px 42px 7px $elevation-dark-ambient !default
+$dark-shadow-23 : 0 11px 14px -7px $elevation-dark-umbra, 0 23px 36px 3px $elevation-dark-penumbra, 0 9px 44px 8px $elevation-dark-ambient !default
+$dark-shadow-24 : 0 11px 15px -7px $elevation-dark-umbra, 0 24px 38px 3px $elevation-dark-penumbra, 0 9px 46px 8px $elevation-dark-ambient !default
+
+// sorry for long line; we need .sass and it doesn't support multi-line list
+$dark-shadows: ($dark-shadow-1, $dark-shadow-2, $dark-shadow-3, $dark-shadow-4, $dark-shadow-5, $dark-shadow-6, $dark-shadow-7, $dark-shadow-8, $dark-shadow-9, $dark-shadow-10, $dark-shadow-11, $dark-shadow-12, $dark-shadow-13, $dark-shadow-14, $dark-shadow-15, $dark-shadow-16, $dark-shadow-17, $dark-shadow-18, $dark-shadow-19, $dark-shadow-20, $dark-shadow-21, $dark-shadow-22, $dark-shadow-23, $dark-shadow-24)
+
+$dark-shadow-up-0  : 0 0 0 $elevation-dark-umbra, 0 0 0 $elevation-dark-penumbra, 0 0 0 $elevation-dark-ambient !default
+$dark-shadow-up-1  : 0 -1px 3px $elevation-dark-umbra, 0 -1px 1px $elevation-dark-penumbra, 0 -2px 1px -1px $elevation-dark-ambient !default
+$dark-shadow-up-2  : 0 -1px 5px $elevation-dark-umbra, 0 -2px 2px $elevation-dark-penumbra, 0 -3px 1px -2px $elevation-dark-ambient !default
+$dark-shadow-up-3  : 0 -1px 8px $elevation-dark-umbra, 0 -3px 4px $elevation-dark-penumbra, 0 -3px 3px -2px $elevation-dark-ambient !default
+$dark-shadow-up-4  : 0 -2px 4px -1px $elevation-dark-umbra, 0 -4px 5px $elevation-dark-penumbra, 0 -1px 10px $elevation-dark-ambient !default
+$dark-shadow-up-5  : 0 -3px 5px -1px $elevation-dark-umbra, 0 -5px 8px $elevation-dark-penumbra, 0 -1px 14px $elevation-dark-ambient !default
+$dark-shadow-up-6  : 0 -3px 5px -1px $elevation-dark-umbra, 0 -6px 10px $elevation-dark-penumbra, 0 -1px 18px $elevation-dark-ambient !default
+$dark-shadow-up-7  : 0 -4px 5px -2px $elevation-dark-umbra, 0 -7px 10px 1px $elevation-dark-penumbra, 0 -2px 16px 1px $elevation-dark-ambient !default
+$dark-shadow-up-8  : 0 -5px 5px -3px $elevation-dark-umbra, 0 -8px 10px 1px $elevation-dark-penumbra, 0 -3px 14px 2px $elevation-dark-ambient !default
+$dark-shadow-up-9  : 0 -5px 6px -3px $elevation-dark-umbra, 0 -9px 12px 1px $elevation-dark-penumbra, 0 -3px 16px 2px $elevation-dark-ambient !default
+$dark-shadow-up-10 : 0 -6px 6px -3px $elevation-dark-umbra, 0 -10px 14px 1px $elevation-dark-penumbra, 0 -4px 18px 3px $elevation-dark-ambient !default
+$dark-shadow-up-11 : 0 -6px 7px -4px $elevation-dark-umbra, 0 -11px 15px 1px $elevation-dark-penumbra, 0 -4px 20px 3px $elevation-dark-ambient !default
+$dark-shadow-up-12 : 0 -7px 8px -4px $elevation-dark-umbra, 0 -12px 17px 2px $elevation-dark-penumbra, 0 -5px 22px 4px $elevation-dark-ambient !default
+$dark-shadow-up-13 : 0 -7px 8px -4px $elevation-dark-umbra, 0 -13px 19px 2px $elevation-dark-penumbra, 0 -5px 24px 4px $elevation-dark-ambient !default
+$dark-shadow-up-14 : 0 -7px 9px -4px $elevation-dark-umbra, 0 -14px 21px 2px $elevation-dark-penumbra, 0 -5px 26px 4px $elevation-dark-ambient !default
+$dark-shadow-up-15 : 0 -8px 9px -5px $elevation-dark-umbra, 0 -15px 22px 2px $elevation-dark-penumbra, 0 -6px 28px 5px $elevation-dark-ambient !default
+$dark-shadow-up-16 : 0 -8px 10px -5px $elevation-dark-umbra, 0 -16px 24px 2px $elevation-dark-penumbra, 0 -6px 30px 5px $elevation-dark-ambient !default
+$dark-shadow-up-17 : 0 -8px 11px -5px $elevation-dark-umbra, 0 -17px 26px 2px $elevation-dark-penumbra, 0 -6px 32px 5px $elevation-dark-ambient !default
+$dark-shadow-up-18 : 0 -9px 11px -5px $elevation-dark-umbra, 0 -18px 28px 2px $elevation-dark-penumbra, 0 -7px 34px 6px $elevation-dark-ambient !default
+$dark-shadow-up-19 : 0 -9px 12px -6px $elevation-dark-umbra, 0 -19px 29px 2px $elevation-dark-penumbra, 0 -7px 36px 6px $elevation-dark-ambient !default
+$dark-shadow-up-20 : 0 -10px 13px -6px $elevation-dark-umbra, 0 -20px 31px 3px $elevation-dark-penumbra, 0 -8px 38px 7px $elevation-dark-ambient !default
+$dark-shadow-up-21 : 0 -10px 13px -6px $elevation-dark-umbra, 0 -21px 33px 3px $elevation-dark-penumbra, 0 -8px 40px 7px $elevation-dark-ambient !default
+$dark-shadow-up-22 : 0 -10px 14px -6px $elevation-dark-umbra, 0 -22px 35px 3px $elevation-dark-penumbra, 0 -8px 42px 7px $elevation-dark-ambient !default
+$dark-shadow-up-23 : 0 -11px 14px -7px $elevation-dark-umbra, 0 -23px 36px 3px $elevation-dark-penumbra, 0 -9px 44px 8px $elevation-dark-ambient !default
+$dark-shadow-up-24 : 0 -11px 15px -7px $elevation-dark-umbra, 0 -24px 38px 3px $elevation-dark-penumbra, 0 -9px 46px 8px $elevation-dark-ambient !default
+
+// sorry for long line; we need .sass and it doesn't support multi-line list
+$dark-shadows-up: ($dark-shadow-up-1, $dark-shadow-up-2, $dark-shadow-up-3, $dark-shadow-up-4, $dark-shadow-up-5, $dark-shadow-up-6, $dark-shadow-up-7, $dark-shadow-up-8, $dark-shadow-up-9, $dark-shadow-up-10, $dark-shadow-up-11, $dark-shadow-up-12, $dark-shadow-up-13, $dark-shadow-up-14, $dark-shadow-up-15, $dark-shadow-up-16, $dark-shadow-up-17, $dark-shadow-up-18, $dark-shadow-up-19, $dark-shadow-up-20, $dark-shadow-up-21, $dark-shadow-up-22, $dark-shadow-up-23, $dark-shadow-up-24)
+
 $generic-border-radius          : 4px !default
 $generic-hover-transition       : .3s cubic-bezier(.25, .8, .5, 1) !default
 $typography-font-family         : 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif !default
@@ -507,6 +573,7 @@ $table-selected-background      : rgba(0, 0, 0, .06) !default
 $table-dark-border-color        : $separator-dark-color !default
 $table-dark-hover-background    : rgba(255, 255, 255, .07) !default
 $table-dark-selected-background : rgba(255, 255, 255, .1) !default
+$table-box-shadow-dark          : $dark-shadow-2 !default
 
 $toolbar-min-height             : 50px !default
 $toolbar-padding                : 0 12px !default
@@ -518,9 +585,11 @@ $toolbar-title-padding          : 0 12px !default
 
 $layout-border                  : 1px solid $separator-color !default
 $layout-shadow                  : 0 0 10px 2px rgba(0,0,0,0.2), 0 0px 10px rgba(0,0,0,0.24) !default
+$layout-shadow-dark             : 0 0 10px 2px rgba(255,255,255,.2), 0 0px 10px rgba(255,255,255,.24) !default
 
 $menu-background                : #fff !default
 $menu-box-shadow                : $shadow-2 !default
+$menu-box-shadow-dark           : $dark-shadow-2 !default
 $menu-max-width                 : 95vw !default
 
 $rating-grade-color             : $yellow !default

package/src/plugins/Dialog.json

@@ -42,6 +42,7 @@
 
             "prompt": {
               "type": "Object",
+              "tsType": "QDialogInputPrompt",
               "desc": "An object definition of the input field for the prompting question.",
               "examples": [ "prompt: { model: this.promptVal, type: 'number' }" ],
               "definition": {
@@ -95,6 +96,7 @@
 
             "options": {
               "type": "Object",
+              "tsType": "QDialogSelectionPrompt",
               "desc": "An object definition for creating the selection form content",
               "examples": [ "{ model: this.dialogSelection, type: 'radio', items: [...listOfItems] }" ],
               "definition": {
@@ -114,7 +116,7 @@
 
                 "items": {
                   "type": "Array",
-                  "desc": "The list of options to interact with; Equivalent to options prop of the QOptionsGroup component",
+                  "desc": "The list of options to interact with; Equivalent to options prop of the QOptionGroup component",
                   "examples": [
                     "[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3' } ]"
                   ]