Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

assets/webapps/keyboard.gaiamobile.org/shared/elements/config.js

@@ -0,0 +1 @@
+;window.COMPONENTS_BASE_URL='/shared/elements/';

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia-component/gaia-component.js

@@ -0,0 +1,28 @@
+;;(function(define){'use strict';define(function(require,exports,module){var textContent=Object.getOwnPropertyDescriptor(Node.prototype,'textContent');var innerHTML=Object.getOwnPropertyDescriptor(Element.prototype,'innerHTML');var removeAttribute=Element.prototype.removeAttribute;var setAttribute=Element.prototype.setAttribute;var noop=function(){};exports.register=function(name,props){var baseProto=getBaseProto(props.extends);var template=props.template||baseProto.templateString;var extensible=props.extensible=props.hasOwnProperty('extensible')?props.extensible:true;delete props.extends;if(template){if(extensible&&props.template){props.templateString=props.template;}
+var output=processCss(template,name);props.template=document.createElement('template');props.template.innerHTML=output.template;props.lightCss=output.lightCss;props.globalCss=props.globalCss||'';props.globalCss+=output.globalCss;}
+injectGlobalCss(props.globalCss);delete props.globalCss;var descriptors=mixin(props.attrs||{},base.descriptors);props._attrs=props.attrs;delete props.attrs;var proto=createProto(baseProto,props);Object.defineProperties(proto,descriptors);try{return document.registerElement(name,{prototype:proto});}catch(e){if(e.name!=='NotSupportedError'){throw e;}}};var base={properties:{GaiaComponent:true,attributeChanged:noop,attached:noop,detached:noop,created:noop,createdCallback:function(){if(this.dirObserver){addDirObserver();}
+injectLightCss(this);this.created();},attributeChangedCallback:function(name,from,to){var prop=toCamelCase(name);if(this._attrs&&this._attrs[prop]){this[prop]=to;}
+this.attributeChanged(name,from,to);},attachedCallback:function(){if(this.dirObserver){this.setInnerDirAttributes=setInnerDirAttributes.bind(null,this);document.addEventListener('dirchanged',this.setInnerDirAttributes);}
+this.attached();},detachedCallback:function(){if(this.dirObserver){document.removeEventListener('dirchanged',this.setInnerDirAttributes);}
+this.detached();},setupShadowRoot:function(){if(!this.template){return;}
+var node=document.importNode(this.template.content,true);this.createShadowRoot().appendChild(node);if(this.dirObserver){setInnerDirAttributes(this);}
+return this.shadowRoot;},setAttr:function(name,value){var internal=this.shadowRoot.firstElementChild;setAttribute.call(internal,name,value);setAttribute.call(this,name,value);},removeAttr:function(name){var internal=this.shadowRoot.firstElementChild;removeAttribute.call(internal,name);removeAttribute.call(this,name);}},descriptors:{textContent:{set:function(value){textContent.set.call(this,value);if(this.lightStyle){this.appendChild(this.lightStyle);}},get:function(){return textContent.get();}},innerHTML:{set:function(value){innerHTML.set.call(this,value);if(this.lightStyle){this.appendChild(this.lightStyle);}},get:innerHTML.get}}};var defaultPrototype=createProto(HTMLElement.prototype,base.properties);function getBaseProto(proto){if(!proto){return defaultPrototype;}
+proto=proto.prototype||proto;return!proto.GaiaComponent?createProto(proto,base.properties):proto;}
+function createProto(proto,props){return mixin(Object.create(proto),props);}
+var hasShadowCSS=(function(){var div=document.createElement('div');try{div.querySelector(':host');div.querySelector('::content');return true;}
+catch(e){return false;}})();var regex={shadowCss:/(?:\:host|\:\:content)[^{]*\{[^}]*\}/g,':host':/(?:\:host)/g,':host()':/\:host\((.+)\)(?: \:\:content)?/g,':host-context':/\:host-context\((.+)\)([^{,]+)?/g,'::content':/(?:\:\:content)/g};function processCss(template,name){var globalCss='';var lightCss='';if(!hasShadowCSS){template=template.replace(regex.shadowCss,function(match){var hostContext=regex[':host-context'].exec(match);if(hostContext){globalCss+=match.replace(regex['::content'],'').replace(regex[':host-context'],'$1 '+name+'$2').replace(/ +/g,' ');}else{lightCss+=match.replace(regex[':host()'],name+'$1').replace(regex[':host'],name).replace(regex['::content'],name);}
+return'';});}
+return{template:template,lightCss:lightCss,globalCss:globalCss};}
+function injectGlobalCss(css){if(!css){return;}
+var style=document.createElement('style');style.innerHTML=css.trim();headReady().then(function(){document.head.appendChild(style);});}
+function headReady(){return new Promise(function(resolve){if(document.head){return resolve();}
+window.addEventListener('load',function fn(){window.removeEventListener('load',fn);resolve();});});}
+function injectLightCss(el){if(hasShadowCSS){return;}
+var stylesheet=el.querySelector('style');if(!stylesheet){stylesheet=document.createElement('style');stylesheet.setAttribute('scoped','');stylesheet.appendChild(document.createTextNode(el.lightCss));el.appendChild(stylesheet);}
+el.lightStyle=stylesheet;}
+function toCamelCase(string){return string.replace(/-(.)/g,function replacer(string,p1){return p1.toUpperCase();});}
+var dirObserver;function setInnerDirAttributes(component){var dir=component.dir||document.dir;Array.from(component.shadowRoot.children).forEach(element=>{if(element.nodeName!=='STYLE'){element.dir=dir;}});}
+function addDirObserver(){if(dirObserver){return;}
+dirObserver=new MutationObserver(onChanged);dirObserver.observe(document.documentElement,{attributeFilter:['dir'],attributes:true});function onChanged(mutations){document.dispatchEvent(new Event('dirchanged'));}}
+function mixin(target,source){for(var key in source){target[key]=source[key];}
+return target;}});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-component',this));

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia-header/dist/gaia-header.js

@@ -0,0 +1,373 @@
+;(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.GaiaHeader=f()}})(function(){var define,module,exports;return(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){;(function(define){define(function(require,exports,module){'use strict';var debug=0?console.log.bind(console):function(){};var cache={};var MIN=16;var MAX=24;var BUFFER=3;module.exports=function(config){debug('font fit',config);var space=config.space-BUFFER;var min=config.min||MIN;var max=config.max||MAX;var text=trim(config.text);var fontSize=max;var textWidth;var font;do{font=config.font.replace(/\d+px/,fontSize+'px');textWidth=getTextWidth(text,font);}while(textWidth>space&&fontSize!==min&&fontSize--);return{textWidth:textWidth,fontSize:fontSize,overflowing:textWidth>space};};function getTextWidth(text,font){var ctx=getCanvasContext(font);var width=ctx.measureText(text).width;debug('got text width',width);return width;}
+function getCanvasContext(font){debug('get canvas context',font);var cached=cache[font];if(cached){return cached;}
+var canvas=document.createElement('canvas');canvas.setAttribute('moz-opaque','true');canvas.setAttribute('width','1px');canvas.setAttribute('height','1px');debug('created canvas',canvas);var ctx=canvas.getContext('2d',{willReadFrequently:true});ctx.font=font;return cache[font]=ctx;}
+function trim(text){return text.replace(/\s+/g,' ').trim();}});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('font-fit',this));},{}],2:[function(require,module,exports){;(function(define){'use strict';define(function(require,exports,module){var textContent=Object.getOwnPropertyDescriptor(Node.prototype,'textContent');var innerHTML=Object.getOwnPropertyDescriptor(Element.prototype,'innerHTML');var removeAttribute=Element.prototype.removeAttribute;var setAttribute=Element.prototype.setAttribute;var noop=function(){};exports.register=function(name,props){var baseProto=getBaseProto(props.extends);var template=props.template||baseProto.templateString;var extensible=props.extensible=props.hasOwnProperty('extensible')?props.extensible:true;delete props.extends;if(template){if(extensible&&props.template){props.templateString=props.template;}
+var output=processCss(template,name);props.template=document.createElement('template');props.template.innerHTML=output.template;props.lightCss=output.lightCss;props.globalCss=props.globalCss||'';props.globalCss+=output.globalCss;}
+injectGlobalCss(props.globalCss);delete props.globalCss;var descriptors=mixin(props.attrs||{},base.descriptors);props._attrs=props.attrs;delete props.attrs;var proto=createProto(baseProto,props);Object.defineProperties(proto,descriptors);try{return document.registerElement(name,{prototype:proto});}catch(e){if(e.name!=='NotSupportedError'){throw e;}}};var base={properties:{GaiaComponent:true,attributeChanged:noop,attached:noop,detached:noop,created:noop,createdCallback:function(){if(this.dirObserver){addDirObserver();}
+injectLightCss(this);this.created();},attributeChangedCallback:function(name,from,to){var prop=toCamelCase(name);if(this._attrs&&this._attrs[prop]){this[prop]=to;}
+this.attributeChanged(name,from,to);},attachedCallback:function(){if(this.dirObserver){this.setInnerDirAttributes=setInnerDirAttributes.bind(null,this);document.addEventListener('dirchanged',this.setInnerDirAttributes);}
+this.attached();},detachedCallback:function(){if(this.dirObserver){document.removeEventListener('dirchanged',this.setInnerDirAttributes);}
+this.detached();},setupShadowRoot:function(){if(!this.template){return;}
+var node=document.importNode(this.template.content,true);this.createShadowRoot().appendChild(node);if(this.dirObserver){setInnerDirAttributes(this);}
+return this.shadowRoot;},setAttr:function(name,value){var internal=this.shadowRoot.firstElementChild;setAttribute.call(internal,name,value);setAttribute.call(this,name,value);},removeAttr:function(name){var internal=this.shadowRoot.firstElementChild;removeAttribute.call(internal,name);removeAttribute.call(this,name);}},descriptors:{textContent:{set:function(value){textContent.set.call(this,value);if(this.lightStyle){this.appendChild(this.lightStyle);}},get:function(){return textContent.get();}},innerHTML:{set:function(value){innerHTML.set.call(this,value);if(this.lightStyle){this.appendChild(this.lightStyle);}},get:innerHTML.get}}};var defaultPrototype=createProto(HTMLElement.prototype,base.properties);function getBaseProto(proto){if(!proto){return defaultPrototype;}
+proto=proto.prototype||proto;return!proto.GaiaComponent?createProto(proto,base.properties):proto;}
+function createProto(proto,props){return mixin(Object.create(proto),props);}
+var hasShadowCSS=(function(){var div=document.createElement('div');try{div.querySelector(':host');div.querySelector('::content');return true;}
+catch(e){return false;}})();var regex={shadowCss:/(?:\:host|\:\:content)[^{]*\{[^}]*\}/g,':host':/(?:\:host)/g,':host()':/\:host\((.+)\)(?: \:\:content)?/g,':host-context':/\:host-context\((.+)\)([^{,]+)?/g,'::content':/(?:\:\:content)/g};function processCss(template,name){var globalCss='';var lightCss='';if(!hasShadowCSS){template=template.replace(regex.shadowCss,function(match){var hostContext=regex[':host-context'].exec(match);if(hostContext){globalCss+=match.replace(regex['::content'],'').replace(regex[':host-context'],'$1 '+name+'$2').replace(/ +/g,' ');}else{lightCss+=match.replace(regex[':host()'],name+'$1').replace(regex[':host'],name).replace(regex['::content'],name);}
+return'';});}
+return{template:template,lightCss:lightCss,globalCss:globalCss};}
+function injectGlobalCss(css){if(!css){return;}
+var style=document.createElement('style');style.innerHTML=css.trim();headReady().then(function(){document.head.appendChild(style);});}
+function headReady(){return new Promise(function(resolve){if(document.head){return resolve();}
+window.addEventListener('load',function fn(){window.removeEventListener('load',fn);resolve();});});}
+function injectLightCss(el){if(hasShadowCSS){return;}
+var stylesheet=el.querySelector('style');if(!stylesheet){stylesheet=document.createElement('style');stylesheet.setAttribute('scoped','');stylesheet.appendChild(document.createTextNode(el.lightCss));el.appendChild(stylesheet);}
+el.lightStyle=stylesheet;}
+function toCamelCase(string){return string.replace(/-(.)/g,function replacer(string,p1){return p1.toUpperCase();});}
+var dirObserver;function setInnerDirAttributes(component){var dir=component.dir||document.dir;Array.from(component.shadowRoot.children).forEach(element=>{if(element.nodeName!=='STYLE'){element.dir=dir;}});}
+function addDirObserver(){if(dirObserver){return;}
+dirObserver=new MutationObserver(onChanged);dirObserver.observe(document.documentElement,{attributeFilter:['dir'],attributes:true});function onChanged(mutations){document.dispatchEvent(new Event('dirchanged'));}}
+function mixin(target,source){for(var key in source){target[key]=source[key];}
+return target;}});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-component',this));},{}],3:[function(require,module,exports){(function(define){'use strict';define(function(require,exports,module){var base=window.GAIA_ICONS_BASE_URL||window.COMPONENTS_BASE_URL||'bower_components/';if(!document.documentElement){window.addEventListener('load',load);}else{load();}
+function load(){if(isLoaded()){return;}
+var link=document.createElement('link');link.rel='stylesheet';link.type='text/css';link.href=base+'gaia-icons/gaia-icons.css';document.head.appendChild(link);exports.loaded=true;}
+function isLoaded(){return exports.loaded||document.querySelector('link[href*=gaia-icons]')||document.documentElement.classList.contains('gaia-icons-loaded');}});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-icons',this));},{}],4:[function(require,module,exports){;(function(define){'use strict';define(function(require,exports,module){var component=require('gaia-component');var fontFit=require('font-fit');require('gaia-icons');var debug=0?console.log.bind(console):function(){};const KNOWN_ACTIONS={menu:'menu',back:'back',close:'close'};const TITLE_FONT='italic 300 24px FiraSans';const TITLE_PADDING=10;const MINIMUM_FONT_SIZE_CENTERED=20;const MINIMUM_FONT_SIZE_UNCENTERED=16;const MAXIMUM_FONT_SIZE=23;module.exports=component.register('gaia-header',{extensible:false,dirObserver:true,created:function(){debug('created');this.setupShadowRoot();this.els={actionButton:this.shadowRoot.querySelector('.action-button'),titles:this.getElementsByTagName('h1')};this.els.actionButton.addEventListener('click',e=>this.onActionButtonClick(e));this.observer=new MutationObserver(this.onMutation.bind(this));this.ignoreDir=this.hasAttribute('ignore-dir');this.titleEnd=this.getAttribute('title-end');this.titleStart=this.getAttribute('title-start');this.noFontFit=this.getAttribute('no-font-fit');this.notFlush=this.hasAttribute('not-flush');this.action=this.getAttribute('action');this.unresolved={};this.pending={};this._resizeThrottlingId=null;this.onResize=this.onResize.bind(this);},attached:function(){debug('attached');this.runFontFitSoon();this.observerStart();window.addEventListener('resize',this.onResize);},detached:function(){debug('detached');window.removeEventListener('resize',this.onResize);this.observerStop();this.clearPending();},clearPending:function(){for(var key in this.pending){this.pending[key].clear();delete this.pending[key];}
+window.cancelAnimationFrame(this._resizeThrottlingId);this._resizeThrottlingId=null;},runFontFit:function(){debug('run font-fit');if(this.noFontFit){return Promise.resolve();}
+var titles=this.els.titles;var space=this.getTitleSpace();var styles=[].map.call(titles,el=>this.getTitleStyle(el,space));return this.setTitleStylesSoon(styles);},runFontFitSoon:function(){debug('run font-fit soon');if(this.pending.runFontFitSoon){return;}
+this.pending.runFontFitSoon=this.nextTick(()=>{delete this.pending.runFontFitSoon;this.runFontFit();});},getTitleStyle:function(el,space){debug('get el style',el,space);var text=el.textContent;var styleId=space.start+text+space.end+'#'+space.value;if(!text||!text.trim()){return debug('exit: no text');}
+if(getStyleId(el)===styleId){return debug('exit: no change');}
+var marginStart=this.getTitleMarginStart();var textSpace=space.value-Math.abs(marginStart);var fontFitResult=this.fontFit(text,textSpace,{min:MINIMUM_FONT_SIZE_CENTERED});var overflowing=fontFitResult.overflowing;var padding={start:0,end:0};if(overflowing){debug('title overflowing');padding.start=!space.start?TITLE_PADDING:0;padding.end=!space.end?TITLE_PADDING:0;textSpace=space.value-padding.start-padding.end;fontFitResult=this.fontFit(text,textSpace);marginStart=0;}
+return{id:styleId,fontSize:fontFitResult.fontSize,marginStart:marginStart,overflowing:overflowing,padding:padding};},setTitleStylesSoon:function(styles){debug('set title styles soon',styles);var key='setStyleTitlesSoon';this._titleStyles=styles;if(this.unresolved[key]){return this.unresolved[key];}
+this.unresolved[key]=new Promise((resolve)=>{this.pending[key]=this.nextTick(()=>{var styles=this._titleStyles;var els=this.els.titles;[].forEach.call(els,(el,i)=>{if(!styles[i]){return debug('exit');}
+this.setTitleStyle(el,styles[i]);});delete this._titleStyles;delete this.unresolved[key];delete this.pending[key];resolve();});});},setTitleStyle:function(el,style){debug('set title style',style);this.observerStop();if(this.ignoreDir){el.style.marginLeft=style.marginStart+'px';el.style.paddingLeft=style.padding.start+'px';el.style.paddingRight=style.padding.end+'px';}else{el.style.marginInlineStart=style.marginStart+'px';el.style.paddingInlineStart=style.padding.start+'px';el.style.paddingInlineEnd=style.padding.end+'px';}
+el.style.fontSize=style.fontSize+'px';setStyleId(el,style.id);this.observerStart();},fontFit:function(text,space,opts={}){debug('font fit:',text,space,opts);var fontFitArgs={font:TITLE_FONT,min:opts.min||MINIMUM_FONT_SIZE_UNCENTERED,max:MAXIMUM_FONT_SIZE,text:text,space:space};return fontFit(fontFitArgs);},observerStart:function(){if(this.observing){return;}
+this.observer.observe(this,{childList:true,attributes:true,subtree:true});this.observing=true;debug('observer started');},observerStop:function(){if(!this.observing){return;}
+this.observer.disconnect();this.observing=false;debug('observer stopped');},onResize:function(e){debug('onResize',this._resizeThrottlingId);if(this._resizeThrottlingId!==null){return;}
+this._resizeThrottlingId=window.requestAnimationFrame(()=>{this._resizeThrottlingId=null;this.runFontFitSoon();});},onMutation:function(mutations){debug('on mutation',mutations);if(!this.pending.runFontFitSoon){this.runFontFit();}},getTitleSpace:function(){var start=this.titleStart;var end=this.titleEnd;var space=this.getWidth()-start-end;var result={value:space,start:start,end:end};debug('get title space',result);return result;},getWidth:function(){var value=this.notFlush?this.clientWidth:window.innerWidth;debug('get width',value);return value;},triggerAction:function(){if(this.action){this.els.actionButton.click();}},onActionButtonClick:function(){debug('action button click');var config={detail:{type:this.action}};var e=new CustomEvent('action',config);setTimeout(()=>this.dispatchEvent(e));},getTitleMarginStart:function(){var start=this.titleStart;var end=this.titleEnd;var marginStart=end-start;debug('get title margin start',marginStart);return marginStart;},getButtonsBeforeTitle:function(){var children=this.children;var l=children.length;var els=[];for(var i=0;i<l;i++){var el=children[i];if(el.tagName==='H1'){break;}
+if(!contributesToLayout(el)){continue;}
+els.push(el);}
+if(this.action){els.push(this.els.actionButton);}
+return els;},getButtonsAfterTitle:function(){var children=this.children;var els=[];for(var i=children.length-1;i>=0;i--){var el=children[i];if(el.tagName==='H1'){break;}
+if(!contributesToLayout(el)){continue;}
+els.push(el);}
+return els;},sumButtonWidths:function(buttons){var defaultWidth=50;var sum=buttons.reduce((prev,button)=>{var isStandardButton=button===this.els.actionButton;var width=isStandardButton?defaultWidth:button.clientWidth;return prev+width;},0);debug('sum button widths',buttons,sum);return sum;},attrs:{action:{get:function(){return this._action;},set:function(value){var action=KNOWN_ACTIONS[value];if(action===this._action){return;}
+this.setAttr('action',action);this._action=action;}},titleStart:{get:function(){debug('get title-start');if('_titleStart'in this){return this._titleStart;}
+var buttons=this.getButtonsBeforeTitle();var value=this.sumButtonWidths(buttons);debug('get title-start',buttons,value);return value;},set:function(value){debug('set title-start',value);value=parseInt(value,10);if(value===this._titleStart||isNaN(value)){return;}
+this.setAttr('title-start',value);this._titleStart=value;debug('set');}},titleEnd:{get:function(){debug('get title-end');if('_titleEnd'in this){return this._titleEnd;}
+var buttons=this.getButtonsAfterTitle();return this.sumButtonWidths(buttons);},set:function(value){debug('set title-end',value);value=parseInt(value,10);if(value===this._titleEnd||isNaN(value)){return;}
+this.setAttr('title-end',value);this._titleEnd=value;}},noFontFit:{get:function(){return this._noFontFit||false;},set:function(value){debug('set no-font-fit',value);value=!!(value||value==='');if(value===this.noFontFit){return;}
+this._noFontFit=value;if(value){this.setAttr('no-font-fit','');}
+else{this.removeAttr('no-font-fit');}}},ignoreDir:{get:function(){return this._ignoreDir||false;},set:function(value){debug('set ignore-dir',value);value=!!(value||value==='');if(value===this.ignoreDir){return;}
+this._ignoreDir=value;this.dirObserver=!value;if(value){this.setAttr('ignore-dir','');}
+else{this.removeAttr('ignore-dir');}}}},template:`<div class="inner">
+    <button class="action-button">
+      <content select="[l10n-action]"></content>
+    </button>
+    <content></content>
+  </div>
+
+  <style>
+
+  :host {
+    display: block;
+    -moz-user-select: none;
+
+    --gaia-header-button-color:
+      var(--header-button-color,
+      var(--header-color,
+      var(--link-color,
+      inherit)));
+  }
+
+  /**
+   * [hidden]
+   */
+
+  :host[hidden] {
+    display: none;
+  }
+
+  /** Reset
+   ---------------------------------------------------------*/
+
+  ::-moz-focus-inner { border: 0; }
+
+  /** Inner
+   ---------------------------------------------------------*/
+
+  .inner {
+    display: flex;
+    min-height: 50px;
+    -moz-user-select: none;
+
+    background:
+      var(--header-background,
+      var(--background,
+      #fff));
+  }
+
+  /** Action Button
+   ---------------------------------------------------------*/
+
+  /**
+   * 1. Hidden by default
+   */
+
+  .action-button {
+    position: relative;
+
+    display: none; /* 1 */
+    width: 50px;
+    font-size: 30px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+
+    align-items: center;
+    background: none;
+    cursor: pointer;
+    transition: opacity 200ms 280ms;
+    color:
+      var(--header-action-button-color,
+      var(--header-icon-color,
+      var(--gaia-header-button-color)));
+  }
+
+  /**
+   * [action=back]
+   * [action=menu]
+   * [action=close]
+   *
+   * 1. For icon vertical-alignment
+   */
+
+  [action=back] .action-button,
+  [action=menu] .action-button,
+  [action=close] .action-button {
+    display: flex; /* 1 */
+  }
+
+  /**
+   * :active
+   */
+
+  .action-button:active {
+    transition: none;
+    opacity: 0.2;
+  }
+
+  /** Action Button Icon
+   ---------------------------------------------------------*/
+
+  .action-button:before {
+    font-family: 'gaia-icons';
+    font-style: normal;
+    text-rendering: optimizeLegibility;
+    font-weight: 500;
+  }
+
+  [action=close] .action-button:before { content: 'close' }
+  [action=menu] .action-button:before { content: 'menu' }
+
+  [action=back]:-moz-dir(ltr) .action-button:before { content: 'left' }
+  [action=back]:-moz-dir(rtl) .action-button:before { content: 'right' }
+
+  /** Action Button Icon
+   ---------------------------------------------------------*/
+
+  /**
+   * 1. To enable vertical alignment.
+   */
+
+  .action-button:before {
+    display: block;
+  }
+
+  /** Action Button Text
+   ---------------------------------------------------------*/
+
+  /**
+   * To provide custom localized content for
+   * the action-button, we allow the user
+   * to provide an element with the class
+   * .l10n-action. This node is then
+   * pulled inside the real action-button.
+   *
+   * Example:
+   *
+   *   <gaia-header action="back">
+   *     <span l10n-action aria-label="Back">Localized text</span>
+   *     <h1>title</h1>
+   *   </gaia-header>
+   */
+
+  ::content [l10n-action] {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    font-size: 0;
+  }
+
+  /** Title
+   ---------------------------------------------------------*/
+
+  /**
+   * 1. Vertically center text. We can't use flexbox
+   *    here as it breaks text-overflow ellipsis
+   *    without an inner div.
+   */
+
+  ::content h1 {
+    flex: 1;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: center;
+    line-height: 50px; /* 1 */
+    font-weight: 300;
+    font-style: italic;
+    font-size: 24px;
+
+    color:
+      var(--header-title-color,
+      var(--header-color,
+      var(--title-color,
+      var(--text-color,
+      inherit))));
+  }
+
+  /**
+   * [ignore-dir]
+   *
+   * When the <gaia-header> component has an [ignore-dir] attribute, header
+   * direction is forced to LTR but we still want the <h1> text to be reversed
+   * so that strings like '1 selected' become 'selected 1'.
+   *
+   * When we're happy for <gaia-header> to be fully RTL responsive we won't need
+   * these rules anymore, but this depends on all Gaia apps being ready.
+   *
+   * This should be safe to remove when bug 1179459 lands.
+   */
+
+  :host[ignore-dir] {
+    direction: ltr;
+  }
+
+  :host[ignore-dir]:-moz-dir(rtl) h1 {
+    direction: rtl;
+  }
+
+  /** Buttons
+   ---------------------------------------------------------*/
+
+  ::content a,
+  ::content button {
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    display: flex;
+    width: auto;
+    height: auto;
+    min-width: 50px;
+    margin: 0;
+    padding: 0 10px;
+    outline: 0;
+    border: 0;
+
+    font-size: 14px;
+    line-height: 1;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    text-align: center;
+    background: none;
+    border-radius: 0;
+    font-style: italic;
+    cursor: pointer;
+    transition: opacity 200ms 280ms;
+    color: var(--gaia-header-button-color);
+  }
+
+  /**
+   * :active
+   */
+
+  ::content a:active,
+  ::content button:active {
+    transition: none;
+    opacity: 0.2;
+  }
+
+  /**
+   * [hidden]
+   */
+
+  ::content a[hidden],
+  ::content button[hidden] {
+    display: none;
+  }
+
+  /**
+   * [disabled]
+   */
+
+  ::content a[disabled],
+  ::content button[disabled] {
+    pointer-events: none;
+    color: var(--header-disabled-button-color);
+  }
+
+  /** Icon Buttons
+   ---------------------------------------------------------*/
+
+  /**
+   * Icons are a different color to text
+   */
+
+  ::content .icon,
+  ::content [data-icon] {
+    color:
+      var(--header-icon-color,
+      var(--gaia-header-button-color));
+  }
+
+  /**
+   * If users want their action button
+   * to be in the component's light-dom
+   * they can add an .action class
+   * to make it look like the
+   * shadow action button.
+   */
+
+  ::content .action {
+    color:
+      var(--header-action-button-color,
+      var(--header-icon-color,
+      var(--gaia-header-button-color)));
+  }
+
+  /**
+   * [data-icon]:empty
+   *
+   * Icon buttons with no textContent,
+   * should always be 50px.
+   *
+   * This is to prevent buttons being
+   * larger than they should be before
+   * icon-font has loaded.
+   */
+
+  ::content [data-icon]:empty {
+    width: 50px;
+  }
+
+  </style>`,nextTick:nextTick});function contributesToLayout(el){return el.localName!=='style'&&!el.hasAttribute('l10n-action');}
+function setStyleId(el,id){el._styleId=id;}
+function getStyleId(el){return el._styleId;}
+function nextTick(fn){var cleared;Promise.resolve().then(()=>{if(!cleared){fn();}});return{clear:function(){cleared=true;}};}});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-header',this));},{"font-fit":1,"gaia-component":2,"gaia-icons":3}]},{},[4])(4)});

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia-icons/gaia-icons.css

@@ -0,0 +1,40 @@
+/* Generated by grunt-webfont */
+/* Based on https://github.com/endtwist/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.css */
+
+@font-face {
+	font-family: "gaia-icons";
+	src: url("fonts/gaia-icons.ttf") format("truetype");
+	font-weight: 500;
+	font-style: normal;
+}
+
+[data-icon]:before,
+.ligature-icons {
+	font-family: "gaia-icons";
+	content: attr(data-icon);
+	display: inline-block;
+	font-weight: 500;
+	font-style: normal;
+	text-decoration: inherit;
+	text-transform: none;
+	text-rendering: optimizeLegibility;
+	font-size: 30px;
+	-webkit-font-smoothing: antialiased;
+}
+
+[data-icon]:not([data-l10n-id]):not([aria-label]):not([aria-hidden="true"]):before {
+	/* Highlight cases where icons are not localized and still visible to screen
+	   reader */
+	background: rgba(255, 0, 0, 0.4);
+}
+
+[data-icon]:not([data-l10n-id]):not([aria-label]):not([aria-hidden="true"]):after {
+	background: #333;
+	color: #fff;
+	position: absolute;
+	width: 20rem;
+	border-radius: 0.5rem;
+	padding: 0.5rem;
+	content: "Icon is not localized and is still visible to screen reader. Please add data-l10n-id or aria-label for localization or use aria-hidden to hide the icon from screen reader.";
+	z-index: 9999;
+}

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia-toast/gaia-toast.js

@@ -0,0 +1,94 @@
+;;(function(define){define(function(require,exports,module){'use strict';var component=require('gaia-component');module.exports=component.register('gaia-toast',{created:function(){this.setupShadowRoot();this.els={inner:this.shadowRoot.querySelector('.inner'),bread:this.shadowRoot.querySelector('.bread')};this.timeout=this.getAttribute('timeout');},show:function(){this.els.bread.removeEventListener('animationend',this.onAnimateOutEnd);clearTimeout(this.hideTimeout);this.els.inner.classList.add('visible');var reflow=this.els.inner.offsetTop;this.els.bread.classList.remove('animate-out');this.els.bread.classList.add('animate-in');this.hideTimeout=setTimeout(this.hide.bind(this),this.timeout);},hide:function(){var self=this;clearTimeout(this.hideTimeout);this.els.bread.classList.remove('animate-in');this.els.bread.classList.add('animate-out');this.els.bread.removeEventListener('animationend',this.onAnimateOutEnd);this.onAnimateOutEnd=function(){self.els.bread.removeEventListener('animationend',self.onAnimateOutEnd);self.els.bread.classList.remove('animate-out');self.els.inner.classList.remove('visible');};this.els.bread.addEventListener('animationend',this.onAnimateOutEnd);},animateOut:function(){},attrs:{timeout:{get:function(){return this.getAttribute('timeout')||1000;},set:function(value){var current=this.getAttribute('timeout');if(current==value){return;}
+else if(!value){this.removeAttribute('timeout');}
+else{this.setAttribute('timeout',value);}}}},template:`
+    <div class="inner">
+      <div class="bread">
+        <content></content>
+      </div>
+    </div>
+
+    <style>
+
+    /** Host
+     ---------------------------------------------------------*/
+
+    :host {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      font-style: italic;
+      text-align: center;
+      z-index: 100;
+
+      color:
+        var(--highlight-color);
+    }
+
+    /** Inner
+      ---------------------------------------------------------*/
+
+    .inner {
+      display: none;
+      padding: 16px;
+    }
+
+    .inner.visible {
+      display: block;
+    }
+
+    /**
+     ---------------------------------------------------------*/
+
+    .bread {
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 16px;
+      box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
+      transform: translateY(100%);
+
+      background:
+        var(--background-plus,
+        white);
+    }
+
+    .bread.animate-in {
+      animation-name: gaia-toast-enter;
+      animation-fill-mode: forwards;
+      animation-duration: 300ms;
+    }
+
+    .bread.animate-out {
+      animation-name: gaia-toast-leave;
+      animation-duration: 600ms;
+      transform: translateY(0%);
+    }
+
+    </style>
+  `,globalCss:`
+    @keyframes gaia-toast-enter {
+      0% {
+        transform: translateY(100%);
+        opacity: 0;
+      }
+
+      40% {
+        opacity: 0;
+      }
+
+      100% {
+        transform: translateY(0%);
+        opacity: 1;
+      }
+    }
+
+    @keyframes gaia-toast-leave {
+      0% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 0;
+      }
+    }
+  `});});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-toast',this));

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia_buttons/images/left-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 18.2995,19.66 -5.056,-5.057 5.056,-5.056 c -0.31,-0.516 -0.62,-1.032 -0.93,-1.34 l -5.672,5.673 v 1.652 l 5.675,5.676 c 0.31,-0.515 0.722,-0.928 0.93,-1.547 z"/></svg>

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia_buttons/images/right-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="M11.8,19.9l4.9-4.9l-4.9-4.9c0.3-0.5,0.6-1,0.9-1.3l5.5,5.5c0,0.3,0,0.5,0,0.8c0,0.3,0,0.5,0,0.8l-5.5,5.5 C12.4,20.9,12,20.5,11.8,19.9z"/></svg>

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia_buttons/script.js

@@ -0,0 +1 @@
+;'use strict';window.GaiaButtons=(function(win){var proto=Object.create(HTMLElement.prototype);var baseurl=window.GaiaButtonsBaseurl||'/shared/elements/gaia_buttons/';proto.createdCallback=function(){ComponentUtils.style.call(this,baseurl);};return document.registerElement('gaia-buttons',{prototype:proto});})(window);

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia_buttons/style.css

@@ -0,0 +1,281 @@
+/* ---------------------------------------
+ * gaia-buttons:
+ * Container for buttons e.g:
+ * action menu, confirm, edit mode, FTU
+ * --------------------------------------- */
+
+gaia-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 7rem;
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+
+gaia-buttons:not(.inline) {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  border-top: 0.1rem solid #e7e7e7;
+  padding: 0;
+  background-color: #f4f4f4;
+}
+/* this 'end' padding must match the buttons 'start' margin */
+gaia-buttons:not(.inline):-moz-dir(ltr) { padding-right: 1.5rem; }
+gaia-buttons:not(.inline):-moz-dir(rtl) { padding-left: 1.5rem; }
+
+gaia-buttons.inline a,
+gaia-buttons.inline button {
+  margin: 0;
+}
+
+button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+a,
+button {
+  position: relative;
+  font-family: sans-serif;
+  font-style: italic;
+  width: 100%;
+  height: 4rem;
+  margin: 0;
+  padding: 0 0.2rem;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background: #d8d8d8;
+  border: none;
+  border-radius: 2rem;
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 4rem;
+  color: #333;
+  text-align: center;
+  text-decoration: none;
+  outline: none;
+}
+:-moz-dir(ltr) a,
+:-moz-dir(ltr) button {
+  margin-left: 1.5rem;
+}
+:-moz-dir(rtl) a,
+:-moz-dir(rtl) button {
+  margin-right: 1.5rem;
+}
+
+/* Recommend */
+a.recommend,
+button.recommend {
+  background-color: #00caf2;
+  color: #fff;
+}
+
+/* Danger */
+a.danger,
+button.danger {
+  background-color: #e51e1e;
+  color: #fff;
+}
+
+/* Pressed */
+a:active,
+button:active {
+  background-color: #b2f2ff;
+  color: #fff;
+}
+
+a::-moz-selection,
+button::-moz-selection {
+  background-color: transparent;
+}
+
+/* Disabled */
+a[aria-disabled="true"],
+button[disabled] {
+  background-color: rgba(0,0,0,0.05);
+  color: #c7c7c7;
+  pointer-events: auto;
+}
+
+a[aria-disabled="true"].recommend,
+button[disabled].recommend {
+  background-color: #97cbd5;
+  color: rgba(255,255,255,0.5);
+}
+
+a[aria-disabled="true"].danger,
+button[disabled].danger {
+  background-color: #eb7474;
+  color: rgba(255,255,255,0.5);
+}
+
+a[aria-disabled="true"]::-moz-selection,
+button[disabled]::-moz-selection {
+  -moz-user-select: none;
+}
+
+/* Hidden */
+[hidden] {
+  visibility: hidden;
+}
+
+/* Icons */
+a.icon,
+button.icon {
+  position: relative;
+}
+
+a.icon:before,
+button.icon:before {
+  content: "";
+  width: 3rem;
+  height: 3rem;
+  position: absolute;
+  top: 50%;
+  margin-top: -1.5rem;
+  background: transparent no-repeat center center / 100% auto;
+}
+:-moz-dir(ltr) a.icon:before,
+:-moz-dir(ltr) button.icon:before { right: 0.5rem; }
+:-moz-dir(rtl) a.icon:before,
+:-moz-dir(rtl) button.icon:before { left: 0.5rem; }
+
+a.icon-next:before,
+button.icon-next:before {
+  background-size: 3rem;
+}
+:-moz-dir(ltr) a.icon-next:before,
+:-moz-dir(ltr) button.icon-next:before {
+  background-image: url(images/right-light.svg);
+}
+:-moz-dir(rtl) a.icon-next:before,
+:-moz-dir(rtl) button.icon-next:before {
+  background-image: url(images/left-light.svg);
+}
+
+a.icon-previous:before,
+button.icon-previous:before {
+  background-size: 3rem;
+}
+:-moz-dir(ltr) a.icon-previous:before,
+:-moz-dir(ltr) button.icon-previous:before {
+  left: 0.5rem;
+  background-image: url(images/left-light.svg);
+}
+:-moz-dir(rtl) a.icon-previous:before,
+:-moz-dir(rtl) button.icon-previous:before {
+  right: 0.5rem;
+  background-image: url(images/right-light.svg);
+}
+
+
+/* -----------------------------------------------------------------
+  SKIN: dark
+----------------------------------------------------------------- */
+
+gaia-buttons[skin="dark"] {
+  background: #4d4d4d;
+  border: none;
+}
+
+/* Pressed */
+[skin="dark"] a:active,
+[skin="dark"] button:active {
+  background-color: #00aacc;
+}
+
+/* Disabled */
+[skin="dark"] a[aria-disabled="true"],
+[skin="dark"] button[disabled] {
+  background-color: #565656;
+  color: rgba(255,255,255,0.4);
+}
+
+[skin="dark"] a[aria-disabled="true"].recommend,
+[skin="dark"] button[disabled].recommend {
+  background-color: #006579;
+}
+
+[skin="dark"] a[aria-disabled="true"].danger,
+[skin="dark"] button[disabled].danger {
+  background-color: #730f0f;
+}
+
+/* -----------------------------------------------------------------
+  Transitions
+----------------------------------------------------------------- */
+
+[transition] {
+  display: flex;
+  transition: visibility var(--transition-duration);
+}
+
+[transition][hidden] {
+  pointer-events: none;
+}
+
+[transition="slide"] {
+  transform: translateY(0);
+  transition: transform var(--transition-duration) ease,
+              visibility var(--transition-duration);
+}
+
+[transition="slide"][hidden] {
+  transform: translateY(100%);
+}
+
+[transition="fade"] {
+  opacity: 1;
+  transition: opacity var(--transition-duration) ease,
+              visibility var(--transition-duration);
+}
+
+[transition="fade"][hidden] {
+  opacity: 0;
+}
+
+/* -----------------------------------------------------------------
+  RESPONSIVE: tablet
+----------------------------------------------------------------- */
+
+@media (min-width: 768px) {
+
+  gaia-buttons {
+    height: 10rem;
+  }
+
+  gaia-buttons:not(.inline) {
+    border-top-width: 0.2rem;
+  }
+  /* this 'end' padding must match the buttons 'start' margin */
+  gaia-buttons:not(.inline):-moz-dir(ltr) { padding-right: 3rem; }
+  gaia-buttons:not(.inline):-moz-dir(rtl) { padding-left: 3rem; }
+
+  a,
+  button {
+    font-size: 2rem;
+    height: 5rem;
+    line-height: 5rem;
+    border-radius: 2.5rem;
+    max-width: 40rem;
+  }
+  :-moz-dir(ltr) a,
+  :-moz-dir(ltr) button {
+    margin-left: 3rem;
+  }
+  :-moz-dir(rtl) a,
+  :-moz-dir(rtl) button {
+    margin-right: 3rem;
+  }
+
+}
+

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia_checkbox/script.js

@@ -0,0 +1,5 @@
+;'use strict';window.GaiaCheckbox=(function(win){var proto=Object.create(HTMLElement.prototype);var baseurl=window.GaiaCheckboxBaseurl||'/shared/elements/gaia_checkbox/';proto.createdCallback=function(){this.lastClick=0;this.throttleTime=250;var shadow=this.createShadowRoot();this._template=template.content.cloneNode(true);this._wrapper=this._template.getElementById('checkbox');this._wrapper.addEventListener('click',this.handleClick.bind(this));this.configureClass();this.checked=this.hasAttribute('checked');this._wrapper.setAttribute('aria-checked',this.checked);this.setAttribute('role','presentation');shadow.appendChild(this._template);ComponentUtils.style.call(this,baseurl);};proto.handleClick=function(e){e.preventDefault();e.stopImmediatePropagation();if(this.lastClick+this.throttleTime>Date.now()){return;}
+this.lastClick=Date.now();var event=new MouseEvent('click',{view:window,bubbles:true,cancelable:true});this.dispatchEvent(event);if(!event.defaultPrevented){this.checked=!this.checked;this._wrapper.setAttribute('aria-checked',this.checked);}
+this.dispatchEvent(new CustomEvent('change',{bubbles:true,cancelable:false}));};proto.configureClass=function(){this._wrapper.className=this.className;};proto.attributeChangedCallback=function(name,from,to){if(name==='class'){this._wrapper.className=to;}};Object.defineProperty(proto,'checked',{get:function(){return this._checked||false;},set:function(value){this._wrapper.classList.toggle('checked',value);this._checked=value;}});Object.defineProperty(proto,'name',{get:function(){return this.getAttribute('name');},set:function(value){this.setAttribute('name',value);}});var template=document.createElement('template');template.innerHTML=`<span id="checkbox" role="checkbox">
+      <span role="presentation"><content select="label"></content></span>
+    </span>`;return document.registerElement('gaia-checkbox',{prototype:proto});})(window);

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia_checkbox/style.css

@@ -0,0 +1,71 @@
+gaia-checkbox {
+  display: inline-block;
+  width: 100%;
+}
+
+#checkbox {
+  display: block;
+  width: 100%;
+  /* Normal gaia-checkboxes are the heights of their parents. */
+  height: 100%;
+  position: relative;
+  background: none;
+}
+
+#checkbox span {
+  font-size: 1.9rem;
+  font-weight: normal;
+  color: var(--label-color);
+  line-height: 3rem;
+  box-sizing: border-box;
+  display: block;
+  min-width: 2.2rem;
+  min-height: 2.2rem;
+  width: 100%;
+  padding-inline-end: 2.2rem;
+  /* Override inheriting nowrap from legacy lists building blocks. */
+  white-space: normal;
+}
+
+/* Inline gaia-checkboxes are the heights of their parents. */
+#checkbox.inline {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+#checkbox:not(.invisible) span:after {
+  content: '';
+  position: absolute;
+  offset-inline-end: 0;
+  top: 50%;
+  margin: -1.2rem 0 0;
+  margin-inline-start: -1.2rem;
+  width: 2.2rem;
+  height: 2.2rem;
+}
+
+#checkbox.inline span {
+  padding-inline-start: 3rem;
+  padding-inline-end: 0;
+  height: auto;
+}
+
+#checkbox.inline span:after {
+  offset-inline-start: 1.2rem;
+  offset-inline-end: unset;
+  margin: -1.2rem 0 0;
+  margin-inline-start: -1.2rem;
+}
+
+#checkbox:not(.invisible) span:after {
+  background: url(images/default.png) no-repeat center top / 2.2rem auto;
+}
+
+#checkbox.checked span:after {
+  background-position: center bottom;
+}
+
+/* 'Dangerous' checkboxes */
+#checkbox.danger span:after {
+  background-image: url(images/danger.png);
+}

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia_confirm/script.js

