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/clock.gaiamobile.org/shared/elements/config.js

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

assets/webapps/clock.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/clock.gaiamobile.org/shared/elements/gaia-icons/gaia-icons.css

@@ -0,0 +1,34 @@
+
+@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 {
+	
+	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/clock.gaiamobile.org/shared/elements/gaia_switch/script.js

@@ -0,0 +1,9 @@
+;window.GaiaSwitch=(function(win){var proto=Object.create(HTMLElement.prototype);var baseurl=window.GaiaSwitchBaseurl||'/shared/elements/gaia_switch/';proto.createdCallback=function(){var shadow=this.createShadowRoot();this._template=template.content.cloneNode(true);this._input=this._template.querySelector('input[type="checkbox"]');var checked=this.getAttribute('checked');if(checked!==null){this._input.checked=true;}
+var wrapper=this._template.getElementById('switch');wrapper.addEventListener('click',this.handleClick.bind(this));shadow.appendChild(this._template);ComponentUtils.style.call(this,baseurl);var dirObserver=new MutationObserver(this.updateInternalDir.bind(this));dirObserver.observe(document.documentElement,{attributeFilter:['dir'],attributes:true});this.updateInternalDir();};proto.updateInternalDir=function(){var internal=this.shadowRoot.firstElementChild;if(document.documentElement.dir==='rtl'){internal.setAttribute('dir','rtl');}else{internal.removeAttribute('dir');}};proto.handleClick=function(e){if(e&&e.target.tagName==='A'){return;}
+e&&e.preventDefault();e&&e.stopImmediatePropagation();var event=new MouseEvent('click',{view:window,bubbles:true,cancelable:true});this.dispatchEvent(event);if(!event.defaultPrevented){this.checked=!this.checked;}
+this.dispatchEvent(new CustomEvent('change',{bubbles:true,cancelable:false}));};proto.click=function(){this.handleClick();};Object.defineProperty(proto,'checked',{get:function(){return this._input.checked;},set:function(value){this._input.checked=value;}});Object.defineProperty(proto,'disabled',{get:function(){return this.hasAttribute('disabled');},set:function(value){if(value){this.setAttribute('disabled',true);}else{this.removeAttribute('disabled');}}});Object.defineProperty(proto,'name',{get:function(){return this.getAttribute('name');},set:function(value){this.setAttribute('name',value);}});Object.defineProperty(proto,'type',{get:function(){return'gaia-switch';}});var template=document.createElement('template');template.innerHTML=`<span id="switch">
+      <input type="checkbox">
+      <span><content select="label"></content></span>
+      <div class="details"><content select="details"></content></div>
+      <content select="a"></content>
+    </span>`;return document.registerElement('gaia-switch',{prototype:proto});})(window);

assets/webapps/clock.gaiamobile.org/shared/elements/gaia_switch/style.css

@@ -0,0 +1,91 @@
+gaia-switch {
+  display: inline-block;
+  width: 100%;
+}
+#switch {
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  position: relative;
+  background: none;
+}
+#switch span {
+  font-size: 1.9rem;
+  color: var(--label-color);
+  padding: 1rem 0;
+  line-height: 3rem;
+  box-sizing: border-box;
+  display: block;
+  
+  white-space: normal;
+}
+#switch span:-moz-dir(ltr) { float: left; }
+#switch span:-moz-dir(rtl) { float: right; }
+#switch span:not(:empty) {
+  padding-inline-end: 6rem;
+}
+#switch input {
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  offset-inline-start: 0;
+}
+#switch input:checked ~ span::after {
+  background-position: center bottom;
+}
+#switch input ~ span::after {
+  content: '';
+  position: absolute;
+  offset-inline-end: 0;
+  top: 2.5rem;
+  width: 6rem;
+  margin: -1.4rem 0 0;
+  height: 2.7rem;
+  border-radius: 1.35rem;
+  overflow: hidden;
+  background-color: #e6e6e6;
+  background-image: url(images/background_off.png);
+  background-repeat: no-repeat;
+  background-size: 9.2rem 2.7rem;
+  transition: background 0.2s ease;
+}
+#switch input ~ span:-moz-dir(ltr)::after { background-position: -3.2rem 0; }
+#switch input ~ span:-moz-dir(rtl)::after { background-position: 0 0; }
+#switch input:checked ~ span:-moz-dir(ltr)::after {
+  background-image: url(images/background.png);
+  background-position: 0 0;
+}
+#switch input:checked ~ span:-moz-dir(rtl)::after {
+  background-image: url(images/background_rtl.png);
+  background-position: -3.2rem 0;
+}
+#switch input:disabled ~ span::after {
+  opacity: 0.4;
+}
+#switch input.uninit ~ span::after {
+  transition: none;
+}
+#switch div.details {
+  clear: both;
+  position: relative;
+  top: -1.5rem;
+  display: block;
+  margin: 0;
+  padding-top: 0.5rem;
+  padding-inline-start: 0;
+  padding-inline-end: 8rem;
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+  color: #505859;
+  font-style: normal;
+  white-space: normal;
+}
+gaia-switch a {
+  position: relative;
+  top: -0.8rem;
+  font-size: 1.7rem;
+  line-height: 2.4rem;
+  font-weight: 400;
+  color: #35679a;
+}

assets/webapps/clock.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/clock.gaiamobile.org/shared/js/date_time_helper.js

@@ -0,0 +1,3 @@
+;;(function(){'use strict';if(window.navigator.mozHour12||window.navigator.hour12){return;}
+window.navigator.mozHour12=undefined;var _setMozHour12=function(result){if(result===null){result=undefined;}
+if(window.navigator.mozHour12!==result){window.navigator.mozHour12=result;window.dispatchEvent(new CustomEvent('timeformatchange'));}};var _hour12Handler=function(event){_setMozHour12(event.settingValue);};var _kLocaleTime='locale.hour12';var req=window.navigator.mozSettings.createLock().get(_kLocaleTime);req.onsuccess=function(){_setMozHour12(req.result[_kLocaleTime]);};window.navigator.mozSettings.addObserver(_kLocaleTime,_hour12Handler);})();

assets/webapps/clock.gaiamobile.org/shared/js/intl/l20n.js

