tab focusing

src/components/app/util.scss

@@ -38,3 +38,30 @@ $content-padding:    10px !default;
 .padding-horizontal {
   padding-left: $content-padding;
 }
+
+
+// Focus Outline
+// --------------------------------------------------
+// When a keydown event happens then .key-input is added
+// to the body element so focusable elements have an outline.
+// On a mousedown or touchstart event the .key-input class
+// is removed
+
+:focus,
+:active {
+  outline: none;
+}
+
+.key-input {
+
+  :focus {
+    outline-offset: -1px;
+    outline: thin dotted;
+  }
+
+  .button:focus {
+    outline-offset: -2px;
+    outline: 2px solid red;
+  }
+
+}

src/components/item/test/accessories/main.js

@@ -1,6 +1,6 @@
 import {bootstrap} from 'angular2/core'
 import {Component, Template, For} from 'angular2/angular2'
-import {Item, View, List} from 'ionic2/components'
+import {Item, View, List} from 'ionic2/ionic2'
 
 import {ItemPrimarySwipeButtons} from 'ionic2/components/item/item-swipe-buttons'
 

src/components/item/test/basic/main.js

@@ -1,6 +1,6 @@
 import {bootstrap} from 'angular2/core'
 import {Component, Template, For} from 'angular2/angular2'
-import {Item, View, List} from 'ionic2/components'
+import {Item, View, List} from 'ionic2/ionic2'
 
 import {ItemPrimarySwipeButtons} from 'ionic2/components/item/item-swipe-buttons'
 

src/components/nav-viewport/test/basic/pages/first-page.js

@@ -1,6 +1,5 @@
 import {Component, Template, Parent} from 'angular2/angular2'
-import {NavViewport} from 'ionic2/components'
+import {NavViewport, View} from 'ionic2/ionic2'
-import {View} from 'ionic2/components/view/view'
 import {SecondPage} from 'app/pages/second-page'
 
 @Component({

src/components/split-view/test/settings/groups/general.js

@@ -1,5 +1,5 @@
 import {Component, Template} from 'angular2/angular2'
-import {View} from 'ionic2/components'
+import {View} from 'ionic2/ionic2'
 
 @Component({
   selector: 'settings-general'

src/components/split-view/test/settings/groups/privacy.js

@@ -1,5 +1,5 @@
 import {Component, Template} from 'angular2/angular2'
-import {View, NavPane} from 'ionic2/components'
+import {View, NavPane} from 'ionic2/ionic2'
 
 @Component({ selector: 'privacy-settings' })
 @Template({

src/components/tabs/test/advanced/main.js

@@ -1,7 +1,8 @@
 import {Component, Template, bootstrap} from 'angular2/angular2'
-import {NavViewport, Aside} from 'ionic2/components'
+import {NavViewport, Aside} from 'ionic2/ionic2'
 import {SignInPage} from 'app/pages/sign-in'
 
+
 @Component({
   selector: '[ion-app]',
 })

src/components/tabs/test/advanced/pages/sign-in.html

@@ -17,6 +17,10 @@
       </button>
     </p>
 
+    <p>
+      <input>
+    </p>
+
     <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
 
   </ion-content>

src/components/tabs/test/advanced/pages/sign-in.js

@@ -1,5 +1,5 @@
 import {Component, Template} from 'angular2/angular2'
-import {View, NavPane, Content} from 'ionic2/components'
+import {View, NavPane, Content} from 'ionic2/ionic2'
 import {TabsPage} from 'app/pages/tabs'
 
 @Component({

src/components/tabs/test/advanced/pages/tabs.js

@@ -1,6 +1,6 @@
 import {Component, Template, Parent} from 'angular2/angular2'
-import {View, Tabs, Tab, Aside, Content} from 'ionic2/components'
+import {View, Tabs, Tab, Aside, Content, NavPane} from 'ionic2/ionic2'
-import {NavPane} from 'ionic2/components'
+
 
 @Component({
   selector: 'tabs-page'

src/components/tabs/test/basic/main.js

@@ -1,6 +1,6 @@
 import {bootstrap} from 'angular2/core'
 import {Component, Template} from 'angular2/angular2'
-import {View, Tabs, Tab} from 'ionic2/components'
+import {View, Tabs, Tab} from 'ionic2/ionic2'
 import {webview} from 'ionic2/webview/webview'
 import {cordova} from 'ionic2/webview/cordova/cordova'
 import {nodeWebkit} from 'ionic2/webview/node-webkit/node-webkit'

src/components/tabs/test/tab-bar-bottom/main.js

@@ -1,6 +1,6 @@
 import {bootstrap} from 'angular2/core';
 import {Component, Template} from 'angular2/angular2';
-import {View, Tabs, Tab} from 'ionic2/components';
+import {View, Tabs, Tab} from 'ionic2/ionic2';
 
 
 @Component({ selector: '[ion-app]' })

src/components/tabs/test/tab-bar-top/main.js

@@ -1,6 +1,6 @@
 import {bootstrap} from 'angular2/core';
 import {Component, Template} from 'angular2/angular2';
-import {View, Tabs, Tab} from 'ionic2/components';
+import {View, Tabs, Tab} from 'ionic2/ionic2';
 
 
 @Component({ selector: '[ion-app]' })

src/ionic2.js

@@ -4,3 +4,4 @@ export * from 'ionic2/platform/platform'
 export * from 'ionic2/webview/webview'
 export * from 'ionic2/webview/cordova/cordova'
 export * from 'ionic2/webview/node-webkit/node-webkit'
+export * from 'ionic2/util/focus'

src/util/focus.js

@@ -0,0 +1,34 @@
+import {dom} from 'ionic2/util'
+
+
+let isKeyInputEnabled = false
+
+function keyDown() {
+  if (!isKeyInputEnabled) {
+    isKeyInputEnabled = true
+    dom.raf(enableKeyInput)
+  }
+}
+dom.ready().then(function() {
+  document.addEventListener('keydown', keyDown)
+})
+
+
+function enableKeyInput() {
+  document.body.classList[isKeyInputEnabled ? 'add' : 'remove']('key-input')
+
+  if (isKeyInputEnabled) {
+    document.addEventListener('mousedown', pointerDown)
+    document.addEventListener('touchstart', pointerDown)
+
+  } else {
+    document.removeEventListener('mousedown', pointerDown)
+    document.removeEventListener('touchstart', pointerDown)
+  }
+}
+
+function pointerDown() {
+  isKeyInputEnabled = false
+  dom.raf(enableKeyInput)
+}
+