@@ -0,0 +1,11 @@
+;'use strict';window.GaiaConfirm=(function(win){var proto=Object.create(HTMLElement.prototype);var baseurl=window.GaiaConfirmBaseurl||'/shared/elements/gaia_confirm/';function eatEvent(unless,event){if(unless&&unless.indexOf(event.target)!==-1){return;}
+event.preventDefault();event.stopImmediatePropagation();}
+proto.createdCallback=function(){var shadow=this.createShadowRoot();this._template=template.content.cloneNode(true);shadow.appendChild(this._template);ComponentUtils.style.call(this,baseurl);var confirm=this.querySelector('gaia-buttons .confirm');var cancel=this.querySelector('gaia-buttons .cancel');if(confirm){confirm.addEventListener('click',(e)=>{eatEvent(null,e);this.dispatchEvent(new CustomEvent('confirm'));});}
+if(cancel){cancel.addEventListener('click',(e)=>{eatEvent(null,e);this.dispatchEvent(new CustomEvent('cancel'));});}};var template=document.createElement('template');template.innerHTML=`<form role="dialog" class="confirm">
+      <section>
+        <content select="h1"></content>
+        <content select="p"></content>
+      </section>
+      <content select="gaia-buttons">
+      </content>
+    </form>`;return document.registerElement('gaia-confirm',{prototype:proto});})(window);

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia_confirm/style.css