@@ -0,0 +1,280 @@
+;;var _createClass=(function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if('value'in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};})();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError('Cannot call a class as a function');}}
+(function(){'use strict';function emit(listeners,...args){const type=args.shift();if(listeners['*']){listeners['*'].slice().forEach(listener=>listener.apply(this,args));}
+if(listeners[type]){listeners[type].slice().forEach(listener=>listener.apply(this,args));}}
+function addEventListener(listeners,type,listener){if(!(type in listeners)){listeners[type]=[];}
+listeners[type].push(listener);}
+function removeEventListener(listeners,type,listener){const typeListeners=listeners[type];const pos=typeListeners.indexOf(listener);if(pos===-1){return;}
+typeListeners.splice(pos,1);}
+let Client=(function(){function Client(remote){_classCallCheck(this,Client);this.id=this;this.remote=remote;const listeners={};this.on=(...args)=>addEventListener(listeners,...args);this.emit=(...args)=>emit(listeners,...args);}
+_createClass(Client,[{key:'method',value:function method(name,...args){return this.remote[name](...args);}}]);return Client;})();function broadcast(type,data){Array.from(this.ctxs.keys()).forEach(client=>client.emit(type,data));}
+function L10nError(message,id,lang){this.name='L10nError';this.message=message;this.id=id;this.lang=lang;}
+L10nError.prototype=Object.create(Error.prototype);L10nError.prototype.constructor=L10nError;function load(type,url){return new Promise(function(resolve,reject){const xhr=new XMLHttpRequest();if(xhr.overrideMimeType){xhr.overrideMimeType(type);}
+xhr.open('GET',url,true);if(type==='application/json'){xhr.responseType='json';}
+xhr.addEventListener('load',function io_onload(e){if(e.target.status===200||e.target.status===0){resolve(e.target.response||e.target.responseText);}else{reject(new L10nError('Not found: '+url));}});xhr.addEventListener('error',reject);xhr.addEventListener('timeout',reject);try{xhr.send(null);}catch(e){if(e.name==='NS_ERROR_FILE_NOT_FOUND'){reject(new L10nError('Not found: '+url));}else{throw e;}}});}
+const io={extra:function(code,ver,path,type){return navigator.mozApps.getLocalizationResource(code,ver,path,type);},app:function(code,ver,path,type){switch(type){case'text':return load('text/plain',path);case'json':return load('application/json',path);default:throw new L10nError('Unknown file type: '+type);}}};function fetchResource(res,{code,src,ver}){const url=res.replace('{locale}',code);const type=res.endsWith('.json')?'json':'text';return io[src](code,ver,url,type);}
+const KNOWN_MACROS=['plural'];const MAX_PLACEABLE_LENGTH=2500;const FSI='⁨';const PDI='⁩';const resolutionChain=new WeakSet();function format(ctx,lang,args,entity){if(typeof entity==='string'){return[{},entity];}
+if(resolutionChain.has(entity)){throw new L10nError('Cyclic reference detected');}
+resolutionChain.add(entity);let rv;try{rv=resolveValue({},ctx,lang,args,entity.value,entity.index);}finally{resolutionChain.delete(entity);}
+return rv;}
+function resolveIdentifier(ctx,lang,args,id){if(KNOWN_MACROS.indexOf(id)>-1){return[{},ctx._getMacro(lang,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==='__proto__'){throw new L10nError('Illegal id: '+id);}
+const entity=ctx._getEntity(lang,id);if(entity){return format(ctx,lang,args,entity);}
+throw new L10nError('Unknown reference: '+id);}
+function subPlaceable(locals,ctx,lang,args,id){let newLocals,value;try{[newLocals,value]=resolveIdentifier(ctx,lang,args,id);}catch(err){return[{error:err},FSI+'{{ '+id+' }}'+PDI];}
+if(typeof value==='number'){const formatter=ctx._getNumberFormatter(lang);return[newLocals,formatter.format(value)];}
+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+')');}
+return[newLocals,FSI+value+PDI];}
+return[{},FSI+'{{ '+id+' }}'+PDI];}
+function interpolate(locals,ctx,lang,args,arr){return arr.reduce(function([localsSeq,valueSeq],cur){if(typeof cur==='string'){return[localsSeq,valueSeq+cur];}else{const[,value]=subPlaceable(locals,ctx,lang,args,cur.name);return[localsSeq,valueSeq+value];}},[locals,'']);}
+function resolveSelector(ctx,lang,args,expr,index){let selectorName;if(index[0].type==='call'&&index[0].expr.type==='prop'&&index[0].expr.expr.name==='cldr'){selectorName='plural';}else{selectorName=index[0].name;}
+const selector=resolveIdentifier(ctx,lang,args,selectorName)[1];if(typeof selector!=='function'){return selector;}
+const argValue=index[0].args?resolveIdentifier(ctx,lang,args,index[0].args[0].name)[1]:undefined;if(selectorName==='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,ctx,lang,args,expr,index){if(!expr){return[locals,expr];}
+if(typeof expr==='string'||typeof expr==='boolean'||typeof expr==='number'){return[locals,expr];}
+if(Array.isArray(expr)){return interpolate(locals,ctx,lang,args,expr);}
+if(index){const selector=resolveSelector(ctx,lang,args,expr,index);if(selector in expr){return resolveValue(locals,ctx,lang,args,expr[selector]);}}
+const defaultKey=expr.__default||'other';if(defaultKey in expr){return resolveValue(locals,ctx,lang,args,expr[defaultKey]);}
+throw new L10nError('Unresolvable value');}
+const 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;}
+const 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';}};function getPluralRule(code){const index=locales2rules[code.replace(/-.*$/,'')];if(!(index in pluralRules)){return function(){return'other';};}
+return pluralRules[index];}
+const L20nIntl=typeof Intl!=='undefined'?Intl:{NumberFormat:function(){return{format:function(v){return v;}};}};let Context=(function(){function Context(env,langs,resIds){_classCallCheck(this,Context);this.langs=langs;this.resIds=resIds;this.env=env;this.emit=(type,evt)=>env.emit(type,evt,this);}
+_createClass(Context,[{key:'_formatTuple',value:function _formatTuple(lang,args,entity,id,key){try{return format(this,lang,args,entity);}catch(err){err.id=key?id+'::'+key:id;err.lang=lang;this.emit('resolveerror',err);return[{error:err},err.id];}}},{key:'_formatEntity',value:function _formatEntity(lang,args,entity,id){const[,value]=this._formatTuple(lang,args,entity,id);const formatted={value,attrs:null};if(entity.attrs){formatted.attrs=Object.create(null);for(let key in entity.attrs){const[,attrValue]=this._formatTuple(lang,args,entity.attrs[key],id,key);formatted.attrs[key]=attrValue;}}
+return formatted;}},{key:'_formatValue',value:function _formatValue(lang,args,entity,id){return this._formatTuple(lang,args,entity,id)[1];}},{key:'fetch',value:function fetch(langs=this.langs){if(langs.length===0){return Promise.resolve(langs);}
+return Promise.all(this.resIds.map(resId=>this.env._getResource(langs[0],resId))).then(()=>langs);}},{key:'_resolve',value:function _resolve(langs,keys,formatter,prevResolved){const lang=langs[0];if(!lang){return reportMissing.call(this,keys,formatter,prevResolved);}
+let hasUnresolved=false;const resolved=keys.map((key,i)=>{if(prevResolved&&prevResolved[i]!==undefined){return prevResolved[i];}
+const[id,args]=Array.isArray(key)?key:[key,undefined];const entity=this._getEntity(lang,id);if(entity){return formatter.call(this,lang,args,entity,id);}
+this.emit('notfounderror',new L10nError('"'+id+'"'+' not found in '+lang.code,id,lang));hasUnresolved=true;});if(!hasUnresolved){return resolved;}
+return this.fetch(langs.slice(1)).then(nextLangs=>this._resolve(nextLangs,keys,formatter,resolved));}},{key:'formatEntities',value:function formatEntities(...keys){return this.fetch().then(langs=>this._resolve(langs,keys,this._formatEntity));}},{key:'formatValues',value:function formatValues(...keys){return this.fetch().then(langs=>this._resolve(langs,keys,this._formatValue));}},{key:'_getEntity',value:function _getEntity(lang,id){const cache=this.env.resCache;for(let i=0,resId;resId=this.resIds[i];i++){const resource=cache.get(resId+lang.code+lang.src);if(resource instanceof L10nError){continue;}
+if(id in resource){return resource[id];}}
+return undefined;}},{key:'_getNumberFormatter',value:function _getNumberFormatter(lang){if(!this.env.numberFormatters){this.env.numberFormatters=new Map();}
+if(!this.env.numberFormatters.has(lang)){const formatter=L20nIntl.NumberFormat(lang);this.env.numberFormatters.set(lang,formatter);return formatter;}
+return this.env.numberFormatters.get(lang);}},{key:'_getMacro',value:function _getMacro(lang,id){switch(id){case'plural':return getPluralRule(lang.code);default:return undefined;}}}]);return Context;})();function reportMissing(keys,formatter,resolved){const missingIds=new Set();keys.forEach((key,i)=>{if(resolved&&resolved[i]!==undefined){return;}
+const id=Array.isArray(key)?key[0]:key;missingIds.add(id);resolved[i]=formatter===this._formatValue?id:{value:id,attrs:null};});this.emit('notfounderror',new L10nError('"'+Array.from(missingIds).join(', ')+'"'+' not found in any language',missingIds));return resolved;}
+var MAX_PLACEABLES=100;var PropertiesParser={patterns:null,entryIds:null,emit: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(emit,source){if(!this.patterns){this.init();}
+this.emit=emit;var entries={};var lines=source.match(this.patterns.entries);if(!lines){return entries;}
+for(var i=0;i<lines.length;i++){var line=lines[i];if(this.patterns.comment.test(line)){continue;}
+while(this.patterns.multiline.test(line)&&i<lines.length){line=line.slice(0,-1)+lines[++i].trim();}
+var entityMatch=line.match(this.patterns.entity);if(entityMatch){try{this.parseEntity(entityMatch[1],entityMatch[2],entries);}catch(e){if(!this.emit){throw e;}}}}
+return entries;},parseEntity:function(id,value,entries){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 this.error('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 this.error('Attribute can\'t start with "$"');}}else{attr=null;}
+this.setEntityValue(name,attr,key,this.unescapeString(value),entries);},setEntityValue:function(id,attr,key,rawValue,entries){var value=rawValue.indexOf('{{')>-1?this.parseString(rawValue):rawValue;var isSimpleValue=typeof value==='string';var root=entries;var isSimpleNode=typeof entries[id]==='string';if(!entries[id]&&(attr||key||!isSimpleValue)){entries[id]=Object.create(null);isSimpleNode=false;}
+if(attr){if(isSimpleNode){const val=entries[id];entries[id]=Object.create(null);entries[id].value=val;}
+if(!entries[id].attrs){entries[id].attrs=Object.create(null);}
+if(!entries[id].attrs&&!isSimpleValue){entries[id].attrs[attr]=Object.create(null);}
+root=entries[id].attrs;id=attr;}
+if(key){isSimpleNode=false;if(typeof root[id]==='string'){const val=root[id];root[id]=Object.create(null);root[id].index=this.parseIndex(val);root[id].value=Object.create(null);}
+root=root[id].value;id=key;isSimpleValue=true;}
+if(isSimpleValue){if(id in root){throw this.error('Duplicated id: '+id);}
+root[id]=value;}else{if(!root[id]){root[id]=Object.create(null);}
+root[id].value=value;}},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 this.error('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({type:'idOrVar',name: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 String.fromCodePoint(parseInt(token,16));});},parseIndex:function(str){var match=str.match(this.patterns.index);if(!match){throw new L10nError('Malformed index');}
+if(match[2]){return[{type:'call',expr:{type:'prop',expr:{type:'glob',name:'cldr'},prop:'plural',cmpt:false},args:[{type:'idOrVar',name:match[2]}]}];}else{return[{type:'idOrVar',name:match[1]}];}},error:function(msg,type='parsererror'){const err=new L10nError(msg);if(this.emit){this.emit(type,err);}
+return err;}};const MAX_PLACEABLES$1=100;var L20nParser={parse:function(emit,string){this._source=string;this._index=0;this._length=string.length;this.entries=Object.create(null);this.emit=emit;return this.getResource();},getResource:function(){this.getWS();while(this._index<this._length){try{this.getEntry();}catch(e){if(e instanceof L10nError){this.getJunkEntry();if(!this.emit){throw e;}}else{throw e;}}
+if(this._index<this._length){this.getWS();}}
+return this.entries;},getEntry:function(){if(this._source[this._index]==='<'){++this._index;const id=this.getIdentifier();if(this._source[this._index]==='['){++this._index;return this.getEntity(id,this.getItemList(this.getExpression,']'));}
+return this.getEntity(id);}
+if(this._source.startsWith('/*',this._index)){return this.getComment();}
+throw this.error('Invalid entry');},getEntity:function(id,index){if(!this.getRequiredWS()){throw this.error('Expected white space');}
+const ch=this._source[this._index];const hasIndex=index!==undefined;const value=this.getValue(ch,hasIndex,hasIndex);let attrs;if(value===undefined){if(ch==='>'){throw this.error('Expected ">"');}
+attrs=this.getAttributes();}else{const ws1=this.getRequiredWS();if(this._source[this._index]!=='>'){if(!ws1){throw this.error('Expected ">"');}
+attrs=this.getAttributes();}}
+++this._index;if(id in this.entries){throw this.error('Duplicate entry ID "'+id,'duplicateerror');}
+if(!attrs&&!index&&typeof value==='string'){this.entries[id]=value;}else{this.entries[id]={value,attrs,index};}},getValue:function(ch=this._source[this._index],index=false,required=true){switch(ch){case'\'':case'"':return this.getString(ch,1);case'{':return this.getHash(index);}
+if(required){throw this.error('Unknown value type');}
+return;},getWS:function(){let cc=this._source.charCodeAt(this._index);while(cc===32||cc===10||cc===9||cc===13){cc=this._source.charCodeAt(++this._index);}},getRequiredWS:function(){const pos=this._index;let cc=this._source.charCodeAt(pos);while(cc===32||cc===10||cc===9||cc===13){cc=this._source.charCodeAt(++this._index);}
+return this._index!==pos;},getIdentifier:function(){const start=this._index;let cc=this._source.charCodeAt(this._index);if(cc>=97&&cc<=122||cc>=65&&cc<=90||cc===95){cc=this._source.charCodeAt(++this._index);}else{throw this.error('Identifier has to start with [a-zA-Z_]');}
+while(cc>=97&&cc<=122||cc>=65&&cc<=90||cc>=48&&cc<=57||cc===95){cc=this._source.charCodeAt(++this._index);}
+return this._source.slice(start,this._index);},getUnicodeChar:function(){for(let i=0;i<4;i++){let cc=this._source.charCodeAt(++this._index);if(cc>96&&cc<103||cc>64&&cc<71||cc>47&&cc<58){continue;}
+throw this.error('Illegal unicode escape sequence');}
+this._index++;return String.fromCharCode(parseInt(this._source.slice(this._index-4,this._index),16));},stringRe:/"|'|{{|\\/g,getString:function(opchar,opcharLen){const body=[];let placeables=0;this._index+=opcharLen;const start=this._index;let bufStart=start;let buf='';while(true){this.stringRe.lastIndex=this._index;const match=this.stringRe.exec(this._source);if(!match){throw this.error('Unclosed string literal');}
+if(match[0]==='"'||match[0]==='\''){if(match[0]!==opchar){this._index+=opcharLen;continue;}
+this._index=match.index+opcharLen;break;}
+if(match[0]==='{{'){if(placeables>MAX_PLACEABLES$1-1){throw this.error('Too many placeables, maximum allowed is '+MAX_PLACEABLES$1);}
+placeables++;if(match.index>bufStart||buf.length>0){body.push(buf+this._source.slice(bufStart,match.index));buf='';}
+this._index=match.index+2;this.getWS();body.push(this.getExpression());this.getWS();this._index+=2;bufStart=this._index;continue;}
+if(match[0]==='\\'){this._index=match.index+1;const ch2=this._source[this._index];if(ch2==='u'){buf+=this._source.slice(bufStart,match.index)+this.getUnicodeChar();}else if(ch2===opchar||ch2==='\\'){buf+=this._source.slice(bufStart,match.index)+ch2;this._index++;}else if(this._source.startsWith('{{',this._index)){buf+=this._source.slice(bufStart,match.index)+'{{';this._index+=2;}else{throw this.error('Illegal escape sequence');}
+bufStart=this._index;}}
+if(body.length===0){return buf+this._source.slice(bufStart,this._index-opcharLen);}
+if(this._index-opcharLen>bufStart||buf.length>0){body.push(buf+this._source.slice(bufStart,this._index-opcharLen));}
+return body;},getAttributes:function(){const attrs=Object.create(null);while(true){this.getAttribute(attrs);const ws1=this.getRequiredWS();const ch=this._source.charAt(this._index);if(ch==='>'){break;}else if(!ws1){throw this.error('Expected ">"');}}
+return attrs;},getAttribute:function(attrs){const key=this.getIdentifier();let index;if(this._source[this._index]==='['){++this._index;this.getWS();index=this.getItemList(this.getExpression,']');}
+this.getWS();if(this._source[this._index]!==':'){throw this.error('Expected ":"');}
+++this._index;this.getWS();const hasIndex=index!==undefined;const value=this.getValue(undefined,hasIndex);if(key in attrs){throw this.error('Duplicate attribute "'+key,'duplicateerror');}
+if(!index&&typeof value==='string'){attrs[key]=value;}else{attrs[key]={value,index};}},getHash:function(index){const items=Object.create(null);++this._index;this.getWS();let defKey;while(true){const[key,value,def]=this.getHashItem();items[key]=value;if(def){if(defKey){throw this.error('Default item redefinition forbidden');}
+defKey=key;}
+this.getWS();const comma=this._source[this._index]===',';if(comma){++this._index;this.getWS();}
+if(this._source[this._index]==='}'){++this._index;break;}
+if(!comma){throw this.error('Expected "}"');}}
+if(defKey){items.__default=defKey;}else if(!index){throw this.error('Unresolvable Hash Value');}
+return items;},getHashItem:function(){let defItem=false;if(this._source[this._index]==='*'){++this._index;defItem=true;}
+const key=this.getIdentifier();this.getWS();if(this._source[this._index]!==':'){throw this.error('Expected ":"');}
+++this._index;this.getWS();return[key,this.getValue(),defItem];},getComment:function(){this._index+=2;const start=this._index;const end=this._source.indexOf('*/',start);if(end===-1){throw this.error('Comment without a closing tag');}
+this._index=end+2;},getExpression:function(){let exp=this.getPrimaryExpression();while(true){let ch=this._source[this._index];if(ch==='.'||ch==='['){++this._index;exp=this.getPropertyExpression(exp,ch==='[');}else if(ch==='('){++this._index;exp=this.getCallExpression(exp);}else{break;}}
+return exp;},getPropertyExpression:function(idref,computed){let exp;if(computed){this.getWS();exp=this.getExpression();this.getWS();if(this._source[this._index]!==']'){throw this.error('Expected "]"');}
+++this._index;}else{exp=this.getIdentifier();}
+return{type:'prop',expr:idref,prop:exp,cmpt:computed};},getCallExpression:function(callee){this.getWS();return{type:'call',expr:callee,args:this.getItemList(this.getExpression,')')};},getPrimaryExpression:function(){const ch=this._source[this._index];switch(ch){case'$':++this._index;return{type:'var',name:this.getIdentifier()};case'@':++this._index;return{type:'glob',name:this.getIdentifier()};default:return{type:'id',name:this.getIdentifier()};}},getItemList:function(callback,closeChar){const items=[];let closed=false;this.getWS();if(this._source[this._index]===closeChar){++this._index;closed=true;}
+while(!closed){items.push(callback.call(this));this.getWS();let ch=this._source.charAt(this._index);switch(ch){case',':++this._index;this.getWS();break;case closeChar:++this._index;closed=true;break;default:throw this.error('Expected "," or "'+closeChar+'"');}}
+return items;},getJunkEntry:function(){const pos=this._index;let nextEntity=this._source.indexOf('<',pos);let nextComment=this._source.indexOf('/*',pos);if(nextEntity===-1){nextEntity=this._length;}
+if(nextComment===-1){nextComment=this._length;}
+let nextEntry=Math.min(nextEntity,nextComment);this._index=nextEntry;},error:function(message,type='parsererror'){const pos=this._index;let start=this._source.lastIndexOf('<',pos-1);const lastClose=this._source.lastIndexOf('>',pos-1);start=lastClose>start?lastClose+1:start;const context=this._source.slice(start,pos+10);const msg=message+' at pos '+pos+': `'+context+'`';const err=new L10nError(msg);if(this.emit){this.emit(type,err);}
+return err;}};function walkEntry(entry,fn){if(typeof entry==='string'){return fn(entry);}
+const newEntry=Object.create(null);if(entry.value){newEntry.value=walkValue(entry.value,fn);}
+if(entry.index){newEntry.index=entry.index;}
+if(entry.attrs){newEntry.attrs=Object.create(null);for(let key in entry.attrs){newEntry.attrs[key]=walkEntry(entry.attrs[key],fn);}}
+return newEntry;}
+function walkValue(value,fn){if(typeof value==='string'){return fn(value);}
+if(value.type){return value;}
+const newValue=Array.isArray(value)?[]:Object.create(null);const keys=Object.keys(value);for(let i=0,key;key=keys[i];i++){newValue[key]=walkValue(value[key],fn);}
+return newValue;}
+function createGetter(id,name){let _pseudo=null;return function getPseudo(){if(_pseudo){return _pseudo;}
+const reAlphas=/[a-zA-Z]/g;const reVowels=/[aeiouAEIOU]/g;const reWords=/[^\W0-9_]+/g;const reExcluded=/(%[EO]?\w|\{\s*.+?\s*\}|&[#\w]+;|<\s*.+?\s*>)/;const charMaps={'fr-x-psaccent':'ȦƁƇḒḖƑƓĦĪĴĶĿḾȠǾƤɊŘŞŦŬṼẆẊẎẐ[\\]^_`ȧƀƈḓḗƒɠħīĵķŀḿƞǿƥɋřşŧŭṽẇẋẏẑ','ar-x-psbidi':'∀ԐↃpƎɟפHIſӼ˥WNOԀÒᴚS⊥∩ɅＭXʎZ[\\]ᵥ_,ɐqɔpǝɟƃɥıɾʞʅɯuodbɹsʇnʌʍxʎz'};const mods={'fr-x-psaccent':val=>val.replace(reVowels,match=>match+match.toLowerCase()),'ar-x-psbidi':val=>val.replace(reWords,match=>'‮'+match+'‬')};const replaceChars=(map,val)=>val.replace(reAlphas,match=>map.charAt(match.charCodeAt(0)-65));const transform=val=>replaceChars(charMaps[id],mods[id](val));const apply=(fn,val)=>{if(!val){return val;}
+const parts=val.split(reExcluded);const modified=parts.map(function(part){if(reExcluded.test(part)){return part;}
+return fn(part);});return modified.join('');};return _pseudo={name:transform(name),process:str=>apply(transform,str)};};}
+const pseudo=Object.defineProperties(Object.create(null),{'fr-x-psaccent':{enumerable:true,get:createGetter('fr-x-psaccent','Runtime Accented')},'ar-x-psbidi':{enumerable:true,get:createGetter('ar-x-psbidi','Runtime Bidi')}});let Env=(function(){function Env(fetchResource){_classCallCheck(this,Env);this.fetchResource=fetchResource;this.resCache=new Map();this.resRefs=new Map();this.numberFormatters=null;this.parsers={properties:PropertiesParser,l20n:L20nParser};const listeners={};this.emit=emit.bind(this,listeners);this.addEventListener=addEventListener.bind(this,listeners);this.removeEventListener=removeEventListener.bind(this,listeners);}
+_createClass(Env,[{key:'createContext',value:function createContext(langs,resIds){const ctx=new Context(this,langs,resIds);resIds.forEach(resId=>{const usedBy=this.resRefs.get(resId)||0;this.resRefs.set(resId,usedBy+1);});return ctx;}},{key:'destroyContext',value:function destroyContext(ctx){ctx.resIds.forEach(resId=>{const usedBy=this.resRefs.get(resId)||0;if(usedBy>1){return this.resRefs.set(resId,usedBy-1);}
+this.resRefs.delete(resId);this.resCache.forEach((val,key)=>key.startsWith(resId)?this.resCache.delete(key):null);});}},{key:'_parse',value:function _parse(syntax,lang,data){const parser=this.parsers[syntax];if(!parser){return data;}
+const emit=(type,err)=>this.emit(type,amendError(lang,err));return parser.parse.call(parser,emit,data);}},{key:'_create',value:function _create(lang,entries){if(lang.src!=='pseudo'){return entries;}
+const pseudoentries=Object.create(null);for(let key in entries){pseudoentries[key]=walkEntry(entries[key],pseudo[lang.code].process);}
+return pseudoentries;}},{key:'_getResource',value:function _getResource(lang,res){const cache=this.resCache;const id=res+lang.code+lang.src;if(cache.has(id)){return cache.get(id);}
+const syntax=res.substr(res.lastIndexOf('.')+1);const saveEntries=data=>{const entries=this._parse(syntax,lang,data);cache.set(id,this._create(lang,entries));};const recover=err=>{err.lang=lang;this.emit('fetcherror',err);cache.set(id,err);};const langToFetch=lang.src==='pseudo'?{code:'en-US',src:'app',ver:lang.ver}:lang;const resource=this.fetchResource(res,langToFetch).then(saveEntries,recover);cache.set(id,resource);return resource;}}]);return Env;})();function amendError(lang,err){err.lang=lang;return err;}
+function prioritizeLocales(def,availableLangs,requested){let supportedLocale;for(let i=0;i<requested.length;i++){const locale=requested[i];if(availableLangs.indexOf(locale)!==-1){supportedLocale=locale;break;}}
+if(!supportedLocale||supportedLocale===def){return[def];}
+return[supportedLocale,def];}
+function negotiateLanguages({appVersion,defaultLang,availableLangs},additionalLangs,prevLangs,requestedLangs){const allAvailableLangs=Object.keys(availableLangs).concat(Object.keys(additionalLangs)).concat(Object.keys(pseudo));const newLangs=prioritizeLocales(defaultLang,allAvailableLangs,requestedLangs);const langs=newLangs.map(code=>({code:code,src:getLangSource(appVersion,availableLangs,additionalLangs,code),ver:appVersion}));return{langs,haveChanged:!arrEqual(prevLangs,newLangs)};}
+function arrEqual(arr1,arr2){return arr1.length===arr2.length&&arr1.every((elem,i)=>elem===arr2[i]);}
+function getMatchingLangpack(appVersion,langpacks){for(let i=0,langpack;langpack=langpacks[i];i++){if(langpack.target===appVersion){return langpack;}}
+return null;}
+function getLangSource(appVersion,availableLangs,additionalLangs,code){if(additionalLangs&&additionalLangs[code]){const lp=getMatchingLangpack(appVersion,additionalLangs[code]);if(lp&&(!(code in availableLangs)||parseInt(lp.revision)>availableLangs[code])){return'extra';}}
+if(code in pseudo&&!(code in availableLangs)){return'pseudo';}
+return'app';}
+let Remote=(function(){function Remote(fetchResource,broadcast){_classCallCheck(this,Remote);this.broadcast=broadcast;this.env=new Env(fetchResource);this.ctxs=new Map();}
+_createClass(Remote,[{key:'registerView',value:function registerView(view,resources,meta,additionalLangs,requestedLangs){const{langs}=negotiateLanguages(meta,additionalLangs,[],requestedLangs);this.ctxs.set(view,this.env.createContext(langs,resources));return langs;}},{key:'unregisterView',value:function unregisterView(view){this.ctxs.delete(view);return true;}},{key:'formatEntities',value:function formatEntities(view,keys){return this.ctxs.get(view).formatEntities(...keys);}},{key:'formatValues',value:function formatValues(view,keys){return this.ctxs.get(view).formatValues(...keys);}},{key:'changeLanguages',value:function changeLanguages(view,meta,additionalLangs,requestedLangs){const oldCtx=this.ctxs.get(view);const prevLangs=oldCtx.langs;const newLangs=negotiateLanguages(meta,additionalLangs,prevLangs,requestedLangs);this.ctxs.set(view,this.env.createContext(newLangs.langs,oldCtx.resIds));return newLangs;}},{key:'requestLanguages',value:function requestLanguages(requestedLangs){this.broadcast('languageschangerequest',requestedLangs);}},{key:'getName',value:function getName(code){return pseudo[code].name;}},{key:'processString',value:function processString(code,str){return pseudo[code].process(str);}}]);return Remote;})();const observerConfig={attributes:true,characterData:false,childList:true,subtree:true,attributeFilter:['data-l10n-id','data-l10n-args']};const observers=new WeakMap();function initMutationObserver(view){observers.set(view,{roots:new Set(),observer:new MutationObserver(mutations=>translateMutations(view,mutations))});}
+function translateRoots(view){return Promise.all([...observers.get(view).roots].map(root=>_translateFragment(view,root)));}
+function observe(view,root){const obs=observers.get(view);if(obs){obs.roots.add(root);obs.observer.observe(root,observerConfig);}}
+function disconnect(view,root,allRoots){const obs=observers.get(view);if(obs){obs.observer.disconnect();if(allRoots){return;}
+obs.roots.delete(root);obs.roots.forEach(other=>obs.observer.observe(other,observerConfig));}}
+function reconnect(view){const obs=observers.get(view);if(obs){obs.roots.forEach(root=>obs.observer.observe(root,observerConfig));}}
+const reOverlay=/<|&#?\w+;/;const 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']}};function overlayElement(element,translation){const value=translation.value;if(typeof value==='string'){if(!reOverlay.test(value)){element.textContent=value;}else{const tmpl=element.ownerDocument.createElement('template');tmpl.innerHTML=value;overlay(element,tmpl.content);}}
+for(let key in translation.attrs){const attrName=camelCaseToDashed(key);if(isAttrAllowed({name:attrName},element)){element.setAttribute(attrName,translation.attrs[key]);}}}
+function overlay(sourceElement,translationElement){const result=translationElement.ownerDocument.createDocumentFragment();let k,attr;let childElement;while(childElement=translationElement.childNodes[0]){translationElement.removeChild(childElement);if(childElement.nodeType===childElement.TEXT_NODE){result.appendChild(childElement);continue;}
+const index=getIndexOfType(childElement);const sourceChild=getNthElementOfType(sourceElement,childElement,index);if(sourceChild){overlay(sourceChild,childElement);result.appendChild(sourceChild);continue;}
+if(isElementAllowed(childElement)){const sanitizedChild=childElement.ownerDocument.createElement(childElement.nodeName);overlay(sanitizedChild,childElement);result.appendChild(sanitizedChild);continue;}
+result.appendChild(translationElement.ownerDocument.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){const attrName=attr.name.toLowerCase();const 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'){const type=element.type.toLowerCase();if(type==='submit'||type==='button'||type==='reset'){return true;}}
+return false;}
+function getNthElementOfType(context,element,index){let nthOfType=0;for(let i=0,child;child=context.children[i];i++){if(child.nodeType===child.ELEMENT_NODE&&child.tagName===element.tagName){if(nthOfType===index){return child;}
+nthOfType++;}}
+return null;}
+function getIndexOfType(element){let index=0;let child;while(child=element.previousElementSibling){if(child.tagName===element.tagName){index++;}}
+return index;}
+function camelCaseToDashed(string){if(string==='ariaValueText'){return'aria-valuetext';}
+return string.replace(/[A-Z]/g,function(match){return'-'+match.toLowerCase();}).replace(/^-/,'');}
+const reHtml=/[&<>]/g;const htmlEntities={'&':'&amp;','<':'&lt;','>':'&gt;'};function setAttributes(element,id,args){element.setAttribute('data-l10n-id',id);if(args){element.setAttribute('data-l10n-args',JSON.stringify(args));}}
+function getAttributes(element){return{id:element.getAttribute('data-l10n-id'),args:JSON.parse(element.getAttribute('data-l10n-args'))};}
+function getTranslatables(element){const nodes=Array.from(element.querySelectorAll('[data-l10n-id]'));if(typeof element.hasAttribute==='function'&&element.hasAttribute('data-l10n-id')){nodes.push(element);}
+return nodes;}
+function translateMutations(view,mutations){const targets=new Set();for(let mutation of mutations){switch(mutation.type){case'attributes':targets.add(mutation.target);break;case'childList':for(let addedNode of mutation.addedNodes){if(addedNode.nodeType===addedNode.ELEMENT_NODE){if(addedNode.childElementCount){getTranslatables(addedNode).forEach(targets.add.bind(targets));}else{if(addedNode.hasAttribute('data-l10n-id')){targets.add(addedNode);}}}}
+break;}}
+if(targets.size===0){return;}
+translateElements(view,Array.from(targets));}
+function _translateFragment(view,frag){return translateElements(view,getTranslatables(frag));}
+function getElementsTranslation(view,elems){const keys=elems.map(elem=>{const id=elem.getAttribute('data-l10n-id');const args=elem.getAttribute('data-l10n-args');return args?[id,JSON.parse(args.replace(reHtml,match=>htmlEntities[match]))]:id;});return view.formatEntities(...keys);}
+function translateElements(view,elements){return getElementsTranslation(view,elements).then(translations=>applyTranslations(view,elements,translations));}
+function applyTranslations(view,elems,translations){disconnect(view,null,true);for(let i=0;i<elems.length;i++){overlayElement(elems[i],translations[i]);}
+reconnect(view);}
+if(typeof NodeList==='function'&&!NodeList.prototype[Symbol.iterator]){NodeList.prototype[Symbol.iterator]=Array.prototype[Symbol.iterator];}
+function documentReady(){if(document.readyState!=='loading'){return Promise.resolve();}
+return new Promise(resolve=>{document.addEventListener('readystatechange',function onrsc(){document.removeEventListener('readystatechange',onrsc);resolve();});});}
+function getDirection(code){const tag=code.split('-')[0];return['ar','he','fa','ps','ur'].indexOf(tag)>=0?'rtl':'ltr';}
+if(navigator.languages===undefined){navigator.languages=[navigator.language];}
+function getResourceLinks(head){return Array.prototype.map.call(head.querySelectorAll('link[rel="localization"]'),el=>el.getAttribute('href'));}
+function getMeta(head){let availableLangs=Object.create(null);let defaultLang=null;let appVersion=null;const metas=Array.from(head.querySelectorAll('meta[name="availableLanguages"],'+'meta[name="defaultLanguage"],'+'meta[name="appVersion"]'));for(let meta of metas){const name=meta.getAttribute('name');const content=meta.getAttribute('content').trim();switch(name){case'availableLanguages':availableLangs=getLangRevisionMap(availableLangs,content);break;case'defaultLanguage':const[lang,rev]=getLangRevisionTuple(content);defaultLang=lang;if(!(lang in availableLangs)){availableLangs[lang]=rev;}
+break;case'appVersion':appVersion=content;}}
+return{defaultLang,availableLangs,appVersion};}
+function getLangRevisionMap(seq,str){return str.split(',').reduce((seq,cur)=>{const[lang,rev]=getLangRevisionTuple(cur);seq[lang]=rev;return seq;},seq);}
+function getLangRevisionTuple(str){const[lang,rev]=str.trim().split(':');return[lang,parseInt(rev)];}
+const viewProps=new WeakMap();let View=(function(){function View(client,doc){_classCallCheck(this,View);this.pseudo={'fr-x-psaccent':createPseudo(this,'fr-x-psaccent'),'ar-x-psbidi':createPseudo(this,'ar-x-psbidi')};const initialized=documentReady().then(()=>init(this,client));this._interactive=initialized.then(()=>client);this.ready=initialized.then(langs=>translateView(this,langs));initMutationObserver(this);viewProps.set(this,{doc:doc,ready:false});client.on('languageschangerequest',requestedLangs=>this.requestLanguages(requestedLangs));}
+_createClass(View,[{key:'requestLanguages',value:function requestLanguages(requestedLangs,isGlobal){const method=isGlobal?client=>client.method('requestLanguages',requestedLangs):client=>changeLanguages(this,client,requestedLangs);return this._interactive.then(method);}},{key:'handleEvent',value:function handleEvent(){return this.requestLanguages(navigator.languages);}},{key:'formatEntities',value:function formatEntities(...keys){return this._interactive.then(client=>client.method('formatEntities',client.id,keys));}},{key:'formatValue',value:function formatValue(id,args){return this._interactive.then(client=>client.method('formatValues',client.id,[[id,args]])).then(values=>values[0]);}},{key:'formatValues',value:function formatValues(...keys){return this._interactive.then(client=>client.method('formatValues',client.id,keys));}},{key:'translateFragment',value:function translateFragment(frag){return _translateFragment(this,frag);}},{key:'observeRoot',value:function observeRoot(root){observe(this,root);}},{key:'disconnectRoot',value:function disconnectRoot(root){disconnect(this,root);}}]);return View;})();View.prototype.setAttributes=setAttributes;View.prototype.getAttributes=getAttributes;function createPseudo(view,code){return{getName:()=>view._interactive.then(client=>client.method('getName',code)),processString:str=>view._interactive.then(client=>client.method('processString',code,str))};}
+function init(view,client){const doc=viewProps.get(view).doc;const resources=getResourceLinks(doc.head);const meta=getMeta(doc.head);view.observeRoot(doc.documentElement);return getAdditionalLanguages().then(additionalLangs=>client.method('registerView',client.id,resources,meta,additionalLangs,navigator.languages));}
+function changeLanguages(view,client,requestedLangs){const doc=viewProps.get(view).doc;const meta=getMeta(doc.head);return getAdditionalLanguages().then(additionalLangs=>client.method('changeLanguages',client.id,meta,additionalLangs,requestedLangs)).then(({langs,haveChanged})=>haveChanged?translateView(view,langs):undefined);}
+function getAdditionalLanguages(){if(navigator.mozApps&&navigator.mozApps.getAdditionalLanguages){return navigator.mozApps.getAdditionalLanguages().catch(()=>Object.create(null));}
+return Promise.resolve(Object.create(null));}
+function translateView(view,langs){const props=viewProps.get(view);const html=props.doc.documentElement;if(props.ready){return translateRoots(view).then(()=>setAllAndEmit(html,langs));}
+const translated=langs[0].code===html.getAttribute('lang')?Promise.resolve():translateRoots(view).then(()=>setLangDir(html,langs));return translated.then(()=>{setLangs(html,langs);props.ready=true;});}
+function setLangs(html,langs){const codes=langs.map(lang=>lang.code);html.setAttribute('langs',codes.join(' '));}
+function setLangDir(html,langs){const code=langs[0].code;html.setAttribute('lang',code);html.setAttribute('dir',getDirection(code));}
+function setAllAndEmit(html,langs){setLangDir(html,langs);setLangs(html,langs);html.parentNode.dispatchEvent(new CustomEvent('DOMRetranslated',{bubbles:false,cancelable:false}));}
+const remote=new Remote(fetchResource,broadcast);const client=new Client(remote);document.l10n=new View(client,document);window.addEventListener('languagechange',document.l10n);document.addEventListener('additionallanguageschange',document.l10n);navigator.mozL10n={setAttributes:document.l10n.setAttributes,getAttributes:document.l10n.getAttributes,formatValue:(...args)=>document.l10n.formatValue(...args),translateFragment:(...args)=>document.l10n.translateFragment(...args),once:cb=>document.l10n.ready.then(cb),ready:cb=>document.l10n.ready.then(()=>{document.addEventListener('DOMRetranslated',cb);cb();})};})();

