kdutify 2.6.1 → 2.7.3

package/src/locale/uk.ts

@@ -44,6 +44,11 @@ export default {
   calendar: {
     moreEvents: 'Ще {0}',
   },
+  input: {
+    clear: 'Clear {0}',
+    prependAction: '{0} prepended action',
+    appendAction: '{0} appended action',
+  },
   fileInput: {
     counter: '{0} файлів',
     counterSize: '{0} файлів ({1} загалом)',
@@ -66,4 +71,5 @@ export default {
       icon: 'Rating {0} of {1}',
     },
   },
+  loading: 'Loading...',
 }

package/src/locale/vi.ts

@@ -44,6 +44,11 @@ export default {
   calendar: {
     moreEvents: '{0} nữa',
   },
+  input: {
+    clear: 'Clear {0}',
+    prependAction: '{0} prepended action',
+    appendAction: '{0} appended action',
+  },
   fileInput: {
     counter: '{0} tệp',
     counterSize: '{0} tệp (tổng cộng {1})',
@@ -66,4 +71,5 @@ export default {
       icon: 'Đánh giá {0} trên {1}',
     },
   },
+  loading: 'Loading...',
 }

package/src/locale/zh-Hans.ts

@@ -44,6 +44,11 @@ export default {
   calendar: {
     moreEvents: '还有 {0} 项',
   },
+  input: {
+    clear: 'Clear {0}',
+    prependAction: '{0} prepended action',
+    appendAction: '{0} appended action',
+  },
   fileInput: {
     counter: '{0} 个文件',
     counterSize: '{0} 个文件（共 {1}）',
@@ -66,4 +71,5 @@ export default {
       icon: 'Rating {0} of {1}',
     },
   },
+  loading: 'Loading...',
 }

package/src/locale/zh-Hant.ts

@@ -44,6 +44,11 @@ export default {
   calendar: {
     moreEvents: '還有其他 {0} 項',
   },
+  input: {
+    clear: 'Clear {0}',
+    prependAction: '{0} prepended action',
+    appendAction: '{0} appended action',
+  },
   fileInput: {
     counter: '{0} 個檔案',
     counterSize: '{0} 個檔案（共 {1}）',
@@ -66,4 +71,5 @@ export default {
       icon: 'Rating {0} of {1}',
     },
   },
+  loading: 'Loading...',
 }

package/src/mixins/activatable/index.ts

@@ -30,6 +30,10 @@ export default baseMixins.extend({
     },
     disabled: Boolean,
     internalActivator: Boolean,
+    openOnClick: {
+      type: Boolean,
+      default: true,
+    },
     openOnHover: Boolean,
     openOnFocus: Boolean,
   },