@@ -0,0 +1,155 @@
+/* ----------------------------------
+ * Confirm
+ * ---------------------------------- */
+
+/* Main dialog setup */
+gaia-confirm {
+  background: #2d2d2d;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding-bottom: 7rem;
+  font-size: 0;
+  text-align: start;
+  /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
+  created by white-spaces and break lines in the code betewen inline-block elements */
+  color: #fff;
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  justify-content: center;
+  transition: transform ease-in-out 0.3s, visibility 0.3s;
+  /**
+  magic number ideally to place confirm dialogs on top.
+  */
+  z-index: 2147483646;
+}
+
+gaia-confirm[hidden] {
+  transform: translateY(100%);
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.confirm section {
+  height: 100%;
+  font-weight: 300;
+  font-size: 2.2rem;
+  color: #FAFAFA;
+  padding: 0 1.5rem;
+  box-sizing: padding-box;
+  width: 100%;
+  display: inline-block;
+  max-height: 100%;
+  vertical-align: middle;
+  white-space: normal;
+}
+
+h1 {
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 1.5em;
+  color: #fff;
+  margin: 0;
+  padding: 1rem 1.5rem 0;
+  overflow: hidden;
+  max-height: 7rem;
+  word-wrap: break-word;
+}
+
+/* Specific component code */
+p {
+  word-wrap: break-word;
+  margin: 1rem 0 0;
+  padding: 1rem 1.5rem;
+  border-top: 0.1rem solid #686868;
+  line-height: 3rem;
+}
+
+p img {
+  margin-inline-end: 2rem;
+}
+p img:-moz-dir(ltr) { float: left; }
+p img:-moz-dir(rtl) { float: right; }
+
+p strong {
+  font-weight: 300;
+}
+
+p small {
+  font-size: 1.4rem;
+  font-weight: normal;
+  color: #cbcbcb;
+  display: block;
+}
+
+dl {
+  border-top: 0.1rem solid #686868;
+  margin: 1rem 0 0;
+  overflow: hidden;
+  padding-top: 1rem;
+  font-size: 1.6rem;
+  line-height: 2.2rem;
+}
+
+dl > dt {
+  clear: both;
+  width: 7rem;
+  padding-inline-start: 1.5rem;
+  font-weight: 500;
+  text-align: start;
+}
+dl > dt:-moz-dir(ltr) { float: left; }
+dl > dt:-moz-dir(rtl) { float: right; }
+
+dl > dd {
+  padding-inline-end: 1.5rem;
+  font-weight: 300;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  overflow: hidden;
+}
+
+figure {
+  margin: 1.5rem;
+  display: flex;
+  align-items: center;
+}
+
+figure img {
+  padding-inline-end: 1.5rem;
+  flex-shrink: 0;
+}
+
+figure figcaption {
+  font-size: 2.1rem;
+  font-weight: 300;
+}
+
+ul {
+  margin: 0;
+  padding: 2rem 1.5rem;
+  border-top: 0.1rem solid #686868;
+  list-style: none;
+  font-size: 1.6rem;
+  font-weight: normal;
+}
+
+ul li {
+  word-wrap: break-word;
+  line-height: 2rem;
+  padding-bottom: 1.5rem;
+}
+
+ul li:last-child {
+  padding-bottom: 0;
+}
+
+ul li ul {
+  border: none;
+  margin: 0;
+  padding: 0;
+}

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia_subheader/script.js

@@ -0,0 +1 @@
+;'use strict';window.GaiaSubheader=(function(win){var proto=Object.create(HTMLElement.prototype);var baseurl=window.GaiaSubheaderBaseurl||'/shared/elements/gaia_subheader/';proto.createdCallback=function(){ComponentUtils.style.call(this,baseurl);};return document.registerElement('gaia-subheader',{prototype:proto});})(window);

assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia_subheader/style.css

@@ -0,0 +1,40 @@
+gaia-subheader[hidden] {
+  display: none;
+}
+
+/**
+ * Gaia Subheader
+ *
+ * Dividing header usually found
+ * heading and separating lists.
+ */
+
+gaia-subheader {
+  display: block;
+  padding: 0.8rem 3rem;
+  border-bottom: solid 0.1rem #e6e6e6;
+  color: #424242;
+  font-size: 1.5rem;
+  line-height: 1.8rem;
+  text-align: start;
+}
+
+/**
+ * [data-skin="organic"]
+ */
+
+gaia-subheader[skin="organic"] {
+  border: 0;
+  background-color: #e7e7e7;
+  color: #4d4d4d;
+}
+
+/**
+ * [data-skin="dark"]
+ */
+
+gaia-subheader[skin="dark"] {
+  border: 0;
+  background-color: #2c353b;
+  color: #fff;
+}

assets/webapps/keyboard.gaiamobile.org/shared/js/component_utils.js

@@ -0,0 +1,2 @@
+;(function(exports){'use strict';exports.ComponentUtils={style:function(baseUrl){if(window.VulpesCompat){window.VulpesCompat.componentStyle(this,baseUrl).catch(console.error);return;}var style=document.createElement('style');var url=baseUrl+'style.css';var self=this;style.setAttribute('scoped','');style.innerHTML='@import url('+url+');';this.appendChild(style);this.style.visibility='hidden';style.addEventListener('load',function(){if(self.shadowRoot){self.shadowRoot.appendChild(style.cloneNode(true));}
+self.style.visibility='';});}};}(window));

assets/webapps/keyboard.gaiamobile.org/shared/js/l10n.js

@@ -0,0 +1,245 @@
+;(function(window,undefined){'use strict';function L10nError(message,id,loc){this.name='L10nError';this.message=message;this.id=id;this.loc=loc;}
+L10nError.prototype=Object.create(Error.prototype);L10nError.prototype.constructor=L10nError;var io={_load:function(type,url,callback,sync){var xhr=new XMLHttpRequest();var needParse;if(xhr.overrideMimeType){xhr.overrideMimeType(type);}
+xhr.open('GET',url,!sync);if(type==='application/json'){if(sync){needParse=true;}else{xhr.responseType='json';}}
+xhr.addEventListener('load',function io_onload(e){if(e.target.status===200||e.target.status===0){var res=e.target.response||e.target.responseText;callback(null,needParse?JSON.parse(res):res);}else{callback(new L10nError('Not found: '+url));}});xhr.addEventListener('error',callback);xhr.addEventListener('timeout',callback);try{xhr.send(null);}catch(e){if(e.name==='NS_ERROR_FILE_NOT_FOUND'){callback(new L10nError('Not found: '+url));}else{throw e;}}},load:function(url,callback,sync){return io._load('text/plain',url,callback,sync);},loadJSON:function(url,callback,sync){return io._load('application/json',url,callback,sync);}};function EventEmitter(){}
+EventEmitter.prototype.emit=function ee_emit(){if(!this._listeners){return;}
+var args=Array.prototype.slice.call(arguments);var type=args.shift();if(!this._listeners[type]){return;}
+var typeListeners=this._listeners[type].slice();for(var i=0;i<typeListeners.length;i++){typeListeners[i].apply(this,args);}};EventEmitter.prototype.addEventListener=function ee_add(type,listener){if(!this._listeners){this._listeners={};}
+if(!(type in this._listeners)){this._listeners[type]=[];}
+this._listeners[type].push(listener);};EventEmitter.prototype.removeEventListener=function ee_rm(type,listener){if(!this._listeners){return;}
+var typeListeners=this._listeners[type];var pos=typeListeners.indexOf(listener);if(pos===-1){return;}
+typeListeners.splice(pos,1);};function getPluralRule(lang){var locales2rules={'af':3,'ak':4,'am':4,'ar':1,'asa':3,'az':0,'be':11,'bem':3,'bez':3,'bg':3,'bh':4,'bm':0,'bn':3,'bo':0,'br':20,'brx':3,'bs':11,'ca':3,'cgg':3,'chr':3,'cs':12,'cy':17,'da':3,'de':3,'dv':3,'dz':0,'ee':3,'el':3,'en':3,'eo':3,'es':3,'et':3,'eu':3,'fa':0,'ff':5,'fi':3,'fil':4,'fo':3,'fr':5,'fur':3,'fy':3,'ga':8,'gd':24,'gl':3,'gsw':3,'gu':3,'guw':4,'gv':23,'ha':3,'haw':3,'he':2,'hi':4,'hr':11,'hu':0,'id':0,'ig':0,'ii':0,'is':3,'it':3,'iu':7,'ja':0,'jmc':3,'jv':0,'ka':0,'kab':5,'kaj':3,'kcg':3,'kde':0,'kea':0,'kk':3,'kl':3,'km':0,'kn':0,'ko':0,'ksb':3,'ksh':21,'ku':3,'kw':7,'lag':18,'lb':3,'lg':3,'ln':4,'lo':0,'lt':10,'lv':6,'mas':3,'mg':4,'mk':16,'ml':3,'mn':3,'mo':9,'mr':3,'ms':0,'mt':15,'my':0,'nah':3,'naq':7,'nb':3,'nd':3,'ne':3,'nl':3,'nn':3,'no':3,'nr':3,'nso':4,'ny':3,'nyn':3,'om':3,'or':3,'pa':3,'pap':3,'pl':13,'ps':3,'pt':3,'rm':3,'ro':9,'rof':3,'ru':11,'rwk':3,'sah':0,'saq':3,'se':7,'seh':3,'ses':0,'sg':0,'sh':11,'shi':19,'sk':12,'sl':14,'sma':7,'smi':7,'smj':7,'smn':7,'sms':7,'sn':3,'so':3,'sq':3,'sr':11,'ss':3,'ssy':3,'st':3,'sv':3,'sw':3,'syr':3,'ta':3,'te':3,'teo':3,'th':0,'ti':4,'tig':3,'tk':3,'tl':4,'tn':3,'to':0,'tr':0,'ts':3,'tzm':22,'uk':11,'ur':3,'ve':3,'vi':0,'vun':3,'wa':4,'wae':3,'wo':0,'xh':3,'xog':3,'yo':0,'zh':0,'zu':3};function isIn(n,list){return list.indexOf(n)!==-1;}
+function isBetween(n,start,end){return typeof n===typeof start&&start<=n&&n<=end;}
+var pluralRules={'0':function(){return'other';},'1':function(n){if((isBetween((n%100),3,10))){return'few';}
+if(n===0){return'zero';}
+if((isBetween((n%100),11,99))){return'many';}
+if(n===2){return'two';}
+if(n===1){return'one';}
+return'other';},'2':function(n){if(n!==0&&(n%10)===0){return'many';}
+if(n===2){return'two';}
+if(n===1){return'one';}
+return'other';},'3':function(n){if(n===1){return'one';}
+return'other';},'4':function(n){if((isBetween(n,0,1))){return'one';}
+return'other';},'5':function(n){if((isBetween(n,0,2))&&n!==2){return'one';}
+return'other';},'6':function(n){if(n===0){return'zero';}
+if((n%10)===1&&(n%100)!==11){return'one';}
+return'other';},'7':function(n){if(n===2){return'two';}
+if(n===1){return'one';}
+return'other';},'8':function(n){if((isBetween(n,3,6))){return'few';}
+if((isBetween(n,7,10))){return'many';}
+if(n===2){return'two';}
+if(n===1){return'one';}
+return'other';},'9':function(n){if(n===0||n!==1&&(isBetween((n%100),1,19))){return'few';}
+if(n===1){return'one';}
+return'other';},'10':function(n){if((isBetween((n%10),2,9))&&!(isBetween((n%100),11,19))){return'few';}
+if((n%10)===1&&!(isBetween((n%100),11,19))){return'one';}
+return'other';},'11':function(n){if((isBetween((n%10),2,4))&&!(isBetween((n%100),12,14))){return'few';}
+if((n%10)===0||(isBetween((n%10),5,9))||(isBetween((n%100),11,14))){return'many';}
+if((n%10)===1&&(n%100)!==11){return'one';}
+return'other';},'12':function(n){if((isBetween(n,2,4))){return'few';}
+if(n===1){return'one';}
+return'other';},'13':function(n){if((isBetween((n%10),2,4))&&!(isBetween((n%100),12,14))){return'few';}
+if(n!==1&&(isBetween((n%10),0,1))||(isBetween((n%10),5,9))||(isBetween((n%100),12,14))){return'many';}
+if(n===1){return'one';}
+return'other';},'14':function(n){if((isBetween((n%100),3,4))){return'few';}
+if((n%100)===2){return'two';}
+if((n%100)===1){return'one';}
+return'other';},'15':function(n){if(n===0||(isBetween((n%100),2,10))){return'few';}
+if((isBetween((n%100),11,19))){return'many';}
+if(n===1){return'one';}
+return'other';},'16':function(n){if((n%10)===1&&n!==11){return'one';}
+return'other';},'17':function(n){if(n===3){return'few';}
+if(n===0){return'zero';}
+if(n===6){return'many';}
+if(n===2){return'two';}
+if(n===1){return'one';}
+return'other';},'18':function(n){if(n===0){return'zero';}
+if((isBetween(n,0,2))&&n!==0&&n!==2){return'one';}
+return'other';},'19':function(n){if((isBetween(n,2,10))){return'few';}
+if((isBetween(n,0,1))){return'one';}
+return'other';},'20':function(n){if((isBetween((n%10),3,4)||((n%10)===9))&&!(isBetween((n%100),10,19)||isBetween((n%100),70,79)||isBetween((n%100),90,99))){return'few';}
+if((n%1000000)===0&&n!==0){return'many';}
+if((n%10)===2&&!isIn((n%100),[12,72,92])){return'two';}
+if((n%10)===1&&!isIn((n%100),[11,71,91])){return'one';}
+return'other';},'21':function(n){if(n===0){return'zero';}
+if(n===1){return'one';}
+return'other';},'22':function(n){if((isBetween(n,0,1))||(isBetween(n,11,99))){return'one';}
+return'other';},'23':function(n){if((isBetween((n%10),1,2))||(n%20)===0){return'one';}
+return'other';},'24':function(n){if((isBetween(n,3,10)||isBetween(n,13,19))){return'few';}
+if(isIn(n,[2,12])){return'two';}
+if(isIn(n,[1,11])){return'one';}
+return'other';}};var index=locales2rules[lang.replace(/-.*$/,'')];if(!(index in pluralRules)){return function(){return'other';};}
+return pluralRules[index];}
+var MAX_PLACEABLES=100;var PropertiesParser={patterns:null,entryIds:null,init:function(){this.patterns={comment:/^\s*#|^\s*$/,entity:/^([^=\s]+)\s*=\s*(.*)$/,multiline:/[^\\]\\$/,index:/\{\[\s*(\w+)(?:\(([^\)]*)\))?\s*\]\}/i,unicode:/\\u([0-9a-fA-F]{1,4})/g,entries:/[^\r\n]+/g,controlChars:/\\([\\\n\r\t\b\f\{\}\"\'])/g,placeables:/\{\{\s*([^\s]*?)\s*\}\}/,};},parse:function(ctx,source){if(!this.patterns){this.init();}
+var ast=[];this.entryIds=Object.create(null);var entries=source.match(this.patterns.entries);if(!entries){return ast;}
+for(var i=0;i<entries.length;i++){var line=entries[i];if(this.patterns.comment.test(line)){continue;}
+while(this.patterns.multiline.test(line)&&i<entries.length){line=line.slice(0,-1)+entries[++i].trim();}
+var entityMatch=line.match(this.patterns.entity);if(entityMatch){try{this.parseEntity(entityMatch[1],entityMatch[2],ast);}catch(e){if(ctx){ctx._emitter.emit('parseerror',e);}else{throw e;}}}}
+return ast;},parseEntity:function(id,value,ast){var name,key;var pos=id.indexOf('[');if(pos!==-1){name=id.substr(0,pos);key=id.substring(pos+1,id.length-1);}else{name=id;key=null;}
+var nameElements=name.split('.');if(nameElements.length>2){throw new L10nError('Error in ID: "'+name+'".'+' Nested attributes are not supported.');}
+var attr;if(nameElements.length>1){name=nameElements[0];attr=nameElements[1];if(attr[0]==='$'){throw new L10nError('Attribute can\'t start with "$"',id);}}else{attr=null;}
+this.setEntityValue(name,attr,key,this.unescapeString(value),ast);},setEntityValue:function(id,attr,key,rawValue,ast){var pos,v;var value=rawValue.indexOf('{{')>-1?this.parseString(rawValue):rawValue;if(attr){pos=this.entryIds[id];if(pos===undefined){v={$i:id};if(key){v[attr]={};v[attr][key]=value;}else{v[attr]=value;}
+ast.push(v);this.entryIds[id]=ast.length-1;return;}
+if(key){if(typeof(ast[pos][attr])==='string'){ast[pos][attr]={$x:this.parseIndex(ast[pos][attr]),$v:{}};}
+ast[pos][attr].$v[key]=value;return;}
+ast[pos][attr]=value;return;}
+if(key){pos=this.entryIds[id];if(pos===undefined){v={};v[key]=value;ast.push({$i:id,$v:v});this.entryIds[id]=ast.length-1;return;}
+if(typeof(ast[pos].$v)==='string'){ast[pos].$x=this.parseIndex(ast[pos].$v);ast[pos].$v={};}
+ast[pos].$v[key]=value;return;}
+ast.push({$i:id,$v:value});this.entryIds[id]=ast.length-1;},parseString:function(str){var chunks=str.split(this.patterns.placeables);var complexStr=[];var len=chunks.length;var placeablesCount=(len-1)/2;if(placeablesCount>=MAX_PLACEABLES){throw new L10nError('Too many placeables ('+placeablesCount+', max allowed is '+MAX_PLACEABLES+')');}
+for(var i=0;i<chunks.length;i++){if(chunks[i].length===0){continue;}
+if(i%2===1){complexStr.push({t:'idOrVar',v:chunks[i]});}else{complexStr.push(chunks[i]);}}
+return complexStr;},unescapeString:function(str){if(str.lastIndexOf('\\')!==-1){str=str.replace(this.patterns.controlChars,'$1');}
+return str.replace(this.patterns.unicode,function(match,token){return unescape('%u'+'0000'.slice(token.length)+token);});},parseIndex:function(str){var match=str.match(this.patterns.index);if(!match){throw new L10nError('Malformed index');}
+if(match[2]){return[{t:'idOrVar',v:match[1]},match[2]];}else{return[{t:'idOrVar',v:match[1]}];}}};var KNOWN_MACROS=['plural'];var MAX_PLACEABLE_LENGTH=2500;var rePlaceables=/\{\{\s*(.+?)\s*\}\}/g;var nonLatin1=/[^\x01-\xFF]/;var FSI='\u2068';var PDI='\u2069';function createEntry(node,env){var keys=Object.keys(node);if(typeof node.$v==='string'&&keys.length===2){return node.$v;}
+var attrs;for(var i=0,key;key=keys[i];i++){if(key[0]==='$'){continue;}
+if(!attrs){attrs=Object.create(null);}
+attrs[key]=createAttribute(node[key],env,node.$i+'.'+key);}
+return{id:node.$i,value:node.$v!==undefined?node.$v:null,index:node.$x||null,attrs:attrs||null,env:env,dirty:false};}
+function createAttribute(node,env,id){if(typeof node==='string'){return node;}
+return{id:id,value:node.$v||(node!==undefined?node:null),index:node.$x||null,env:env,dirty:false};}
+function format(args,entity){if(typeof entity==='string'){return[{},entity];}
+if(entity.dirty){throw new L10nError('Cyclic reference detected: '+entity.id);}
+entity.dirty=true;var rv;try{rv=resolveValue({},args,entity.env,entity.value,entity.index);}finally{entity.dirty=false;}
+return rv;}
+function resolveIdentifier(args,env,id){if(KNOWN_MACROS.indexOf(id)>-1){return[{},env['__'+id]];}
+if(args&&args.hasOwnProperty(id)){if(typeof args[id]==='string'||(typeof args[id]==='number'&&!isNaN(args[id]))){return[{},args[id]];}else{throw new L10nError('Arg must be a string or a number: '+id);}}
+if(id in env&&id!=='__proto__'){return format(args,env[id]);}
+throw new L10nError('Unknown reference: '+id);}
+function subPlaceable(locals,args,env,id){var res;try{res=resolveIdentifier(args,env,id);}catch(err){return[{error:err},'{{ '+id+' }}'];}
+var value=res[1];if(typeof value==='number'){return res;}
+if(typeof value==='string'){if(value.length>=MAX_PLACEABLE_LENGTH){throw new L10nError('Too many characters in placeable ('+
+value.length+', max allowed is '+
+MAX_PLACEABLE_LENGTH+')');}
+if(locals.contextIsNonLatin1||value.match(nonLatin1)){res[1]=FSI+value+PDI;}
+return res;}
+return[{},'{{ '+id+' }}'];}
+function interpolate(locals,args,env,arr){return arr.reduce(function(prev,cur){if(typeof cur==='string'){return[prev[0],prev[1]+cur];}else if(cur.t==='idOrVar'){var placeable=subPlaceable(locals,args,env,cur.v);return[prev[0],prev[1]+placeable[1]];}},[locals,'']);}
+function resolveSelector(args,env,expr,index){var selectorName=index[0].v;var selector=resolveIdentifier(args,env,selectorName)[1];if(typeof selector!=='function'){return selector;}
+var argValue=index[1]?resolveIdentifier(args,env,index[1])[1]:undefined;if(selector===env.__plural){if(argValue===0&&'zero'in expr){return'zero';}
+if(argValue===1&&'one'in expr){return'one';}
+if(argValue===2&&'two'in expr){return'two';}}
+return selector(argValue);}
+function resolveValue(locals,args,env,expr,index){if(!expr){return[locals,expr];}
+if(typeof expr==='string'||typeof expr==='boolean'||typeof expr==='number'){return[locals,expr];}
+if(Array.isArray(expr)){locals.contextIsNonLatin1=expr.some(function($_){return typeof($_)==='string'&&$_.match(nonLatin1);});return interpolate(locals,args,env,expr);}
+if(index){var selector=resolveSelector(args,env,expr,index);if(expr.hasOwnProperty(selector)){return resolveValue(locals,args,env,expr[selector]);}}
+if('other'in expr){return resolveValue(locals,args,env,expr.other);}
+throw new L10nError('Unresolvable value');}
+var Resolver={createEntry:createEntry,format:format,rePlaceables:rePlaceables};function walkContent(node,fn){if(typeof node==='string'){return fn(node);}
+if(node.t==='idOrVar'){return node;}
+var rv=Array.isArray(node)?[]:{};var keys=Object.keys(node);for(var i=0,key;(key=keys[i]);i++){if(key==='$i'||key==='$x'){rv[key]=node[key];}else{rv[key]=walkContent(node[key],fn);}}
+return rv;}
+var reAlphas=/[a-zA-Z]/g;var reVowels=/[aeiouAEIOU]/g;var ACCENTED_MAP='\u0226\u0181\u0187\u1E12\u1E16\u0191\u0193\u0126\u012A'+'\u0134\u0136\u013F\u1E3E\u0220\u01FE\u01A4\u024A\u0158'+'\u015E\u0166\u016C\u1E7C\u1E86\u1E8A\u1E8E\u1E90'+'[\\]^_`'+'\u0227\u0180\u0188\u1E13\u1E17\u0192\u0260\u0127\u012B'+'\u0135\u0137\u0140\u1E3F\u019E\u01FF\u01A5\u024B\u0159'+'\u015F\u0167\u016D\u1E7D\u1E87\u1E8B\u1E8F\u1E91';var FLIPPED_MAP='\u2200\u0510\u2183p\u018E\u025F\u05E4HI\u017F'+'\u04FC\u02E5WNO\u0500\xD2\u1D1AS\u22A5\u2229\u0245'+'\uFF2DX\u028EZ'+'[\\]\u1D65_,'+'\u0250q\u0254p\u01DD\u025F\u0183\u0265\u0131\u027E'+'\u029E\u0285\u026Fuodb\u0279s\u0287n\u028C\u028Dx\u028Ez';function makeLonger(val){return val.replace(reVowels,function(match){return match+match.toLowerCase();});}
+function replaceChars(map,val){return val.replace(reAlphas,function(match){return map.charAt(match.charCodeAt(0)-65);});}
+var reWords=/[^\W0-9_]+/g;function makeRTL(val){return val.replace(reWords,function(match){return'\u202e'+match+'\u202c';});}
+var reExcluded=/(%[EO]?\w|\{\s*.+?\s*\}|&[#\w]+;|<\s*.+?\s*>)/;function mapContent(fn,val){if(!val){return val;}
+var parts=val.split(reExcluded);var modified=parts.map(function(part){if(reExcluded.test(part)){return part;}
+return fn(part);});return modified.join('');}
+function Pseudo(id,name,charMap,modFn){this.id=id;this.translate=mapContent.bind(null,function(val){return replaceChars(charMap,modFn(val));});this.name=this.translate(name);}
+var PSEUDO={'fr-x-psaccent':new Pseudo('fr-x-psaccent','Runtime Accented',ACCENTED_MAP,makeLonger),'ar-x-psbidi':new Pseudo('ar-x-psbidi','Runtime Bidi',FLIPPED_MAP,makeRTL)};function Locale(id,ctx){this.id=id;this.ctx=ctx;this.isReady=false;this.entries=Object.create(null);this.entries.__plural=getPluralRule(this.isPseudo()?this.ctx.defaultLocale:id);}
+Locale.prototype.isPseudo=function(){return this.ctx.qps.indexOf(this.id)!==-1;};var bindingsIO={extra:function(id,ver,path,type,callback,errback){if(type==='properties'){type='text';}
+navigator.mozApps.getLocalizationResource(id,ver,path,type).then(callback.bind(null,null),errback);},app:function(id,ver,path,type,callback,errback,sync){switch(type){case'properties':io.load(path,callback,sync);break;case'json':io.loadJSON(path,callback,sync);break;}},};Locale.prototype.build=function L_build(callback){var sync=!callback;var ctx=this.ctx;var self=this;var l10nLoads=ctx.resLinks.length;function onL10nLoaded(err){if(err){ctx._emitter.emit('fetcherror',err);}
+if(--l10nLoads<=0){self.isReady=true;if(callback){callback();}}}
+if(l10nLoads===0){onL10nLoaded();return;}
+function onJSONLoaded(err,json){if(!err&&json){self.addAST(json);}
+onL10nLoaded(err);}
+function onPropLoaded(err,source){if(!err&&source){var ast=PropertiesParser.parse(ctx,source);self.addAST(ast);}
+onL10nLoaded(err);}
+var idToFetch=this.isPseudo()?ctx.defaultLocale:this.id;var appVersion=null;var source='app';if(typeof(navigator)!=='undefined'){source=navigator.mozL10n._config.localeSources[this.id]||'app';appVersion=navigator.mozL10n._config.appVersion;}
+for(var i=0;i<ctx.resLinks.length;i++){var resLink=decodeURI(ctx.resLinks[i]);var path=resLink.replace('{locale}',idToFetch);var type=path.substr(path.lastIndexOf('.')+1);var cb;switch(type){case'json':cb=onJSONLoaded;break;case'properties':cb=onPropLoaded;break;}
+bindingsIO[source](this.id,appVersion,path,type,cb,onL10nLoaded,sync);}};function createPseudoEntry(node,entries){return Resolver.createEntry(walkContent(node,PSEUDO[this.id].translate),entries);}
+Locale.prototype.addAST=function(ast){var createEntry=this.isPseudo()?createPseudoEntry.bind(this):Resolver.createEntry;for(var i=0;i<ast.length;i++){this.entries[ast[i].$i]=createEntry(ast[i],this.entries);}};function Context(id){this.id=id;this.isReady=false;this.isLoading=false;this.defaultLocale='en-US';this.availableLocales=[];this.supportedLocales=[];this.qps=[];this.resLinks=[];this.locales={};this._emitter=new EventEmitter();this._ready=new Promise(this.once.bind(this));}
+function reportMissing(id,err){this._emitter.emit('notfounderror',err);return id;}
+function getWithFallback(id){var cur=0;var loc;var locale;while(loc=this.supportedLocales[cur]){locale=this.getLocale(loc);if(!locale.isReady){locale.build(null);}
+var entry=locale.entries[id];if(entry===undefined){cur++;reportMissing.call(this,id,new L10nError('"'+id+'"'+' not found in '+loc+' in '+this.id,id,loc));continue;}
+return entry;}
+throw new L10nError('"'+id+'"'+' missing from all supported locales in '+this.id,id);}
+function formatTuple(args,entity){try{return Resolver.format(args,entity);}catch(err){this._emitter.emit('resolveerror',err);var locals={error:err};return[locals,entity.id];}}
+function formatValue(args,entity){if(typeof entity==='string'){return entity;}
+return formatTuple.call(this,args,entity)[1];}
+function formatEntity(args,entity){var entityTuple=formatTuple.call(this,args,entity);var value=entityTuple[1];var formatted={value:value,attrs:null,};if(entity.attrs){formatted.attrs=Object.create(null);}
+for(var key in entity.attrs){var attrTuple=formatTuple.call(this,args,entity.attrs[key]);formatted.attrs[key]=attrTuple[1];}
+return formatted;}
+function formatAsync(fn,id,args){return this._ready.then(getWithFallback.bind(this,id)).then(fn.bind(this,args),reportMissing.bind(this,id));}
+Context.prototype.formatValue=function(id,args){return formatAsync.call(this,formatValue,id,args);};Context.prototype.formatEntity=function(id,args){return formatAsync.call(this,formatEntity,id,args);};function legacyGet(fn,id,args){if(!this.isReady){throw new L10nError('Context not ready');}
+var entry;try{entry=getWithFallback.call(this,id);}catch(err){if(err.loc){throw err;}
+reportMissing.call(this,id,err);return'';}
+return fn.call(this,args,entry);}
+Context.prototype.get=function(id,args){return legacyGet.call(this,formatValue,id,args);};Context.prototype.getEntity=function(id,args){return legacyGet.call(this,formatEntity,id,args);};Context.prototype.getLocale=function getLocale(code){var locales=this.locales;if(locales[code]){return locales[code];}
+return locales[code]=new Locale(code,this);};function negotiate(available,requested,defaultLocale){var supportedLocale;for(var i=0;i<requested.length;i++){var locale=requested[i];if(available.indexOf(locale)!==-1){supportedLocale=locale;break;}}
+if(!supportedLocale||supportedLocale===defaultLocale){return[defaultLocale];}
+return[supportedLocale,defaultLocale];}
+function freeze(supported){var locale=this.getLocale(supported[0]);if(locale.isReady){setReady.call(this,supported);}else{locale.build(setReady.bind(this,supported));}}
+function setReady(supported){this.supportedLocales=supported;this.isReady=true;this._emitter.emit('ready');}
+Context.prototype.registerLocales=function(defLocale,available){if(defLocale){this.defaultLocale=defLocale;}
+this.availableLocales=[this.defaultLocale];this.qps=Object.keys(PSEUDO);if(available){for(var i=0,loc;loc=available[i];i++){if(this.availableLocales.indexOf(loc)===-1){this.availableLocales.push(loc);var pos=this.qps.indexOf(loc);if(pos!==-1){this.qps.splice(pos,1);}}}}};Context.prototype.requestLocales=function requestLocales(){if(this.isLoading&&!this.isReady){throw new L10nError('Context not ready');}
+this.isLoading=true;var requested=Array.prototype.slice.call(arguments);if(requested.length===0){throw new L10nError('No locales requested');}
+var supported=negotiate(this.availableLocales.concat(this.qps),requested,this.defaultLocale);if(this.supportedLocales[0]!==supported[0]){freeze.call(this,supported);}};Context.prototype.addEventListener=function(type,listener){this._emitter.addEventListener(type,listener);};Context.prototype.removeEventListener=function(type,listener){this._emitter.removeEventListener(type,listener);};Context.prototype.ready=function(callback){if(this.isReady){setTimeout(callback);}
+this.addEventListener('ready',callback);};Context.prototype.once=function(callback){if(this.isReady){setTimeout(callback);return;}
+var callAndRemove=(function(){this.removeEventListener('ready',callAndRemove);callback();}).bind(this);this.addEventListener('ready',callAndRemove);};var allowed={elements:['a','em','strong','small','s','cite','q','dfn','abbr','data','time','code','var','samp','kbd','sub','sup','i','b','u','mark','ruby','rt','rp','bdi','bdo','span','br','wbr'],attributes:{global:['title','aria-label','aria-valuetext','aria-moz-hint'],a:['download'],area:['download','alt'],input:['alt','placeholder'],menuitem:['label'],menu:['label'],optgroup:['label'],option:['label'],track:['label'],img:['alt'],textarea:['placeholder'],th:['abbr']}};var rtlList=['ar','he','fa','ps','ar-x-psbidi','ur'];var nodeObserver=null;var pendingElements=null;var moConfig={attributes:true,characterData:false,childList:true,subtree:true,attributeFilter:['data-l10n-id','data-l10n-args']};navigator.mozL10n={ctx:null,get:function get(id,ctxdata){return navigator.mozL10n.ctx.get(id,ctxdata);},formatValue:function(id,ctxdata){return navigator.mozL10n.ctx.formatValue(id,ctxdata);},formatEntity:function(id,ctxdata){return navigator.mozL10n.ctx.formatEntity(id,ctxdata);},translateFragment:function(fragment){return translateFragment.call(navigator.mozL10n,fragment);},setAttributes:setL10nAttributes,getAttributes:getL10nAttributes,ready:function ready(callback){return navigator.mozL10n.ctx.ready(callback);},once:function once(callback){return navigator.mozL10n.ctx.once(callback);},get readyState(){return navigator.mozL10n.ctx.isReady?'complete':'loading';},language:{set code(lang){navigator.mozL10n.ctx.requestLocales(lang);},get code(){return navigator.mozL10n.ctx.supportedLocales[0];},get direction(){return getDirection(navigator.mozL10n.ctx.supportedLocales[0]);}},qps:PSEUDO,_config:{appVersion:null,localeSources:Object.create(null),isPretranslated:false,},_getInternalAPI:function(){return{Error:L10nError,Context:Context,Locale:Locale,Resolver:Resolver,getPluralRule:getPluralRule,rePlaceables:rePlaceables,translateDocument:translateDocument,onMetaInjected:onMetaInjected,PropertiesParser:PropertiesParser,walkContent:walkContent,buildLocaleList:buildLocaleList};}};function getDirection(lang){return(rtlList.indexOf(lang)>=0)?'rtl':'ltr';}
+var readyStates={loading:0,interactive:1,complete:2};function whenInteractive(callback){if(readyStates[document.readyState]>=readyStates.interactive){callback();return;}
+document.addEventListener('readystatechange',function l10n_onrsc(){if(readyStates[document.readyState]>=readyStates.interactive){document.removeEventListener('readystatechange',l10n_onrsc);callback();}});}
+function initObserver(){nodeObserver=new MutationObserver(onMutations.bind(navigator.mozL10n));nodeObserver.observe(document,moConfig);}
+function init(pretranslate){if(!pretranslate){initObserver();}
+initResources.call(navigator.mozL10n);}
+function initResources(){var meta={};var nodes=document.head.querySelectorAll('link[rel="localization"],'+'meta[name="availableLanguages"],'+'meta[name="defaultLanguage"],'+'meta[name="appVersion"],'+'script[type="application/l10n"]');for(var i=0,node;node=nodes[i];i++){var type=node.getAttribute('rel')||node.nodeName.toLowerCase();switch(type){case'localization':this.ctx.resLinks.push(node.getAttribute('href'));break;case'meta':onMetaInjected.call(this,node,meta);break;case'script':onScriptInjected.call(this,node);break;}}
+var additionalLanguagesPromise;if(navigator.mozApps&&navigator.mozApps.getAdditionalLanguages){additionalLanguagesPromise=navigator.mozApps.getAdditionalLanguages().catch(function(e){console.error('Error while loading getAdditionalLanguages',e);});document.addEventListener('additionallanguageschange',function(evt){registerLocales.call(this,meta,evt.detail);this.ctx.requestLocales.apply(this.ctx,navigator.languages||[navigator.language]);}.bind(this));}else{additionalLanguagesPromise=Promise.resolve();}
+additionalLanguagesPromise.then(function(extraLangs){registerLocales.call(this,meta,extraLangs);initLocale.call(this);}.bind(this));}
+function registerLocales(meta,extraLangs){var locales=buildLocaleList.call(this,meta,extraLangs);navigator.mozL10n._config.localeSources=locales[1];this.ctx.registerLocales(locales[0],Object.keys(locales[1]));}
+function getMatchingLangpack(appVersion,langpacks){for(var i=0,langpack;(langpack=langpacks[i]);i++){if(langpack.target===appVersion){return langpack;}}
+return null;}
+function buildLocaleList(meta,extraLangs){var loc,lp;var localeSources=Object.create(null);var defaultLocale=meta.defaultLanguage||this.ctx.defaultLocale;if(meta.availableLanguages){for(loc in meta.availableLanguages){localeSources[loc]='app';}}
+if(extraLangs){for(loc in extraLangs){lp=getMatchingLangpack(this._config.appVersion,extraLangs[loc]);if(!lp){continue;}
+if(!(loc in localeSources)||!meta.availableLanguages[loc]||parseInt(lp.revision)>meta.availableLanguages[loc]){localeSources[loc]='extra';}}}
+if(!(defaultLocale in localeSources)){localeSources[defaultLocale]='app';}
+return[defaultLocale,localeSources];}
+function splitAvailableLanguagesString(str){var langs={};str.split(',').forEach(function(lang){lang=lang.trim().split(':');langs[lang[0]]=parseInt(lang[1]);});return langs;}
+function onMetaInjected(node,meta){switch(node.getAttribute('name')){case'availableLanguages':meta.availableLanguages=splitAvailableLanguagesString(node.getAttribute('content'));break;case'defaultLanguage':meta.defaultLanguage=node.getAttribute('content');break;case'appVersion':navigator.mozL10n._config.appVersion=node.getAttribute('content');break;}}
+function onScriptInjected(node){var lang=node.getAttribute('lang');var locale=this.ctx.getLocale(lang);locale.addAST(JSON.parse(node.textContent));}
+function initLocale(){this.ctx.requestLocales.apply(this.ctx,navigator.languages||[navigator.language]);window.addEventListener('languagechange',function l10n_langchange(){this.ctx.requestLocales.apply(this.ctx,navigator.languages||[navigator.language]);}.bind(this));}
+function localizeMutations(mutations){var mutation;var targets=new Set();for(var i=0;i<mutations.length;i++){mutation=mutations[i];if(mutation.type==='childList'){var addedNode;for(var j=0;j<mutation.addedNodes.length;j++){addedNode=mutation.addedNodes[j];if(addedNode.nodeType!==Node.ELEMENT_NODE){continue;}
+targets.add(addedNode);}}
+if(mutation.type==='attributes'){targets.add(mutation.target);}}
+targets.forEach(function(target){if(target.childElementCount){translateFragment.call(this,target);}else if(target.hasAttribute('data-l10n-id')){translateElement.call(this,target);}},this);}
+function onMutations(mutations,self){self.disconnect();localizeMutations.call(this,mutations);self.observe(document,moConfig);}
+function onReady(){if(!navigator.mozL10n._config.isPretranslated){translateDocument.call(this);}
+navigator.mozL10n._config.isPretranslated=false;if(pendingElements){for(var i=0,element;element=pendingElements[i];i++){translateElement.call(this,element);}
+pendingElements=null;}
+if(!nodeObserver){initObserver();}
+fireLocalizedEvent.call(this);}
+function fireLocalizedEvent(){var event=new CustomEvent('localized',{'bubbles':false,'cancelable':false,'detail':{'language':this.ctx.supportedLocales[0]}});window.dispatchEvent(event);}
+var reOverlay=/<|&#?\w+;/;var reHtml=/[&<>]/g;var htmlEntities={'&':'&amp;','<':'&lt;','>':'&gt;',};function translateDocument(){document.documentElement.lang=this.language.code;document.documentElement.dir=this.language.direction;translateFragment.call(this,document.documentElement);}
+function translateFragment(element){if(typeof element.hasAttribute==='function'&&element.hasAttribute('data-l10n-id')){translateElement.call(this,element);}
+var nodes=getTranslatableChildren(element);for(var i=0;i<nodes.length;i++){translateElement.call(this,nodes[i]);}}
+function setL10nAttributes(element,id,args){element.setAttribute('data-l10n-id',id);if(args){element.setAttribute('data-l10n-args',JSON.stringify(args));}}
+function getL10nAttributes(element){return{id:element.getAttribute('data-l10n-id'),args:JSON.parse(element.getAttribute('data-l10n-args'))};}
+function getTranslatableChildren(element){return element?element.querySelectorAll('*[data-l10n-id]'):[];}
+function camelCaseToDashed(string){if(string==='ariaValueText'){return'aria-valuetext';}
+return string.replace(/[A-Z]/g,function(match){return'-'+match.toLowerCase();}).replace(/^-/,'');}
+function escapeL10nArgs(match){return htmlEntities[match];}
+function translateElement(element){if(!this.ctx.isReady){if(!pendingElements){pendingElements=[];}
+pendingElements.push(element);return;}
+var l10nId=element.getAttribute('data-l10n-id');if(!l10nId){return false;}
+var l10nArgs=element.getAttribute('data-l10n-args');var entity=this.ctx.getEntity(l10nId,l10nArgs?JSON.parse(l10nArgs.replace(reHtml,escapeL10nArgs)):undefined);var value=entity.value;if(typeof value==='string'){if(!reOverlay.test(value)){element.textContent=value;}else{var translation=element.ownerDocument.createElement('template');translation.innerHTML=value;overlayElement(element,translation.content);}}
+for(var key in entity.attrs){var attrName=camelCaseToDashed(key);if(isAttrAllowed({name:attrName},element)){element.setAttribute(attrName,entity.attrs[key]);}}}
+function overlayElement(sourceElement,translationElement){var result=translationElement.ownerDocument.createDocumentFragment();var k,attr;var childElement;while((childElement=translationElement.childNodes[0])){translationElement.removeChild(childElement);if(childElement.nodeType===Node.TEXT_NODE){result.appendChild(childElement);continue;}
+var index=getIndexOfType(childElement);var sourceChild=getNthElementOfType(sourceElement,childElement,index);if(sourceChild){overlayElement(sourceChild,childElement);result.appendChild(sourceChild);continue;}
+if(isElementAllowed(childElement)){var sanitizedChild=childElement.ownerDocument.createElement(childElement.nodeName);overlayElement(sanitizedChild,childElement);result.appendChild(sanitizedChild);continue;}
+result.appendChild(document.createTextNode(childElement.textContent));}
+sourceElement.textContent='';sourceElement.appendChild(result);if(translationElement.attributes){for(k=0,attr;(attr=translationElement.attributes[k]);k++){if(isAttrAllowed(attr,sourceElement)){sourceElement.setAttribute(attr.name,attr.value);}}}}
+function isElementAllowed(element){return allowed.elements.indexOf(element.tagName.toLowerCase())!==-1;}
+function isAttrAllowed(attr,element){var attrName=attr.name.toLowerCase();var tagName=element.tagName.toLowerCase();if(allowed.attributes.global.indexOf(attrName)!==-1){return true;}
+if(!allowed.attributes[tagName]){return false;}
+if(allowed.attributes[tagName].indexOf(attrName)!==-1){return true;}
+if(tagName==='input'&&attrName==='value'){var type=element.type.toLowerCase();if(type==='submit'||type==='button'||type==='reset'){return true;}}
+return false;}
+function getNthElementOfType(context,element,index){var nthOfType=0;for(var i=0,child;child=context.children[i];i++){if(child.nodeType===Node.ELEMENT_NODE&&child.tagName===element.tagName){if(nthOfType===index){return child;}
+nthOfType++;}}
+return null;}
+function getIndexOfType(element){var index=0;var child;while((child=element.previousElementSibling)){if(child.tagName===element.tagName){index++;}}
+return index;}
+var DEBUG=false;navigator.mozL10n.ctx=new Context(window.document?document.URL:null);navigator.mozL10n.ctx.ready(onReady.bind(navigator.mozL10n));navigator.mozL10n.ctx.addEventListener('notfounderror',function reportMissingEntity(e){if(DEBUG||e.loc==='en-US'){console.warn(e.toString());}});if(DEBUG){navigator.mozL10n.ctx.addEventListener('fetcherror',console.error.bind(console));navigator.mozL10n.ctx.addEventListener('parseerror',console.error.bind(console));navigator.mozL10n.ctx.addEventListener('resolveerror',console.error.bind(console));}
+if(window.document){navigator.mozL10n._config.isPretranslated=document.documentElement.lang===navigator.language;var forcePretranslate=!navigator.mozL10n._config.isPretranslated;whenInteractive(init.bind(navigator.mozL10n,forcePretranslate));}
+document.l10n={setAttributes:navigator.mozL10n.setAttributes,getAttributes:navigator.mozL10n.getAttributes,formatValue:function(id,args){return navigator.mozL10n.formatValue(id,args);},translateFragment:function(frag){return Promise.resolve(navigator.mozL10n.translateFragment(frag));},ready:new Promise(function(resolve){navigator.mozL10n.once(resolve);}),formatValues:function(){var keys=arguments;var resp=keys.map(function(key){if(Array.isArray(key)){return navigator.mozL10n.formatValue(key[0],key[1]);}
+return navigator.mozL10n.formatValue(key);});return Promise.all(resp);},requestLanguages:function(langs){navigator.mozL10n.ctx.requestLocales.apply(navigator.mozL10n.ctx,langs);},pseudo:{'fr-x-psaccent':{getName:function(){return Promise.resolve(navigator.mozL10n.qps['fr-x-psaccent'].name);},processString:function(s){return Promise.resolve(navigator.mozL10n.qps['fr-x-psaccent'].translate(s));}},'ar-x-psbidi':{getName:function(){return Promise.resolve(navigator.mozL10n.qps['ar-x-psbidi'].name);},processString:function(s){return Promise.resolve(navigator.mozL10n.qps['ar-x-psbidi'].translate(s));}}},};navigator.mozL10n.ready(function(){document.documentElement.setAttribute('langs',navigator.mozL10n.ctx.supportedLocales.join(' '));});navigator.mozL10n.once(function(){window.addEventListener('localized',function(){document.dispatchEvent(new CustomEvent('DOMRetranslated',{bubbles:false,cancelable:false}));});});})(this);

assets/webapps/keyboard.gaiamobile.org/shared/style/buttons.css

@@ -0,0 +1,428 @@
+/* ----------------------------------
+ * Buttons
+ * ---------------------------------- */
+
+.button::-moz-focus-inner,
+.bb-button::-moz-focus-inner,
+button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+button,
+.bb-button,
+.button {
+  font-family: sans-serif;
+  font-style: italic;
+  width: 100%;
+  height: 4rem;
+  margin: 0 0 1rem;
+  padding: 0 1.2rem;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background: #d8d8d8;
+  border: none;
+  border-radius: 2rem;
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 4rem;
+  color: #333;
+  text-align: center;
+  text-decoration: none;
+  outline: none;
+}
+
+/* Recommend */
+button.recommend,
+.bb-button.recommend {
+  background-color: #00caf2;
+  color: #fff;
+}
+
+/* Danger */
+button.danger,
+.danger.bb-button {
+  background-color: #e51e1e;
+  color: #fff;
+}
+
+/* Pressed */
+button:active,
+.bb-button:active,
+.button:active {
+  background-color: #b2f2ff;
+  color: #fff;
+}
+
+/* Icons */
+button[data-icon],
+.bb-button[data-icon],
+.button[data-icon] {
+  position: relative;
+}
+
+button[data-icon]:before,
+.bb-button[data-icon]:before,
+.button[data-icon]:before {
+  position: absolute;
+  top: 50%;
+  margin-top: -1.5rem;
+  offset-inline-end: 1.5rem;
+  line-height: 3rem;
+}
+
+button[data-icon]:active:before,
+.bb-button[data-icon]:active:before,
+.button[data-icon]:active:before {
+  color: #fff;
+}
+
+/* Pressed with dark skin */
+.skin-dark button:active,
+.skin-dark .bb-button:active,
+.skin-dark .button:active {
+  background-color: #00aacc;
+}
+
+/* Disabled */
+button[disabled],
+.bb-button[aria-disabled="true"],
+.button[aria-disabled="true"] {
+  background-color: rgba(0,0,0,0.05);
+  color: #c7c7c7;
+  pointer-events: none;
+}
+
+button[disabled].recommend,
+.bb-button[aria-disabled="true"].recommend,
+.button[aria-disabled="true"].recommend {
+  background-color: #97cbd5;
+  color: rgba(255,255,255,0.5);
+}
+
+button[disabled].danger,
+.bb-button[aria-disabled="true"].danger,
+.button[aria-disabled="true"].danger {
+  background-color: #eb7474;
+  color: rgba(255,255,255,0.5);
+}
+
+/* Disabled with dark background */
+.skin-dark button[disabled],
+.skin-dark .button[aria-disabled="true"],
+.skin-dark .bb-button[aria-disabled="true"] {
+  background-color: #565656;
+  color: rgba(255,255,255,0.4);
+}
+
+.skin-dark button[disabled].recommend,
+.skin-dark .button[aria-disabled="true"].recommend,
+.skin-dark .bb-button[aria-disabled="true"].recommend {
+  background-color: #006579;
+}
+
+.skin-dark button[disabled].danger,
+.skin-dark .button[aria-disabled="true"].danger,
+.skin-dark .bb-button[aria-disabled="true"].danger {
+  background-color: #730f0f;
+}
+
+button[disabled]::-moz-selection,
+.button[aria-disabled="true"]::-moz-selection,
+.bb-button[aria-disabled="true"]::-moz-selection {
+  -moz-user-select: none;
+}
+
+/* ----------------------------------
+ * Buttons inside lists
+ * ---------------------------------- */
+
+li button,
+li .bb-button,
+li .button {
+  position: relative;
+  border: 0.1rem solid #c7c7c7;
+  background: rgba(0,0,0,0.05);
+  margin: 0 0 1rem;
+  overflow: hidden;
+  border-radius: 0;
+  display: flex;
+  height: auto;
+  min-height: 4rem;
+  text-overflow: initial;
+  white-space: normal;
+  line-height: 2rem;
+  padding: 1rem 1.2rem;
+}
+html[dir="ltr"] li button,
+html[dir="ltr"] li .bb-button,
+html[dir="ltr"] li .button {
+  text-align: left;
+}
+html[dir="rtl"] li button,
+html[dir="rtl"] li .bb-button,
+html[dir="rtl"] li .button {
+  text-align: right;
+}
+
+/* Press */
+li .bb-button:active:after,
+li .button:active:after,
+li button:active:after {
+  opacity: 0;
+}
+
+/* Disabled */
+li button:disabled,
+li .bb-button[aria-disabled="true"],
+li .button[aria-disabled="true"] {
+  opacity: 0.5;
+}
+
+/* Icons */
+li button.icon,
+li .bb-button.icon,
+li .button.icon {
+  padding-inline-end: 4rem;
+}
+
+li button.icon:before,
+li .bb-button.icon:before,
+li .button.icon:before {
+  content: "";
+  width: 3rem;
+  height: 3rem;
+  position: absolute;
+  top: 50%;
+  offset-inline-end: 0.5rem;
+  margin-top: -1.5rem;
+  background: transparent no-repeat center center / 100% auto;
+  pointer-events: none;
+}
+
+li button[data-icon]:before,
+li .bb-button[data-icon]:before,
+li .button[data-icon]:before {
+  offset-inline-end: 1rem;
+}
+
+li button.icon-view:active,
+li .bb-button.icon-view:active,
+li .button.icon-view:active {
+  background-color: #b2f2ff;
+}
+
+li button[data-icon="expand"]:before,
+li .bb-button[data-icon="expand"]:before,
+li .button[data-icon="expand"]:before {
+  color: #00aac5;
+  top: unset;
+  bottom: 0;
+}
+
+li button[data-icon="expand"][disabled]:before,
+li .bb-button[data-icon="expand"][aria-disabled="true"]:before,
+li .button[data-icon="expand"][aria-disabled="true"]:before {
+  color: #A9A9A9;
+}
+
+li button[data-icon="forward"]:before,
+li .bb-button[data-icon="forward"]:before,
+li .button[data-icon="forward"]:before {
+  color: #686f72;
+}
+
+/* Getting more space for text, as icon is shorter */
+li button.icon-dialog,
+li .bb-button.icon-dialog,
+li .button.icon-dialog {
+  padding-inline-end: 3rem;
+}
+
+li button.icon-dialog:before,
+li .bb-button.icon-dialog:before,
+li .button.icon-dialog:before {
+  width: 0;
+  height: 0;
+  top: auto;
+  offset-inline-end: 0.8rem;
+  bottom: 0.5rem;
+  border-top: 0.7rem solid transparent;
+  border-bottom: 0.7rem solid transparent;
+  border-inline-start: 0.7rem solid #00aac5;
+  z-index: 1;
+}
+html[dir="ltr"] li button.icon-dialog:before,
+html[dir="ltr"] li .bb-button.icon-dialog:before,
+html[dir="ltr"] li .button.icon-dialog:before {
+  transform: rotate(45deg);
+}
+html[dir="rtl"] li button.icon-dialog:before,
+html[dir="rtl"] li .bb-button.icon-dialog:before,
+html[dir="rtl"] li .button.icon-dialog:before {
+  transform: rotate(-45deg);
+}
+
+li button.icon-dialog:disabled:before,
+li .bb-button[aria-disabled="true"].icon-dialog:before,
+li .button[aria-disabled="true"].icon-dialog:before {
+  border-inline-start: 0.7rem solid #a9a9a9;
+}
+
+/* ----------------------------------
+ * Theme: Dark
+ * ---------------------------------- */
+
+.skin-dark li button,
+.skin-dark li .bb-button,
+.skin-dark li .button {
+  background-color: #454545;
+  border: none;
+  color: #fff;
+  font-weight: normal;
+}
+
+.skin-dark li button:active,
+.skin-dark li .button:active,
+.skin-dark li .bb-button:active {
+  background-color: #00aacc;
+}
+
+.skin-dark li button.icon-view:active,
+.skin-dark li .button.icon-view:active,
+.skin-dark li .bb-button.icon-view:active {
+  background-color: #00aacc;
+}
+
+.skin-dark li button.icon-dialog:active:before,
+.skin-dark li .bb-button.icon-dialog:active:before,
+.skin-dark li .button.icon-dialog:active:before {
+  border-inline-start: 0.7rem solid #b2f2ff;
+}
+
+.skin-dark li button:disabled,
+.skin-dark li .bb-button[aria-disabled="true"],
+.skin-dark li .button[aria-disabled="true"] {
+  background-color: #454545;
+  opacity: 0.5;
+}
+
+/* Inputs inside of .button */
+.button input,
+body[role="application"] .bb-button input,
+body[role="application"] .button input {
+  border: 0;
+  background: none;
+}
+
+/* select */
+select {
+  width: 100%;
+  box-sizing: border-box;
+  font-family: sans-serif;
+  font-style: italic;
+  font-size: 1.6rem;
+  color: #333;
+  margin: 0 0 1rem;
+  padding: 0;
+  padding-inline-start: 1.1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  height: 4rem;
+  border: 0.1rem solid #c7c7c7;
+  background: rgba(0,0,0,0.05);
+}
+
+.skin-dark select {
+  background-color: rgba(87, 87, 87, 0.8);
+  border: none;
+  color: #fff;
+}
+
+/* remove dotted outline */
+select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #333;
+}
+
+.skin-dark select:-moz-focusring {
+  text-shadow: 0 0 0 #fff;
+}
+
+/* Hides dropdown arrow until bug #649849 is fixed */
+.bb-button.icon select,
+.button.icon select,
+.bb-button[data-icon] select,
+.button[data-icon] select {
+  position: absolute;
+  top: -0.6rem;
+  offset-inline-start: 0;
+  width: calc(100% + 3rem);
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  padding-inline-end: 5rem;
+  text-indent: 0;
+  font-weight: 400;
+  font-size: 1.7rem;
+  color: rgba(0,0,0,0);
+  border: none;
+  background: none;
+}
+/**
+ * The select element uses the text color to determine the color of the outline.
+ * We put a text shadow with needed offset and no blur, so that replaces the text.
+ */
+html[dir="ltr"] .bb-button.icon select,
+html[dir="ltr"] .button.icon select,
+html[dir="ltr"] .bb-button[data-icon] select,
+html[dir="ltr"] .button[data-icon] select,
+html[dir="ltr"] .bb-button.icon-dialog select,
+html[dir="ltr"] .button.icon-dialog select {
+  text-shadow: 1rem 0.5rem 0 #333;
+}
+html[dir="rtl"] .bb-button.icon select,
+html[dir="rtl"] .button.icon select,
+html[dir="rtl"] .bb-button[data-icon] select,
+html[dir="rtl"] .button[data-icon] select,
+html[dir="rtl"] .bb-button.icon-dialog select,
+html[dir="rtl"] .button.icon-dialog select {
+  text-shadow: -1rem 0.5rem 0 #333;
+}
+
+.bb-button.icon select option,
+.button.icon select option,
+.bb-button[data-icon] select option,
+.button[data-icon] select option {
+  color: #000;
+  border: 0;
+  padding: 0.6rem 1.3rem;
+  text-shadow: 0 0 0 rgba(0,0,0,0);
+}
+
+.bb-button.icon-dialog,
+.button.icon-dialog {
+  overflow: hidden;
+}
+
+html[dir="ltr"] .skin-dark .bb-button.icon select,
+html[dir="ltr"] .skin-dark .button.icon select,
+html[dir="ltr"] .skin-dark .bb-button[data-icon] select,
+html[dir="ltr"] .skin-dark .button[data-icon] select,
+html[dir="ltr"] .skin-dark .bb-button.icon-dialog select,
+html[dir="ltr"] .skin-dark .button.icon-dialog select {
+  text-shadow: 1rem 0.5rem 0 #fff;
+}
+html[dir="rtl"] .skin-dark .bb-button.icon select,
+html[dir="rtl"] .skin-dark .button.icon select,
+html[dir="rtl"] .skin-dark .bb-button[data-icon] select,
+html[dir="rtl"] .skin-dark .button[data-icon] select,
+html[dir="rtl"] .skin-dark .bb-button.icon-dialog select,
+html[dir="rtl"] .skin-dark .button.icon-dialog select {
+  text-shadow: -1rem 0.5rem 0 #fff;
+}

assets/webapps/keyboard.gaiamobile.org/shared/style/buttons/images/left-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 18.2995,19.66 -5.056,-5.057 5.056,-5.056 c -0.31,-0.516 -0.62,-1.032 -0.93,-1.34 l -5.672,5.673 v 1.652 l 5.675,5.676 c 0.31,-0.515 0.722,-0.928 0.93,-1.547 z"/></svg>

assets/webapps/keyboard.gaiamobile.org/shared/style/buttons/images/right-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 11.698,19.66 5.056,-5.057 -5.056,-5.056 c 0.31,-0.516 0.62,-1.032 0.93,-1.34 L 18.3,13.88 v 1.652 l -5.675,5.676 c -0.31,-0.515 -0.722,-0.928 -0.93,-1.547 z"/></svg>

assets/webapps/keyboard.gaiamobile.org/shared/style/buttons/index.html

@@ -0,0 +1,280 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Buttons</title>
+  <link rel="stylesheet" href="../buttons.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">
+
+  <!--
+    - These <style> and <script> elements are only used for the example code,
+    - they are not needed for the real case.
+    -->
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+
+    label.bb-docs {
+      font-family: sans-serif;
+      font-size: 1.2rem;
+      margin-left: 1.5rem;
+    }
+
+    h2.bb-docs {
+      font-size: 1.8rem;
+      font-weight: 300;
+      color: #666;
+      margin: -0.1rem 0 0;
+      background-color: #f5f5f5;
+      padding: 0.4rem 3rem;
+      border: solid 0.1rem #e8e8e8;
+      font-family: sans-serif;
+    }
+
+    div.bb-docs {
+      padding: 1.5rem;
+    }
+
+    div.bb-docs.skin-organic {
+      background: #f4f4f4;
+    }
+
+    div.bb-docs.skin-dark {
+      background: #000;
+    }
+
+    ul {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
+
+    body[role="application"] > [role="region"] {
+      height: 100%;
+      position: relative;
+    }
+
+    [data-icon]:before {
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  </style>
+  <script>
+    window.onload = function() {
+      document.getElementById('dir').checked = false;
+    };
+  </script>
+</head>
+<body role="application">
+  <p dir="ltr">
+    <label class="bb-docs">
+      <input id="dir" type="checkbox" checked="false"
+        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
+      RTL mode
+    </label>
+  </p>
+  <h2 class="bb-docs">Special buttons</h2>
+  <div class="bb-docs skin-organic">
+    <button>Default</button>
+    <button class="recommend">Recommend</button>
+    <button class="danger">Danger</button>
+  </div>
+
+  <h2 class="bb-docs">Buttons with icons</h2>
+  <div class="bb-docs skin-organic">
+    <button data-icon="forward" aria-label="forward" data-l10n-id="">Default</button>
+    <button data-icon="forward" aria-label="forward" data-l10n-id="" class="recommend">Recommend</button>
+    <button data-icon="forward" aria-label="forward" data-l10n-id="" class="danger">Danger</button>
+    <button data-icon="forward-light" aria-label="forward-light" data-l10n-id="">Default</button>
+    <button data-icon="back" aria-label="back" data-l10n-id="">Default</button>
+    <button data-icon="back-light" aria-label="back-light" data-l10n-id="">Default</button>
+  </div>
+
+  <h2 class="bb-docs">Disabled</h2>
+  <div class="bb-docs skin-organic">
+    <button disabled>Default</button>
+    <a href="#" role="button" aria-disabled="true" class="recommend bb-button">Recommend</a>
+    <button disabled class="danger">Danger</button>
+  </div>
+
+  <h2 class="bb-docs">Skin dark</h2>
+  <div class="bb-docs skin-dark">
+    <button>Default</button>
+    <button class="recommend">Recommend</button>
+    <button class="danger">Danger</button>
+   </div>
+
+  <h2 class="bb-docs">Disabled</h2>
+  <div class="bb-docs skin-dark">
+    <button disabled>Default</button>
+    <a href="#" role="button" aria-disabled="true" class="recommend bb-button">Recommend</a>
+    <button disabled class="danger">Danger</button>
+  </div>
+
+  <h2 class="bb-docs">List buttons</h2>
+  <div class="bb-docs skin-organic">
+    <ul>
+      <li>
+        <button>Default</button>
+      </li>
+      <li>
+        <button disabled>Disabled</button>
+      </li>
+      <li>
+        <button class="icon icon-view">
+          Icon view button
+        </button>
+      </li>
+      <li>
+        <button class="icon icon-dialog">
+          Icon dialog button
+        </button>
+      </li>
+      <li>
+        <span class="button icon icon-dialog">
+          <select>
+            <option selected>Icon dialog with options</option>
+            <option>option 1</option>
+            <option>option 2</option>
+            <option>option 3</option>
+          </select>
+        </span>
+      </li>
+      <li>
+        <button class="icon icon-dialog" disabled>
+          Icon dialog button disabled
+        </button>
+      </li>
+      <li>
+        <button data-icon="forward" aria-label="forward" data-l10n-id="">
+          Side navigation
+        </button>
+      </li>
+      <li>
+        <button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
+          Side navigation
+        </button>
+      </li>
+      <li>
+        <a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
+          Tuesday Sept. 18, 2012
+        </a>
+      </li>
+      <li>
+        <a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
+            Tuesday Sept. 18, 2012
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <h2 class="bb-docs">Skin Dark</h2>
+  <div class="bb-docs skin-dark">
+    <ul>
+      <li>
+        <button>Default</button>
+      </li>
+      <li>
+        <button disabled>Disabled</button>
+      </li>
+      <li>
+        <button class="icon icon-dialog">
+          Dark icon dialog button
+        </button>
+      </li>
+      <li>
+        <button data-icon="forward" aria-label="forward" data-l10n-id="">
+          Side navigation
+        </button>
+      </li>
+      <li>
+        <button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
+          Side navigation
+        </button>
+      </li>
+      <li>
+        <a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
+          Tuesday Sept. 18, 2012
+        </a>
+      </li>
+      <li>
+        <a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
+          Tuesday Sept. 18, 2012
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <h2 class="bb-docs">Select</h2>
+  <div class="bb-docs">
+    <select>
+      <option>option 1</option>
+      <option>option 2</option>
+    </select>
+  </div>
+
+  <h2 class="bb-docs">Fake select</h2>
+  <div class="bb-docs">
+    <ul>
+      <li>
+        <span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
+          <select>
+            <option>option 1</option>
+            <option>option 2</option>
+          </select>
+        </span>
+      </li>
+    </ul>
+  </div>
+
+  <h2 class="bb-docs">Disabled select</h2>
+  <div class="bb-docs">
+    <ul>
+      <li>
+        <span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
+          <select>
+            <option>option 1</option>
+            <option>option 2</option>
+          </select>
+        </span>
+      </li>
+    </ul>
+  </div>
+
+  <h2 class="bb-docs">Skin dark</h2>
+  <div class="bb-docs skin-dark">
+    <select>
+      <option>option 1</option>
+      <option>option 2</option>
+    </select>
+  </div>
+
+  <h2 class="bb-docs">Fake select</h2>
+  <div class="bb-docs skin-dark">
+    <ul>
+      <li>
+        <span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
+          <select>
+            <option>option 1</option>
+            <option>option 2</option>
+          </select>
+        </span>
+      </li>
+      <li>
+        <span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
+          <select>
+            <option>option 1</option>
+            <option>option 2</option>
+          </select>
+        </span>
+      </li>
+    </ul>
+  </div>
+
+</body>
+</html>

assets/webapps/keyboard.gaiamobile.org/shared/style/headers.css

@@ -0,0 +1,378 @@
+/* -------------------------------------------------------------------
+  HEADERS: layout
+  Form factor or Skin dependent styles should NOT be defined here.
+------------------------------------------------------------------- */
+
+section[role="region"] > header:first-child {
+  position: relative;
+  display: block;
+  z-index: 10;
+  padding: 0;
+  height: 5rem;
+  border: none;
+}
+
+section[role="region"] > header:first-child h1 {
+  font-size: 2.3rem;
+  line-height: 5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  padding: 0 1rem;
+  height: 100%;
+  font-weight: 300;
+  font-style: italic;
+  text-align: center;
+}
+
+section[role="region"] > header:first-child h1 em {
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1em;
+  font-style: normal;
+}
+
+section[role="region"] > header:first-child menu {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+html[dir="ltr"] section[role="region"] > header:first-child menu {
+  float: right;
+}
+html[dir="rtl"] section[role="region"] > header:first-child menu {
+  float: left;
+}
+
+/* ----------------------------------
+  Buttons
+---------------------------------- */
+
+section[role="region"] > header:first-child a,
+section[role="region"] > header:first-child button {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  overflow: hidden;
+  min-width: 5rem;
+  width: auto;
+  height: 5rem;
+  border: none;
+  background: none;
+  padding: 0 1rem;
+  margin: 0;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 5rem;
+  border-radius: 0;
+  text-decoration: none;
+  text-align: center;
+  text-shadow: none;
+  font-style: italic;
+}
+html[dir="ltr"] section[role="region"] > header:first-child a,
+html[dir="ltr"] section[role="region"] > header:first-child button {
+  float: left;
+}
+html[dir="rtl"] section[role="region"] > header:first-child a,
+html[dir="rtl"] section[role="region"] > header:first-child button {
+  float: right;
+}
+
+/* Pressed state */
+section[role="region"] > header:first-child a:focus {
+  outline: none;
+}
+
+section[role="region"] > header:first-child button::-moz-focus-inner {
+  outline: none;
+  border: none;
+  margin-top: -0.2rem; /* To fix line-height bug (697451) */
+  padding: 0;
+}
+
+/* Disabled state */
+section[role="region"] > header:first-child a[aria-disabled="true"],
+section[role="region"] > header:first-child button[disabled] {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+/* ----------------------------------
+  Icons
+---------------------------------- */
+
+section[role="region"] > header:first-child .icon {
+  display: block;
+  width: 3rem;
+  height: 5rem;
+  background: transparent no-repeat center / 3rem auto;
+  font-size: 0;
+}
+
+/* ----------------------------------
+  Subheader
+---------------------------------- */
+
+section[role="region"] > header {
+  z-index: 0;
+  height: auto;
+}
+
+section[role="region"] header h2 {
+  margin: 0;
+  padding: 0.8rem 3rem;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1.8rem;
+}
+
+/* -----------------------------------------------------------------
+  HEADER SKIN: default
+  Default values in case we are not overriding them using
+  class="skin-*"
+----------------------------------------------------------------- */
+
+section[role="region"] > header:first-child {
+  color: #fff;
+  background-color: #f97c17;
+}
+
+section[role="region"] > header:first-child h1 {
+  color: #fff;
+}
+
+section[role="region"] > header:first-child a,
+section[role="region"] > header:first-child button {
+  color: rgba(0,0,0,0.6);
+}
+
+section[role="region"] > header:first-child a:active,
+section[role="region"] > header:first-child button:active,
+section[role="region"] > header:first-child a:hover,
+section[role="region"] > header:first-child button:hover {
+  background-color: rgba(0,0,0,0.07);
+}
+
+section[role="region"] > header:first-child a:focus,
+section[role="region"] > header:first-child button:focus {
+  background-color: transparent;
+}
+
+/* ----------------------------------
+  Icons
+---------------------------------- */
+
+section[role="region"] > header:first-child .icon-add {
+  background-image: url(headers/images/icons/add.png);
+}
+
+section[role="region"] > header:first-child .icon-compose {
+  background-image: url(headers/images/icons/compose.png);
+}
+
+html[dir="ltr"] section[role="region"] > header:first-child .icon-edit {
+  background-image: url(headers/images/icons/edit.png);
+}
+html[dir="rtl"] section[role="region"] > header:first-child .icon-edit {
+  background-image: url(headers/images/icons/edit-rtl.png);
+}
+
+html[dir="ltr"] section[role="region"] > header:first-child .icon-send {
+  background-image: url(headers/images/icons/send.png);
+}
+html[dir="rtl"] section[role="region"] > header:first-child .icon-send {
+  background-image: url(headers/images/icons/send_rtl.png);
+}
+
+section[role="region"] > header:first-child .icon-close {
+  background-image: url(headers/images/icons/close.png);
+}
+
+html[dir="ltr"] section[role="region"] > header:first-child .icon-back {
+  background-image: url(headers/images/icons/left.png);
+}
+html[dir="rtl"] section[role="region"] > header:first-child .icon-back {
+  background-image: url(headers/images/icons/right.png);
+}
+
+section[role="region"] > header:first-child .icon-menu {
+  background-image: url(headers/images/icons/menu.png);
+}
+
+section[role="region"] > header:first-child .icon-user {
+  background-image: url(headers/images/icons/user.png);
+}
+
+section[role="region"] > header:first-child .icon-up {
+  background-image: url(headers/images/icons/up.png);
+}
+
+section[role="region"] > header:first-child .icon-down {
+  background-image: url(headers/images/icons/down.png);
+}
+
+section[role="region"] > header:first-child .icon-options {
+  background-image: url(headers/images/icons/options.png);
+}
+
+/* ----------------------------------
+  Subheader
+---------------------------------- */
+
+section[role="region"] header h2 {
+  color: #424242;
+  border-bottom: solid 0.1rem #e6e6e6;
+}
+
+/* -----------------------------------------------------------------
+  HEADER SKIN: comms
+  .skin-comms will override default values
+----------------------------------------------------------------- */
+
+.skin-comms section[role="region"] > header:first-child,
+section[role="region"].skin-comms > header:first-child {
+  background-color: #00adad;
+}
+
+.skin-comms section[role="region"] > header:first-child a,
+.skin-comms section[role="region"] > header:first-child button,
+section[role="region"].skin-comms > header:first-child a,
+section[role="region"].skin-comms > header:first-child button {
+  color: rgba(0,0,0,0.5);
+}
+
+.skin-comms section[role="region"] > header:first-child a:active,
+.skin-comms section[role="region"] > header:first-child button:active,
+.skin-comms section[role="region"] > header:first-child a:hover,
+.skin-comms section[role="region"] > header:first-child button:hover,
+section[role="region"].skin-comms > header:first-child a:active,
+section[role="region"].skin-comms > header:first-child button:active,
+section[role="region"].skin-comms > header:first-child a:hover,
+section[role="region"].skin-comms > header:first-child button:hover {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.skin-comms section[role="region"] > header:first-child a:focus,
+.skin-comms section[role="region"] > header:first-child button:focus,
+section[role="region"].skin-comms > header:first-child a:focus,
+section[role="region"].skin-comms > header:first-child button:focus {
+  background-color: transparent;
+}
+
+/* -----------------------------------------------------------------
+  HEADER SKIN: dark
+  .skin-dark will override default values
+----------------------------------------------------------------- */
+
+section[role="region"].skin-dark > header:first-child,
+.skin-dark > section[role="region"] > header:first-child {
+  background-color: #242d33;
+}
+
+.skin-dark section[role="region"] > header:first-child a,
+.skin-dark section[role="region"] > header:first-child button,
+section[role="region"].skin-dark > header:first-child a,
+section[role="region"].skin-dark > header:first-child button {
+  color: #00aac5;
+}
+
+.skin-dark section[role="region"] > header:first-child a:active,
+.skin-dark section[role="region"] > header:first-child button:active,
+.skin-dark section[role="region"] > header:first-child a:hover,
+.skin-dark section[role="region"] > header:first-child button:hover,
+section[role="region"].skin-dark > header:first-child a:active,
+section[role="region"].skin-dark > header:first-child button:active,
+section[role="region"].skin-dark > header:first-child a:hover,
+section[role="region"].skin-dark > header:first-child button:hover {
+  background-color: rgba(0,0,0,0.4);
+}
+
+.skin-dark section[role="region"] > header:first-child a:focus,
+.skin-dark section[role="region"] > header:first-child button:focus,
+section[role="region"].skin-dark > header:first-child a:focus,
+section[role="region"].skin-dark > header:first-child button:focus {
+  background-color: transparent;
+}
+
+section[role="region"].skin-dark header h2,
+.skin-dark > section[role="region"] header h2 {
+  background-color: #2c353b;
+  color: #fff;
+  border: none;
+}
+
+/* -----------------------------------------------------------------
+  HEADER SKIN: organic
+  .skin-organic will override default values
+----------------------------------------------------------------- */
+
+section[role="region"].skin-organic > header:first-child,
+.skin-organic section[role="region"] > header:first-child {
+  color: #868692;
+  background-color: #f4f4f4;
+}
+
+section[role="region"].skin-organic > header:first-child h1,
+.skin-organic section[role="region"] > header:first-child h1 {
+  color: #868692;
+}
+
+section[role="region"].skin-organic > header:first-child a,
+section[role="region"].skin-organic > header:first-child button,
+.skin-organic section[role="region"] > header:first-child a,
+.skin-organic section[role="region"] > header:first-child button {
+  color: #00aac5;
+}
+
+section[role="region"].skin-organic > header:first-child a:focus,
+section[role="region"].skin-organic > header:first-child button:focus,
+.skin-organic section[role="region"] > header:first-child a:focus,
+.skin-organic section[role="region"] > header:first-child button:focus {
+  background-color: transparent;
+}
+
+/* ----------------------------------
+  Icons
+---------------------------------- */
+
+html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-back,
+html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-back {
+  background-image: url(headers/images/icons/organic/left.png);
+}
+html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-back,
+html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-back {
+  background-image: url(headers/images/icons/organic/right.png);
+}
+
+section[role="region"].skin-organic > header:first-child .icon-close,
+.skin-organic section[role="region"] > header:first-child .icon-close {
+  background-image: url(headers/images/icons/organic/close.png);
+}
+
+section[role="region"].skin-organic > header:first-child .icon-add,
+.skin-organic section[role="region"] > header:first-child .icon-add {
+  background-image: url(headers/images/icons/organic/add.png);
+}
+
+html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-edit,
+html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-edit {
+  background-image: url(headers/images/icons/organic/edit.png);
+}
+html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-edit,
+html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-edit {
+  background-image: url(headers/images/icons/organic/edit-rtl.png);
+}
+
+/* ----------------------------------
+  Subheader
+---------------------------------- */
+
+section[role="region"].skin-organic header h2,
+.skin-organic section[role="region"] header h2 {
+  background-color: #e7e7e7;
+  color: #4d4d4d;
+  border: none;
+}

assets/webapps/keyboard.gaiamobile.org/shared/style/headers/index.html

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Headers</title>
+  <meta name="description" content="Providing top-level navigation and inputs for the active view">
+  <!--
+    - This <style> and <link> is only used for the example preview,
+    - it isn't needed for the real use case.
+    -->
+  <link rel="stylesheet" href="../headers.css">
+  <style type="text/css">
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+    body {
+      background: none;
+    }
+
+    h2.bb-docs {
+      font-size: 1.8rem;
+      font-weight: 300;
+      color: #666;
+      margin: -0.1rem 0 0;
+      background-color: #f5f5f5;
+      padding: 0.4rem;
+      padding-inline-start: 3rem;
+      border: solid 0.1rem #e8e8e8;
+      margin: 3rem 0 1rem;
+    }
+
+    section[role="region"] {
+      margin-bottom: 1.5rem;
+      position: relative;
+    }
+  </style>
+  <script>
+    window.onload = function() {
+      document.getElementById('dir').checked = false;
+    };
+  </script>
+</head>
+<body role="application">
+  <p dir="ltr">
+    <label>
+      <input type="checkbox" id="dir"
+        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
+      RTL mode
+    </label>
+  </p>
+
+  <section role="region">
+    <header>
+      <a href="#"><span class="icon icon-close">close</span></a>
+      <menu type="toolbar">
+        <button>done</button>
+      </menu>
+      <h1>Email</h1>
+    </header>
+  </section>
+
+  <section role="region">
+    <header>
+      <a href="#"></a>
+      <menu type="toolbar">
+        <button><span class="icon icon-send">send</span></button>
+      </menu>
+      <h1>Send message to X</h1>
+    </header>
+  </section>
+
+  <section role="region">
+    <header>
+      <a href="#"><span class="icon icon-back">back</span></a>
+      <menu type="toolbar">
+        <button><span class="icon icon-edit">edit</span></button>
+        <button><span class="icon icon-add">add</span></button>
+      </menu>
+      <h1>Email</h1>
+    </header>
+    <header>
+      <h2>Subheader text</h2>
+    </header>
+  </section>
+
+  <section role="region">
+    <header>
+      <button><span class="icon icon-menu">menu</span></button>
+      <menu type="toolbar">
+        <button><span class="icon icon-edit">edit</span></button>
+        <button><span class="icon icon-add">add</span></button>
+      </menu>
+      <h1>Inbox <em>(2)</em></h1>
+    </header>
+  </section>
+
+  <h2 class="bb-docs">Skin: Dark</h2>
+  <section role="region" class="skin-dark">
+    <header>
+      <a href="#"><span class="icon icon-close">close</span></a>
+      <menu type="toolbar">
+        <button>done</button>
+      </menu>
+      <h1>Music</h1>
+    </header>
+  </section>
+
+  <section role="region" class="skin-dark">
+    <header>
+      <a href="#"><span class="icon icon-back">back</span></a>
+      <menu type="toolbar">
+        <button><span class="icon icon-edit">edit</span></button>
+        <button><span class="icon icon-add">add</span></button>
+      </menu>
+      <h1>Music</h1>
+    </header>
+    <header>
+      <h2>Subheader text</h2>
+    </header>
+  </section>
+
+  <h2 class="bb-docs">Skin: Organic</h2>
+  <section role="region" class="skin-organic">
+    <header>
+      <a href="#"><span class="icon icon-close">close</span></a>
+      <menu type="toolbar">
+        <button>done</button>
+      </menu>
+      <h1>Settings</h1>
+    </header>
+  </section>
+
+  <div class="skin-organic">
+    <section role="region">
+      <header>
+        <a href="#"><span class="icon icon-back">back</span></a>
+        <menu type="toolbar">
+          <button><span class="icon icon-edit">edit</span></button>
+          <button><span class="icon icon-add">add</span></button>
+        </menu>
+        <h1>Settings</h1>
+      </header>
+      <header>
+        <h2>Subheader text</h2>
+      </header>
+    </section>
+  </div>
+
+  <h2 class="bb-docs">Skin: Comms</h2>
+  <div class="skin-comms">
+    <section role="region">
+      <header>
+        <a href="#"><span class="icon icon-close">close</span></a>
+        <menu type="toolbar">
+          <button>done</button>
+        </menu>
+        <h1>Contacts</h1>
+      </header>
+    </section>
+
+    <section role="region">
+      <header>
+        <a href="#"><span class="icon icon-back">back</span></a>
+        <menu type="toolbar">
+          <button><span class="icon icon-edit">edit</span></button>
+          <button><span class="icon icon-add">add</span></button>
+        </menu>
+        <h1>Contacts</h1>
+      </header>
+      <header>
+        <h2>Subheader text</h2>
+      </header>
+    </section>
+  </div>
+
+</body>
+</html>

assets/webapps/keyboard.gaiamobile.org/shared/style/input_areas.css

@@ -0,0 +1,575 @@
+/* ----------------------------------
+ * Input areas
+ * ---------------------------------- */
+
+/**
+ * BiDi notes:
+ *
+ *  - as the <input>, <textarea> and [contentEditable] elements are filled by
+ *    the user, they need a `unicode-bidi: -moz-plaintext` attribute for their
+ *    content to be displayed properly (e.g. LTR content in an RTL document,
+ *    or vice-versa);
+ *
+ *  - consequence: *-inline-start/end properties can still be used on such
+ *    elements content direction doesn't impact element's direction
+ *
+ *  - however, the one-line inputs must still be aligned along with the
+ *    *document* direction: to the left in LTR, to the right in RTL
+ *    -- no matter what the *content* direction is.
+ */
+
+html[dir="ltr"] input { text-align: left; }
+html[dir="rtl"] input { text-align: right; }
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="tel"],
+input[type="search"],
+input[type="url"],
+input[type="number"],
+textarea {
+  font-family: sans-serif;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 4rem;
+  line-height: 4rem;
+  resize: none;
+  padding: 0 1.5rem;
+  font-size: 1.6rem;
+  border: 0.1rem solid #c7c7c7;
+  border-radius: 0;
+  box-shadow: none; /* override the box-shadow from the system (performance issue) */
+  color: #333;
+  background: #fff;
+  margin: 0 0 1rem;
+  unicode-bidi: -moz-plaintext;
+}
+
+label:active {
+  background-color: transparent;
+}
+
+textarea {
+  height: 10rem;
+  max-height: 10rem;
+  line-height: 2rem;
+}
+
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #a9a9a9;
+  opacity: 1;
+  font-style: italic;
+  font-weight: 400;
+}
+
+input[disabled],
+textarea[disabled] {
+  opacity: 0.5;
+}
+
+.skin-dark input[type="text"],
+.skin-dark input[type="password"],
+.skin-dark input[type="email"],
+.skin-dark input[type="tel"],
+.skin-dark input[type="search"],
+.skin-dark input[type="url"],
+.skin-dark input[type="number"],
+.skin-dark textarea  {
+  color: #fff;
+  background-color: transparent;
+  border-color: #454545;
+}
+
+form p {
+  position: relative;
+  margin: 0;
+}
+
+form p input + button[type="reset"],
+form p textarea + button[type="reset"] {
+  position: absolute;
+  top: 0;
+  width: 4rem;
+  height: 4rem;
+  padding: 0;
+  border: none;
+  font-size: 0;
+  opacity: 0;
+  pointer-events: none;
+  background: url(input_areas/images/clear.png) no-repeat 50% 50% / 2.4rem auto;
+}
+html[dir="ltr"] form p input + button[type="reset"],
+html[dir="ltr"] form p textarea + button[type="reset"] {
+  right: -0.3rem;
+}
+html[dir="rtl"] form p input + button[type="reset"],
+html[dir="rtl"] form p textarea + button[type="reset"] {
+  left: -0.3rem;
+}
+
+.skin-dark p input + button[type="reset"],
+.skin-dark p textarea + button[type="reset"] {
+  background-image: url(input_areas/images/clear_dark.png);
+}
+
+/* To avoid colission with BB butons */
+li input + button[type="reset"]:after,
+li textarea + button[type="reset"]:after {
+  background: none;
+}
+
+textarea {
+  padding: 1.2rem;
+}
+
+html[dir="ltr"] form p input:focus { padding-right: 3rem; }
+html[dir="rtl"] form p input:focus { padding-left: 3rem; }
+
+form p input:focus + button[type="reset"],
+form p textarea:focus + button[type="reset"] {
+  opacity: 1;
+  pointer-events: all;
+}
+
+/* Fieldset */
+fieldset {
+  position: relative;
+  overflow: hidden;
+  margin: 1.5rem 0 0;
+  padding: 0;
+  font-size: 2rem;
+  line-height: 1em;
+  background: none;
+  border: 0;
+}
+
+fieldset legend,
+input[type="date"],
+input[type="time"],
+input[type="datetime"],
+input[type="datetime-local"] {
+  border: 0.1rem solid #c7c7c7;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: sans-serif;
+  font-style: italic;
+  font-size: 1.6rem;
+  margin: 0 0 1.5rem;
+  padding: 0 1.5rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  height: 4rem;
+  color: #333;
+  border-radius: 0;
+  background-color: #fff;
+  background-repeat: no-repeat;
+}
+html[dir="ltr"] fieldset legend,
+html[dir="ltr"] input[type="date"],
+html[dir="ltr"] input[type="time"],
+html[dir="ltr"] input[type="datetime"],
+html[dir="ltr"] input[type="datetime-local"] {
+  background-image: url(input_areas/images/dialog.svg);
+  background-position: right 1rem bottom 1rem;
+}
+html[dir="rtl"] fieldset legend,
+html[dir="rtl"] input[type="date"],
+html[dir="rtl"] input[type="time"],
+html[dir="rtl"] input[type="datetime"],
+html[dir="rtl"] input[type="datetime-local"] {
+  background-image: url(input_areas/images/dialog_rtl.svg);
+  background-position: left 1rem bottom 1rem;
+}
+
+fieldset legend {
+  margin: 0 0 1rem;
+  padding: 1rem 1.5rem 0;
+  background-color: rgba(0,0,0,0.05);
+}
+
+fieldset[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.skin-dark fieldset legend,
+.skin-dark input[type="date"],
+.skin-dark input[type="time"],
+.skin-dark input[type="datetime"],
+.skin-dark input[type="datetime-local"] {
+  color: #fff;
+  background-color: transparent;
+  border-color: #454545;
+}
+
+fieldset[disabled] legend,
+input[type="date"][disabled],
+input[type="time"][disabled],
+input[type="datetime"][disabled],
+input[type="datetime-local"][disabled] {
+  background-color: transparent;
+}
+html[dir="ltr"] fieldset[disabled] legend,
+html[dir="ltr"] input[type="date"][disabled],
+html[dir="ltr"] input[type="time"][disabled],
+html[dir="ltr"] input[type="datetime"][disabled],
+html[dir="ltr"] input[type="datetime-local"][disabled] {
+  background-image: url(input_areas/images/dialog_disabled.svg);
+}
+html[dir="rtl"] fieldset[disabled] legend,
+html[dir="rtl"] input[type="date"][disabled],
+html[dir="rtl"] input[type="time"][disabled],
+html[dir="rtl"] input[type="datetime"][disabled],
+html[dir="rtl"] input[type="datetime-local"][disabled] {
+  background-image: url(input_areas/images/dialog_disabled_rtl.svg);
+}
+
+input[type="date"]:focus,
+input[type="time"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus {
+  box-shadow: none;
+  border-bottom-color: #c7c7c7;
+}
+
+.skin-dark input[type="date"]:focus,
+.skin-dark input[type="time"]:focus,
+.skin-dark input[type="datetime"]:focus,
+.skin-dark input[type="datetime-local"]:focus {
+  box-shadow: none;
+  border-bottom-color: #454545;
+}
+
+input[type="date"]:active,
+input[type="time"]:active,
+input[type="datetime"]:active,
+input[type="datetime-local"]:active {
+  background-color: #b2f2ff;
+  color: #fff;
+}
+
+.skin-dark input[type="date"]:active,
+.skin-dark input[type="time"]:active,
+.skin-dark input[type="datetime"]:active,
+.skin-dark input[type="datetime-local"]:active {
+  background-color: #00aacc;
+  background-image: url(input_areas/images/dialog_active.svg);
+}
+
+/* fix for required inputs with wrong or empty value e.g. [type=email] */
+input:invalid,
+textarea:invalid,
+.skin-dark input:invalid,
+.skin-dark textarea:invalid {
+  color: #b90000;
+}
+
+input:focus,
+textarea:focus,
+.skin-dark input:focus,
+.skin-dark textarea:focus {
+  box-shadow: inset 0 -0.1rem 0 #00caf2;
+  border-bottom-color: #00caf2;
+}
+
+input:invalid:focus,
+textarea:invalid:focus,
+.skin-dark input:invalid:focus,
+.skin-dark textarea:invalid:focus {
+  box-shadow: inset 0 -0.1rem 0 #820000;
+  border-bottom-color: #820000;
+}
+
+input[type="range"]:focus,
+.skin-dark input[type="range"]:focus {
+  box-shadow: none;
+  border-bottom: 0;
+}
+
+/* Tidy (search/submit) */
+form[role="search"] {
+  position: relative;
+  height: 3.7rem;
+  background: #f4f4f4;
+}
+
+form[role="search"].skin-dark {
+  background: #202020;
+}
+
+form[role="search"] p {
+  padding: 0 1.5rem;
+  padding-inline-start: 3rem;
+  overflow: hidden;
+  position: relative;
+}
+
+form[role="search"] p input,
+form[role="search"] p textarea {
+  height: 3.7rem;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: none;
+}
+
+form[role="search"] p textarea {
+  padding: 1rem 0 0;
+}
+
+form[role="search"] p input::-moz-placeholder {
+  background-image: url(input_areas/images/search.svg);
+  background-repeat: no-repeat;
+  background-size: 3rem;
+}
+html[dir="ltr"] form[role="search"] p input::-moz-placeholder {
+  background-position: right -0.5rem center;
+}
+html[dir="rtl"] form[role="search"] p input::-moz-placeholder {
+  background-position: left -0.5rem center;
+}
+
+form[role="search"].skin-dark p input::-moz-placeholder {
+  background-image: url(input_areas/images/search_dark.svg);
+}
+
+form[role="search"] p input:focus::-moz-placeholder {
+  background: none;
+}
+
+form[role="search"] p input:invalid,
+form[role="search"] p textarea:invalid,
+form[role="search"] p input:focus,
+form[role="search"] p textarea:focus {
+  border: none;
+  box-shadow: none;
+}
+
+form[role="search"].skin-dark p input,
+form[role="search"].skin-dark p textarea {
+  color: #fff;
+  background: none;
+  box-shadow: none;
+}
+
+form[role="search"] button[type="submit"] {
+  min-width: 6rem;
+  height: 3.7rem;
+  padding: 0 1.5rem;
+  border: none;
+  color: #00aac5;
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 3.7rem;
+  width: auto;
+  border-radius: 0;
+  margin: 0;
+  position: relative;
+  background-image: none;
+  background-color: unset;
+  font-style: italic;
+  overflow: visible;
+}
+html[dir="ltr"] form[role="search"] button[type="submit"] { float: right; }
+html[dir="rtl"] form[role="search"] button[type="submit"] { float: left; }
+
+form[role="search"] button[type="submit"]:after {
+  content: "";
+  position: absolute;
+  offset-inline-start: -0.1rem;
+  top: 0.7rem;
+  bottom: 0.7rem;
+  width: 0.1rem;
+  background: #c7c7c7;
+}
+
+form[role="search"] button[type="submit"].icon {
+  font-size: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 3rem;
+}
+
+form[role="search"] p input + button[type="reset"]{
+  height: 3.7rem;
+  offset-inline-end: 0.5rem;
+}
+
+form[role="search"].skin-dark button[type="submit"]:after {
+  background-color: #575757;
+}
+
+form[role="search"] button[type="submit"] + p > textarea {
+  height: 3.7rem;
+  line-height: 2rem;
+}
+
+form[role="search"] button[type="submit"] + p button {
+  height: 3.7rem;
+}
+
+form[role="search"].full button[type="submit"] {
+  display: none;
+}
+
+form[role="search"] button.icon:active,
+form[role="search"] button[type="submit"]:active {
+  background-color: #b2f2ff;
+  color: #fff;
+}
+
+form[role="search"].skin-dark button.icon:active,
+form[role="search"].skin-dark button[type="submit"]:active {
+  background: #00aacc;
+}
+
+form[role="search"] button[type="submit"][disabled] {
+  color: #adadad;
+  pointer-events: none;
+}
+
+form button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+/* .bb-editable - e.g email & SMS recipients */
+.bb-editable [contenteditable] {
+  display: inline-block;
+  box-sizing: border-box;
+  position: relative;
+  max-width: calc(100% - 1.4rem);
+  overflow: hidden;
+  padding: 0 1.5rem;
+  margin: 0 0 0.6rem;
+  line-height: 2.8rem;
+  border-radius: 1.4rem;
+  text-overflow: ellipsis;
+  font-size: 1.6rem;
+  font-style: italic;
+  white-space: nowrap;
+  color: #333;
+  background: #fff;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].icon {
+  padding-right: 3.7rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].icon {
+  padding-left: 3.7rem;
+}
+
+.bb-editable [contenteditable="false"].invalid {
+  background-color: #fedcdc;
+  padding: 0 1.5rem;
+}
+html[dir="ltr"] .bb-editable [contenteditable="false"].invalid { padding-left: 3.3rem; }
+html[dir="rtl"] .bb-editable [contenteditable="false"].invalid { padding-right: 3.3rem; }
+
+.bb-editable [contenteditable="false"].invalid:before {
+    content: "!";
+    position: absolute;
+    top: 0.6rem;
+    display: block;
+    width: 1.7rem;
+    height: 1.6rem;
+    padding: 0;
+    border-radius: 50%;
+    line-height: 1.6rem;
+    font-size: 1.2rem;
+    text-align: center;
+    text-indent: -0.1rem;
+    font-style: normal;
+    font-weight: 600;
+    color: #fff;
+    background-color: #b80404;
+}
+html[dir="ltr"] .bb-editable [contenteditable="false"].invalid:before { left: 0.8rem; }
+html[dir="rtl"] .bb-editable [contenteditable="false"].invalid:before { right: 0.8rem; }
+
+.bb-editable [contenteditable="false"].invalid:hover:before,
+.bb-editable [contenteditable="false"].invalid:active:before {
+  color: #b2f2ff;
+  background-color: #fff;
+}
+
+.bb-editable [contenteditable]:hover,
+.bb-editable [contenteditable]:active,
+.bb-editable [contenteditable].invalid:hover,
+.bb-editable [contenteditable].invalid:active {
+  color: #fff;
+  background-color: #b2f2ff;
+}
+
+.bb-editable [contenteditable].icon:after {
+  content: "";
+  position: absolute;
+  top: 0.7rem;
+  width: 3rem;
+  height: 3rem;
+  background-repeat: no-repeat;
+  background-size: 3rem;
+}
+html[dir="ltr"] .bb-editable [contenteditable].icon:after {
+  right: 0;
+  background-position: -0.7rem -3.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].icon:after {
+  left: 0;
+  background-position: 0.7rem -3.8rem;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].icon:hover:after,
+html[dir="ltr"] .bb-editable [contenteditable].icon:active:after {
+  background-position: -0.7rem -0.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].icon:hover:after,
+html[dir="rtl"] .bb-editable [contenteditable].icon:active:after {
+  background-position: 0.7rem -0.8rem;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon {
+  padding-right: 3.7rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon {
+  padding-left: 3.7rem;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:after {
+  background-position: -0.7rem -6.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:after {
+  background-position: 0.7rem -6.8rem;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:hover:after,
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:active:after {
+  background-position: -0.7rem -0.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:hover:after,
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:active:after {
+  background-position: 0.7rem -0.8rem;
+}
+
+.bb-editable [contenteditable="true"],
+.bb-editable [contenteditable="true"]:hover,
+.skin-comms .bb-editable [contenteditable="true"]:hover {
+    padding: 0 0.2rem;
+    white-space: normal;
+    font-size: 1.8rem;
+    font-style: normal;
+    color: #000;
+    background: none repeat scroll 0 0 transparent;
+}
+
+.skin-comms .bb-editable [contenteditable]:hover,
+.skin-comms .bb-editable [contenteditable]:active {
+  color: #fff;
+  background-color: #29bbb5;
+}
+

assets/webapps/keyboard.gaiamobile.org/shared/style/input_areas/images/dialog.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#00AAC5" enable-background="new" d="M9 0L9 9 0 9"/></svg>

assets/webapps/keyboard.gaiamobile.org/shared/style/input_areas/images/dialog_active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#B2F2FF" d="M9 0v9h-9"/></svg>

assets/webapps/keyboard.gaiamobile.org/shared/style/input_areas/images/dialog_disabled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path opacity=".5" fill="#A9A9A9" d="M9 0L9 9 0 9"/></svg>

assets/webapps/keyboard.gaiamobile.org/shared/style/input_areas/images/dialog_disabled_rtl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path opacity=".5" fill="#A9A9A9" enable-background="new" d="M0 0L0 9 9 9"/></svg>

assets/webapps/keyboard.gaiamobile.org/shared/style/input_areas/images/dialog_rtl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#00AAC5" enable-background="new" d="M0 0L0 9 9 9"/></svg>

assets/webapps/keyboard.gaiamobile.org/shared/style/input_areas/images/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" fill="#424242" d="M23.385 21.494c.266.266.057.903-.465 1.426s-1.16.729-1.426.465l-4.041-4.039c-1.01.656-2.21 1.047-3.505 1.047-3.561 0-6.448-2.885-6.448-6.446 0-3.56 2.887-6.446 6.448-6.446 3.562 0 6.449 2.887 6.449 6.446 0 1.297-.393 2.499-1.051 3.509l4.041 4.039h-.002zm-9.437-12.459c-2.712 0-4.914 2.198-4.914 4.912s2.202 4.913 4.914 4.913c2.714 0 4.914-2.199 4.914-4.913-.001-2.714-2.2-4.912-4.914-4.912z"/></svg>

assets/webapps/keyboard.gaiamobile.org/shared/style/input_areas/images/search_dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" fill="#8F9091" d="M23.385 21.494c.266.266.057.903-.465 1.426s-1.16.729-1.426.465l-4.041-4.039c-1.01.656-2.21 1.047-3.505 1.047-3.561 0-6.448-2.885-6.448-6.446 0-3.56 2.887-6.446 6.448-6.446 3.562 0 6.449 2.887 6.449 6.446 0 1.297-.393 2.499-1.051 3.509l4.041 4.039h-.002zm-9.437-12.459c-2.712 0-4.914 2.198-4.914 4.912s2.202 4.913 4.914 4.913c2.714 0 4.914-2.199 4.914-4.913-.001-2.714-2.2-4.912-4.914-4.912z"/></svg>

assets/webapps/keyboard.gaiamobile.org/shared/style/input_areas/index.html

@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8">
+
+  <title>Input areas</title>
+  <link rel="stylesheet" href="../input_areas.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">
+
+  <!--
+    - These <style> and <script> elements are only used for the example code,
+    - they are not needed for the real use case.
+    -->
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #f4f4f4;
+    }
+
+    label.bb-docs {
+      font-family: sans-serif;
+      font-size: 1.2rem;
+      margin-left: 1.5rem;
+    }
+
+    h2.bb-docs {
+      font-family: sans-serif;
+      padding: 0.4rem 3rem;
+      margin: -0.1rem 0 0;
+      border: solid 0.1rem #e8e8e8;
+      color: #666;
+      font-size: 1.8rem;
+      font-weight: 300;
+      background-color: #fff;
+    }
+
+    form { margin: 1rem 1.5rem; }
+
+    form[role="search"] { margin: 1rem 0; }
+
+    div.skin-dark {
+      background: #000;
+    }
+
+    div.skin-dark.margins {
+      margin: 1rem -1.5rem;
+      padding: 1.5rem 1.5rem 0.5rem;
+    }
+
+    /**
+     *  .bb-editable
+     *  Added properties for this example, don't add on app.
+     */
+    .bb-editable {
+      padding: 1.5rem 1rem 0.5rem;
+      background: #bbb;
+    }
+
+    /**
+     *  .icon-email:before
+     *  Define the background-image with custom icon for App.
+     *  Attention, the pseudo-element is required for compatibility with Building Blocks.
+     *
+     *  Example:
+     *  .icon-mms:before { background-image: url(...); }
+     */
+    .icon-email:after {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABaCAYAAACv+ebYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASRJREFUeNrsl8ENgjAUhqlhAEfxQDyzgXdOjoCT0ClYg54Nu+gGtcRiAlJ5fQ9CDP+XFJOW+hlo6/uTBADw76hfg9ba0n0cBd//VErp6FlO3FgZDevn9pO50u4iEXPkn/ul4hj54L4lxBT51/hS4odrVUA62b+UOCSvfP+q4rE8KF1DTF5w3JPLio9Gx1T/Yauzen/idGb8Jv13QgEAAAAAyNJi27bitJhlmeYUAhfXcoHYuKY5pU/uJ3OluaTm4sjN3JOiFnsxckN5PTFVJkVuqGsitrw9hRaL7ycvxFhxt7WuE3Lt+1ct6MfyXhq131PmVukkpX+n5RYRhn24IC0iLQIAAABIi2/uRSFOi+e6RlpEWkRaRFpEWkRaRFoEYG+8BBgAvaeWTjgXDaoAAAAASUVORK5CYII=);
+    }
+
+  </style>
+  <script>
+    window.onload = function() {
+      document.getElementById('dir').checked = false;
+    };
+  </script>
+</head>
+
+<body role="application">
+  <p dir="ltr">
+    <label class="bb-docs">
+      <input id="dir" type="checkbox" checked="false"
+        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
+      RTL mode
+    </label>
+  </p>
+  <h2 class="bb-docs">Default inputs</h2>
+  <form>
+    <p>
+      <input dir="auto" type="text" placeholder="Placeholder">
+      <button type="reset">Clear</button>
+    </p>
+
+    <p>
+      <textarea placeholder="Placeholder in textarea"></textarea>
+    </p>
+
+    <p>
+      <input dir="auto" type="text" placeholder="Placeholder" value="Some written text" required>
+      <button type="reset">Clear</button>
+    </p>
+
+    <p>
+      <input dir="auto" type="text" placeholder="Disabled" disabled required>
+      <button type="reset">Clear</button>
+    </p>
+
+    <div class="skin-dark margins">
+      <p>
+        <input dir="auto" type="text" placeholder="Placeholder" value="Some written text">
+        <button type="reset">Clear</button>
+      </p>
+    </div>
+  </form>
+
+  <h2 class="bb-docs">Required inputs</h2>
+  <form>
+    <p>
+      <input dir="auto" type="text" placeholder="Placeholder" required>
+      <button type="reset">Clear</button>
+    </p>
+
+    <p>
+      <textarea placeholder="Placeholder in textarea" required></textarea>
+    </p>
+  </form>
+
+  <h2 class="bb-docs">Date/time inputs</h2>
+  <form>
+    <p>
+      <input dir="auto" disabled type="date" placeholder="YYYY-MM-DD">
+    </p>
+
+    <p>
+      <input dir="auto" type="time" placeholder="hh:mm:ss">
+    </p>
+  </form>
+
+  <h2 class="bb-docs">Fieldset</h2>
+  <form>
+    <fieldset>
+      <legend class="action">Mobile</legend>
+      <section>
+        <p>
+          <input dir="ltr" type="tel" placeholder="Phone number">
+          <button type="reset">Clear</button>
+        </p>
+        <p>
+          <input dir="auto" type="text" placeholder="Name" value="Jessy James">
+          <button type="reset">Clear</button>
+        </p>
+      </section>
+    </fieldset>
+
+    <fieldset disabled>
+      <legend>Work</legend>
+      <section>
+        <p>
+          <input dir="ltr" type="tel" placeholder="Email">
+          <button type="reset">Clear</button>
+        </p>
+      </section>
+    </fieldset>
+  </form>
+
+  <h2 class="bb-docs">Forms: Input text</h2>
+  <form role="search">
+    <p>
+      <input dir="auto" type="text" placeholder="Search…">
+      <button type="reset">Clear</button>
+    </p>
+  </form>
+
+  <form role="search">
+    <button type="submit">Cancel</button>
+    <p>
+      <input dir="auto" type="text" placeholder="Search…" value="Some text here">
+      <button type="reset">Clear</button>
+    </p>
+  </form>
+
+  <div class="skin-dark">
+  <h2 class="bb-docs">Skin dark</h2>
+    <form role="search" class="skin-dark">
+      <p>
+        <input dir="auto" type="text" placeholder="Search…">
+        <button type="reset">Clear</button>
+      </p>
+    </form>
+
+    <form role="search" class="skin-dark">
+      <button type="submit">Cancel</button>
+      <p>
+        <input dir="auto" type="text" placeholder="Search…" value="Some text here">
+        <button type="reset">Clear</button>
+      </p>
+    </form>
+  </div>
+
+  <h2 class="bb-docs">Forms: Text area</h2>
+  <form role="search" class="bottom">
+    <!-- this button should be enabled after start typing in the input field-->
+    <button type="submit" disabled>Send</button>
+    <p>
+      <textarea></textarea>
+    </p>
+  </form>
+
+  <form role="search" class="bottom">
+    <button type="submit">Send</button>
+    <p>
+      <textarea>Some text here</textarea>
+    </p>
+  </form>
+
+  <form role="search" class="bottom">
+    <button type="submit" class="icon" data-icon="send" aria-hidden="true">Send</button>
+    <p>
+      <textarea>Some text here</textarea>
+    </p>
+  </form>
+
+  <h2 class="bb-docs">Content Editable</h2>
+  <ul class="bb-editable">
+    <li dir="auto" contenteditable="false">Travis Gray Travis Gray</li>
+    <li dir="auto" contenteditable="false" class="invalid">Lucy B.</li>
+    <li dir="auto" contenteditable="false" class="icon icon-email">Mary</li>
+    <li dir="auto" contenteditable="false" class="invalid icon icon-email">Paul C.</li>
+    <li dir="auto" contenteditable="true">John</li>
+  </ul>
+
+</body>
+</html>

assets/webapps/keyboard.gaiamobile.org/shared/style/keyboard_symbols.css

@@ -0,0 +1,5 @@
+@font-face {
+  font-family: 'Keyboard Symbols';
+  font-weight: 600;
+  src: url(keyboard_symbols/Keyboard-Symbols.ttf);
+}

assets/webapps/keyboard.gaiamobile.org/shared/style/lists.css

@@ -0,0 +1,242 @@
+/* ----------------------------------
+ * Lists
+ * ---------------------------------- */
+[data-type="list"] {
+  font-weight: 400;
+  padding: 0 1.5rem;
+}
+
+[data-type="list"] ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+[data-type="list"] strong {
+  font-weight: 500;
+}
+
+/* Title divisors */
+[data-type="list"] header {
+  padding: 0 1.5rem;
+  margin: 0;
+  font-size: 1.6rem;
+  height: 3rem;
+  line-height: 4rem;
+  font-weight: normal;
+  color: #ff4e00;
+  text-transform: uppercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+html[dir="ltr"] [data-type="list"] header { text-align: left; }
+html[dir="rtl"] [data-type="list"] header { text-align: right; }
+
+/* List items */
+[data-type="list"] li {
+  width: 100%;
+  height: 6rem;
+  box-sizing: border-box;
+  border-bottom: solid 0.1rem #e7e7e7;
+  color: #333;
+  margin: 0;
+  display: block;
+  position: relative;
+}
+
+[data-type="list"] li:last-child {
+  border: none;
+}
+
+/* Pressed State */
+li a:active {
+  background-color: transparent; /* remove default color for active state */
+}
+
+[data-type="list"] li > a {
+  text-decoration: none;
+  color: #333;
+  display: block;
+  height: 6rem;
+  position: relative;
+  border: none;
+  outline: none;
+}
+
+[data-type="list"].active li:after,
+[data-type="list"] li > a:after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  left: -1.5rem;
+  top: 0;
+  right: -1.5rem;
+  bottom: 0;
+}
+
+[data-type="list"].active li:active:after,
+[data-type="list"] li > a:active:after {
+  background-color: rgba(0,213,255,0.3);
+}
+
+/* Disabled */
+[data-type="list"] li[aria-disabled="true"] {
+  pointer-events: none;
+  opacity: 0.2;
+  border-color: #888;
+}
+
+/* Graphic content */
+[data-type="list"] aside {
+  margin: 0;
+  margin-inline-end: 0.5rem;
+  height: 100%;
+  position: relative;
+}
+html[dir="ltr"] [data-type="list"] aside { float: left; }
+html[dir="rtl"] [data-type="list"] aside { float: right; }
+
+[data-type="list"] li > a aside,
+[data-type="list"] li > a aside.icon {
+  background-color: transparent;
+}
+
+[data-type="list"] aside.pack-end {
+  margin: 0;
+  margin-inline-start: 0.5rem;
+  text-align: end;
+}
+html[dir="ltr"] [data-type="list"] aside.pack-end { float: right; }
+html[dir="rtl"] [data-type="list"] aside.pack-end { float: left; }
+
+[data-type="list"] aside.icon {
+  width: 3rem;
+  height: 6rem;
+  background-color: #fff;
+  background-repeat: no-repeat;
+  background-size:  100% auto;
+  font-size: 0;
+  display: block;
+  overflow: hidden;
+}
+html[dir="ltr"] [data-type="list"] aside.icon {
+  background-position: left center;
+}
+html[dir="rtl"] [data-type="list"] aside.icon {
+  background-position: right center;
+}
+
+[data-type="list"] aside span[data-type=img],
+[data-type="list"] aside img {
+  display: block;
+  overflow: hidden;
+  width: 5rem;
+  height: 5rem;
+  border-radius: 2.5rem;
+  margin-top: 0.5rem;
+  box-sizing: border-box;
+  background: transparent center center / cover;
+  position: relative;
+}
+
+[data-type="list"] [data-icon] {
+  font-size: 0;
+}
+
+[data-type="list"] [data-icon]:before {
+  line-height: 6rem;
+  text-align: center;
+  width: 3rem;
+  color: #333;
+}
+
+/* Text content */
+[data-type="list"] li p {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: none;
+  display: block;
+  margin: 0;
+  color: #858585;
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+[data-type="list"] li p:first-of-type {
+  font-size: 1.8rem;
+  line-height: 2.2rem;
+  color: #333;
+  padding: 1rem 0 0;
+}
+
+[data-type="list"] li p:only-child,
+[data-type="list"] li p:first-of-type:last-of-type {
+  line-height: 4rem;
+}
+
+[data-type="list"] li p em {
+  font-size: 1.5rem;
+  font-style: normal;
+}
+
+[data-type="list"] li p time {
+  margin-inline-end: 0.3rem;
+  text-transform: uppercase;
+}
+
+/* Checkable content */
+[data-type="list"] li > .pack-checkbox,
+[data-type="list"] li > .pack-switch {
+  pointer-events: none;
+  position: absolute;
+  top: -0.1rem;
+  bottom: 0;
+  /* Intentionally adding a conflict between right/left here: this will be
+   * resolved differently whether we're in LTR or RTL mode. */
+  right: -4rem;
+  left: -4rem;
+  width: calc(100% + 4rem);
+  height: auto;
+}
+
+[data-type="list"] li > .pack-checkbox input ~ span:after,
+[data-type="list"] li > .pack-switch input ~ span:after {
+  /* because width is set in switches.css, the conflict between left/right will
+   * be resolved in favor of "left" in LTR and "right" in RTL */
+  left: 0;
+  right: 0;
+  margin-inline-start: 0;
+}
+
+/* Edit mode */
+[data-type="list"] [data-type="edit"] li {
+  padding-inline-start: 4rem;
+}
+
+[data-type="list"] [data-type="edit"] li > .pack-checkbox,
+[data-type="list"] [data-type="edit"] li > .pack-switch {
+  pointer-events: auto;
+  left: 0;
+  right: 0;
+}
+
+[data-type="list"] [data-type="edit"] li > a {
+  pointer-events: none;
+}
+
+[data-type="list"] [data-type="edit"] li > a:active:after,
+[data-type="list"] [data-type="edit"] li > a:hover:after {
+  display: none;
+}
+
+[data-type="list"] [data-type="edit"] aside.pack-end {
+  display: none;
+}
+
+/* Themes */
+.skin-comms [data-type="list"] header {
+  color: #4997a7;
+}

assets/webapps/keyboard.gaiamobile.org/shared/style/lists/index.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Lists</title>
+  <meta name="description" content="Displaying an enumeration of a set of items ">
+
+  <link rel="stylesheet" href="../lists.css">
+
+  <!--
+    - These <style>, <script> and <link> elements are only used for the example
+    - code, they are not needed for the real case.
+    -->
+  <link rel="stylesheet" href="../../style/headers.css">
+  <link rel="stylesheet" href="../../style/switches.css">
+  <link rel="stylesheet" href="../../style/buttons.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+
+    body {
+      background: none;
+    }
+
+    h2.pack-docs {
+      font-size: 1.8rem;
+      font-weight: 300;
+      color: #666;
+      margin: -1px 0 0;
+      background-color: #f5f5f5;
+      padding: 0.4rem 0.4rem 0.4rem 3rem;
+      border: solid 1px #e8e8e8;
+    }
+
+    h2.pack-docs:first-child {
+      margin-top: 0;
+    }
+
+    [data-type="list"] li img[alt="placeholder"] {
+      background: #ccc url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwIiB5MT0iMCIgeDI9IjUwIiB5Mj0iNTAiLz4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNTAiIHkxPSIwIiB4Mj0iMC4wODIiIHkyPSI0OS45MTkiLz4NCjwvc3ZnPg0K);
+      background-size: 100% 100%;
+      font-size: 0;
+    }
+
+    [data-icon]:before {
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    [data-type="list"] [data-icon="forward"]:before {
+      color: #686f72;
+    }
+
+    #settings-list { background-color: #eff0eb; }
+    #settings-list li { border-color: #dcdcdc; }
+    #settings-list button { max-width: 8rem; margin: 1rem 1rem 0 0; }
+    #settings-list aside label { margin: 0 1rem 0 0; height: 100%; }
+    #settings-list > header h2 { margin: 0 1.5rem; }
+  </style>
+  <script>
+    window.onload = function() {
+      var dirInput = document.getElementById('dir');
+      dirInput.checked = false;
+      dirInput.onchange = function() {
+        document.documentElement.dir = this.checked ? "rtl" : "ltr";
+      };
+    };
+  </script>
+</head>
+
+<body role="application">
+  <p dir="ltr">
+    <label class="bb-docs">
+      <input id="dir" type="checkbox"> RTL mode
+    </label>
+  </p>
+  <section data-type="list">
+    <header>Title</header>
+    <ul>
+      <li>
+        <p>Margherita <strong>Gomez</strong></p>
+      </li>
+      <li>
+        <a href="#">
+          <aside class="pack-end" data-icon="forward" data-l10n-id="" aria-label="forward"></aside>
+          <p>Margherita Clickable <strong>Gomez</strong></p>
+        </a>
+      </li>
+      <li>
+        <aside class="pack-end">
+          <img alt="placeholder" src="myimage.jpg">
+        </aside>
+        <a href="#">
+          <p>Margherita <strong>Gomez</strong></p>
+          <p>Family</p>
+        </a>
+      </li>
+    </ul>
+
+    <header>Another title</header>
+    <ul>
+      <li aria-disabled="true">
+        <aside class="pack-end">
+          <img alt="placeholder" src="myimage.jpg">
+        </aside>
+        <a href="#">
+          <p>Margherita <strong>Gomez</strong></p>
+          <p>Family</p>
+        </a>
+      </li>
+      <li>
+        <aside class="pack-end icon icon-nopic"></aside>
+        <a href="#">
+          <aside data-icon="call-outgoing" data-l10n-id="" aria-label="outgoing call">
+            asidecall
+          </aside>
+          <p dir="auto">
+            Margherita <strong>Gomez</strong>
+            <em>(2)</em>
+          </p>
+          <p>
+            <time datetime="17:43">5:43PM</time>
+            Mobile, Vivo
+          </p>
+        </a>
+      </li>
+    </ul>
+  </section>
+
+  <section data-type="list">
+    <header>Edit mode</header>
+    <ul data-type="edit">
+      <li>
+        <label class="pack-checkbox danger">
+          <input type="checkbox">
+          <span></span>
+        </label>
+        <aside class="pack-end">
+          <img alt="placeholder" src="myimage.jpg">
+        </aside>
+        <a href="#">
+          <p>Margherita <strong>Gomez</strong></p>
+          <p>Family</p>
+        </a>
+      </li>
+      <li>
+        <label class="pack-checkbox danger">
+          <input type="checkbox">
+          <span></span>
+        </label>
+        <a href="#">
+          <aside data-icon="call-outgoing" data-l10n-id="" aria-label="outgoing call"></aside>
+          <p dir="auto">
+            Margherita <strong>Gomez</strong>
+            <em>(2)</em>
+          </p>
+          <p>
+            <time datetime="17:43">5:43PM</time>
+            Mobile, Vivo
+          </p>
+        </a>
+      </li>
+    </ul>
+  </section>
+
+  <section id="settings-list" role="region" class="skin-organic">
+    <section data-type="list">
+      <ul>
+      <li>
+        <a href="#">
+          <aside data-icon="call-outgoing" data-l10n-id="" aria-label="outgoing call"></aside>
+          <p>Phone lock</p>
+        </a>
+      </li>
+      </ul>
+    </section>
+    <header>
+      <h2>Settings style</h2>
+    </header>
+    <section data-type="list">
+      <ul>
+        <li>
+          <aside class="pack-end">
+            <button class="icon icon-dialog">Spain</button>
+          </aside>
+          <p>Time zone</p>
+          <p>Choose your country</p>
+        </li>
+        <li>
+          <aside class="pack-end">
+            <label class="pack-switch">
+              <input type="checkbox" checked>
+              <span></span>
+            </label>
+          </aside>
+          <p>Phone lock</p>
+        </li>
+      </ul>
+    </section>
+  </section>
+
+</body>
+</html>