assets/webapps/clock.gaiamobile.org/shared/js/intl_helper.js

@@ -0,0 +1,16 @@
+;;(function(global){'use strict';const helperCache=new Map();const knownObjects={datetime:{create:function(options){const customOptions=Object.assign({},options);if(options.hour){customOptions.hour12=navigator.mozHour12;}
+return Intl.DateTimeFormat(navigator.languages,customOptions);},isAffected:function(obj,reason){if(['languagechange','moztimechange'].includes(reason)){return true;}
+if(reason==='timeformatchange'){return'hour'in obj.options;}
+return false;}},mozdatetime:{create:function(options){const customOptions=Object.assign({},options);if(options.hour){customOptions.hour12=navigator.mozHour12;}
+return mozIntl.DateTimeFormat(navigator.languages,customOptions);},isAffected:function(obj,reason){if(['languagechange','moztimechange'].includes(reason)){return true;}
+if(reason==='timeformatchange'){return'hour'in obj.options;}
+return false;}},mozduration:{create:function(options){return mozIntl.DurationFormat(navigator.languages,options);},isAffected:function(obj,reason){return reason==='languagechange';}},number:{create:function(options){return Intl.NumberFormat(navigator.languages,options);},isAffected:function(obj,reason){return reason==='languagechange';}},collator:{create:function(options){return Intl.Collator(navigator.languages,options);},isAffected:function(obj,reason){return reason==='languagechange';}},};global.IntlHelper={define:function(name,type,options){if(!knownObjects.hasOwnProperty(type)){throw new Error('Unknown type: '+type);}
+if(helperCache.has(name)){throw new Error('Intl Object with name "'+name+'" already exists');}
+helperCache.set(name,{options,type,intlObject:undefined,listeners:new Set()});},get:function(name){if(!helperCache.has(name)){throw new Error('Intl Object with name "'+name+'" is not defined');}
+const obj=helperCache.get(name);if(!knownObjects.hasOwnProperty(obj.type)){throw new Error('Unknown type: '+obj.type);}
+if(obj.intlObject===undefined){obj.intlObject=knownObjects[obj.type].create(obj.options);}
+return obj.intlObject;},observe:function(names,cb){if(typeof names==='string'){names=[names];}
+for(var name of names){if(!helperCache.has(name)){throw new Error('Intl Object with name "'+name+'" is not defined');}
+const obj=helperCache.get(name);obj.listeners.add(cb);}},unobserve:function(name,cb){const obj=helperCache.get(name);obj.listeners.delete(cb);},_fireObservers:function(affectedObjects,...args){const affectedCallbacks=new Set();affectedObjects.forEach(obj=>obj.listeners.forEach(cb=>affectedCallbacks.add(cb)));affectedCallbacks.forEach(cb=>{try{cb(...args);}catch(e){console.error('Error in callback: '+e.toString());console.error(e.stack);}});},handleEvent:function(evt){const affectedObjects=resetObjects(evt.type);if(evt.type==='languagechange'&&navigator.mozL10n){waitOnDOMLocalized(()=>global.IntlHelper._fireObservers(affectedObjects));}else{global.IntlHelper._fireObservers(affectedObjects);}},_resetObjectCache:function(){helperCache.clear();}};function waitOnDOMLocalized(cb){const resolver=()=>{document.removeEventListener('DOMRetranslated',resolver);window.removeEventListener('localized',resolver);cb();};document.addEventListener('DOMRetranslated',resolver,false);window.addEventListener('localized',resolver,false);}
+function resetObjects(reason){const affectedObjects=new Set();helperCache.forEach((obj,name)=>{if(knownObjects[obj.type].isAffected(obj,reason)){obj.intlObject=undefined;affectedObjects.add(obj);}});return affectedObjects;}
+window.addEventListener('timeformatchange',global.IntlHelper,false);window.addEventListener('languagechange',global.IntlHelper,false);window.addEventListener('moztimechange',global.IntlHelper,false);})(this);

