material 0.7.4 → 0.7.5

package/index.js

@@ -29,6 +29,7 @@ import Text from './src/text'
 import Textfield from './src/textfield'
 import Toolbar from './src/toolbar'
 import Tooltip from './src/tooltip'
+import View from './src/view'
 import attach from './src/module/attach'
 import attributes from './src/module/attributes'
 import build from './src/module/build'
@@ -45,6 +46,6 @@ export {
   AppBar, Button, Card, Checkbox, Component, DateHour, Dialog, Drawer, Element,
   File, Form, Image, Layout, List, Loading, Menu, Navigation, Progress, Select,
   Selecter, Slider, Snackbar, Switch, Switcher, Tabs, TabView, Text, Textfield, Toolbar, Tooltip,
-  attach, attributes, build, dataset, display, events, emitter, jsonToHTML, mediator,
+  View, attach, attributes, build, dataset, display, events, emitter, jsonToHTML, mediator,
   observer, smoothscroll
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "material",
-  "version": "0.7.4",
-  "description": "A lightweight implementation of Material Design Components - ES6",
+  "version": "0.7.5",
+  "description": "A lightweight implementation of Material Design Components for the web - ES6",
   "main": "index.js",
   "type": "module",
   "repository": {
@@ -15,7 +15,7 @@
   },
   "homepage": "https://gitlab.com/alkaloid/material",
   "keywords": [
-    "lightweight material design ui component es6 vanilla javascript"
+    "lightweight material design ui component web es6 vanilla javascript"
   ],
   "devDependencies": {
     "standard": "^10.0.3"

package/src/card.js

@@ -11,11 +11,6 @@ const defaults = {
 }
 
 class Card {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
     this.init(options)
     this.build()

package/src/element/insert.js

@@ -1,9 +1,11 @@
 import dom from '../module/dom'
 
 const insert = (component, container, context = 'bottom') => {
+  // console.log('insert', component, container, context)
+
   if (!component || !container) return
 
-  element = component.element || component
+  const element = component.element || component
   container = container.element || container
 
   const contexts = ['top', 'bottom', 'after', 'before']

package/src/loader.js

@@ -0,0 +1,88 @@
+class Loader {
+  static defaults = {
+    class: 'loader'
+  }
+
+  constructor (options) {
+    this.options = Object.assign({}, Loader.defaults, options || {})
+
+    // Object.assign(this, attach, mediator, build)
+
+    this.build()
+
+    return this
+  }
+
+  build () {
+    this.element = document.createElement(this.options.tag || 'div')
+    this.element.classList.add(this.options.class || 'loader')
+
+    this.container = document.createElement('div')
+    this.container.classList.add('container')
+    this.element.appendChild(this.container)
+
+    const svg = `
+      <svg 
+        version="1.1" 
+        id="dc-spinner" 
+        xmlns="http://www.w3.org/2000/svg" 
+        x="0px" y="0px"
+        width:"38"
+        height:"38"
+        viewBox="0 0 38 38" 
+        preserveAspectRatio="xMinYMin meet"
+      >
+        <path class="circles" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
+          C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
+          C34.797,11.841,28.159,5.203,20,5.203z">
+        </path>
+
+        <path class="circles" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
+          S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
+          S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
+        </path>
+
+        <path class="circletwo" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
+            c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
+        <animateTransform
+              attributeName="transform"
+              type="rotate"
+              from="0 20 20"
+              to="360 20 20"
+              calcMode="spline"
+              keySplines="0.4, 0, 0.2, 1"
+              keyTimes="0;1"
+              dur="2s"
+              repeatCount="indefinite" />      
+         </path>
+
+        <path class="circleone" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
+        c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
+        C12.875,32.922,7.078,27.125,7.078,20z">
+         <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 20 20"
+            to="360 20 20"
+            dur="1.8s"  
+            repeatCount="indefinite" />  
+        </path>
+      </svg>`
+
+    this.container.innerHTML = svg
+    this.text = document.createElement(this.options.tag || 'span')
+    this.text.classList.add('text')
+    this.text.innerHTML = this.options.text
+    this.container.appendChild(this.text)
+  }
+
+  show () {
+    this.element.classList.add('show')
+  }
+
+  hide () {
+    this.element.classList.remove('show')
+  }
+}
+
+export default Loader

package/src/module/attach.js

@@ -1,5 +1,5 @@
-// Assuming extract is imported or defined elsewhere
 import extract from './extract'
+import last from './last'
 
 const attachModule = {
   attach (events) {
@@ -18,7 +18,7 @@ const attachModule = {
         keys.pop()
       }
 
-      const bound = this.last(keys.join('.'))
+      const bound = last(keys.join('.'), this)
 
       let handler = null
 
@@ -45,14 +45,8 @@ const attachModule = {
     })
 
     return this
-  },
-
-  last (str) {
-    if (!str) return this
-    if (!str.includes('.')) return this[str]
-
-    return str.split('.').reduce((acc, key) => acc[key], this)
   }
+
 }
 
 export default attachModule

package/src/module/attributes.js

@@ -1,21 +1,14 @@
 const special = ['required', 'disabled', 'multiple', 'checked']
 
-function attributes (element, o) {
-  // console.log('attributes', o.attributes, element)
+const attributes = (element, options) => {
+  if (!element || !options.attributes) return
 
-  if (!element) return
-
-  for (let i = 0; i < o.attributes.length; i++) {
-    const attribute = o.attributes[i]
-
-    if (o[attribute] && o[attribute] !== 'undefined') {
-      if (special.indexOf(attribute) > -1) {
-        element.setAttribute(attribute, attribute)
-      } else {
-        element.setAttribute(attribute, o[attribute])
-      }
+  options.attributes.forEach(attribute => {
+    if (options[attribute] && String(options[attribute]) !== 'undefined') {
+      const value = special.includes(attribute) ? attribute : options[attribute]
+      element.setAttribute(attribute, value)
     }
-  }
+  })
 }
 
 export default attributes

package/src/module/cookie.js

@@ -0,0 +1,24 @@
+const cookie = {
+  set: (name, value, expire = 365) => {
+    const d = new Date()
+    d.setTime(d.getTime() + (expire * 24 * 60 * 60 * 1000))
+    const expires = `expires=${d.toUTCString()}`
+    document.cookie = `${name}=${value};${expires};path=/`
+  },
+  get: name => {
+    const nameEQ = `${name}=`
+    const ca = decodeURIComponent(document.cookie).split(';')
+
+    for (let c of ca) {
+      while (c.charAt(0) === ' ') c = c.substring(1)
+      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length)
+    }
+
+    return ''
+  },
+  del: name => {
+    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
+  }
+}
+
+export default cookie

package/src/module/last.js

@@ -1,18 +1,8 @@
-export default {
-  (str) => {
-    // console.log('_path', str)
-    if (!str) return this
-    else if (!str.match(/\./)) return this[str]
-    var last
+const last = (str, that) => {
+  if (!str) return that
+  if (!str.includes('.')) return that[str]
 
-    var keys = str.split('.')
-    for (var i = 0, l = keys.length; i < l; i++) {
-      var key = keys[i]
-
-      last = last || this
-      last = last[key]
-    }
-
-    return last
-  }
+  return str.split('.').reduce((acc, key) => acc[key], that)
 }
+
+export default last

package/src/module/numabbr.js

@@ -0,0 +1,24 @@
+const numabbr = (number, decimals = 2) => {
+  const factor = Math.pow(10, decimals)
+  const abbrev = ['k', 'm', 'b', 't']
+
+  for (let i = abbrev.length - 1; i >= 0; i--) {
+    const size = Math.pow(10, (i + 1) * 3)
+
+    if (size <= number) {
+      let num = Math.round(number * factor / size) / factor
+
+      // Handle special case where we round up to the next abbreviation
+      if (num === 1000 && i < abbrev.length - 1) {
+        num = 1
+        i++
+      }
+
+      return `${num}${abbrev[i]}`
+    }
+  }
+
+  return number.toString()
+}
+
+export default numabbr

package/src/module/object.js

@@ -1,11 +1,11 @@
 
-function is (object) {
+const is = (object) => {
   return object &&
     typeof object === 'object' &&
     Object.getPrototypeOf(object) === Object.getPrototypeOf({})
 }
 
-function byString (o, s) {
+const byString = (o, s) => {
   s = s.replace(/\[(\w+)\]/g, '.$1') // convert indexes to properties
   s = s.replace(/^\./, '') // strip a leading dot
   const a = s.split('.')

package/src/module/passive.js

@@ -1,4 +1,4 @@
-function passiveEvents () {
+const passiveEvents = () => {
   let supportsPassive = false
 
   try {

package/src/module/remove.js

@@ -1,19 +1,7 @@
 import extract from './extract'
-
-/**
- * attach function to events
- * @module module/attach
- * @category module
- */
-
-/**
- * [attach description]
- * @param  {object} component [description]
- * @param  {[type]} events    [description]
- * @return {[type]}           [description]
- */
+import last from './last'
 export default {
-  remove: function (events) {
+  remove: (events) => {
     // console.log('attach', events)
     events = events || this.options.events
     if (!events) return
@@ -42,33 +30,10 @@ export default {
       } else if (e && e.element && e.element.off && f && bound) {
         e.element.off(e.name, f.bind(bound))
       } else {
-        console.trace('can\'t attach', def[0])
-        console.log('can\'t attach', def[0])
+        console.trace('can\'t be removed', def[0])
       }
     })
 
     return this
-  },
-
-  /**
-   * Return the last reference from an object
-   * @param  {string} str Object path for example key1.key2.key3
-   * @return {value} The value of the last reference
-   */
-  last: function (str) {
-    // console.log('_path', str)
-    if (!str) return this
-    else if (!str.match(/\./)) return this[str]
-    let last
-
-    const keys = str.split('.')
-    for (let i = 0, l = keys.length; i < l; i++) {
-      const key = keys[i]
-
-      last = last || this
-      last = last[key]
-    }
-
-    return last
   }
 }

package/src/module/request.js

@@ -1,4 +1,3 @@
-// request.js
 const request = async (url, method = 'GET', body = null, headers = {}, signal = null) => {
   const defaultHeaders = {
     Accept: 'application/json',

package/src/module/ripple.js

@@ -2,7 +2,8 @@ import insert from '../element/insert'
 import offset from '../element/offset'
 
 const defaults = {
-  transition: '.5s cubic-bezier(0.4, 0.0, 0.2, 1)',
+  // transition: '.375s cubic-bezier(0.4, 0.0, 0.2, 1)',
+  transition: '.375s linear',
   opacity: ['1', '.3']
 }
 

package/src/module/touch.js

@@ -1,4 +1,4 @@
-export default function () {
+export default () => {
   try {
     document.createEvent('TouchEvent')
     return true

package/src/module/utils.js

@@ -1,31 +1,11 @@
-/**
- * Utility functions
- * @module module/utils
- */
-
-/**
- * Checks if given value is an array
- * @param {*} object
- * @returns {boolean}
- */
 const isArray = (object) => {
   return Object.prototype.toString.call(object) === '[object Array]'
 }
 
-/**
- * Checks if JavaScript object is a plain object
- * @param {Object} object
- * @returns {*|boolean}
- */
 const isLiteralObject = (object) => {
   return object && typeof object === 'object' && Object.getPrototypeOf(object) === Object.getPrototypeOf({})
 }
 
-/**
- * Checks if object is iterable
- * @param {Object} object
- * @returns {boolean}
- */
 const isIterable = (object) => {
   return isLiteralObject(object) ||
     isArray(object) ||
@@ -34,11 +14,6 @@ const isIterable = (object) => {
       object.length !== undefined)
 }
 
-/**
- *
- * @param {Object} object
- * @param {Function} callback
- */
 const each = (object, callback) => {
   if (isArray(object) || (typeof object === 'object' && object.length !== undefined)) {
     for (let i = 0, l = object.length; i < l; i++) {
@@ -54,12 +29,6 @@ const each = (object, callback) => {
   }
 }
 
-/**
- * Array.indexOf support
- * @param {Array} array
- * @param {*} obj
- * @returns {number}
- */
 const indexOf = (array, obj) => {
   if (Array.prototype.indexOf) {
     return Array.prototype.indexOf.call(array, obj)

package/src/module/viewport.js

@@ -1,19 +1,13 @@
-
-function viewport (el) {
+const viewport = el => {
   if (!el) return
 
-  const rect = el.getBoundingClientRect()
-
-  const top = rect.top
-  const left = rect.left
-  const width = rect.width
-  const height = rect.height
+  const { top, left, width, height } = el.getBoundingClientRect()
 
   return (
     top >= window.pageYOffset &&
     left >= window.pageXOffset &&
-    (top + height) <= (window.pageYOffset + window.innerHeight) &&
-    (left + width) <= (window.pageXOffset + window.innerWidth)
+    top + height <= window.pageYOffset + window.innerHeight &&
+    left + width <= window.pageXOffset + window.innerWidth
   )
 }
 

package/src/navigation.js

@@ -1,24 +1,67 @@
+import EventEmitter from './mixin/emitter'
+
 import * as css from './module/css'
 import build from './module/build'
+import attach from './module/attach'
+import display from './mixin/display'
+import Element from './element'
+import Button from './button'
 
-class Navigation {
+class Navigation extends EventEmitter {
   static defaults = {
-    class: 'navigation'
+    class: 'navigation',
+    tag: 'nav',
+    events: [
+      ['element.click', 'toggle']
+    ]
   }
 
   constructor (options) {
+    super()
+
     this.init(options)
     this.build()
+    this.attach()
     this.setup()
   }
 
   init (options) {
     this.options = { ...Navigation.defaults, ...options }
-    Object.assign(this, build)
+    Object.assign(this, build, attach, display)
+  }
+
+  setup () {
+    console.log('setup', this.options)
+    if (this.options.type) css.add(this.element, 'type-' + this.options.type)
+    if (this.options.type === 'rail') this.show()
+    if (this.options.items) this.render(this.options.items)
   }
 
-  setup() {
-    if (this.options.type) css.add(this.element, 'type-', this.options.type)
+  render (items) {
+    if (items && Array.isArray(items)) {
+      for (let i = 0; i < items.length; i++) {
+        this.add(items[i])
+      }
+    }
+  }
+
+  add (obj) {
+    if (typeof obj !== 'object') return this
+    let item
+    if (obj.type === 'divider') {
+      item = new Element({ tag: 'li', class: 'divider' })
+    } else if (obj.type === 'divider') {
+      item = new Element({ tag: 'li', class: 'divider' })
+    } else {
+      obj.container = this.ui.list
+      obj.class = 'item'
+      item = new Button(obj).on('click', (ev) => {
+        // console.log('select', ev.target.name)
+        this.emit('select', ev.target.name)
+      })
+    }
+
+    return this
   }
 }
 

package/src/styles/M3/app/index.sass

@@ -0,0 +1,19 @@
+html
+  font-size: 100%
+  line-height: 1.15
+  width: 100%
+  height: 100%
+
+body
+  color: rgba(0, 0, 0, 0.67)
+  font-family: Roboto, arial, serif
+  font-size: 100%
+  display: flex
+  // position: relative
+  // display: block
+  // height: 100%
+  // width: 100%
+  // overflow: hidden
+  margin: 0
+  padding: 0
+  // user-select: none

package/src/styles/M3/base/body.sass

@@ -0,0 +1,55 @@
+
+// HTML Tags General Defintion
+html
+  font-size: 100%
+  line-height: 1.15
+  width: 100%
+  height: 100%
+
+body
+  color: rgba(0, 0, 0, 0.67)
+  font-family: Roboto, arial, serif
+  font-size: 100%
+  // position: relative
+  // display: block
+  // height: 100%
+  // width: 100%
+  // overflow: hidden
+  margin: 0
+  padding: 0
+  // user-select: none
+
+input,
+textarea,
+keygen,
+select,
+button
+  font-size: 1em
+  font-family: Roboto, arial, serif
+  color: rgb(51, 51, 51)
+
+p
+  line-height: 20px
+  padding-top: 6px
+  margin-bottom: 14px
+  letter-spacing: 0
+  font-weight: 400
+
+// get rid of outline
+select,
+input,
+textarea,
+button
+  outline: none
+  &:hover
+    outline: none
+
+button
+  user-select: none
+
+// set all container boder-box
+*
+  box-sizing: border-box
+
+a
+  color: rgba(0, 0, 0, 0.7)

package/src/styles/M3/base/elevation.sass

@@ -0,0 +1,50 @@
+.elevation-z0
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)
+.elevation-z1
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
+.elevation-z2
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
+.elevation-z3
+  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)
+.elevation-z4
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)
+.elevation-z5
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12)
+.elevation-z6
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)
+.elevation-z7
+  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12)
+.elevation-z8
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
+.elevation-z9
+  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12)
+.elevation-z10
+  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12)
+.elevation-z11
+  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12)
+.elevation-z12
+  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)
+.elevation-z13
+  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12)
+.elevation-z14
+  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12)
+.elevation-z15
+  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12)
+.elevation-z16
+  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)
+.elevation-z17
+  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12)
+.elevation-z18
+  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12)
+.elevation-z19
+  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12)
+.elevation-z20
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12)
+.elevation-z21
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12)
+.elevation-z22
+  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12)
+.elevation-z23
+  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12)
+.elevation-z24
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)