@@ -89,7 +93,7 @@ export default baseMixins.extend({
     },
     genActivatorAttributes () {
       return {
-        role: 'button',
+        role: (this.openOnClick && !this.openOnHover) ? 'button' : undefined,
         'aria-haspopup': true,
         'aria-expanded': String(this.isActive),
       }
@@ -108,7 +112,7 @@ export default baseMixins.extend({
           this.getActivator(e)
           this.runDelay('close')
         }
-      } else {
+      } else if (this.openOnClick) {
         listeners.click = (e: MouseEvent) => {
           const activator = this.getActivator(e)
           if (activator) activator.focus()

package/src/mixins/binds-attrs/index.ts

@@ -1,10 +1,10 @@
-import Kdu, { WatchHandler } from 'kdu'
+import Kdu from 'kdu'
 
 /**
  * This mixin provides `attrs$` and `listeners$` to work around
  */
 
-function makeWatcher (property: string): ThisType<Kdu> & WatchHandler<any> {
+function makeWatcher (property: string): ThisType<Kdu> & ((val: any, oldVal: any) => void) {
   return function (this: Kdu, val, oldVal) {
     for (const attr in oldVal) {
       if (!Object.prototype.hasOwnProperty.call(val, attr)) {
@@ -26,9 +26,7 @@ export default Kdu.extend({
   created () {
     // Work around unwanted re-renders
     // Make sure to use `attrs$` instead of `$attrs` (confusing right?)
-    // @ts-ignore
     this.$watch('$attrs', makeWatcher('attrs$'), { immediate: true })
-    // @ts-ignore
     this.$watch('$listeners', makeWatcher('listeners$'), { immediate: true })
   },
 })

package/src/mixins/dependent/index.ts

@@ -3,10 +3,10 @@ import Kdu from 'kdu'
 import mixins from '../../util/mixins'
 import { KOverlay } from '../../components/KOverlay'
 
-interface options extends Kdu {
+interface options {
   $el: HTMLElement
   $refs: {
-    content: HTMLElement
+    content?: HTMLElement
   }
   overlay?: InstanceType<typeof KOverlay>
 }
@@ -31,7 +31,7 @@ function searchChildren (children: Kdu[]): DependentInstance[] {
 }
 
 /* @kdujs/component */
-export default mixins<options>().extend({
+export default mixins<Kdu & options>().extend({
   name: 'dependent',
 
   data () {

package/src/mixins/detachable/index.ts

@@ -7,13 +7,13 @@ import mixins, { ExtractKdu } from '../../util/mixins'
 import { consoleWarn } from '../../util/console'
 
 // Types
-import Kdu, { PropOptions } from 'kdu'
+import { PropOptions } from 'kdu'
 import { KNode } from 'kdu/types'
 
-interface options extends Kdu {
+interface options {
   $el: HTMLElement
   $refs: {
-    content: HTMLElement
+    content?: HTMLElement
   }
 }
 

package/src/mixins/groupable/index.ts

@@ -11,7 +11,7 @@ export type Groupable<T extends string, C extends KduConstructor | null = null>
   isActive: boolean
   disabled: boolean
   groupClasses: object
-  toggle (): void
+  toggle (e?: Event): void
 }>
 
 export function factory<T extends string, C extends KduConstructor | null = null> (
@@ -59,7 +59,14 @@ export function factory<T extends string, C extends KduConstructor | null = null
     },
 
     methods: {
-      toggle () {
+      toggle (e?: Event) {
+        if (this.disabled && e) {
+          // Prevent keyboard actions
+          // from children elements
+          // within disabled tabs
+          e.preventDefault()
+          return
+        }
         this.$emit('change')
       },
     },

package/src/mixins/loadable/index.ts

@@ -1,5 +1,6 @@
 import Kdu, { KNode } from 'kdu'
 import KProgressLinear from '../../components/KProgressLinear'
+import { getSlot } from '../../util/helpers'
 
 interface colorable extends Kdu {
   color?: string
@@ -33,7 +34,7 @@ export default Kdu.extend<colorable>().extend({
     genProgress (): KNode | KNode[] | null {
       if (this.loading === false) return null
 
-      return this.$slots.progress || this.$createElement(KProgressLinear, {
+      return getSlot(this, 'progress') || this.$createElement(KProgressLinear, {
         props: {
           absolute: true,
           color: (this.loading === true || this.loading === '')

package/src/mixins/menuable/index.ts

@@ -78,7 +78,6 @@ export default baseMixins.extend<options>().extend({
       default: 0,
     },
     offsetOverflow: Boolean,
-    openOnClick: Boolean,
     positionX: {
       type: Number,
       default: null,
@@ -140,7 +139,8 @@ export default baseMixins.extend<options>().extend({
       const activatorLeft = (this.attach !== false ? a.offsetLeft : a.left) || 0
       const minWidth = Math.max(a.width, c.width)
       let left = 0
-      left += this.left ? activatorLeft - (minWidth - a.width) : activatorLeft
+      left += activatorLeft
+      if (this.left || (this.$kdutify.rtl && !this.right)) left -= (minWidth - a.width)
       if (this.offsetX) {
         const maxWidth = isNaN(Number(this.maxWidth))
           ? a.width
@@ -281,7 +281,10 @@ export default baseMixins.extend<options>().extend({
       }
     },
     checkActivatorFixed () {
-      if (this.attach !== false) return
+      if (this.attach !== false) {
+        this.activatorFixed = false
+        return
+      }
       let el = this.getActivator()
       while (el) {
         if (window.getComputedStyle(el).position === 'fixed') {
@@ -298,13 +301,15 @@ export default baseMixins.extend<options>().extend({
 
       const onClick = listeners.click
 
-      listeners.click = (e: MouseEvent & KeyboardEvent & FocusEvent) => {
-        if (this.openOnClick) {
-          onClick && onClick(e)
-        }
+      if (onClick) {
+        listeners.click = (e: MouseEvent & KeyboardEvent & FocusEvent) => {
+          if (this.openOnClick) {
+            onClick && onClick(e)
+          }
 
-        this.absoluteX = e.clientX
-        this.absoluteY = e.clientY
+          this.absoluteX = e.clientX
+          this.absoluteY = e.clientY
+        }
       }
 
       return listeners

package/src/{components/KCalendar/mixins/mouse.ts → mixins/mouse/index.ts}

@@ -23,21 +23,20 @@ export default Kdu.extend({
   name: 'mouse',
 
   methods: {
-    getDefaultMouseEventHandlers (suffix: string, getEvent: MouseHandler): MouseEventsMap {
+    getDefaultMouseEventHandlers (suffix: string, getData: MouseHandler, eventFirst = false): MouseEventsMap {
+      const listeners = Object.keys(this.$listeners)
+        .filter(key => key.endsWith(suffix))
+        .reduce((acc, key) => {
+          acc[key] = { event: key.slice(0, -suffix.length) }
+          return acc
+        }, {} as MouseEvents)
+
       return this.getMouseEventHandlers({
-        ['click' + suffix]: { event: 'click' },
+        ...listeners,
         ['contextmenu' + suffix]: { event: 'contextmenu', prevent: true, result: false },
-        ['mousedown' + suffix]: { event: 'mousedown' },
-        ['mousemove' + suffix]: { event: 'mousemove' },
-        ['mouseup' + suffix]: { event: 'mouseup' },
-        ['mouseenter' + suffix]: { event: 'mouseenter' },
-        ['mouseleave' + suffix]: { event: 'mouseleave' },
-        ['touchstart' + suffix]: { event: 'touchstart' },
-        ['touchmove' + suffix]: { event: 'touchmove' },
-        ['touchend' + suffix]: { event: 'touchend' },
-      }, getEvent)
+      }, getData, eventFirst)
     },
-    getMouseEventHandlers (events: MouseEvents, getEvent: MouseHandler): MouseEventsMap {
+    getMouseEventHandlers (events: MouseEvents, getData: MouseHandler, eventFirst = false): MouseEventsMap {
       const on: MouseEventsMap = {}
 
       for (const event in events) {
@@ -65,11 +64,17 @@ export default Kdu.extend({
             // Ref: https://developer.mozilla.org/en-US/docs/Web/API/Touch/target
             // This block of code aims to make sure touchEvent is always dispatched from the element that is being pointed at
             if (e && 'touches' in e) {
-              const currentTarget = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY)
+              const classSeparator = ' '
+
+              const eventTargetClasses = (e.currentTarget as HTMLElement)?.className.split(classSeparator)
+              const currentTargets = document.elementsFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY)
+
+              // Get "the same kind" current hovering target by checking
+              // If element has the same class of initial touch start element (which has touch event listener registered)
+              const currentTarget = currentTargets.find(t => t.className.split(classSeparator).some(c => eventTargetClasses.includes(c)))
 
               if (currentTarget &&
-                !(e.target as HTMLElement)?.isSameNode(currentTarget) &&
-                (e.target as HTMLElement)?.className === currentTarget.className
+                !(e.target as HTMLElement)?.isSameNode(currentTarget)
               ) {
                 currentTarget.dispatchEvent(new TouchEvent(e.type, {
                   changedTouches: e.changedTouches as unknown as Touch[],
@@ -80,7 +85,13 @@ export default Kdu.extend({
               }
             }
 
-            this.$emit(event, getEvent(e), e)
+            // TODO: KCalendar emits the calendar event as the first argument,
+            // but it really should be the native event instead so modifiers can be used
+            if (eventFirst) {
+              this.$emit(event, e, getData(e))
+            } else {
+              this.$emit(event, getData(e), e)
+            }
           }
 
           return eventOptions.result

package/src/mixins/overlayable/index.ts

@@ -128,8 +128,8 @@ export default Kdu.extend<Kdu & Toggleable & Stackable & options>().extend({
 
       showScroll && this.showScroll()
     },
-    scrollListener (e: WheelEvent & KeyboardEvent) {
-      if (e.type === 'keydown') {
+    scrollListener (e: WheelEvent | KeyboardEvent) {
+      if ('key' in e) {
         if (
           ['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as Element).tagName) ||
           (e.target as HTMLElement).isContentEditable
@@ -149,7 +149,7 @@ export default Kdu.extend<Kdu & Toggleable & Stackable & options>().extend({
 
       if (e.target === this.overlay ||
         (e.type !== 'keydown' && e.target === document.body) ||
-        this.checkPath(e)) e.preventDefault()
+        this.checkPath(e as WheelEvent)) e.preventDefault()
     },
     hasScrollbar (el?: Element) {
       if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
@@ -179,7 +179,7 @@ export default Kdu.extend<Kdu & Toggleable & Stackable & options>().extend({
 
       if (!alreadyAtStart && scrollingUp) return true
       if (!alreadyAtEnd && scrollingDown) return true
-      if ((alreadyAtStart || alreadyAtEnd)) {
+      if ((alreadyAtStart || alreadyAtEnd) && el.parentNode) {
         return this.shouldScroll(el.parentNode as Element, e)
       }
 
@@ -223,14 +223,14 @@ export default Kdu.extend<Kdu & Toggleable & Stackable & options>().extend({
       if (this.$kdutify.breakpoint.smAndDown) {
         document.documentElement!.classList.add('overflow-y-hidden')
       } else {
-        addPassiveEventListener(window, 'wheel', this.scrollListener as EventHandlerNonNull, { passive: false })
-        window.addEventListener('keydown', this.scrollListener as EventHandlerNonNull)
+        addPassiveEventListener(window, 'wheel', this.scrollListener, { passive: false })
+        window.addEventListener('keydown', this.scrollListener)
       }
     },
     showScroll () {
       document.documentElement!.classList.remove('overflow-y-hidden')
-      window.removeEventListener('wheel', this.scrollListener as EventHandlerNonNull)
-      window.removeEventListener('keydown', this.scrollListener as EventHandlerNonNull)
+      window.removeEventListener('wheel', this.scrollListener)
+      window.removeEventListener('keydown', this.scrollListener)
     },
   },
 })

package/src/mixins/picker/index.ts

@@ -8,6 +8,7 @@ import Themeable from '../themeable'
 
 // Utils
 import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { KNode } from 'kdu'
@@ -43,7 +44,7 @@ export default mixins(
       return this.$scopedSlots.default ? this.$scopedSlots.default({
         save: (this as any).save,
         cancel: (this as any).cancel,
-      }) : this.$slots.default
+      }) : getSlot(this)
     },
     genPicker (staticClass: string) {
       const children: KNode[] = []

package/src/mixins/routable/index.ts

@@ -26,7 +26,7 @@ export default Kdu.extend({
     link: Boolean,
     href: [String, Object],
     to: [String, Object],
-    dorayaki: Boolean,
+    dtwo: Boolean,
     replace: Boolean,
     ripple: {
       type: [Boolean, Object],
@@ -80,9 +80,6 @@ export default Kdu.extend({
   },
 
   methods: {
-    click (e: MouseEvent): void {
-      this.$emit('click', e)
-    },
     generateRouteLink () {
       let exact = this.exact
       let tag
@@ -100,7 +97,7 @@ export default Kdu.extend({
         }],
         [this.to ? 'nativeOn' : 'on']: {
           ...this.$listeners,
-          click: this.click,
+          ...('click' in this ? { click: (this as any).click } : undefined), // #14447
         },
         ref: 'link',
       }
@@ -121,7 +118,7 @@ export default Kdu.extend({
           exactActiveClass = `${exactActiveClass} ${this.proxyClass}`.trim()
         }
 
-        tag = this.dorayaki ? 'dorayaki-link' : 'router-link'
+        tag = this.dtwo ? 'dtwo-link' : 'router-link'
         Object.assign(data.props, {
           to: this.to,
           exact,
@@ -143,8 +140,8 @@ export default Kdu.extend({
     },
     onRouteChange () {
       if (!this.to || !this.$refs.link || !this.$route) return
-      const activeClass = `${this.activeClass} ${this.proxyClass || ''}`.trim()
-      const exactActiveClass = `${this.exactActiveClass} ${this.proxyClass || ''}`.trim() || activeClass
+      const activeClass = `${this.activeClass || ''} ${this.proxyClass || ''}`.trim()
+      const exactActiveClass = `${this.exactActiveClass || ''} ${this.proxyClass || ''}`.trim() || activeClass
 
       const path = '_knode.data.class.' + (this.exact ? exactActiveClass : activeClass)
 

package/src/mixins/selectable/index.ts

@@ -125,9 +125,6 @@ export default mixins(
         ref: 'input',
       })
     },
-    onBlur () {
-      this.isFocused = false
-    },
     onClick (e: Event) {
       this.onChange()
       this.$emit('click', e)
@@ -162,8 +159,13 @@ export default mixins(
       this.internalValue = input
       this.hasColor = input
     },
-    onFocus () {
+    onFocus (e: FocusEvent) {
       this.isFocused = true
+      this.$emit('focus', e)
+    },
+    onBlur (e: FocusEvent) {
+      this.isFocused = false
+      this.$emit('blur', e)
     },
     /** @abstract */
     onKeydown (e: Event) {},

package/src/mixins/validatable/index.ts

@@ -23,7 +23,10 @@ export default baseMixins.extend({
   name: 'validatable',
 
   props: {
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null,
+    },
     error: Boolean,
     errorCount: {
       type: [Number, String],
@@ -37,7 +40,10 @@ export default baseMixins.extend({
       type: [String, Array],
       default: () => [],
     } as PropValidator<InputMessage | null>,
-    readonly: Boolean,
+    readonly: {
+      type: Boolean,
+      default: null,
+    },
     rules: {
       type: Array,
       default: () => [],
@@ -125,7 +131,7 @@ export default baseMixins.extend({
       },
     },
     isDisabled (): boolean {
-      return this.disabled || (
+      return this.disabled ?? (
         !!this.form &&
         this.form.disabled
       )
@@ -134,7 +140,7 @@ export default baseMixins.extend({
       return !this.isDisabled && !this.isReadonly
     },
     isReadonly (): boolean {
-      return this.readonly || (
+      return this.readonly ?? (
         !!this.form &&
         this.form.readonly
       )

package/src/services/application/index.ts

@@ -36,7 +36,7 @@ export class Application extends Service implements IApplication {
     location: TargetProp,
     size: number
   ) {
-    this.application[location] = { [uid]: size }
+    this.application[location][uid] = size
 
     this.update(location)
   }

package/src/services/icons/presets/fa.ts

@@ -8,7 +8,7 @@ const icons: KdutifyIcons = {
   clear: 'fas fa-times-circle', // delete (e.g. k-chip close)
   success: 'fas fa-check-circle',
   info: 'fas fa-info-circle',
-  warning: 'fas fa-exclamation',
+  warning: 'fas fa-exclamation-circle',
   error: 'fas fa-exclamation-triangle',
   prev: 'fas fa-chevron-left',
   next: 'fas fa-chevron-right',

package/src/services/icons/presets/mdi-svg.ts

@@ -5,11 +5,11 @@ const icons: KdutifyIcons = {
   cancel: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z',
   close: 'M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z',
   delete: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z', // delete (e.g. k-chip close)
-  clear: 'M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z',
-  success: 'M12,2C17.52,2 22,6.48 22,12C22,17.52 17.52,22 12,22C6.48,22 2,17.52 2,12C2,6.48 6.48,2 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z',
-  info: 'M13,9H11V7H13M13,17H11V11H13M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z',
-  warning: 'M11,4.5H13V15.5H11V4.5M13,17.5V19.5H11V17.5H13Z',
-  error: 'M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z',
+  clear: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z',
+  success: 'M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z',
+  info: 'M13,9H11V7H13M13,17H11V11H13M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2ZM13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z',
+  warning: 'M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z',
+  error: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z',
   prev: 'M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z',
   next: 'M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z',
   checkboxOn: 'M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3Z',

package/src/styles/components/_selection-controls.sass

@@ -109,6 +109,9 @@
     .k-icon
       color: inherit
 
+  &.k-input--is-disabled:not(.k-input--is-readonly)
+    pointer-events: none
+
 .k-input--selection-controls__input:hover
   .k-input--selection-controls__ripple:before
     background: currentColor

package/src/styles/settings/_variables.scss

@@ -14,7 +14,8 @@ $rounded: map-deep-merge(
     'sm': $border-radius-root / 2,
     null: $border-radius-root,
     'lg': $border-radius-root * 2,
-    'xl': $border-radius-root * 6,
+    'xl': $border-radius-root * 4,
+    'xxl': $border-radius-root * 6,
     'pill': 9999px,
     'circle': 50%
   ),
@@ -22,7 +23,7 @@ $rounded: map-deep-merge(
 );
 
 $spacer: 4px !default;
-$spacers-steps: 16 !default; 
+$spacers-steps: 16 !default;
 
 $spacers: () !default;
 @if (type-of($spacers) == list) {
@@ -250,7 +251,7 @@ $secondary-transition: 0.2s map-get($transition, 'ease-in-out') !default;
 // Ripples //;
 $ripple-animation-transition-in: transform 0.25s map-get($transition, 'fast-out-slow-in'), opacity 0.1s map-get($transition, 'fast-out-slow-in') !default;
 $ripple-animation-transition-out: opacity 0.3s map-get($transition, 'fast-out-slow-in') !default;
-$ripple-animation-visible-opacity: 0.15 !default;
+$ripple-animation-visible-opacity: 0.25 !default;
 
 // Elements //;
 $bootable-transition: 0.2s map-get($transition, 'fast-out-slow-in') !default;

package/src/util/helpers.ts

@@ -59,7 +59,7 @@ try {
       get: () => {
         passiveSupported = true
       },
-    })
+    }) as EventListener & EventListenerOptions
 
     window.addEventListener('testListener', testListenerOpts, testListenerOpts)
     window.removeEventListener('testListener', testListenerOpts, testListenerOpts)
@@ -70,7 +70,7 @@ export { passiveSupported }
 export function addPassiveEventListener (
   el: EventTarget,
   event: string,
-  cb: EventHandlerNonNull | (() => void),
+  cb: (event: any) => void,
   options: {}
 ): void {
   el.addEventListener(event, cb, passiveSupported ? options : false)
@@ -162,16 +162,6 @@ export function getZIndex (el?: Element | null): number {
   return index
 }
 
-const tagsToReplace = {
-  '&': '&',
-  '<': '&lt;',
-  '>': '&gt;',
-} as any
-
-export function escapeHTML (str: string): string {
-  return str.replace(/[&<>]/g, tag => tagsToReplace[tag] || tag)
-}
-
 export function filterObjectOnKeys<T, K extends keyof T> (obj: T, keys: K[]): { [N in K]: T[N] } {
   const filtered = {} as { [N in K]: T[N] }
 
@@ -385,11 +375,11 @@ export function searchItems<T extends any = any> (items: T[], search: string): T
  *  - 'k-slot' for unbound k-slot (`#default`) - only if the third param is true, otherwise counts as scoped
  */
 export function getSlotType<T extends boolean = false> (vm: Kdu, name: string, split?: T): (T extends true ? 'k-slot' : never) | 'normal' | 'scoped' | void {
-  if (vm.$slots[name] && vm.$scopedSlots[name] && (vm.$scopedSlots[name] as any).name) {
+  if (vm.$slots.hasOwnProperty(name) && vm.$scopedSlots.hasOwnProperty(name) && (vm.$scopedSlots[name] as any).name) {
     return split ? 'k-slot' as any : 'scoped'
   }
-  if (vm.$slots[name]) return 'normal'
-  if (vm.$scopedSlots[name]) return 'scoped'
+  if (vm.$slots.hasOwnProperty(name)) return 'normal'
+  if (vm.$scopedSlots.hasOwnProperty(name)) return 'scoped'
 }
 
 export function debounce (fn: Function, delay: number) {
@@ -419,10 +409,15 @@ export function getPrefixedScopedSlots (prefix: string, scopedSlots: any) {
 }
 
 export function getSlot (vm: Kdu, name = 'default', data?: object | (() => object), optional = false) {
-  if (vm.$scopedSlots[name]) {
+  const kebabName = kebabCase(name)
+  if (vm.$scopedSlots.hasOwnProperty(name)) {
     return vm.$scopedSlots[name]!(data instanceof Function ? data() : data)
-  } else if (vm.$slots[name] && (!data || optional)) {
+  } else if (vm.$scopedSlots.hasOwnProperty(kebabName)) {
+    return vm.$scopedSlots[kebabName]!(data instanceof Function ? data() : data)
+  } else if (vm.$slots.hasOwnProperty(name) && (!data || optional)) {
     return vm.$slots[name]
+  } else if (vm.$slots.hasOwnProperty(kebabName) && (!data || optional)) {
+    return vm.$slots[kebabName]
   }
   return undefined
 }