assets/webapps/clock.gaiamobile.org/shared/js/moz_intl.js

@@ -0,0 +1,35 @@
+;;(function(global){'use strict';global.mozIntl={formatList:function(list){return navigator.mozL10n.formatValue('listSeparator_middle').then(sep=>list.join(sep));},DateTimeFormat:function(locales,options){const resolvedOptions=Object.assign({},options);if(resolvedOptions.dayperiod){if(resolvedOptions.hour===undefined){resolvedOptions.hour='numeric';}}
+if(resolvedOptions.hour!==undefined&&resolvedOptions.hour12===undefined){resolvedOptions.hour12=navigator.mozHour12;}
+if(resolvedOptions.dayperiod===undefined&&resolvedOptions.hour12===true){resolvedOptions.dayperiod=true;}
+var intlFormat=new Intl.DateTimeFormat(locales,resolvedOptions);resolvedOptions.locale=intlFormat.resolvedOptions().locale;resolvedOptions.hour12=intlFormat.resolvedOptions().hour12;var hourFormatter;if(resolvedOptions.dayperiod!==undefined&&resolvedOptions.hour12===true){hourFormatter=Intl.DateTimeFormat(locales,{hour:'numeric',hour12:false});}
+return{resolvedOptions(){return resolvedOptions;},format:function(date,tokenFormats){var dayPeriod;var string=intlFormat.format(date);if(resolvedOptions.dayperiod===false&&resolvedOptions.hour12===true){dayPeriod=getDayPeriodTokenForDate(date,hourFormatter);string=string.replace(dayPeriod,'').trim();}else if(resolvedOptions.dayperiod===true&&options.hour===undefined){dayPeriod=getDayPeriodTokenForDate(date,hourFormatter);const hour=date.toLocaleString(navigator.languages,{hour12:true,hour:'numeric'}).replace(dayPeriod,'').trim();string=string.replace(hour,'').trim();}
+for(var token in tokenFormats){if(token==='dayperiod'&&resolvedOptions.hour12===false){continue;}
+const localOptions={[token]:resolvedOptions[token],};var formatter=global.mozIntl.DateTimeFormat(navigator.languages,localOptions);var tokenString=formatter.format(date);string=string.replace(tokenString,tokenFormats[token]);}
+return string;},};},calendarInfo:function(token){switch(token){case'firstDayOfTheWeek':return navigator.mozL10n.formatValue('firstDayOfTheWeek').then(firstDayOfTheWeek=>parseInt(firstDayOfTheWeek)%7);default:throw new Error('Unknown token: '+token);}},DurationFormat:function(locales=navigator.languages,options={}){const resolvedOptions=Object.assign({locale:locales[0],maxUnit:'hour',minUnit:'second',},options);const numFormatter=Intl.NumberFormat(locales,{style:'decimal',useGrouping:false,minimumIntegerDigits:2});const maxUnitIdx=getDurationUnitIdx(resolvedOptions.maxUnit,0);const minUnitIdx=getDurationUnitIdx(resolvedOptions.minUnit,durationFormatOrder.length-1);return navigator.mozL10n.formatValue('durationPattern').then(fmt=>({resolvedOptions:function(){return resolvedOptions;},format:function(input){const minValue=durationFormatElements[resolvedOptions.minUnit].value;input=Math.round(input/minValue)*minValue;const duration=splitIntoTimeUnits(input,maxUnitIdx,minUnitIdx);var string=trimDurationPattern(fmt,resolvedOptions.maxUnit,resolvedOptions.minUnit);for(var unit in duration){const token=durationFormatElements[unit].token;string=string.replace(token,numFormatter.format(duration[unit]));}
+if(input<0){return'-'+string;}
+return string;}}));},RelativeTimeFormat:function(locales,options){return{resolvedOptions:function(){return options;},format:function(x){const{unit,value}=relativeTimeFormatId(x,options);return navigator.mozL10n.formatValue(unit,{value});},};},UnitFormat:function(locales,options){const unitGroup=getUnitFormatGroupName(options.unit);if(unitGroup===undefined){throw new RangeError(`invalid value ${options.unit} for option unit`);}
+if(!unitFormatGroups[unitGroup].styles.includes(options.style)){throw new RangeError(`invalid value ${options.style} for option style`);}
+const unit=`${unitGroup}-${options.unit}-${options.style}`;return{format:function(x){return document.l10n.formatValue(unit,{value:x});},};},_gaia:{relativePart:function(milliseconds){const units=computeTimeUnits(milliseconds);const unit=getBestMatchUnit(units);return{unit:unit+'s',value:Math.abs(units[unit])};},RelativeDate:function(locales,options){const style=options&&options.style||'long';const maxFormatter=Intl.DateTimeFormat(locales,{year:'numeric',month:'numeric',day:'numeric'});const relativeFmtOptions={unit:'bestFit',style:style,minUnit:'minute',};return{format:function(time,maxDiff){maxDiff=maxDiff||86400*10;const secDiff=(Date.now()-time)/1000;if(isNaN(secDiff)){return navigator.mozL10n.formatValue('incorrectDate');}
+if(secDiff>maxDiff){return Promise.resolve(maxFormatter.format(time));}
+const{unit,value}=relativeTimeFormatId(time,relativeFmtOptions);return navigator.mozL10n.formatValue(unit,{value});},formatElement:function(element,time,maxDiff){maxDiff=maxDiff||86400*10;const secDiff=(Date.now()-time)/1000;if(isNaN(secDiff)){element.setAttribute('data-l10n-id','incorrectDate');}
+element.removeAttribute('data-l10n-id');if(secDiff>maxDiff){element.textContent=maxFormatter.format(time);}
+const{unit,value}=relativeTimeFormatId(time,relativeFmtOptions);navigator.mozL10n.setAttributes(element,unit,{value});},};},getFormattedUnit:function(type,style,v){if(!unitFormatData.hasOwnProperty(type)){throw new RangeError(`invalid type ${type}`);}
+if(!unitFormatGroups[type].styles.includes(style)){throw new RangeError(`invalid style ${style} for type ${type}`);}
+var units=unitFormatData[type];var scale=0;for(let i=1;i<units.length;i++){if(v<units[i].value*unitFormatGroups[type].rounding){scale=i-1;break;}else if(i===units.length-1){scale=i;}}
+var value=Math.round(v/units[scale].value*100)/100;return global.mozIntl.UnitFormat(navigator.languages,{unit:units[scale].name,style:style}).format(value);},}};const durationFormatOrder=['hour','minute','second','millisecond'];const durationFormatElements={'hour':{value:3600000,token:'hh'},'minute':{value:60000,token:'mm'},'second':{value:1000,token:'ss'},'millisecond':{value:10,token:'SS'}};const unitFormatData={'duration':[{'name':'second','value':1},{'name':'minute','value':60},{'name':'hour','value':60*60},{'name':'day','value':24*60*60},{'name':'month','value':30*24*60*60},],'digital':[{'name':'byte','value':1},{'name':'kilobyte','value':1024},{'name':'megabyte','value':1024*1024},{'name':'gigabyte','value':1024*1024*1024},{'name':'terabyte','value':1024*1024*1024*1024},],};const unitFormatGroups={'duration':{'units':['second','minute','hour','day','month'],'styles':['narrow'],'rounding':1},'digital':{'units':['byte','kilobyte','megabyte','gigabyte','terabyte'],'styles':['short'],'rounding':0.8}};function getDurationUnitIdx(name,defaultValue){if(!name){return defaultValue;}
+const pos=durationFormatOrder.indexOf(name);if(pos===-1){throw new Error('Unknown unit type: '+name);}
+return pos;}
+function splitIntoTimeUnits(v,maxUnitIdx,minUnitIdx){const units={};var input=Math.abs(v);for(var i=maxUnitIdx;i<=minUnitIdx;i++){const key=durationFormatOrder[i];const{value}=durationFormatElements[key];units[key]=i==minUnitIdx?Math.round(input/value):Math.floor(input/value);input-=units[key]*value;}
+return units;}
+function trimDurationPattern(string,maxUnit,minUnit){const maxToken=durationFormatElements[maxUnit].token;const minToken=durationFormatElements[minUnit].token;string=string.substring(string.indexOf(maxToken),string.indexOf(minToken)+minToken.length);return string;}
+function getDayPeriodTokenForDate(date,hourFormatter){const hourToken=hourFormatter.format(date);const newDate=new Date(date);newDate.setHours(parseInt(hourToken));return new Intl.DateTimeFormat(navigator.language, {hour:'numeric', hour12:true}).formatToParts(newDate).find(part => part.type === 'dayPeriod').value;}
+function computeTimeUnits(v){const units={};const millisecond=Math.round(v);const second=Math.round(millisecond/1000);const minute=Math.round(second/60);const hour=Math.round(minute/60);const day=Math.round(hour/24);const rawYear=day*400/146097;units.millisecond=millisecond;units.second=second;units.minute=minute;units.hour=hour;units.day=day;units.week=Math.round(day/7);units.month=Math.round(rawYear*12);units.quarter=Math.round(rawYear*4);units.year=Math.round(rawYear);return units;}
+function getBestMatchUnit(units){if(Math.abs(units.minute)<45){return'minute';}
+if(Math.abs(units.hour)<22){return'hour';}
+if(Math.abs(units.day)<7){return'day';}
+if(Math.abs(units.week)<4){return'week';}
+if(Math.abs(units.month)<11){return'month';}
+return'year';}
+function relativeTimeFormatId(x,options){const ms=x-Date.now();const units=computeTimeUnits(ms);const unit=options.unit==='bestFit'?getBestMatchUnit(units):options.unit;const v=units[unit];const tl=v<0?'-ago':'-until';const style=options.style||'long';const entry=unit+'s'+tl+'-'+style;return{unit:entry,value:Math.abs(v)};}
+function getUnitFormatGroupName(unitName){for(let groupName in unitFormatGroups){if(unitFormatGroups[groupName].units.includes(unitName)){return groupName;}}
+return undefined;}})(this);