package/src/styles/M3/base/grid.sass

@@ -0,0 +1,63 @@
+/////////////////
+// Semantic.gs // for SCSS: http://sass-lang.com/
+/////////////////
+
+// Defaults which you can freely override
+$column-width: 60px
+$gutter-width: 20px
+$columns: 12
+
+// Utility function — you should never need to modify this
+@function gridsystem-width($columns:$columns)
+  @return ($column-width * $columns) + ($gutter-width * $columns)
+
+
+// Set $total-width to 100% for a fluid layout
+$total-width: gridsystem-width($columns)
+
+// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
+// $min-width: 999999
+// $correction: 0.5 / $min-width * 100
+
+// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
+@mixin clearfix()
+  *zoom:1
+
+  &:before,
+  &:after
+      content:""
+      display:table
+  
+  &:after
+      clear:both
+
+//////////
+// GRID //
+//////////
+
+body
+  width: 100%
+  @include clearfix()
+
+
+@mixin row($columns:$columns)
+  display: block
+  width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))
+  margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)
+  // *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction
+  // *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction
+  @include clearfix()
+
+@mixin column($x,$columns:$columns)
+  display: inline
+  float: left
+  width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))
+  margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))
+  // *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction
+  // *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction
+
+@mixin push($offset:1)
+  margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns))
+
+@mixin pull($offset:1)
+  margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns))