assets/webapps/clock.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/clock.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/clock.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/clock.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/clock.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/clock.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/clock.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/clock.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/clock.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/clock.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/clock.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/clock.gaiamobile.org/shared/style/status.css

@@ -0,0 +1,25 @@
+
+html[dir="ltr"] section[role="status"] [dir] { text-align: left; }
+html[dir="rtl"] section[role="status"] [dir] { text-align: right; }
+section[role="status"] {
+  background-color: #4d4d4d;
+  overflow: hidden;
+  position: absolute;
+  z-index: 100;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  color: #fff;
+}
+html[dir="ltr"] section[role="status"] { background-position: left top; }
+html[dir="rtl"] section[role="status"] { background-position: right top; }
+section[role="status"] p {
+  font-size: 1.8rem;
+  font-weight: normal;
+  line-height: 2.2rem;
+  margin: 1rem 3rem;
+  padding: 0;
+}
+section[role="status"] p strong {
+  font-weight: 500;
+}

assets/webapps/clock.gaiamobile.org/shared/style/status/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8">
+
+  <title>Status</title>
+  <meta name="description" content="Most common used after Multi-Select edit, to confirm user action, and optional provide 'Undo' input">
+
+  <link rel="stylesheet" href="../status.css">
+
+  <!--
+    This <style>, <script> and <link> 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: #fff;
+    }
+
+    body {
+      background: none;
+    }
+  </style>
+  <script>
+    window.onload = function(){
+      document.getElementById('dir').checked = false;
+    };
+  </script>
+</head>
+
+<body role="application">
+  <p dir="ltr">
+    <label>
+      <input id="dir" type="checkbox"
+        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
+      RTL mode
+    </label>
+  </p>
+
+  <section role="status">
+    <p>The Alarm is set for <strong>7 hours</strong> and <strong>14 minutes</strong> from now</p>
+  </section>
+
+</body>
+</html>

assets/webapps/clock.gaiamobile.org/shared/style/tabs.css

@@ -0,0 +1,234 @@
+
+.bb-tablist:before {
+  content: "";
+  position: absolute;
+  bottom: 4.5rem;
+  left: 0;
+  width: 100%;
+  height: 0;
+  border-top: 0.1rem solid #e7e7e7;
+}
+.bb-tablist {
+  display: flex;
+  align-items: flex-end;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+.bb-tablist > li {
+  -moz-box-sizing: content-box;
+  margin: 0;
+  padding: 0;
+  height: 4.5rem;
+  background-color: #ffffff;
+  list-style: none;
+  pointer-events: all;
+  flex: 1 1 0;
+}
+.bb-tablist > li > a,
+.bb-tablist > li > button {
+  position: relative;
+  -moz-box-sizing: content-box;
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  color: #5f5f5f;
+  font-size: 1.6rem;
+  text-decoration: none;
+  text-align: center;
+  line-height: 4.5rem;
+  border: 0;
+  background-color: transparent;
+  background-size: 3rem auto;
+  background-repeat: no-repeat;
+  outline: none;
+}
+.bb-tablist > li > button {
+  background-image: none;
+}
+.bb-tablist > li > button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+.bb-tablist > li > .icon {
+  font-size: 0;
+  background-position: 50% 0;
+}
+.bb-tablist > li > a[data-icon] {
+  line-height: 0;
+  font-size: 0;
+}
+.bb-tablist > li > a[data-icon]:before {
+  line-height: 4.5rem;
+}
+.bb-tablist > li > a:active,
+.bb-tablist > li > button:active {
+  border-radius: 0;
+  background-color: #b2f2ff;
+}
+.bb-tablist.skin-dark:before {
+  border-color: rgba(189,189,189, 0.1);
+}
+.bb-tablist.skin-dark > li:before {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 4.5rem;
+  background-color: #000000;
+  z-index: -1;
+}
+.bb-tablist.skin-dark > li {
+  background-color: transparent;
+}
+.bb-tablist.skin-dark > li > a,
+.bb-tablist.skin-dark > li > button {
+  color: #ffffff;
+  background-color: transparent;
+}
+.bb-tablist.skin-dark > li > a:active,
+.bb-tablist.skin-dark > li > button:active {
+  background-color: rgb(0,170,204);
+}
+.bb-tablist > li > a:after,
+.bb-tablist > li > button:after {
+  display: none;
+}
+.bb-tablist > li > a[aria-selected="true"],
+.bb-tablist > li > button[aria-selected="true"] {
+  color: #00aacc;
+  font-weight: 500;
+  background-position: 50% 100%;
+}
+.bb-tablist > li > a[aria-selected="true"]:after,
+.bb-tablist > li > button[aria-selected="true"]:after {
+  display: inline-block;
+  content: "";
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top:0;
+  height: calc(100% - 0.3rem);
+  border-bottom: 0.3rem solid #00aacc;
+}
+.bb-tablist > li > a[aria-selected="true"]:active,
+.bb-tablist > li > button[aria-selected="true"]:active {
+  color: #5f5f5f;
+  background-position: 50% 0;
+}
+.bb-tablist.skin-dark > li > a[aria-selected="true"]:active,
+.bb-tablist.skin-dark > li > button[aria-selected="true"]:active {
+  background-color: #00aacc;
+  color: #fff;
+}
+.bb-tablist > li[aria-disabled="true"] > a,
+.bb-tablist > li[aria-disabled="true"] > button,
+.bb-tablist > li[disabled] > a,
+.bb-tablist > li[disabled] > button,
+.bb-tablist > li > a[aria-disabled="true"],
+.bb-tablist > li > button[aria-disabled="true"],
+.bb-tablist > li > a[disabled],
+.bb-tablist > li > button[disabled] {
+  color: #333333;
+  opacity: 0.25;
+  pointer-events: none;
+}
+.bb-tablist.skin-dark > li[aria-disabled="true"] > a,
+.bb-tablist.skin-dark > li[aria-disabled="true"] > button,
+.bb-tablist.skin-dark > li[disabled] > a,
+.bb-tablist.skin-dark > li[disabled] > button,
+.bb-tablist.skin-dark > li > a[aria-disabled="true"],
+.bb-tablist.skin-dark > li > button[aria-disabled="true"],
+.bb-tablist.skin-dark > li > a[disabled],
+.bb-tablist.skin-dark > li > button[disabled] {
+  opacity: 0.35;
+  background-color: transparent;
+}
+.bb-tablist .bb-tabpanel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 4.5rem;
+  left: 0;
+  visibility: hidden;
+  overflow: auto;
+}
+.bb-tablist [aria-selected="true"] ~.bb-tabpanel {
+  visibility: visible;
+}
+.bb-tablist[data-type="filter"] {
+  display: flex;
+  position: relative;
+  height: 4rem;
+  background: #fff;
+  border-bottom: 0.1rem solid #e7e7e7;
+  box-sizing: border-box;
+}
+.bb-tablist[data-type="filter"]:before {
+  display: none;
+}
+.bb-tablist[data-type="filter"] > li {
+  background: none;
+  position: relative;
+  color: #737272;
+  text-align: center;
+  height: 100%;
+}
+.bb-tablist[data-type="filter"] > li:first-child {
+  border-inline-start: none;
+}
+.bb-tablist[data-type="filter"] > li > a,
+.bb-tablist[data-type="filter"] > li > button {
+  height: 4rem;
+  border: none;
+  box-sizing: border-box;
+  width: auto;
+  position: static;
+  display: inline-block;
+  padding: 0 0.5rem;
+  color: #575757;
+  line-height: 4rem;
+  font-style: italic;
+  text-decoration: none;
+  text-overflow: ellipsis;
+}
+.bb-tablist[data-type="filter"] > li > a:before,
+.bb-tablist[data-type="filter"] > li > button:before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.bb-tablist[data-type="filter"] > li:before,
+.bb-tablist[data-type="filter"] > li > a[aria-selected="true"]:after,
+.bb-tablist[data-type="filter"] > li > button[aria-selected="true"]:after {
+  display: none;
+}
+.bb-tablist[data-type="filter"] > li:active {
+  color: #ffffff;
+  background-color: #b2f2ff;
+}
+.bb-tablist[data-type="filter"] > li > a[aria-selected="true"],
+.bb-tablist[data-type="filter"] > li > button[aria-selected="true"] {
+  color: #000000;
+  color: #0AC;
+  border-bottom: 0.3rem solid #0AC;
+}
+.bb-tablist[data-type="filter"] > li > a[aria-selected="true"]:after,
+.bb-tablist[data-type="filter"] > li > button[aria-selected="true"]:after {
+  display: none;
+}
+.bb-tablist[data-type="filter"] > li > a:active {
+  background-color: transparent;
+}