package/src/styles/M3/base/typo.sass

@@ -0,0 +1,107 @@
+.material-text
+  &.type-display4
+    font-size: 7rem
+    font-weight: 300
+    letter-spacing: -0.04em
+    line-height: 7rem
+
+  &.type-display3
+    font-size: 3.5rem
+    font-weight: 400
+    letter-spacing: -0.02em
+    line-height: 3.5rem
+
+  &.type-display2
+    font-size: 2.813rem
+    font-weight: 400
+    letter-spacing: normal
+    line-height: 3rem
+
+  &.type-display1
+    font-size: 2.125rem
+    font-weight: 400
+    letter-spacing: normal
+    line-height: 2.5rem
+
+  &.type-headline
+    font-size: 1.5rem
+    font-weight: 400
+    letter-spacing: normal
+    line-height: 2rem
+
+  &.type-title
+    font-size: 1.25rem
+    font-weight: 500
+    letter-spacing: 0.02em
+    line-height: 2rem
+
+  &.type-subheading2
+    font-size: 1rem
+    font-weight: 400
+    letter-spacing: 0.04em
+    line-height: 1.75rem
+
+  &.type-subheading1
+    font-size: 0.938rem
+    font-weight: 400
+    letter-spacing: 0.04em
+    line-height: 1.5rem
+
+  &.type-body1
+    font-size: 0.875rem
+    font-weight: 400
+    letter-spacing: 0.04em
+    line-height: 1.25rem
+
+  &.type-body2
+    font-size: 0.875rem
+    font-weight: 500
+    letter-spacing: 0.04em
+    line-height: 1.5rem
+
+  &.type-caption
+    font-size: 0.75rem
+    font-weight: 400
+    letter-spacing: 0.08em
+    line-height: 1.25rem
+
+  &.type-button
+    font-size: 14px
+    font-weight: 500
+
+    // margin-bottom: 30px;
+    margin-left: 8px
+
+  &.style-adjust
+    &.type-display4
+      margin: -1rem 0 3.5rem -0.085em
+
+    &.type-display3
+      margin: -8px 0 64px -0.07em
+
+    &.type-display2
+      margin: -0.5rem 0 4rem -0.07em
+
+    &.type-display1
+      margin: -0.5rem 0 4rem -0.07em
+
+    &.type-headline
+      margin: -0.5rem 0 1rem -0.06em
+
+    &.type-title
+      margin: -0.5rem 0 1rem -0.05em
+
+    &.type-subheading2
+      margin: -0.5rem 0 1rem -0.06em
+
+    &.type-subheading1
+      margin: -0.313rem 0 0.813rem -0.06em
+
+    &.type-body1
+      margin: -0.25rem 0 0.75rem 0
+
+    &.type-body2
+      margin: -0.25rem 0 0.75rem 0
+
+    &.type-caption
+      line-height: 1.25rem