assets/webapps/clock.gaiamobile.org/shared/style/tabs/filters.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Filters</title>
+  <meta name="description" content="Filters can be used to enable the user to view a single set of data in a different lens">
+
+  <link rel="stylesheet" href="../tabs.css">
+
+  <!--
+    This <style> and <link> is only used for the example code, is no needed for the real case use
+  -->
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+
+    body {
+      background: none;
+    }
+
+    h2.bb-docs {
+      font-size: 1.8rem;
+      font-family: sans-serif;
+      font-weight: 300;
+      color: #666;
+      margin: -1px 0 0;
+      background-color: #f5f5f5;
+      padding: 0.4rem 0.4rem 0.4rem 3rem;
+      border: solid 1px #e8e8e8;
+    }
+
+    body[role="application"] ul.bb-tablist[data-type="filter"] {
+      margin: 10px 0;
+    }
+  </style>
+</head>
+<body role="application">
+  <section role="region">
+
+    <h2 class="bb-docs">Default position - Default Filters</h2>
+    <ul role="tablist" class="bb-tablist" data-type="filter">
+      <li id="filter1-1" role="presentation"><a href="#filter1-1" role="tab">Action 01</a></li>
+      <li id="filter1-2" role="presentation"><a href="#filter1-2" role="tab">Action 02</a></li>
+    </ul>
+
+    <ul role="tablist" class="bb-tablist" data-type="filter" >
+      <li id="filter2-1" role="presentation"><a href="#filter2-1" role="tab">Action 01</a></li>
+      <li id="filter2-2" role="presentation"><a href="#filter2-2" role="tab">Action 02</a></li>
+      <li id="filter2-3" role="presentation"><a href="#filter2-3" role="tab">Action 02</a></li>
+    </ul>
+
+
+  </section>
+</body>
+</html>

assets/webapps/clock.gaiamobile.org/shared/style/tabs/index.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+
+  <title>Tabs</title>
+  <meta name="description" content="Allows multiple instances to be contained within a single window. Tabs are used as a navigational widget for switching between sets of views. ">
+
+  <link rel="stylesheet" href="../tabs.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
+  <!--
+    This <style> and <link> is only used for the example code, is no needed for the real case use
+  -->
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+
+    body {
+      background: none;
+    }
+
+    h2.bb-docs {
+      font-size: 1.8rem;
+      font-family: sans-serif;
+      font-weight: 300;
+      color: #666;
+      margin: -1px 0 0;
+      background-color: #f5f5f5;
+      padding: 0.4rem 0.4rem 0.4rem 3rem;
+      border: solid 1px #e8e8e8;
+    }
+
+    .bb-tabpanel {
+      padding: 2rem;
+      font-size: 2rem;
+    }
+
+  </style>
+</head>
+<body role="application">
+
+  <section role="region">
+    <!-- if your tabs are at the top, remove class="bottom" -->
+    <ul role="tablist" class="bb-tablist">
+      <li id="panel1" role="presentation">
+        <a id="tab1" href="#panel1" data-icon="recent-calls" aria-label="recent calls" role="tab" aria-controls="tabpanel1">comms</a>
+        <div id="tabpanel1" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab1">Tab Panel 1</div>
+      </li>
+      <li id="panel2" role="presentation">
+        <a id="tab2" href="#panel2" data-icon="user" aria-label="contacts" role="tab" aria-controls="tabpanel2">contacts</a>
+        <div id="tabpanel2" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab2">Tab Panel 2</div>
+      </li>
+      <li id="panel3" role="presentation" aria-disabled="true">
+        <a id="tab3" href="#panel3" data-icon="dialpad" aria-label="dialer" role="tab" aria-controls="tabpanel3">dialer</a>
+        <div id="tabpanel3" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab3">Tab Panel 3</div>
+      </li>
+      <li id="panel4" role="presentation">
+        <a id="tab4" href="#panel4" role="tab" aria-controls="tabpanel4">Tab name</a>
+        <div id="tabpanel4" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab4">Tab Panel 4</div>
+      </li>
+    </ul>
+  </section>
+
+</body>
+</html>

assets/webapps/clock.gaiamobile.org/shared/style/tabs/index_dark.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+
+  <title>Tabs</title>
+  <meta name="description" content="Allows multiple instances to be contained within a single window. Tabs are used as a navigational widget for switching between sets of views. ">
+
+  <link rel="stylesheet" href="../tabs.css">
+
+  <!--
+    This <style> and <link> is only used for the example code, is no needed for the real case use
+  -->
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+
+    body {
+      background: none;
+    }
+
+    h2.bb-docs {
+      font-size: 1.8rem;
+      font-family: sans-serif;
+      font-weight: 300;
+      color: #666;
+      margin: -1px 0 0;
+      background-color: #f5f5f5;
+      padding: 0.4rem 0.4rem 0.4rem 3rem;
+      border: solid 1px #e8e8e8;
+    }
+
+    .bb-tabpanel {
+      padding: 2rem;
+      font-size: 2rem;
+    }
+
+    /* icons */
+    #panel1 a {
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MCIgdmlld0JveD0iMCAwIDMwIDkwIj48cGF0aCBmaWxsPSIjMDBDQUYyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IiBkPSJNMjkuODYzIDY4LjU2OWgtNS41Nzd2Mi43MmMtLjMyLjA2Ni0uNjY1LS4wMDgtLjkxMi0uMjU5bC0zLjA0NC0zLjA5NGMtLjM5NC0uNC0uMzk0LTEuMDQ4IDAtMS40NDhsMy4wNDQtMy4wOTNjLjI0OS0uMjUzLjU5NC0uMzI2LjkxMi0uMjYxdjIuNzM0aDUuNTc4Yy4xODEuODkuMTgxIDEuODEyLS4wMDEgMi43MDF6bS0xMS44MDktNS43MzJjLS4yNDguMjUzLS41OTEuMzI2LS45MTIuMjYxdi0yLjcyaC01LjU3N2MtLjE4MS0uODktLjE4MS0xLjgxLS4wMDEtMi42OTloNS41Nzd2LTIuNzM1Yy4zMjEtLjA2Ni42NjYuMDA4LjkxMi4yNjFsMy4wNDQgMy4wOTRjLjM5NS40LjM5NSAxLjA0OCAwIDEuNDQ2bC0zLjA0MyAzLjA5MnptLTEuNTIxIDEwLjY4bC4wMjIuMDIyYy42MTMtLjM0MyAxLjIxNy0uNzU2IDEuODE3LTEuMTk5bDUuNzI5IDUuMTU0Yy0xLjIwOCAxLjA2MS0yLjUyIDEuOTMtMy44OTkgMi41ODYtMy42NjUtLjY4OC04LjM2My0zLjQ1OS0xMi41NzktNy43NDUtNC4yMTctNC4yODItNi45NDItOS4wNTMtNy42MjMtMTIuNzc1LjY0NS0xLjQwNCAxLjUwMy0yLjczNyAyLjU0OC0zLjk2OGw1LjA3NiA1LjgyNmMtLjQzNS42MDktLjg0MSAxLjIyMy0xLjE3OSAxLjg0NWwuMDIyLjAyM2MtLjU5NCAxLjMyNi43ODEgNC4yMSAzLjM1MiA2LjgyMyAyLjU3MiAyLjYxMyA1LjQxMSA0LjAxMSA2LjcxNCAzLjQwOHoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjkuODYzIDIzLjU2OGgtNS41Nzd2Mi43MmMtLjMyLjA2Ni0uNjY1LS4wMDgtLjkxMi0uMjU5bC0zLjA0NC0zLjA5NGMtLjM5NC0uNC0uMzk0LTEuMDQ4IDAtMS40NDhsMy4wNDQtMy4wOTNjLjI0OS0uMjUzLjU5NC0uMzI4LjkxMi0uMjYxdjIuNzM0aDUuNTc4Yy4xODEuODkxLjE4MSAxLjgxMi0uMDAxIDIuNzAxem0tMTEuODA5LTUuNzMxYy0uMjQ4LjI1My0uNTkxLjMyOC0uOTEyLjI2MXYtMi43MTloLTUuNTc3Yy0uMTgxLS44OS0uMTgxLTEuODEtLjAwMS0yLjcwMWg1LjU3N3YtMi43MzZjLjMyMS0uMDY2LjY2Ni4wMDguOTEyLjI2MWwzLjA0NCAzLjA5NGMuMzk1LjQuMzk1IDEuMDQ4IDAgMS40NDZsLTMuMDQzIDMuMDk0em0tMS41MjEgMTAuNjhsLjAyMi4wMjJjLjYxMy0uMzQzIDEuMjE3LS43NTYgMS44MTctMS4xOTdsNS43MjkgNS4xNTRjLTEuMjA4IDEuMDYxLTIuNTIgMS45MjktMy44OTkgMi41ODYtMy42NjUtLjY4OC04LjM2My0zLjQ1OC0xMi41NzktNy43NDUtNC4yMTctNC4yODQtNi45NDItOS4wNTMtNy42MjMtMTIuNzc3LjY0NS0xLjQwNCAxLjUwMy0yLjczNyAyLjU0OC0zLjk2OGw1LjA3NiA1LjgyNmMtLjQzNS42MDktLjg0MSAxLjIyMy0xLjE3OSAxLjg0NGwuMDIyLjAyM2MtLjU5NCAxLjMyNi43ODEgNC4yMSAzLjM1MiA2LjgyM3M1LjQxMSA0LjAxMSA2LjcxNCAzLjQwOXoiLz48L3N2Zz4=);
+    }
+
+    #panel2 a {
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MCIgdmlld0JveD0iMCAwIDMwIDkwIj48cGF0aCBmaWxsPSIjMDBDQUYyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IiBkPSJNMjQuMjU5IDcyLjk1OGMwIDIuNTg0LS41MSA0Ljk5MS0xLjM3OCA3LjA0MmgtMTUuNzYyYy0uODY4LTIuMDUyLTEuMzc4LTQuNDU3LTEuMzc4LTcuMDQyaC4wMDV2LS4wMDFjMC0yLjU3NyAyLjEzMS00LjggNS4yMTctNS44NTZsNC4wMzggNC4wNzIgNC4wMzctNC4wNzJjMy4wODUgMS4wNTggNS4yMTcgMy4yNzkgNS4yMTcgNS44NTZ2LjAwMmwuMDA0LS4wMDF6bS05LjI1OS03LjMwNWMtMi45MTcgMC01LjI4NC0yLjM4NC01LjI4NC01LjMyNnMyLjM2Ny01LjMyNyA1LjI4NC01LjMyN2MyLjkxNiAwIDUuMjgzIDIuMzg1IDUuMjgzIDUuMzI3cy0yLjM2NyA1LjMyNi01LjI4MyA1LjMyNnoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjQuMjU5IDI3Ljk1OGMwIDIuNTg0LS41MSA0Ljk5MS0xLjM3OCA3LjA0MmgtMTUuNzYyYy0uODY4LTIuMDUyLTEuMzc4LTQuNDU4LTEuMzc4LTcuMDQyaC4wMDV2LS4wMDFjMC0yLjU3NyAyLjEzMS00LjggNS4yMTctNS44NTZsNC4wMzggNC4wNzIgNC4wMzctNC4wNzJjMy4wODUgMS4wNTggNS4yMTcgMy4yNzkgNS4yMTcgNS44NTZ2LjAwMmwuMDA0LS4wMDF6bS05LjI1OS03LjMwNWMtMi45MTcgMC01LjI4NC0yLjM4NC01LjI4NC01LjMyNiAwLTIuOTQzIDIuMzY3LTUuMzI3IDUuMjg0LTUuMzI3IDIuOTE2IDAgNS4yODMgMi4zODUgNS4yODMgNS4zMjcgMCAyLjk0MS0yLjM2NyA1LjMyNi01LjI4MyA1LjMyNnoiLz48L3N2Zz4=);
+    }
+
+    #panel3 a {
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MCIgdmlld0JveD0iMCAwIDMwIDkwIj48cGF0aCBmaWxsPSIjMDBDQUYyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IiBkPSJNOS4zNTkgNjEuMDE1bC0uMDIzLjAxOWMtLjEwMy40MjMtLjQ5Ljc0Ni0uOTc3Ljc0NmwtLjAwMS4wMDFoLTIuNDg3bC0uMDAyLS4wMDFjLS40ODYgMC0uODczLS4zMjMtLjk3Ni0uNzQ2bC0uMDIzLS4wMTljLS4xODgtLjkxNS0uMzE4LTEuOTQ3LS4zNy0zLjA2aDUuMjI4Yy0uMDUyIDEuMTEzLS4xOCAyLjE0NS0uMzY5IDMuMDZ6bTcuODg2IDBsLS4wMjIuMDE5Yy0uMTAzLjQyMy0uNDkuNzQ2LS45NzcuNzQ2bC0uMDAxLjAwMWgtMi40ODhsLS4wMDEtLjAwMWMtLjQ4NiAwLS44NzMtLjMyMy0uOTc2LS43NDZsLS4wMjMtLjAxOWMtLjE5LS45MTUtLjMxOC0xLjk0Ny0uMzY5LTMuMDZoNS4yMjhjLS4wNTMgMS4xMTMtLjE4MyAyLjE0NS0uMzcxIDMuMDZ6bTcuODg2IDBsLS4wMjIuMDE5Yy0uMTAzLjQyMy0uNDkuNzQ2LS45NzcuNzQ2bC0uMDAxLjAwMWgtMi40ODh2LS4wMDFjLS40ODcgMC0uODc0LS4zMjMtLjk3OS0uNzQ2bC0uMDItLjAxOWMtLjE5LS45MTUtLjMxOC0xLjk0Ny0uMzY5LTMuMDZoNS4yMjVjLS4wNTIgMS4xMTMtLjE4MSAyLjE0NS0uMzY5IDMuMDZ6bS0xNS43NzIgNy42MzJsLS4wMjMuMDE5Yy0uMTAzLjQyMy0uNDkuNzQ3LS45NzcuNzQ3aC0yLjQ5Yy0uNDg2IDAtLjg3My0uMzI1LS45NzYtLjc0N2wtLjAyMy0uMDE5Yy0uMTktLjkxNC0uMzE4LTEuOTQ3LS4zNy0zLjA2aDUuMjI4Yy0uMDUyIDEuMTEzLS4xOCAyLjE0Ny0uMzY5IDMuMDZ6bTcuODg2IDBsLS4wMjIuMDE5Yy0uMTAzLjQyMy0uNDkuNzQ3LS45NzcuNzQ3aC0yLjQ4OWMtLjQ4NiAwLS44NzMtLjMyNS0uOTc2LS43NDdsLS4wMjMtLjAxOWMtLjE5LS45MTQtLjMxOC0xLjk0OS0uMzY5LTMuMDZoNS4yMjhjLS4wNTQgMS4xMTMtLjE4NCAyLjE0Ny0uMzcyIDMuMDZ6bTcuODg2IDBsLS4wMjIuMDE5Yy0uMTAzLjQyMy0uNDkuNzQ3LS45NzcuNzQ3aC0yLjQ4OWMtLjQ4NyAwLS44NzQtLjMyNS0uOTc5LS43NDdsLS4wMi0uMDE5Yy0uMTktLjkxNC0uMzE4LTEuOTQ5LS4zNjktMy4wNmg1LjIyNWMtLjA1MiAxLjExMy0uMTgxIDIuMTQ3LS4zNjkgMy4wNnptLTE1Ljc3MiA3LjYzNGwtLjAyMy4wMTdjLS4xMDQuNDI1LS40OS43NDctLjk3OS43NDdoLTIuNDg5Yy0uNDg2IDAtLjg3My0uMzIzLS45NzYtLjc0N2wtLjAyMy0uMDE4Yy0uMTg4LS45MTUtLjMxOC0xLjk1LS4zNjktMy4wNmg1LjIyOGMtLjA1MiAxLjExMS0uMTggMi4xNDYtLjM2OSAzLjA2MXptNy44ODYgMGwtLjAyMi4wMTdjLS4xMDQuNDI1LS40OTEuNzQ3LS45NzkuNzQ3aC0yLjQ4OWMtLjQ4NiAwLS44NzMtLjMyMy0uOTc2LS43NDdsLS4wMjMtLjAxOGMtLjE5LS45MTUtLjMxOC0xLjk1LS4zNjktMy4wNmg1LjIyOGMtLjA1MiAxLjExMS0uMTgyIDIuMTQ2LS4zNyAzLjA2MXptNy44ODYgMGwtLjAyMi4wMTdjLS4xMDQuNDI1LS40OS43NDctLjk3OS43NDdoLTIuNDg5Yy0uNDg3IDAtLjg3NC0uMzIzLS45NzktLjc0N2wtLjAyLS4wMThjLS4xOS0uOTE1LS4zMTgtMS45NS0uMzY5LTMuMDZoNS4yMjdjLS4wNTIgMS4xMTEtLjE4MSAyLjE0Ni0uMzY5IDMuMDYxeiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik05LjM1OSAxNi4wMTVsLS4wMjMuMDE5Yy0uMTAzLjQyMy0uNDkuNzQ2LS45NzcuNzQ2bC0uMDAxLjAwMWgtMi40ODdsLS4wMDItLjAwMWMtLjQ4NiAwLS44NzMtLjMyMy0uOTc2LS43NDZsLS4wMjMtLjAxOWMtLjE4OC0uOTE0LS4zMTgtMS45NDctLjM3LTMuMDZoNS4yMjhjLS4wNTIgMS4xMTMtLjE4IDIuMTQ1LS4zNjkgMy4wNnptNy44ODYgMGwtLjAyMi4wMTljLS4xMDMuNDIzLS40OS43NDYtLjk3Ny43NDZsLS4wMDEuMDAxaC0yLjQ4OGwtLjAwMS0uMDAxYy0uNDg2IDAtLjg3My0uMzIzLS45NzYtLjc0NmwtLjAyMy0uMDE5Yy0uMTktLjkxNC0uMzE4LTEuOTQ3LS4zNjktMy4wNmg1LjIyOGMtLjA1MyAxLjExMy0uMTgzIDIuMTQ1LS4zNzEgMy4wNnptNy44ODYgMGwtLjAyMi4wMTljLS4xMDMuNDIzLS40OS43NDYtLjk3Ny43NDZsLS4wMDEuMDAxaC0yLjQ4OHYtLjAwMWMtLjQ4NyAwLS44NzQtLjMyMy0uOTc5LS43NDZsLS4wMi0uMDE5Yy0uMTktLjkxNC0uMzE4LTEuOTQ3LS4zNjktMy4wNmg1LjIyNWMtLjA1MiAxLjExMy0uMTgxIDIuMTQ1LS4zNjkgMy4wNnptLTE1Ljc3MiA3LjYzMmwtLjAyMy4wMTljLS4xMDMuNDIzLS40OS43NDctLjk3Ny43NDdoLTIuNDljLS40ODYgMC0uODczLS4zMjUtLjk3Ni0uNzQ3bC0uMDIzLS4wMTljLS4xOS0uOTE0LS4zMTgtMS45NDctLjM3LTMuMDZoNS4yMjhjLS4wNTIgMS4xMTMtLjE4IDIuMTQ3LS4zNjkgMy4wNnptNy44ODYgMGwtLjAyMi4wMTljLS4xMDMuNDIzLS40OS43NDctLjk3Ny43NDdoLTIuNDg5Yy0uNDg2IDAtLjg3My0uMzI1LS45NzYtLjc0N2wtLjAyMy0uMDE5Yy0uMTktLjkxNS0uMzE4LTEuOTQ5LS4zNjktMy4wNjFoNS4yMjhjLS4wNTQgMS4xMTQtLjE4NCAyLjE0OC0uMzcyIDMuMDYxem03Ljg4NiAwbC0uMDIyLjAxOWMtLjEwMy40MjMtLjQ5Ljc0Ny0uOTc3Ljc0N2gtMi40ODljLS40ODcgMC0uODc0LS4zMjUtLjk3OS0uNzQ3bC0uMDItLjAxOWMtLjE5LS45MTUtLjMxOC0xLjk0OS0uMzY5LTMuMDYxaDUuMjI1Yy0uMDUyIDEuMTE0LS4xODEgMi4xNDgtLjM2OSAzLjA2MXptLTE1Ljc3MiA3LjYzNGwtLjAyMy4wMTdjLS4xMDQuNDI1LS40OS43NDctLjk3OS43NDdoLTIuNDg5Yy0uNDg2IDAtLjg3My0uMzIzLS45NzYtLjc0N2wtLjAyMy0uMDE3Yy0uMTg4LS45MTUtLjMxOC0xLjk1LS4zNjktMy4wNmg1LjIyOGMtLjA1MiAxLjExLS4xOCAyLjE0NS0uMzY5IDMuMDZ6bTcuODg2IDBsLS4wMjIuMDE3Yy0uMTA0LjQyNS0uNDkxLjc0Ny0uOTc5Ljc0N2gtMi40ODljLS40ODYgMC0uODczLS4zMjMtLjk3Ni0uNzQ3bC0uMDIzLS4wMTdjLS4xOS0uOTE1LS4zMTgtMS45NS0uMzY5LTMuMDZoNS4yMjhjLS4wNTIgMS4xMS0uMTgyIDIuMTQ1LS4zNyAzLjA2em03Ljg4NiAwbC0uMDIyLjAxN2MtLjEwNC40MjUtLjQ5Ljc0Ny0uOTc5Ljc0N2gtMi40ODljLS40ODcgMC0uODc0LS4zMjMtLjk3OS0uNzQ3bC0uMDItLjAxN2MtLjE5LS45MTUtLjMxOC0xLjk1LS4zNjktMy4wNmg1LjIyN2MtLjA1MiAxLjExLS4xODEgMi4xNDUtLjM2OSAzLjA2eiIvPjwvc3ZnPg==);
+    }
+  </style>
+</head>
+<body role="application">
+
+  <section role="region">
+    <!-- if your tabs are at the top, remove class="bottom" -->
+    <ul role="tablist" class="bb-tablist skin-dark">
+      <li id="panel1" role="presentation">
+        <a id="tab1" href="#panel1" class="icon" role="tab" aria-controls="tabpanel1">comms</a>
+        <div id="tabpanel1" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab1">Tab Panel 1</div>
+      </li>
+      <li id="panel2" role="presentation">
+        <a id="tab2" href="#panel2" class="icon" role="tab" aria-controls="tabpanel2">contacts</a>
+        <div id="tabpanel2" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab2">Tab Panel 2</div>
+      </li>
+      <li id="panel3" role="presentation" aria-disabled="true">
+        <a id="tab3" class="icon" role="tab" aria-controls="tabpanel3">dialer</a>
+        <div id="tabpanel3" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab3">Tab Panel 3</div>
+      </li>
+      <li id="panel4" role="presentation">
+        <a id="tab4" href="#panel4" role="tab" aria-controls="tabpanel4">Tab name</a>
+        <div id="tabpanel4" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab4">Tab Panel 4</div>
+      </li>
+    </ul>
+  </section>
+
+</body>
+</html>