package/src/styles/M3/components/button.sass

@@ -2,10 +2,16 @@
   font-size: 0.875rem
   font-weight: 500
   color: $text-on-primary
+  line-height: 20px
   height: 40px
+  display: inline-flex
+  align-items: center
+  justify-content: center
+  position: relative
   background-color: $color-primary
   padding-left: 24px
   padding-right: 24px
+  margin: 0 4px
   border-radius: 20px
   border: none
   overflow: hidden
@@ -17,10 +23,17 @@
     background-color: $color-tonal
   &.style-elevated
     background-color: $color-primary
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.12)
+    &:active
+      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.12)
   &.style-outlined
     color: $color-primary
     background-color: transparent
-    border-color: 2px solid #72776C
+    border: 1px solid #72776C
+    &:hover
+      background-color: $color-tonal
   &.style-text
     color: $color-primary
+    background-color: transparent
+    &:hover
+      background-color: $color-tonal

package/src/styles/M3/navigation/rail.sass

@@ -0,0 +1,93 @@
+.navigation.type-rail
+  flex: none
+  display: flex
+  flex-direction: column
+  width: 12px
+  background-color: #2D2F31
+  padding-top: 56px
+  margin: 0
+  overflow: hidden
+  transition: .1s linear width
+
+  &.show
+    width: 92px
+    .headmenu
+      display: flex
+    .bodymenu
+      display: flex
+  &.first
+    transition: none
+
+  .head
+    flex: none
+    display: none
+    flex-direction: column
+    width: 92px
+    height: 56px
+    padding: 0 0
+    margin: 0
+    .button.apps
+      height: 56px
+      width: 56px
+      padding: 16px 10px
+      margin: 0 auto
+      align-items: center
+      justify-content: center
+      transition: .3s linear opacity
+  .body
+    display: none
+    flex: 1
+    flex-direction: column
+    width: 92px
+    padding: 0 0
+    margin: 0
+    .item
+      flex: none
+      display: flex
+      flex-direction: column
+      height: 64px
+      margin: 0
+      border-radius: 0
+      text-align: center
+      padding: 10px 0 6px
+      // border-radius: 4px
+      font-size: 0.8rem
+      text-transform: none
+      text-align: center
+      // background-color: rgba(0, 0, 0, 0.3)
+      align-items: center
+      justify-content: center
+      &.selected, &.selected:hover
+        background-color: transparent          
+        .icon
+          background-color: #004A77
+          svg
+            fill: #C2E8FF
+      i.icon
+        width: 60px
+        pointer-events: none
+        padding: 0
+        border-radius: 21px
+        margin: 0
+        height: 32px
+        padding: 4px 0
+        align-items: center
+        justify-content: center
+        svg
+          fill: rgba(255,255,255,.7)
+      label.label
+        pointer-events: none
+        align-items: center
+        justify-content: center
+        text-align: center
+        flex: 1
+        color: rgba(255, 255, 255, 1)
+        text-transform: capitalize
+        font-size: .9em
+        text-align: center
+        padding: 0
+        margin: 0
+      &:hover
+        background-color: transaprent
+        i.icon
+          background-color: rgba(255,255,255,.05)

package/src/styles/M3/view/view.sass

@@ -0,0 +1,2 @@
+.view
+  pointer-events: none

package/src/view.js

@@ -1,5 +1,4 @@
 import EventEmitter from './mixin/emitter'
-
 import build from './module/build'
 
 class View extends EventEmitter {
@@ -16,7 +15,7 @@ class View extends EventEmitter {
   }
 
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = Object.assign({}, View.defaults, options || {})
     Object.assign(this, build)
   }
 }