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.

gaia/distros/spark/apps/directory/components/base/base.css

@@ -0,0 +1,227 @@
+
+/** Variables
+ ---------------------------------------------------------*/
+
+:root {
+  --dim-micro: 6px;
+  --dim-small: 12px;
+  --dim-medium: 24px;
+  --dim-mega: 48px;
+
+  --base-xs: 6px;
+  --base-s: 18px;
+  --base-m: 24px;
+  --base-l: 30px;
+  --base-xl: 42px;
+  --base-xxl: 60px;
+
+  --base-font-xs: 10px;
+  --base-font-s: 14px;
+  --base-font-m: 17px;
+  --base-font-l: 23px;
+  --base-font-xl: 60px;
+}
+
+/**
+ * 1. Apply a natural box layout
+ *    model to all elements
+ */
+
+*,
+*:after,
+*:before {
+  box-sizing: border-box; /* 1 */
+  font: inherit;
+  margin: 0;
+}
+
+/** Document
+ ---------------------------------------------------------*/
+
+html {
+  height: 100%;
+}
+
+/** Body
+ ---------------------------------------------------------*/
+
+body {
+  height: 100%;
+  font: 300 17px/21px 'FiraSans';
+  background-color: var(--background);
+  color: var(--text-color);
+  padding: 0;
+}
+
+/** Tags
+ ---------------------------------------------------------*/
+
+a {
+  color: var(--highlight-color, inherit);
+  text-decoration: none;
+  font-style: italic;
+}
+
+hr {
+  height: 1px;
+  margin: var(--dim-small) 0 var(--dim-small) 0;
+  border: 0;
+  background:
+    var(--border-color,
+    var(--background-plus,
+    rgba(0,0,0,0.2)));
+}
+
+em {
+  font-weight: 500;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-weight: 300;
+}
+
+.alpha {
+  font-size: 23px;
+  font-weight: 200;
+  font-style: italic;
+  line-height: 26px;
+  margin: 6px 0 24px 0;
+}
+
+.beta {
+  font-size: 17px;
+  font-weight: 400;
+  margin: 32px 0 16px 0;
+}
+
+.gamma {
+  font-size: 14px;
+  text-transform: uppercase;
+  font-weight: normal;
+  margin: 32px 0 16px 0;
+}
+
+.milli {
+  font-size: 14px;
+  font-weight: 300;
+}
+
+.large {
+  font-size: 23px;
+  line-height: 26px;
+}
+
+.mega {
+  font-size: 60px;
+  line-height: 60px;
+  font-style: normal;
+}
+
+.giga {}
+.kilo {}
+
+/* alignment */
+.l-align-right { float: right; }
+.l-align-left { float: left; }
+.l-align-center { text-align: center; }
+.l-text-align-left { text-align: left; }
+.l-text-align-right { text-align: right; }
+.l-text-valign-top {
+  vertical-align: top;
+}
+
+.l-width-full {
+  width: 100%;
+}
+
+/** Flexbox
+ ---------------------------------------------------------*/
+
+.l-flex { display: flex; }
+.l-flex-col { display: flex; flex-direction: column; }
+
+.l-flex-col-v-align {
+  display: flex !important;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.l-flex-v-align { align-items: center; }
+.l-flex-h-align { justify-content: center; }
+.l-flex-grow { flex: 1; }
+
+/** Margin
+ ---------------------------------------------------------*/
+
+/* Top */
+
+.l-mt-small { margin-top: var(--dim-small); }
+.l-mt-med { margin-top: var(--dim-medium); }
+
+/* Bottom */
+
+.l-mb-small { margin-bottom: var(--dim-small); }
+.l-mb-med { margin-bottom: var(--dim-medium); }
+.l-mb-large {}
+.l-mb-mega { margin-bottom: var(--dim-mega); }
+
+/* Left */
+
+.l-ml-small { margin-left: var(--dim-small); }
+
+/* Right */
+
+.l-mr-small { margin-right: var(--dim-small); }
+
+/* Auto */
+
+.l-mlr-auto { margin-left: auto; margin-right: auto; }
+.l-m-auto { margin: auto }
+
+/* Margin */
+
+.l-m-small { margin: var(--dim-small) }
+.l-m-med { margin: var(--dim-medium) }
+.l-m-0 { margin: 0 }
+
+/** Padding
+ ---------------------------------------------------------*/
+
+.l-p-small { padding: var(--dim-small); }
+.l-pl-small { padding-left: var(--dim-small); }
+.l-pr-small { padding-right: var(--dim-small); }
+.l-plr-small {
+  padding-right: var(--dim-small);
+  padding-left: var(--dim-small);
+}
+.l-pb-small { padding-bottom: var(--dim-small); }
+.l-pt-small { padding-top: var(--dim-small); }
+.l-pt-mega { padding-top: var(--dim-mega); }
+.l-pt-micro { padding-top: var(--dim-micro); }
+.l-pb-micro { padding-bottom: var(--dim-micro); }
+.l-p-0 { padding: 0 ;}
+
+/** Helpers
+ ---------------------------------------------------------*/
+
+.l-clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.l-inline-block {
+  display: inline-block;
+}
+
+.is-hidden {
+  display: none !important;
+}
+
+.is-invisible {
+  visibility: hidden !important;
+}

gaia/distros/spark/apps/directory/components/base/bower.json

@@ -0,0 +1,16 @@
+{
+  "name": "base",
+  "version": "0.0.0",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "main": "base.css",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

gaia/distros/spark/apps/directory/components/font-fit/bower.json

@@ -0,0 +1,18 @@
+{
+  "name": "font-fit",
+  "main": "font-fit.js",
+  "version": "0.3.1",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "README.md",
+    "index.html",
+    "package.json"
+  ]
+}

gaia/distros/spark/apps/directory/components/font-fit/font-fit.js

@@ -0,0 +1,132 @@
+;(function(define){define(function(require,exports,module){
+'use strict';
+
+/**
+ * Simple logger.
+ *
+ * @return {Function}
+ */
+var debug = 0 ? console.log.bind(console) : function(){};
+
+/**
+ * Global canvas cache.
+ *
+ * @type {Object}
+ */
+var cache = {};
+
+/**
+ * Default min/max font-size.
+ *
+ * @type {Number}
+ */
+var MIN = 16;
+var MAX = 24;
+
+/**
+ * The number of pixels to subtract from
+ * the given `config.space` to ensure
+ * HTML text doesn't overflow container.
+ *
+ * Ideally we would use 1px, but in some
+ * cases italicised text in canvas is ~2px
+ * longer than the same text in HTML.
+ *
+ * http://bugzil.la/1126391
+ *
+ * @type {Number}
+ */
+var BUFFER = 3;
+
+/**
+ * Get the font-size that closest fits
+ * the given space with the given font.
+ *
+ * Config:
+ *
+ *   - {String} `text` The text string
+ *   - {String} `font` Font shorthand string
+ *   - {Number} `space` Width (px) to fit the text into
+ *   - {Number} `min` Min font-size (px) (optional)
+ *   - {Number} `max` Max font-size (px) (optional)
+ *
+ * @param  {Object} config
+ * @return {Object} {fontSize,overflowing,textWidth}
+ */
+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
+  };
+};
+
+/**
+ * Get the width of the given text
+ * with the given font style.
+ *
+ * @param  {String} text
+ * @param  {String} font (CSS shorthand)
+ * @return {Number} (px)
+ */
+function getTextWidth(text, font) {
+  var ctx = getCanvasContext(font);
+  var width = ctx.measureText(text).width;
+  debug('got text width', width);
+  return width;
+}
+
+/**
+ * Get a canvas context configured
+ * to the given font style.
+ *
+ * @param  {String} font
+ * @return {CanvasRenderingContext2D}
+ */
+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;
+}
+
+/**
+ * Trim leading, trailing
+ * and excess whitespace.
+ *
+ * @param  {String} text
+ * @return {String}
+ */
+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));

gaia/distros/spark/apps/directory/components/fxos-achievements-service/LICENSE

@@ -0,0 +1,363 @@
+Mozilla Public License, version 2.0
+
+1. Definitions
+
+1.1. "Contributor"
+
+     means each individual or legal entity that creates, contributes to the
+     creation of, or owns Covered Software.
+
+1.2. "Contributor Version"
+
+     means the combination of the Contributions of others (if any) used by a
+     Contributor and that particular Contributor's Contribution.
+
+1.3. "Contribution"
+
+     means Covered Software of a particular Contributor.
+
+1.4. "Covered Software"
+
+     means Source Code Form to which the initial Contributor has attached the
+     notice in Exhibit A, the Executable Form of such Source Code Form, and
+     Modifications of such Source Code Form, in each case including portions
+     thereof.
+
+1.5. "Incompatible With Secondary Licenses"
+     means
+
+     a. that the initial Contributor has attached the notice described in
+        Exhibit B to the Covered Software; or
+
+     b. that the Covered Software was made available under the terms of
+        version 1.1 or earlier of the License, but not also under the terms of
+        a Secondary License.
+
+1.6. "Executable Form"
+
+     means any form of the work other than Source Code Form.
+
+1.7. "Larger Work"
+
+     means a work that combines Covered Software with other material, in a
+     separate file or files, that is not Covered Software.
+
+1.8. "License"
+
+     means this document.
+
+1.9. "Licensable"
+
+     means having the right to grant, to the maximum extent possible, whether
+     at the time of the initial grant or subsequently, any and all of the
+     rights conveyed by this License.
+
+1.10. "Modifications"
+
+     means any of the following:
+
+     a. any file in Source Code Form that results from an addition to,
+        deletion from, or modification of the contents of Covered Software; or
+
+     b. any new file in Source Code Form that contains any Covered Software.
+
+1.11. "Patent Claims" of a Contributor
+
+      means any patent claim(s), including without limitation, method,
+      process, and apparatus claims, in any patent Licensable by such
+      Contributor that would be infringed, but for the grant of the License,
+      by the making, using, selling, offering for sale, having made, import,
+      or transfer of either its Contributions or its Contributor Version.
+
+1.12. "Secondary License"
+
+      means either the GNU General Public License, Version 2.0, the GNU Lesser
+      General Public License, Version 2.1, the GNU Affero General Public
+      License, Version 3.0, or any later versions of those licenses.
+
+1.13. "Source Code Form"
+
+      means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your")
+
+      means an individual or a legal entity exercising rights under this
+      License. For legal entities, "You" includes any entity that controls, is
+      controlled by, or is under common control with You. For purposes of this
+      definition, "control" means (a) the power, direct or indirect, to cause
+      the direction or management of such entity, whether by contract or
+      otherwise, or (b) ownership of more than fifty percent (50%) of the
+      outstanding shares or beneficial ownership of such entity.
+
+
+2. License Grants and Conditions
+
+2.1. Grants
+
+     Each Contributor hereby grants You a world-wide, royalty-free,
+     non-exclusive license:
+
+     a. under intellectual property rights (other than patent or trademark)
+        Licensable by such Contributor to use, reproduce, make available,
+        modify, display, perform, distribute, and otherwise exploit its
+        Contributions, either on an unmodified basis, with Modifications, or
+        as part of a Larger Work; and
+
+     b. under Patent Claims of such Contributor to make, use, sell, offer for
+        sale, have made, import, and otherwise transfer either its
+        Contributions or its Contributor Version.
+
+2.2. Effective Date
+
+     The licenses granted in Section 2.1 with respect to any Contribution
+     become effective for each Contribution on the date the Contributor first
+     distributes such Contribution.
+
+2.3. Limitations on Grant Scope
+
+     The licenses granted in this Section 2 are the only rights granted under
+     this License. No additional rights or licenses will be implied from the
+     distribution or licensing of Covered Software under this License.
+     Notwithstanding Section 2.1(b) above, no patent license is granted by a
+     Contributor:
+
+     a. for any code that a Contributor has removed from Covered Software; or
+
+     b. for infringements caused by: (i) Your and any other third party's
+        modifications of Covered Software, or (ii) the combination of its
+        Contributions with other software (except as part of its Contributor
+        Version); or
+
+     c. under Patent Claims infringed by Covered Software in the absence of
+        its Contributions.
+
+     This License does not grant any rights in the trademarks, service marks,
+     or logos of any Contributor (except as may be necessary to comply with
+     the notice requirements in Section 3.4).
+
+2.4. Subsequent Licenses
+
+     No Contributor makes additional grants as a result of Your choice to
+     distribute the Covered Software under a subsequent version of this
+     License (see Section 10.2) or under the terms of a Secondary License (if
+     permitted under the terms of Section 3.3).
+
+2.5. Representation
+
+     Each Contributor represents that the Contributor believes its
+     Contributions are its original creation(s) or it has sufficient rights to
+     grant the rights to its Contributions conveyed by this License.
+
+2.6. Fair Use
+
+     This License is not intended to limit any rights You have under
+     applicable copyright doctrines of fair use, fair dealing, or other
+     equivalents.
+
+2.7. Conditions
+
+     Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in
+     Section 2.1.
+
+
+3. Responsibilities
+
+3.1. Distribution of Source Form
+
+     All distribution of Covered Software in Source Code Form, including any
+     Modifications that You create or to which You contribute, must be under
+     the terms of this License. You must inform recipients that the Source
+     Code Form of the Covered Software is governed by the terms of this
+     License, and how they can obtain a copy of this License. You may not
+     attempt to alter or restrict the recipients' rights in the Source Code
+     Form.
+
+3.2. Distribution of Executable Form
+
+     If You distribute Covered Software in Executable Form then:
+
+     a. such Covered Software must also be made available in Source Code Form,
+        as described in Section 3.1, and You must inform recipients of the
+        Executable Form how they can obtain a copy of such Source Code Form by
+        reasonable means in a timely manner, at a charge no more than the cost
+        of distribution to the recipient; and
+
+     b. You may distribute such Executable Form under the terms of this
+        License, or sublicense it under different terms, provided that the
+        license for the Executable Form does not attempt to limit or alter the
+        recipients' rights in the Source Code Form under this License.
+
+3.3. Distribution of a Larger Work
+
+     You may create and distribute a Larger Work under terms of Your choice,
+     provided that You also comply with the requirements of this License for
+     the Covered Software. If the Larger Work is a combination of Covered
+     Software with a work governed by one or more Secondary Licenses, and the
+     Covered Software is not Incompatible With Secondary Licenses, this
+     License permits You to additionally distribute such Covered Software
+     under the terms of such Secondary License(s), so that the recipient of
+     the Larger Work may, at their option, further distribute the Covered
+     Software under the terms of either this License or such Secondary
+     License(s).
+
+3.4. Notices
+
+     You may not remove or alter the substance of any license notices
+     (including copyright notices, patent notices, disclaimers of warranty, or
+     limitations of liability) contained within the Source Code Form of the
+     Covered Software, except that You may alter any license notices to the
+     extent required to remedy known factual inaccuracies.
+
+3.5. Application of Additional Terms
+
+     You may choose to offer, and to charge a fee for, warranty, support,
+     indemnity or liability obligations to one or more recipients of Covered
+     Software. However, You may do so only on Your own behalf, and not on
+     behalf of any Contributor. You must make it absolutely clear that any
+     such warranty, support, indemnity, or liability obligation is offered by
+     You alone, and You hereby agree to indemnify every Contributor for any
+     liability incurred by such Contributor as a result of warranty, support,
+     indemnity or liability terms You offer. You may include additional
+     disclaimers of warranty and limitations of liability specific to any
+     jurisdiction.
+
+4. Inability to Comply Due to Statute or Regulation
+
+   If it is impossible for You to comply with any of the terms of this License
+   with respect to some or all of the Covered Software due to statute,
+   judicial order, or regulation then You must: (a) comply with the terms of
+   this License to the maximum extent possible; and (b) describe the
+   limitations and the code they affect. Such description must be placed in a
+   text file included with all distributions of the Covered Software under
+   this License. Except to the extent prohibited by statute or regulation,
+   such description must be sufficiently detailed for a recipient of ordinary
+   skill to be able to understand it.
+
+5. Termination
+
+5.1. The rights granted under this License will terminate automatically if You
+     fail to comply with any of its terms. However, if You become compliant,
+     then the rights granted under this License from a particular Contributor
+     are reinstated (a) provisionally, unless and until such Contributor
+     explicitly and finally terminates Your grants, and (b) on an ongoing
+     basis, if such Contributor fails to notify You of the non-compliance by
+     some reasonable means prior to 60 days after You have come back into
+     compliance. Moreover, Your grants from a particular Contributor are
+     reinstated on an ongoing basis if such Contributor notifies You of the
+     non-compliance by some reasonable means, this is the first time You have
+     received notice of non-compliance with this License from such
+     Contributor, and You become compliant prior to 30 days after Your receipt
+     of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent
+     infringement claim (excluding declaratory judgment actions,
+     counter-claims, and cross-claims) alleging that a Contributor Version
+     directly or indirectly infringes any patent, then the rights granted to
+     You by any and all Contributors for the Covered Software under Section
+     2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all end user
+     license agreements (excluding distributors and resellers) which have been
+     validly granted by You or Your distributors under this License prior to
+     termination shall survive termination.
+
+6. Disclaimer of Warranty
+
+   Covered Software is provided under this License on an "as is" basis,
+   without warranty of any kind, either expressed, implied, or statutory,
+   including, without limitation, warranties that the Covered Software is free
+   of defects, merchantable, fit for a particular purpose or non-infringing.
+   The entire risk as to the quality and performance of the Covered Software
+   is with You. Should any Covered Software prove defective in any respect,
+   You (not any Contributor) assume the cost of any necessary servicing,
+   repair, or correction. This disclaimer of warranty constitutes an essential
+   part of this License. No use of  any Covered Software is authorized under
+   this License except under this disclaimer.
+
+7. Limitation of Liability
+
+   Under no circumstances and under no legal theory, whether tort (including
+   negligence), contract, or otherwise, shall any Contributor, or anyone who
+   distributes Covered Software as permitted above, be liable to You for any
+   direct, indirect, special, incidental, or consequential damages of any
+   character including, without limitation, damages for lost profits, loss of
+   goodwill, work stoppage, computer failure or malfunction, or any and all
+   other commercial damages or losses, even if such party shall have been
+   informed of the possibility of such damages. This limitation of liability
+   shall not apply to liability for death or personal injury resulting from
+   such party's negligence to the extent applicable law prohibits such
+   limitation. Some jurisdictions do not allow the exclusion or limitation of
+   incidental or consequential damages, so this exclusion and limitation may
+   not apply to You.
+
+8. Litigation
+
+   Any litigation relating to this License may be brought only in the courts
+   of a jurisdiction where the defendant maintains its principal place of
+   business and such litigation shall be governed by laws of that
+   jurisdiction, without reference to its conflict-of-law provisions. Nothing
+   in this Section shall prevent a party's ability to bring cross-claims or
+   counter-claims.
+
+9. Miscellaneous
+
+   This License represents the complete agreement concerning the subject
+   matter hereof. If any provision of this License is held to be
+   unenforceable, such provision shall be reformed only to the extent
+   necessary to make it enforceable. Any law or regulation which provides that
+   the language of a contract shall be construed against the drafter shall not
+   be used to construe this License against a Contributor.
+
+
+10. Versions of the License
+
+10.1. New Versions
+
+      Mozilla Foundation is the license steward. Except as provided in Section
+      10.3, no one other than the license steward has the right to modify or
+      publish new versions of this License. Each version will be given a
+      distinguishing version number.
+
+10.2. Effect of New Versions
+
+      You may distribute the Covered Software under the terms of the version
+      of the License under which You originally received the Covered Software,
+      or under the terms of any subsequent version published by the license
+      steward.
+
+10.3. Modified Versions
+
+      If you create software not governed by this License, and you want to
+      create a new license for such software, you may create and use a
+      modified version of this License if you rename the license and remove
+      any references to the name of the license steward (except to note that
+      such modified license differs from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary
+      Licenses If You choose to distribute Source Code Form that is
+      Incompatible With Secondary Licenses under the terms of this version of
+      the License, the notice described in Exhibit B of this License must be
+      attached.
+
+Exhibit A - Source Code Form License Notice
+
+      This Source Code Form is subject to the
+      terms of the Mozilla Public License, v.
+      2.0. If a copy of the MPL was not
+      distributed with this file, You can
+      obtain one at
+      http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular file,
+then You may include the notice in a location (such as a LICENSE file in a
+relevant directory) where a recipient would be likely to look for such a
+notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+
+      This Source Code Form is "Incompatible
+      With Secondary Licenses", as defined by
+      the Mozilla Public License, v. 2.0.
+

gaia/distros/spark/apps/directory/components/fxos-achievements-service/achievements-service.js

@@ -0,0 +1,144 @@
+'use strict';
+
+/* global Notification, console */
+
+const DEFAULT_IMAGE_SIZE = 64;
+const MOZ_SETTINGS_NOT_AVAILABLE_MSG = 'navigator.mozSettings is not available';
+
+class ImageHelper {
+  static getImage(aSrc) {
+    return new Promise((resolve, reject) => {
+      let image = new Image();
+      image.src = aSrc;
+      image.onload = () => resolve(image);
+      image.onerror = reason => reject(reason);
+    }).catch(reason => console.warn('Could not load an achievement image:',
+      reason));
+  }
+
+  /**
+   * Generate a Data URL for an image from source.
+   * @param  {String} aSrc source path to the image
+   * @return {Promise} a promise of Data URL.
+   */
+  static generateImageDataURL(aSrc) {
+    return ImageHelper.getImage(aSrc).then(image => {
+      try {
+        let canvas = document.createElement('canvas');
+        canvas.height = canvas.width = DEFAULT_IMAGE_SIZE;
+        let context = canvas.getContext('2d');
+        let dataUrl;
+
+        context.drawImage(image, 0, 0, DEFAULT_IMAGE_SIZE, DEFAULT_IMAGE_SIZE);
+        dataUrl = canvas.toDataURL();
+
+        // Clean up.
+        canvas.width = canvas.height = 0;
+        canvas = null;
+
+        return dataUrl;
+      } catch(e) {
+        return Promise.reject('Could not convert image to Data URL.');
+      }
+    }).catch(reason => console.warn(reason));
+  }
+}
+
+class SettingsHelper {
+  static get(name, defaultValue) {
+    if (!name) {
+      return Promise.reject('Setting name is missing');
+    }
+
+    if (!navigator.mozSettings) {
+      console.warn(MOZ_SETTINGS_NOT_AVAILABLE_MSG);
+      return Promise.reject(MOZ_SETTINGS_NOT_AVAILABLE_MSG);
+    }
+
+    return new Promise((resolve, reject) => {
+      let setting = navigator.mozSettings.createLock().get(name, defaultValue);
+      setting.onsuccess = () => {
+        let settingValue = setting.result[name] || defaultValue;
+        resolve(settingValue);
+      };
+      setting.onerror = () => { reject(setting.error); };
+    });
+  }
+
+  static set(settings) {
+    if (!settings) {
+      return Promise.reject('Settings are missing');
+    }
+
+    if (!navigator.mozSettings) {
+      console.warn(MOZ_SETTINGS_NOT_AVAILABLE_MSG);
+      return Promise.reject(MOZ_SETTINGS_NOT_AVAILABLE_MSG);
+    }
+
+    return new Promise((resolve, reject) => {
+      let result = navigator.mozSettings.createLock().set(settings);
+      result.onsuccess = () => { resolve(result.result); };
+      result.onerror = () => { reject(result.error); };
+    });
+  }
+}
+
+export default class AchievementsService {
+  /**
+   * Reward an achievement and store a record in 'achievements' setting.
+   * @param {JSON} options attributes for the achievement that is awarded:
+   *                       {String} criteria    URL of the criteria for earning
+   *                                            the achievement
+   *                       {String} evidence    A URN of the evidence of
+   *                                            achievement unlocked
+   *                       {String} name        Achievement name
+   *                       {String} description Achievement description
+   *                       {String} image       Achievement image
+   */
+  reward({criteria, evidence, name, description, image}) {
+    if (!evidence) {
+      return Promise.reject('Evidence is not provided.');
+    }
+
+    let issuedOn;
+    return SettingsHelper.get('achievements', []).then(achievements => {
+      let achievement = achievements.find(
+        achievement => achievement.criteria === criteria);
+
+      if (!achievement) {
+        return Promise.reject('Achievement is not registered.');
+      }
+      if (achievement.evidence) {
+        return Promise.reject('Achievement is already awarded.');
+      }
+
+      achievement.evidence = evidence;
+      achievement.uid = 'achievement' + Math.round(Math.random() * 100000000);
+      achievement.issuedOn = issuedOn = Date.now();
+      achievement.recipient = {}; // TODO
+
+      return achievements;
+    }).then(achievements => Promise.all([
+      ImageHelper.generateImageDataURL(image),
+      SettingsHelper.set({ 'achievements': achievements })
+    ])).then(([image]) => {
+      // Send a Notification via WebAPI to be handled by the Gaia::System
+      let notification = new Notification(name, {
+        body: description,
+        icon: image,
+        tag: issuedOn
+      });
+
+      notification.onclick = () => {
+        let activity = new window.MozActivity({
+          name: 'configure',
+          data: {
+            target: 'device',
+            section: 'achievements'
+          }
+        });
+        activity.onsuccess = activity.onerror = () => { notification.close(); };
+      };
+    }).catch(reason => console.warn(reason));
+  }
+}

gaia/distros/spark/apps/directory/components/fxos-achievements-service/bower.json

@@ -0,0 +1,17 @@
+{
+  "name": "fxos-achievements-service",
+  "version": "0.0.14",
+  "description": "Achievements service for embedding achievements support into Gaia apps",
+  "homepage": "https://github.com/fxos/fxos-achievements-service",
+  "license": "MPL",
+  "main": "achievements-service.js",
+  "ignore": [
+    "**/.*",
+    "example",
+    "componenets",
+    "node_modules",
+    "package.json",
+    "README.md",
+    "test"
+  ]
+}

gaia/distros/spark/apps/directory/components/fxos-achievements-service/dist/achievements-service.js

@@ -0,0 +1,175 @@
+define(["exports"], function (exports) {
+  "use strict";
+
+  var _toArray = function (arr) {
+    return Array.isArray(arr) ? arr : Array.from(arr);
+  };
+
+  "use strict";
+
+  /* global Notification, console */
+
+  var DEFAULT_IMAGE_SIZE = 64;
+  var MOZ_SETTINGS_NOT_AVAILABLE_MSG = "navigator.mozSettings is not available";
+
+  var ImageHelper = (function () {
+    var ImageHelper = function ImageHelper() {};
+
+    ImageHelper.getImage = function (aSrc) {
+      return new Promise(function (resolve, reject) {
+        var image = new Image();
+        image.src = aSrc;
+        image.onload = function () {
+          return resolve(image);
+        };
+        image.onerror = function (reason) {
+          return reject(reason);
+        };
+      })["catch"](function (reason) {
+        return console.warn("Could not load an achievement image:", reason);
+      });
+    };
+
+    ImageHelper.generateImageDataURL = function (aSrc) {
+      return ImageHelper.getImage(aSrc).then(function (image) {
+        try {
+          var canvas = document.createElement("canvas");
+          canvas.height = canvas.width = DEFAULT_IMAGE_SIZE;
+          var context = canvas.getContext("2d");
+          var dataUrl;
+
+          context.drawImage(image, 0, 0, DEFAULT_IMAGE_SIZE, DEFAULT_IMAGE_SIZE);
+          dataUrl = canvas.toDataURL();
+
+          // Clean up.
+          canvas.width = canvas.height = 0;
+          canvas = null;
+
+          return dataUrl;
+        } catch (e) {
+          return Promise.reject("Could not convert image to Data URL.");
+        }
+      })["catch"](function (reason) {
+        return console.warn(reason);
+      });
+    };
+
+    return ImageHelper;
+  })();
+
+  var SettingsHelper = (function () {
+    var SettingsHelper = function SettingsHelper() {};
+
+    SettingsHelper.get = function (name, defaultValue) {
+      if (!name) {
+        return Promise.reject("Setting name is missing");
+      }
+
+      if (!navigator.mozSettings) {
+        console.warn(MOZ_SETTINGS_NOT_AVAILABLE_MSG);
+        return Promise.reject(MOZ_SETTINGS_NOT_AVAILABLE_MSG);
+      }
+
+      return new Promise(function (resolve, reject) {
+        var setting = navigator.mozSettings.createLock().get(name, defaultValue);
+        setting.onsuccess = function () {
+          var settingValue = setting.result[name] || defaultValue;
+          resolve(settingValue);
+        };
+        setting.onerror = function () {
+          reject(setting.error);
+        };
+      });
+    };
+
+    SettingsHelper.set = function (settings) {
+      if (!settings) {
+        return Promise.reject("Settings are missing");
+      }
+
+      if (!navigator.mozSettings) {
+        console.warn(MOZ_SETTINGS_NOT_AVAILABLE_MSG);
+        return Promise.reject(MOZ_SETTINGS_NOT_AVAILABLE_MSG);
+      }
+
+      return new Promise(function (resolve, reject) {
+        var result = navigator.mozSettings.createLock().set(settings);
+        result.onsuccess = function () {
+          resolve(result.result);
+        };
+        result.onerror = function () {
+          reject(result.error);
+        };
+      });
+    };
+
+    return SettingsHelper;
+  })();
+
+  var AchievementsService = (function () {
+    var AchievementsService = function AchievementsService() {};
+
+    AchievementsService.prototype.reward = function (_ref) {
+      var criteria = _ref.criteria;
+      var evidence = _ref.evidence;
+      var name = _ref.name;
+      var description = _ref.description;
+      var image = _ref.image;
+      if (!evidence) {
+        return Promise.reject("Evidence is not provided.");
+      }
+
+      var issuedOn;
+      return SettingsHelper.get("achievements", []).then(function (achievements) {
+        var achievement = achievements.find(function (achievement) {
+          return achievement.criteria === criteria;
+        });
+
+        if (!achievement) {
+          return Promise.reject("Achievement is not registered.");
+        }
+        if (achievement.evidence) {
+          return Promise.reject("Achievement is already awarded.");
+        }
+
+        achievement.evidence = evidence;
+        achievement.uid = "achievement" + Math.round(Math.random() * 100000000);
+        achievement.issuedOn = issuedOn = Date.now();
+        achievement.recipient = {}; // TODO
+
+        return achievements;
+      }).then(function (achievements) {
+        return Promise.all([ImageHelper.generateImageDataURL(image), SettingsHelper.set({ achievements: achievements })]);
+      }).then(function (_ref2) {
+        var _ref3 = _toArray(_ref2);
+
+        var image = _ref3[0];
+        // Send a Notification via WebAPI to be handled by the Gaia::System
+        var notification = new Notification(name, {
+          body: description,
+          icon: image,
+          tag: issuedOn
+        });
+
+        notification.onclick = function () {
+          var activity = new window.MozActivity({
+            name: "configure",
+            data: {
+              target: "device",
+              section: "achievements"
+            }
+          });
+          activity.onsuccess = activity.onerror = function () {
+            notification.close();
+          };
+        };
+      })["catch"](function (reason) {
+        return console.warn(reason);
+      });
+    };
+
+    return AchievementsService;
+  })();
+
+  exports["default"] = AchievementsService;
+});

gaia/distros/spark/apps/directory/components/fxos-achievements-service/gulpfile.js

@@ -0,0 +1,28 @@
+'use strict';
+
+/* global require, console */
+
+var gulp = require('gulp');
+var to5 = require('gulp-6to5');
+
+/**
+ * converts javascript to es5.
+ */
+gulp.task('to5', function () {
+  try {
+    return gulp.src('./achievements-service.js')
+      .pipe(to5({ modules: 'amd' }).on('error', function(e) {
+        console.log('error running 6to5', e);
+      }))
+      .pipe(gulp.dest('./dist/'));
+  }  catch(e) {
+    console.log('Got error in 6to5', e);
+  }
+});
+
+gulp.task('default', ['to5']);
+
+/**
+ * Runs travis tests
+ */
+gulp.task('travis', ['to5']);

gaia/distros/spark/apps/directory/components/fxos-dev-mode-dialog/LICENSE

@@ -0,0 +1,363 @@
+Mozilla Public License, version 2.0
+
+1. Definitions
+
+1.1. "Contributor"
+
+     means each individual or legal entity that creates, contributes to the
+     creation of, or owns Covered Software.
+
+1.2. "Contributor Version"
+
+     means the combination of the Contributions of others (if any) used by a
+     Contributor and that particular Contributor's Contribution.
+
+1.3. "Contribution"
+
+     means Covered Software of a particular Contributor.
+
+1.4. "Covered Software"
+
+     means Source Code Form to which the initial Contributor has attached the
+     notice in Exhibit A, the Executable Form of such Source Code Form, and
+     Modifications of such Source Code Form, in each case including portions
+     thereof.
+
+1.5. "Incompatible With Secondary Licenses"
+     means
+
+     a. that the initial Contributor has attached the notice described in
+        Exhibit B to the Covered Software; or
+
+     b. that the Covered Software was made available under the terms of
+        version 1.1 or earlier of the License, but not also under the terms of
+        a Secondary License.
+
+1.6. "Executable Form"
+
+     means any form of the work other than Source Code Form.
+
+1.7. "Larger Work"
+
+     means a work that combines Covered Software with other material, in a
+     separate file or files, that is not Covered Software.
+
+1.8. "License"
+
+     means this document.
+
+1.9. "Licensable"
+
+     means having the right to grant, to the maximum extent possible, whether
+     at the time of the initial grant or subsequently, any and all of the
+     rights conveyed by this License.
+
+1.10. "Modifications"
+
+     means any of the following:
+
+     a. any file in Source Code Form that results from an addition to,
+        deletion from, or modification of the contents of Covered Software; or
+
+     b. any new file in Source Code Form that contains any Covered Software.
+
+1.11. "Patent Claims" of a Contributor
+
+      means any patent claim(s), including without limitation, method,
+      process, and apparatus claims, in any patent Licensable by such
+      Contributor that would be infringed, but for the grant of the License,
+      by the making, using, selling, offering for sale, having made, import,
+      or transfer of either its Contributions or its Contributor Version.
+
+1.12. "Secondary License"
+
+      means either the GNU General Public License, Version 2.0, the GNU Lesser
+      General Public License, Version 2.1, the GNU Affero General Public
+      License, Version 3.0, or any later versions of those licenses.
+
+1.13. "Source Code Form"
+
+      means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your")
+
+      means an individual or a legal entity exercising rights under this
+      License. For legal entities, "You" includes any entity that controls, is
+      controlled by, or is under common control with You. For purposes of this
+      definition, "control" means (a) the power, direct or indirect, to cause
+      the direction or management of such entity, whether by contract or
+      otherwise, or (b) ownership of more than fifty percent (50%) of the
+      outstanding shares or beneficial ownership of such entity.
+
+
+2. License Grants and Conditions
+
+2.1. Grants
+
+     Each Contributor hereby grants You a world-wide, royalty-free,
+     non-exclusive license:
+
+     a. under intellectual property rights (other than patent or trademark)
+        Licensable by such Contributor to use, reproduce, make available,
+        modify, display, perform, distribute, and otherwise exploit its
+        Contributions, either on an unmodified basis, with Modifications, or
+        as part of a Larger Work; and
+
+     b. under Patent Claims of such Contributor to make, use, sell, offer for
+        sale, have made, import, and otherwise transfer either its
+        Contributions or its Contributor Version.
+
+2.2. Effective Date
+
+     The licenses granted in Section 2.1 with respect to any Contribution
+     become effective for each Contribution on the date the Contributor first
+     distributes such Contribution.
+
+2.3. Limitations on Grant Scope
+
+     The licenses granted in this Section 2 are the only rights granted under
+     this License. No additional rights or licenses will be implied from the
+     distribution or licensing of Covered Software under this License.
+     Notwithstanding Section 2.1(b) above, no patent license is granted by a
+     Contributor:
+
+     a. for any code that a Contributor has removed from Covered Software; or
+
+     b. for infringements caused by: (i) Your and any other third party's
+        modifications of Covered Software, or (ii) the combination of its
+        Contributions with other software (except as part of its Contributor
+        Version); or
+
+     c. under Patent Claims infringed by Covered Software in the absence of
+        its Contributions.
+
+     This License does not grant any rights in the trademarks, service marks,
+     or logos of any Contributor (except as may be necessary to comply with
+     the notice requirements in Section 3.4).
+
+2.4. Subsequent Licenses
+
+     No Contributor makes additional grants as a result of Your choice to
+     distribute the Covered Software under a subsequent version of this
+     License (see Section 10.2) or under the terms of a Secondary License (if
+     permitted under the terms of Section 3.3).
+
+2.5. Representation
+
+     Each Contributor represents that the Contributor believes its
+     Contributions are its original creation(s) or it has sufficient rights to
+     grant the rights to its Contributions conveyed by this License.
+
+2.6. Fair Use
+
+     This License is not intended to limit any rights You have under
+     applicable copyright doctrines of fair use, fair dealing, or other
+     equivalents.
+
+2.7. Conditions
+
+     Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in
+     Section 2.1.
+
+
+3. Responsibilities
+
+3.1. Distribution of Source Form
+
+     All distribution of Covered Software in Source Code Form, including any
+     Modifications that You create or to which You contribute, must be under
+     the terms of this License. You must inform recipients that the Source
+     Code Form of the Covered Software is governed by the terms of this
+     License, and how they can obtain a copy of this License. You may not
+     attempt to alter or restrict the recipients' rights in the Source Code
+     Form.
+
+3.2. Distribution of Executable Form
+
+     If You distribute Covered Software in Executable Form then:
+
+     a. such Covered Software must also be made available in Source Code Form,
+        as described in Section 3.1, and You must inform recipients of the
+        Executable Form how they can obtain a copy of such Source Code Form by
+        reasonable means in a timely manner, at a charge no more than the cost
+        of distribution to the recipient; and
+
+     b. You may distribute such Executable Form under the terms of this
+        License, or sublicense it under different terms, provided that the
+        license for the Executable Form does not attempt to limit or alter the
+        recipients' rights in the Source Code Form under this License.
+
+3.3. Distribution of a Larger Work
+
+     You may create and distribute a Larger Work under terms of Your choice,
+     provided that You also comply with the requirements of this License for
+     the Covered Software. If the Larger Work is a combination of Covered
+     Software with a work governed by one or more Secondary Licenses, and the
+     Covered Software is not Incompatible With Secondary Licenses, this
+     License permits You to additionally distribute such Covered Software
+     under the terms of such Secondary License(s), so that the recipient of
+     the Larger Work may, at their option, further distribute the Covered
+     Software under the terms of either this License or such Secondary
+     License(s).
+
+3.4. Notices
+
+     You may not remove or alter the substance of any license notices
+     (including copyright notices, patent notices, disclaimers of warranty, or
+     limitations of liability) contained within the Source Code Form of the
+     Covered Software, except that You may alter any license notices to the
+     extent required to remedy known factual inaccuracies.
+
+3.5. Application of Additional Terms
+
+     You may choose to offer, and to charge a fee for, warranty, support,
+     indemnity or liability obligations to one or more recipients of Covered
+     Software. However, You may do so only on Your own behalf, and not on
+     behalf of any Contributor. You must make it absolutely clear that any
+     such warranty, support, indemnity, or liability obligation is offered by
+     You alone, and You hereby agree to indemnify every Contributor for any
+     liability incurred by such Contributor as a result of warranty, support,
+     indemnity or liability terms You offer. You may include additional
+     disclaimers of warranty and limitations of liability specific to any
+     jurisdiction.
+
+4. Inability to Comply Due to Statute or Regulation
+
+   If it is impossible for You to comply with any of the terms of this License
+   with respect to some or all of the Covered Software due to statute,
+   judicial order, or regulation then You must: (a) comply with the terms of
+   this License to the maximum extent possible; and (b) describe the
+   limitations and the code they affect. Such description must be placed in a
+   text file included with all distributions of the Covered Software under
+   this License. Except to the extent prohibited by statute or regulation,
+   such description must be sufficiently detailed for a recipient of ordinary
+   skill to be able to understand it.
+
+5. Termination
+
+5.1. The rights granted under this License will terminate automatically if You
+     fail to comply with any of its terms. However, if You become compliant,
+     then the rights granted under this License from a particular Contributor
+     are reinstated (a) provisionally, unless and until such Contributor
+     explicitly and finally terminates Your grants, and (b) on an ongoing
+     basis, if such Contributor fails to notify You of the non-compliance by
+     some reasonable means prior to 60 days after You have come back into
+     compliance. Moreover, Your grants from a particular Contributor are
+     reinstated on an ongoing basis if such Contributor notifies You of the
+     non-compliance by some reasonable means, this is the first time You have
+     received notice of non-compliance with this License from such
+     Contributor, and You become compliant prior to 30 days after Your receipt
+     of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent
+     infringement claim (excluding declaratory judgment actions,
+     counter-claims, and cross-claims) alleging that a Contributor Version
+     directly or indirectly infringes any patent, then the rights granted to
+     You by any and all Contributors for the Covered Software under Section
+     2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all end user
+     license agreements (excluding distributors and resellers) which have been
+     validly granted by You or Your distributors under this License prior to
+     termination shall survive termination.
+
+6. Disclaimer of Warranty
+
+   Covered Software is provided under this License on an "as is" basis,
+   without warranty of any kind, either expressed, implied, or statutory,
+   including, without limitation, warranties that the Covered Software is free
+   of defects, merchantable, fit for a particular purpose or non-infringing.
+   The entire risk as to the quality and performance of the Covered Software
+   is with You. Should any Covered Software prove defective in any respect,
+   You (not any Contributor) assume the cost of any necessary servicing,
+   repair, or correction. This disclaimer of warranty constitutes an essential
+   part of this License. No use of  any Covered Software is authorized under
+   this License except under this disclaimer.
+
+7. Limitation of Liability
+
+   Under no circumstances and under no legal theory, whether tort (including
+   negligence), contract, or otherwise, shall any Contributor, or anyone who
+   distributes Covered Software as permitted above, be liable to You for any
+   direct, indirect, special, incidental, or consequential damages of any
+   character including, without limitation, damages for lost profits, loss of
+   goodwill, work stoppage, computer failure or malfunction, or any and all
+   other commercial damages or losses, even if such party shall have been
+   informed of the possibility of such damages. This limitation of liability
+   shall not apply to liability for death or personal injury resulting from
+   such party's negligence to the extent applicable law prohibits such
+   limitation. Some jurisdictions do not allow the exclusion or limitation of
+   incidental or consequential damages, so this exclusion and limitation may
+   not apply to You.
+
+8. Litigation
+
+   Any litigation relating to this License may be brought only in the courts
+   of a jurisdiction where the defendant maintains its principal place of
+   business and such litigation shall be governed by laws of that
+   jurisdiction, without reference to its conflict-of-law provisions. Nothing
+   in this Section shall prevent a party's ability to bring cross-claims or
+   counter-claims.
+
+9. Miscellaneous
+
+   This License represents the complete agreement concerning the subject
+   matter hereof. If any provision of this License is held to be
+   unenforceable, such provision shall be reformed only to the extent
+   necessary to make it enforceable. Any law or regulation which provides that
+   the language of a contract shall be construed against the drafter shall not
+   be used to construe this License against a Contributor.
+
+
+10. Versions of the License
+
+10.1. New Versions
+
+      Mozilla Foundation is the license steward. Except as provided in Section
+      10.3, no one other than the license steward has the right to modify or
+      publish new versions of this License. Each version will be given a
+      distinguishing version number.
+
+10.2. Effect of New Versions
+
+      You may distribute the Covered Software under the terms of the version
+      of the License under which You originally received the Covered Software,
+      or under the terms of any subsequent version published by the license
+      steward.
+
+10.3. Modified Versions
+
+      If you create software not governed by this License, and you want to
+      create a new license for such software, you may create and use a
+      modified version of this License if you rename the license and remove
+      any references to the name of the license steward (except to note that
+      such modified license differs from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary
+      Licenses If You choose to distribute Source Code Form that is
+      Incompatible With Secondary Licenses under the terms of this version of
+      the License, the notice described in Exhibit B of this License must be
+      attached.
+
+Exhibit A - Source Code Form License Notice
+
+      This Source Code Form is subject to the
+      terms of the Mozilla Public License, v.
+      2.0. If a copy of the MPL was not
+      distributed with this file, You can
+      obtain one at
+      http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular file,
+then You may include the notice in a location (such as a LICENSE file in a
+relevant directory) where a recipient would be likely to look for such a
+notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+
+      This Source Code Form is "Incompatible
+      With Secondary Licenses", as defined by
+      the Mozilla Public License, v. 2.0.
+

gaia/distros/spark/apps/directory/components/fxos-dev-mode-dialog/bower.json

@@ -0,0 +1,13 @@
+{
+  "name": "fxos-dev-mode-dialog",
+  "version": "0.0.3",
+  "description": "Developer Mode prompt for Gaia apps.",
+  "homepage": "https://github.com/fxos/fxos-dev-mode-dialog",
+  "license": "MPL",
+  "main": "fxos-dev-mode-dialog.js",
+  "ignore": [
+    "**/.*",
+    "package.json",
+    "README.md"
+  ]
+}

gaia/distros/spark/apps/directory/components/fxos-dev-mode-dialog/fxos-dev-mode-dialog.js

@@ -0,0 +1,157 @@
+(function(window) {
+'use strict';
+
+var template = `<style>
+.modal-dialog {
+  background: #2d2d2d;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 100;
+}
+.modal-dialog > section {
+  color: #FAFAFA;
+  padding: 80px 25px 0;
+  -moz-box-sizing: padding-box;
+  font-size: 22px;
+  line-height: 30px;
+  font-weight: 300;
+  width: 100%;
+  display: inline-block;
+  overflow-y: scroll;
+  max-height: 100%;
+  vertical-align: middle;
+}
+.modal-dialog h1 {
+  font-size: 19px;
+  font-weight: 400;
+  line-height: 28px;
+  color: #fff;
+  margin: 0;
+  padding-top: 10px;
+}
+/* Menu & buttons setup */
+.modal-dialog menu {
+  padding: 15px;
+  background: #4d4d4d;
+  display: flex;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+}
+.modal-dialog p {
+  word-wrap: break-word;
+  margin: 10px 0 0;
+  padding: 10px 0;
+  border-top: 0.1rem solid #686868;
+  line-height: 30px;
+}
+.modal-dialog p > span {
+  padding-top: 25px;
+  display: block;
+}
+.modal-dialog menu button {
+  font-family: sans-serif;
+  font-style: italic;
+  width: 100%;
+  height: 40px;
+  margin: 0 0 10px;
+  padding: 0 2px;
+  font-size: 16px;
+  line-height: 40px;
+  -moz-box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  background: #d8d8d8;
+  border: none;
+  border-radius: 20px;
+  color: #333;
+  text-align: center;
+  -moz-margin-end: 10px;
+}
+/* Pressed */
+.modal-dialog menu button:active {
+  background: #00aacc;
+  color: #fff;
+}
+.modal-dialog menu button:last-child {
+  -moz-margin-end: 0;
+}
+.hidden {
+  display: none;
+}
+</style>
+<div class="modal-dialog hidden">
+  <section>
+    <h1>Developer Mode not enabled</h1>
+    <p>To gain access to this and other customization features,
+    you must enable Developer Mode.
+    <span>Click Continue to go to Settings app and enable Developer Mode.</span>
+    </p>
+  </section>
+  <menu>
+    <button class="cancel">Cancel</button>
+    <button class="continue">Continue</button>
+  </menu>
+</div>`;
+
+var proto = Object.create(HTMLElement.prototype);
+
+proto.createdCallback = function() {
+  this.shadow = this.createShadowRoot();
+  this.shadow.innerHTML = template;
+  this.modalDialog = this.shadow.querySelector('.modal-dialog');
+  this.cancelButton = this.shadow.querySelector('.cancel');
+  this.continueButton = this.shadow.querySelector('.continue');
+
+  this.cancelButton.addEventListener(
+    'click', this.handleCancel.bind(this));
+  this.continueButton.addEventListener(
+    'click', this.handleContinue.bind(this));
+
+  // If dev mode perf is enabled emit 'enabled' event else
+  // show the confirm modal dialog
+  navigator.getFeature('dom.apps.developer_mode').then(enabled => {
+    if (enabled) {
+      // Emit Enabled Event
+      this.dispatchEvent(new CustomEvent('enabled'));
+    } else {
+      this.modalDialog.classList.remove('hidden');
+    }
+  });
+};
+
+proto.handleCancel = function(e) {
+  window.close();
+};
+
+proto.handleContinue = function(e) {
+  // Invoke Settings activity to enable developer mode
+  // XXX: Bug 1163889
+  var activity = new window.MozActivity({
+    name: 'configure',
+    data: {
+      target: 'device',
+      section: 'full-developer-mode'
+    }
+  });
+  activity.onerror = function() {
+    console.log('Settings configure activity error:', activity.error.name);
+  };
+};
+
+try {
+  document.registerElement('fxos-dev-mode-dialog', { prototype: proto });
+} catch (e) {
+  if (e.name !== 'NotSupportedError') {
+    throw e;
+  }
+}
+
+})(window);

gaia/distros/spark/apps/directory/components/fxos-mvc/bower.json

@@ -0,0 +1,15 @@
+{
+  "name": "fxos-mvc",
+  "version": "0.0.7",
+  "homepage": "https://github.com/fxos/mvc",
+  "license": "MPL",
+  "main": "mvc.js",
+  "ignore": [
+    "**/.*",
+    "example",
+    "node_modules",
+    "package.json",
+    "README.md",
+    "test"
+  ]
+}

gaia/distros/spark/apps/directory/components/fxos-mvc/gulpfile.js

@@ -0,0 +1,44 @@
+var gulp = require('gulp');
+var merge = require('gulp-merge');
+var concat = require('gulp-concat');
+var wrapper = require('gulp-wrapper');
+var to5 = require('gulp-6to5');
+
+/**
+ * converts javascript to es5.
+ */
+gulp.task('to5', function () {
+	try {
+		return merge(
+				gulp
+					.src([
+						'./node_modules/observe-shim/lib/observe-shim.js',
+						'./node_modules/observe-utils/lib/observe-utils.js'
+					])
+					.pipe(concat('shim.js')),
+				gulp
+					.src([
+						'./node_modules/sanitizer/sanitizer.js'
+					])
+					.pipe(wrapper({
+						header: '(function(){var define,exports;',
+						footer: '})(window);'
+					}))
+					.pipe(concat('deps.js')),
+				gulp
+					.src('./mvc.js')
+					.pipe(to5({
+							modules: 'amd'
+						}).on('error', function(e) {
+							console.log('error running 6to5', e);
+						})
+					)
+			)
+			.pipe(concat('mvc.js'))
+			.pipe(gulp.dest('./dist/'));
+	}  catch(e) {
+		console.log('Got error in 6to5', e);
+	}
+});
+
+gulp.task('default', ['to5']);

gaia/distros/spark/apps/directory/components/fxos-mvc/mvc.js

@@ -0,0 +1,312 @@
+/**
+ * Model
+ */
+export class Model {
+  constructor(properties) {
+    properties = properties || {};
+
+    for (var key in properties) {
+      this[key] = properties[key];
+    }
+
+    this.observableProperties = {};
+
+    Object.observe(this, (changes) => {
+      changes.forEach((change) => {
+        var handlers = this.observableProperties[change.name];
+        if (handlers) {
+          handlers.forEach((handler) => {
+            handler(change);
+          });
+        }
+      });
+    });
+  }
+
+  on(property, handler) {
+    if (typeof handler !== 'function') {
+      return;
+    }
+
+    if (!this.observableProperties[property]) {
+      ObserveUtils.defineObservableProperties(this, property);
+      this.observableProperties[property] = [];
+    }
+
+    this.observableProperties[property].push(handler);
+  }
+}
+
+/**
+ * View
+ */
+var events = {};
+
+export class View {
+  constructor(options) {
+    options = options || {};
+
+    for (var key in options) {
+      this[key] = options[key];
+    }
+
+    if (!this.el) {
+      this.el = document.createElement('div');
+    }
+  }
+
+  /**
+   * Initializes an instance with the specified controller.
+   *
+   * @param  {Controller} controller
+   * @return {View}
+   */
+  init(controller) {
+    this.controller = controller;
+
+    return this;
+  }
+
+  /**
+   * Renders the layout wrapper for the template.
+   *
+   * @param {Template} Inner template
+   * @return {String} Rendered layout with template
+   */
+  layout(template) {
+    return template;
+  }
+
+  /**
+   * Render the default template.
+   */
+  render(params) {
+    var innerHTML = '';
+
+    if (params) {
+      if (typeof params === 'object') {
+        for (var index in params) {
+          var param = params[index];
+          innerHTML += this.template(param);
+        }
+      } else {
+        for (let i = 0; i < params.length; i++) {
+          var param = params[i];
+          innerHTML += this.template(param);
+        }
+      }
+    } else {
+      innerHTML = this.template();
+    }
+
+    this.el.innerHTML = this.layout(innerHTML);
+  }
+
+  /**
+   * Override to provide a function that returns the template string.
+   *
+   * @return {String}
+   */
+  template() {
+    return '';
+  }
+
+  /**
+   * Finds a single child element using the specified selector.
+   *
+   * @param  {String} query
+   * @return {Element | null}
+   */
+  $(selector) {
+    return this.el.querySelector(selector);
+  }
+
+  /**
+   * Finds all child elements using the specified selector.
+   *
+   * @param  {String} query
+   * @return {NodeList}
+   */
+  $$(selector) {
+    return this.el.querySelectorAll(selector);
+  }
+
+  /**
+   *
+   *
+   */
+  on(type, selector, handler, scope) {
+    var controller = this.controller;
+    scope = scope || this.el;
+
+    if (!events[type]) {
+      events[type] = [];
+      window.addEventListener(type, delegateHandler, true);
+    }
+
+    events[type].push({
+      selector: selector,
+      handler: handler,
+      controller: controller,
+      scope: scope
+    });
+  }
+
+  /**
+   *
+   *
+   */
+  off(type, selector, handler) {
+    if (!events[type]) {
+      return;
+    }
+
+    events[type] = events[type].filter((delegate) => {
+      if (typeof handler === 'function') {
+        return delegate.selector !== selector ||
+          delegate.handler  !== handler;
+      }
+
+      return delegate.selector !== selector;
+    });
+  }
+}
+
+/**
+ * Forward an event based on the target's `[data-action]` attr to the controller.
+ * e.g. "click" on a `<button data-action="cancel">` goes to controller.cancel()
+ */
+function handleAction(event, controller) {
+  var action = event.target.dataset.action;
+  if (controller && controller[action]) {
+    controller[action](event);
+  }
+}
+
+function delegateHandler(event) {
+  var target = event.target;
+
+  events[event.type].forEach((delegate) => {
+    if (delegate.scope.contains(target) && target.matches(delegate.selector)) {
+      if (delegate.handler) {
+        delegate.handler.call(target, event);
+      } else {
+        handleAction(event, delegate.controller);
+      }
+    }
+  });
+}
+
+/**
+ * Controller
+ */
+export class Controller {
+  constructor(options) {
+    options = options || {};
+
+    for (var key in options) {
+      this[key] = options[key];
+    }
+
+    // Initialize the view (if applicable) when the
+    // controller is instantiated.
+    if (this.view && typeof this.view.init === 'function') {
+      this.view.init(this);
+    }
+  }
+
+  teardown() {
+
+  }
+
+  main() {
+
+  }
+}
+
+export class RoutingController extends Controller {
+  constructor(controllers) {
+    if (window.routingController) {
+      console.error('Document can only contain one RoutingController');
+      return;
+    }
+
+    super();
+    this._controllers = controllers;
+    this.activeController = null;
+    window.routingController = this;
+    window.addEventListener('hashchange', this.route.bind(this));
+  }
+
+  route() {
+    var route = window.location.hash.slice(1);
+    var controller = this._controllers[route];
+    if (controller) {
+      if (this.activeController) {
+        this.activeController.teardown();
+      }
+
+      this.activeController = controller;
+      controller.main();
+    }
+  }
+
+  controller(id) {
+    return this._controllers[id];
+  }
+}
+
+/**
+ * Service
+ */
+export class Service {
+  constructor() {
+    this._listeners = {};
+    this._dispatchedEvents = {};
+  }
+
+  addEventListener(name, callback, trigger) {
+    if (!this._listeners[name]) {
+      this._listeners[name] = [callback];
+    } else {
+      this._listeners[name].push(callback);
+    }
+
+    if (trigger && this._dispatchedEvents[name] !== undefined) {
+      setTimeout(() => {
+        callback(this._dispatchedEvents[name]);
+      });
+    }
+  }
+
+  removeEventListener(name, callback) {
+    if (!this._listeners[name]) {
+      return;
+    }
+
+    var listenerIndex;
+    this._listeners[name].find((listener, index) => {
+      if (listener === callback) {
+        listenerIndex = index;
+      }
+
+      return listenerIndex !== undefined;
+    });
+
+    if (listenerIndex !== undefined) {
+      this._listeners[name].splice(listenerIndex, 1);
+    }
+  }
+
+  _dispatchEvent(name, params) {
+    if (!this._listeners[name]) {
+      return;
+    }
+
+    this._dispatchedEvents[name] = params || null;
+
+    this._listeners[name].forEach((listener) => {
+      listener(params);
+    });
+  }
+}

gaia/distros/spark/apps/directory/components/gaia-button/bower.json

@@ -0,0 +1,26 @@
+{
+  "name": "gaia-button",
+  "version": "0.0.3",
+  "main": "gaia-button.js",
+  "homepage": "https://github.com/gaia-components/gaia-button",
+  "authors": [
+    "cyee@mozilla.com"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "devDependencies": {
+    "gaia-fonts": "gaia-components/gaia-fonts#~0.2.1",
+    "gaia-icons": "gaia-components/gaia-icons#~0.7.1",
+    "base": "gaia-components/base",
+    "gaia-theme": "gaia-components/gaia-theme#~0.4.1"
+  },
+  "dependencies": {
+    "gaia-component": "gaia-components/gaia-component#~0.3.0"
+  }
+}

gaia/distros/spark/apps/directory/components/gaia-button/gaia-button.js

@@ -0,0 +1,198 @@
+(function(define){define(function(require,exports,module){
+/*jshint esnext:true*/
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var component = require('gaia-component');
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-button', {
+  created: function() {
+    this.setupShadowRoot();
+    this.setAttribute('role', 'button');
+    this.tabIndex = 0;
+  },
+
+  attrs: {
+    circular: {
+      get: function() { return this.getAttribute('circular'); },
+      set: function(value) {
+        value = !!(value === '' || value);
+        if (value) {
+          this.setAttribute('circular', '');
+        } else {
+          this.removeAttribute('circular');
+        }
+      }
+    },
+
+    disabled: {
+      get: function() { return this.getAttribute('disabled'); },
+      set: function(value) {
+        value = !!(value === '' || value);
+        if (value) {
+          this.setAttribute('disabled', '');
+        } else {
+          this.removeAttribute('disabled');
+        }
+      }
+    }
+  },
+
+  template: `
+    <div class="inner">
+      <div class="background"></div>
+      <div class="content"><content></content></div>
+    </div>
+
+    <style>
+
+    :host {
+      display: block;
+      box-sizing: border-box;
+      overflow: hidden;
+      height: 50px;
+      min-width: 50%;
+      border-radius: 50px;
+      margin: var(--base-m, 18px) 0;
+      outline: 0;
+      font-style: italic;
+      font-size: 17px;
+      cursor: pointer;
+      -moz-user-select: none;
+      line-height: 1;
+
+      background:
+        var(--button-background,
+        var(--input-background,
+        var(--background-plus,
+        #fff)));
+
+      color:
+        var(--button-color,
+        var(--text-color,
+        inherit));
+
+      box-shadow:
+        var(--button-box-shadow,
+        var(--box-shadow,
+        none));
+
+      transition: color 0ms 300ms;
+    }
+
+    @media(min-width:500px) {
+      :host { min-width: 140px; }
+    }
+
+    /**
+     * Pressed
+     */
+
+    :host(:active) {
+      color: var(--button-color-active, #fff);
+      box-shadow: var(--button-box-shadow-active, none);
+      transition: none;
+    }
+
+    /**
+     * [circular]
+     */
+
+    :host([circular]) {
+      width: 50px;
+      min-width: 0;
+      border-radius: 50%;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    /** Inner
+     ---------------------------------------------------------*/
+
+    .inner {
+      position: relative;
+      height: 100%;
+    }
+
+    /** Background
+     ---------------------------------------------------------*/
+
+    .background {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+
+      transition: opacity 500ms 200ms;
+
+      background:
+        var(--button-background-active,
+        var(--highlight-color,
+        #333));
+    }
+
+    :active .background {
+      transition: none;
+      opacity: 1;
+    }
+
+
+
+    /** Content
+     ---------------------------------------------------------*/
+
+    /**
+     * 1. In some cases events seems to be getting
+     *    swallowed by text-nodes. Ignoring pointer-
+     *    events means we can listen on parent nodes
+     *    instead.
+     */
+
+    .content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      z-index: 2;
+      height: 100%;
+      padding: 0 18px;
+      pointer-events: none; /* 1 */
+    }
+
+    [circular] .content {
+      padding: 0;
+    }
+
+    i:before {
+      font-size: 26px;
+    }
+
+    ::content i {
+      margin-left: -2px;
+      margin-right: -2px;
+    }
+
+    ::content i + span,
+    ::content span + i {
+      -moz-margin-start: 8px;
+    }
+
+    </style>`
+});
+
+});})((function(n,w){return typeof define=='function'&&define.amd?
+define:typeof module=='object'?function(c){c(require,exports,module);}:function(c){
+var m={exports:{}},r=function(n){return w[n];};w[n]=c(r,m.exports,m)||m.exports;};})('gaia-button',this));

gaia/distros/spark/apps/directory/components/gaia-button/index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>&lt;gaia-button&gt;</title>
+  <meta name="description" content="gaia-text-input demo" />
+  <link rel="stylesheet" type="text/css" href="bower_components/base/base.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-theme/gaia-theme.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-icons/gaia-icons.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-fonts/style.css">
+  <script src="bower_components/gaia-theme/lib/gaia-theme-selector.js"></script>
+  <script src="bower_components/gaia-component/gaia-component.js"></script>
+  <script src="gaia-button.js"></script>
+  <style type="text/css">
+
+    body {
+      padding-top: 48px;
+      background-color: var(--background);
+    }
+/*
+    [data-icon=back-light] {
+      margin-left: -9px;
+      margin-right: 10px;
+    }
+
+
+    [data-icon=forward-light] {
+      margin-left: 10px;
+      margin-right: -9px;
+    }*/
+
+    [flex] {
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+    }
+  </style>
+</head>
+<body role="application" class="l-align-center">
+  <gaia-theme-selector></gaia-theme-selector>
+  <h1 class="large l-align-center l-mb-mega">&lt;gaia-button&gt;</h1>
+
+  <section>
+    <gaia-button>Gaia button 1</gaia-button>
+    <gaia-button disabled>Gaia button 1</gaia-button>
+  </section>
+
+  <hr/>
+
+  <section>
+    <gaia-button><i data-icon="back-light"></i><span>Back</span></gaia-button>
+    <gaia-button><span>Forward</span><i data-icon="forward-light"></i></gaia-button>
+  </section>
+
+  <hr/>
+
+  <section flex>
+    <gaia-button circular><i data-icon="camera"></i></gaia-button>
+    <gaia-button circular><i data-icon="bug"></i></gaia-button>
+    <gaia-button circular><i data-icon="video"></i></gaia-button>
+    <gaia-button circular><i data-icon="camera"></i></gaia-button>
+    <gaia-button circular><i data-icon="reload"></i></gaia-button>
+    <gaia-button circular><i data-icon="airplane"></i></gaia-button>
+  </section>
+</body>
+</html>

gaia/distros/spark/apps/directory/components/gaia-component/bower.json

@@ -0,0 +1,18 @@
+{
+  "name": "gaia-component",
+  "version": "0.3.9",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "main": "gaia-component.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "README.md",
+    "package.json",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

gaia/distros/spark/apps/directory/components/gaia-component/gaia-component.js

@@ -0,0 +1,426 @@
+/* globals define */
+;(function(define){'use strict';define(function(require,exports,module){
+/**
+ * Locals
+ */
+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() {};
+
+/**
+ * Register a new component.
+ *
+ * @param  {String} name
+ * @param  {Object} props
+ * @return {constructor}
+ * @public
+ */
+exports.register = function(name, props) {
+  var baseProto = getBaseProto(props.extends);
+  var template = props.template || baseProto.templateString;
+
+  // Components are extensible by default but can be declared
+  // as non extensible as an optimization to avoid
+  // storing the template strings
+  var extensible = props.extensible = props.hasOwnProperty('extensible')?
+    props.extensible : true;
+
+  // Clean up
+  delete props.extends;
+
+  // Pull out CSS that needs to be in the light-dom
+  if (template) {
+    // Stores the string to be reprocessed when
+    // a new component extends this one
+    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;
+  }
+
+  // Inject global CSS into the document,
+  // and delete as no longer needed
+  injectGlobalCss(props.globalCss);
+  delete props.globalCss;
+
+  // Merge base getter/setter attributes with the user's,
+  // then define the property descriptors on the prototype.
+  var descriptors = mixin(props.attrs || {}, base.descriptors);
+
+  // Store the orginal descriptors somewhere
+  // a little more private and delete the original
+  props._attrs = props.attrs;
+  delete props.attrs;
+
+  // Create the prototype, extended from base and
+  // define the descriptors directly on the prototype
+  var proto = createProto(baseProto, props);
+  Object.defineProperties(proto, descriptors);
+
+  // Register the custom-element and return the constructor
+  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.rtl) { addDirObserver(); }
+      injectLightCss(this);
+      this.created();
+    },
+
+    /**
+     * It is very common to want to keep object
+     * properties in-sync with attributes,
+     * for example:
+     *
+     *   el.value = 'foo';
+     *   el.setAttribute('value', 'foo');
+     *
+     * So we support an object on the prototype
+     * named 'attrs' to provide a consistent
+     * way for component authors to define
+     * these properties. When an attribute
+     * changes we keep the attr[name]
+     * up-to-date.
+     *
+     * @param  {String} name
+     * @param  {String||null} from
+     * @param  {String||null} to
+     */
+    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() { this.attached(); },
+    detachedCallback: function() { this.detached(); },
+
+    /**
+     * A convenient method for setting up
+     * a shadow-root using the defined template.
+     *
+     * @return {ShadowRoot}
+     */
+    setupShadowRoot: function() {
+      if (!this.template) { return; }
+      var node = document.importNode(this.template.content, true);
+      this.createShadowRoot().appendChild(node);
+      return this.shadowRoot;
+    },
+
+    /**
+     * Sets an attribute internally
+     * and externally. This is so that
+     * we can style internal shadow-dom
+     * content.
+     *
+     * @param {String} name
+     * @param {String} value
+     */
+    setAttr: function(name, value) {
+      var internal = this.shadowRoot.firstElementChild;
+      setAttribute.call(internal, name, value);
+      setAttribute.call(this, name, value);
+    },
+
+    /**
+     * Removes an attribute internally
+     * and externally. This is so that
+     * we can style internal shadow-dom
+     * content.
+     *
+     * @param {String} name
+     * @param {String} 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
+    }
+  }
+};
+
+/**
+ * The default base prototype to use
+ * when `extends` is undefined.
+ *
+ * @type {Object}
+ */
+var defaultPrototype = createProto(HTMLElement.prototype, base.properties);
+
+/**
+ * Returns a suitable prototype based
+ * on the object passed.
+ *
+ * @private
+ * @param  {HTMLElementPrototype|undefined} proto
+ * @return {HTMLElementPrototype}
+ */
+function getBaseProto(proto) {
+  if (!proto) { return defaultPrototype; }
+  proto = proto.prototype || proto;
+  return !proto.GaiaComponent ?
+    createProto(proto, base.properties) : proto;
+}
+
+/**
+ * Extends the given proto and mixes
+ * in the given properties.
+ *
+ * @private
+ * @param  {Object} proto
+ * @param  {Object} props
+ * @return {Object}
+ */
+function createProto(proto, props) {
+  return mixin(Object.create(proto), props);
+}
+
+/**
+ * Detects presence of shadow-dom
+ * CSS selectors.
+ *
+ * @private
+ * @return {Boolean}
+ */
+var hasShadowCSS = (function() {
+  var div = document.createElement('div');
+  try { div.querySelector(':host'); div.querySelector('::content'); return true; }
+  catch (e) { return false; }
+})();
+
+/**
+ * Regexs used to extract shadow-css
+ *
+ * @type {Object}
+ */
+var regex = {
+  shadowCss: /(?:\:host|\:\:content)[^{]*\{[^}]*\}/g,
+  ':host': /(?:\:host)/g,
+  ':host()': /\:host\((.+)\)(?: \:\:content)?/g,
+  ':host-context': /\:host-context\((.+)\)([^{,]+)?/g,
+  '::content': /(?:\:\:content)/g
+};
+
+/**
+ * Extracts the :host and ::content rules
+ * from the shadow-dom CSS and rewrites
+ * them to work from the <style scoped>
+ * injected at the root of the component.
+ *
+ * @private
+ * @return {String}
+ */
+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, ' '); // excess whitespace
+      } else {
+        lightCss += match
+          .replace(regex[':host()'], name + '$1')
+          .replace(regex[':host'], name)
+          .replace(regex['::content'], name);
+      }
+
+      return '';
+    });
+  }
+
+  return {
+    template: template,
+    lightCss: lightCss,
+    globalCss: globalCss
+  };
+}
+
+/**
+ * Some CSS rules, such as @keyframes
+ * and @font-face don't work inside
+ * scoped or shadow <style>. So we
+ * have to put them into 'global'
+ * <style> in the head of the
+ * document.
+ *
+ * @private
+ * @param  {String} css
+ */
+function injectGlobalCss(css) {
+  if (!css) {return;}
+  var style = document.createElement('style');
+  style.innerHTML = css.trim();
+  headReady().then(function() {
+    document.head.appendChild(style);
+  });
+}
+
+
+/**
+ * Resolves a promise once document.head is ready.
+ *
+ * @private
+ */
+function headReady() {
+  return new Promise(function(resolve) {
+    if (document.head) { return resolve(); }
+    window.addEventListener('load', function fn() {
+      window.removeEventListener('load', fn);
+      resolve();
+    });
+  });
+}
+
+
+/**
+ * The Gecko platform doesn't yet have
+ * `::content` or `:host`, selectors,
+ * without these we are unable to style
+ * user-content in the light-dom from
+ * within our shadow-dom style-sheet.
+ *
+ * To workaround this, we clone the <style>
+ * node into the root of the component,
+ * so our selectors are able to target
+ * light-dom content.
+ *
+ * @private
+ */
+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;
+}
+
+/**
+ * Convert hyphen separated
+ * string to camel-case.
+ *
+ * Example:
+ *
+ *   toCamelCase('foo-bar'); //=> 'fooBar'
+ *
+ * @private
+ * @param  {Sring} string
+ * @return {String}
+ */
+function toCamelCase(string) {
+  return string.replace(/-(.)/g, function replacer(string, p1) {
+    return p1.toUpperCase();
+  });
+}
+
+/**
+ * Observer (singleton)
+ *
+ * @type {MutationObserver|undefined}
+ */
+var dirObserver;
+
+/**
+ * Observes the document `dir` (direction)
+ * attribute and dispatches a global event
+ * when it changes.
+ *
+ * Components can listen to this event and
+ * make internal changes if need be.
+ *
+ * @private
+ */
+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'));
+  }
+}
+
+/**
+ * Copy the values of all properties from
+ * source object `target` to a target object `source`.
+ * It will return the target object.
+ *
+ * @private
+ * @param   {Object} target
+ * @param   {Object} source
+ * @returns {Object}
+ */
+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));

gaia/distros/spark/apps/directory/components/gaia-dialog/bower.json

@@ -0,0 +1,23 @@
+{
+  "name": "gaia-dialog",
+  "version": "0.0.7",
+  "homepage": "https://github.com/gaia-components/gaia-dialog",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "main": "gaia-dialog.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "examples",
+    "test",
+    "tests",
+    "README.md"
+  ],
+  "dependencies": {
+    "gaia-text-input": "gaia-components/gaia-text-input",
+    "gaia-icons": "gaia-components/gaia-icons#~0.8.0"
+  }
+}

gaia/distros/spark/apps/directory/components/gaia-dialog/gaia-dialog-action.js

@@ -0,0 +1,117 @@
+;(function(define){define(function(require,exports,module){
+/*jshint esnext:true*/
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var GaiaDialog = require('gaia-dialog');
+
+/**
+ * Extend from the `HTMLElement` prototype
+ *
+ * @type {Object}
+ */
+var proto = GaiaDialog.extend();
+
+/**
+ * Runs when an instance of `GaiaTabs`
+ * is first created.
+ *
+ * The initial value of the `select` attribute
+ * is used to select a tab.
+ *
+ * @private
+ */
+proto.createdCallback = function() {
+  this.onCreated();
+  this.els.submit = this.shadowRoot.querySelector('.submit');
+  this.els.cancel = this.shadowRoot.querySelector('.cancel');
+};
+
+proto.template = `
+<style>
+.shadow-host {
+  display: none;
+}
+
+.shadow-host[opened],
+.shadow-host.animating {
+  display: block;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+/** Button
+ ---------------------------------------------------------*/
+
+.shadow-content section {
+  padding: 33px 16px;
+}
+
+.shadow-content button {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 50px;
+  margin: 0;
+  border: 0;
+  padding: 0rem 25px;
+  font: inherit;
+  background: var(--color-beta);
+  color: var(--color-epsilon);
+  transition: all 200ms;
+  transition-delay: 300ms;
+}
+
+.shadow-content button:after {
+  content: '';
+  display: block;
+  position: absolute;
+  height: 1px;
+  left: 6px;
+  right: 6px;
+  top: 49px;
+  background: #E7E7E7;
+}
+
+.shadow-content button:last-child:after {
+  display: none;
+}
+
+.shadow-content button:active {
+  background-color: var(--highlight-color);
+  color: #fff;
+  transition: none;
+}
+
+.shadow-content button:active:after {
+  background: var(--highlight-color);
+  transition: none;
+}
+</style>
+
+<gaia-dialog>
+  <section>
+    <content select="h1"></content>
+  </section>
+  <content select="button"></content>
+  <button class="cancel">Cancel</button>
+</gaia-dialog>`;
+
+// Register and expose the constructor
+try {
+  module.exports = document.registerElement('gaia-dialog-action', { prototype: proto });
+  module.exports.proto = proto;
+} catch (e) {
+  if (e.name !== 'NotSupportedError') {
+    throw e;
+  }
+}
+
+});})(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-dialog-action',this));

gaia/distros/spark/apps/directory/components/gaia-dialog/gaia-dialog-alert.js

@@ -0,0 +1,66 @@
+;(function(define){define(function(require,exports,module){
+/*jshint esnext:true*/
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var GaiaDialog = require('gaia-dialog');
+
+
+var proto = GaiaDialog.extend();
+
+/**
+ * Runs when an instance of `GaiaTabs`
+ * is first created.
+ *
+ * The initial value of the `select` attribute
+ * is used to select a tab.
+ *
+ * @private
+ */
+proto.createdCallback = function() {
+  this.onCreated();
+  this.els.submit = this.shadowRoot.querySelector('.submit');
+  this.els.submit.addEventListener('click', this.close.bind(this));
+};
+
+proto.template = `
+<style>
+.shadow-host {
+  display: none;
+}
+
+.shadow-host[opened],
+.shadow-host.animating {
+  display: block;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<gaia-dialog>
+  <section>
+    <p><content></content></p>
+  </section>
+  <div>
+    <button class="submit primary">Ok</button>
+  </div>
+</gaia-dialog>`;
+
+// Register and expose the constructor
+try {
+  module.exports = document.registerElement('gaia-dialog-alert', { prototype: proto });
+  module.exports.proto = proto;
+} catch (e) {
+  if (e.name !== 'NotSupportedError') {
+    throw e;
+  }
+}
+
+});})(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-dialog-alert',this));

gaia/distros/spark/apps/directory/components/gaia-dialog/gaia-dialog-confirm.js

@@ -0,0 +1,75 @@
+;(function(define){define(function(require,exports,module){
+/*jshint esnext:true*/
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var GaiaDialog = require('gaia-dialog');
+
+/**
+ * Extend from the `HTMLElement` prototype
+ *
+ * @type {Object}
+ */
+var proto = GaiaDialog.extend();
+
+/**
+ * Runs when an instance of `GaiaTabs`
+ * is first created.
+ *
+ * The initial value of the `select` attribute
+ * is used to select a tab.
+ *
+ * @private
+ */
+proto.createdCallback = function() {
+  this.onCreated();
+
+  this.els.submit = this.shadowRoot.querySelector('.submit');
+  this.els.cancel = this.shadowRoot.querySelector('.cancel');
+
+  this.els.cancel.addEventListener('click', this.close.bind(this));
+  this.els.submit.addEventListener('click', this.close.bind(this));
+};
+
+proto.template = `
+<style>
+.shadow-host {
+  display: none;
+}
+
+.shadow-host[opened],
+.shadow-host.animating {
+  display: block;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<gaia-dialog>
+  <section>
+    <p><content></content></p>
+  </section>
+  <fieldset>
+    <button class="cancel">Cancel</button>
+    <button class="submit danger">Confirm</button>
+  </fieldset>
+</gaia-dialog>`;
+
+// Register and expose the constructor
+try {
+  module.exports = document.registerElement('gaia-dialog-confirm', { prototype: proto });
+  module.exports.proto = proto;
+} catch (e) {
+  if (e.name !== 'NotSupportedError') {
+    throw e;
+  }
+}
+
+});})(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-dialog-alert',this));

gaia/distros/spark/apps/directory/components/gaia-dialog/gaia-dialog-menu.js

@@ -0,0 +1,128 @@
+;(function(define){define(function(require,exports,module){
+/*jshint esnext:true*/
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var GaiaDialog = require('gaia-dialog');
+
+/**
+ * Detects presence of shadow-dom
+ * CSS selectors.
+ *
+ * @return {Boolean}
+ */
+var hasShadowCSS = (function() {
+  try { document.querySelector(':host'); return true; }
+  catch (e) { return false; }
+})();
+
+/**
+ * Extend from the `HTMLElement` prototype
+ *
+ * @type {Object}
+ */
+var proto = GaiaDialog.extend();
+
+/**
+ * Runs when an instance of `GaiaTabs`
+ * is first created.
+ *
+ * The initial value of the `select` attribute
+ * is used to select a tab.
+ *
+ * @private
+ */
+proto.createdCallback = function() {
+  this.onCreated();
+  this.els.submit = this.shadowRoot.querySelector('.submit');
+  this.els.cancel = this.shadowRoot.querySelector('.cancel');
+};
+
+proto.template = `
+<style>
+:host {
+  display: none;
+}
+
+:host[opened],
+:host.animating {
+  display: block;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+::content > button {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  margin: 0;
+  border: 0;
+  padding: 0rem 16px;
+  font: inherit;
+  font-style: italic;
+  text-align: left;
+  background: var(--color-beta);
+  color: var(--highlight-color);
+}
+
+::content > button[data-icon]:before {
+  width: 50px;
+  font-size: 22px;
+  margin-left: -16px;
+  vertical-align: middle;
+  text-align: center;
+}
+
+/** Button Divider Line
+ ---------------------------------------------------------*/
+
+::content > button:after {
+  content: '';
+  display: block;
+  position: absolute;
+  height: 1px;
+  left: 6px;
+  right: 6px;
+  top: 49px;
+  background: #E7E7E7;
+}
+
+::content > button:last-of-type:after {
+  display: none;
+}
+
+</style>
+
+<gaia-dialog>
+  <div class="items"><content select="button"></content></div>
+</gaia-dialog>`;
+
+// If the browser doesn't support shadow-css
+// selectors yet, we update the template
+// to use the shim classes instead.
+if (!hasShadowCSS) {
+  proto.template = proto.template
+    .replace('::content', 'gaia-dialog-menu.shadow-content', 'g')
+    .replace(':host', 'gaia-dialog-menu.shadow-host', 'g');
+}
+
+// Register and expose the constructor
+try {
+  module.exports = document.registerElement('gaia-dialog-menu', { prototype: proto });
+  module.exports.proto = proto;
+} catch (e) {
+  if (e.name !== 'NotSupportedError') {
+    throw e;
+  }
+}
+
+});})(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-dialog-menu',this));

gaia/distros/spark/apps/directory/components/gaia-dialog/gaia-dialog-prompt.js

@@ -0,0 +1,80 @@
+;(function(define){define(function(require,exports,module){
+/*jshint esnext:true*/
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var GetTextInput = require('gaia-text-input');
+var GaiaDialog = require('gaia-dialog');
+
+/**
+ * Extend from `GaiaDialog` prototype
+ *
+ * @type {Object}
+ */
+var proto = GaiaDialog.extend();
+
+/**
+ * Runs when an instance of `GaiaTabs`
+ * is first created.
+ *
+ * The initial value of the `select` attribute
+ * is used to select a tab.
+ *
+ * @private
+ */
+proto.createdCallback = function() {
+  this.onCreated();
+
+  this.els.input = this.shadowRoot.querySelector('gaia-text-input');
+  this.els.submit = this.shadowRoot.querySelector('.submit');
+  this.els.cancel = this.shadowRoot.querySelector('.cancel');
+
+  this.els.input.placeholder = this.firstChild.textContent;
+  this.els.cancel.addEventListener('click', this.close.bind(this));
+  this.els.submit.addEventListener('click', this.close.bind(this));
+};
+
+proto.template = `
+<style>
+gaia-dialog-prompt {
+  display: none;
+}
+
+gaia-dialog-prompt[opened],
+gaia-dialog-prompt.animating {
+  display: block;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+gaia-text-input {
+  margin: 16px !important;
+}
+</style>
+
+<gaia-dialog>
+  <div><gaia-text-input></gaia-text-input></div>
+  <fieldset>
+    <button class="cancel">Cancel</button>
+    <button class="submit primary">Ok</button>
+  </fieldset>
+</gaia-dialog>`;
+
+// Register and expose the constructor
+try {
+  module.exports = document.registerElement('gaia-dialog-prompt', { prototype: proto });
+  module.exports.proto = proto;
+} catch (e) {
+  if (e.name !== 'NotSupportedError') {
+    throw e;
+  }
+}
+
+});})(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-dialog-prompt',this));

gaia/distros/spark/apps/directory/components/gaia-dialog/gaia-dialog-select.js

@@ -0,0 +1,257 @@
+;(function(define){define(function(require,exports,module){
+/*jshint esnext:true*/
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var GaiaDialog = require('gaia-dialog');
+
+// Load icon-font
+require('gaia-icons');
+
+/**
+ * Extend from `GaiaDialog` prototype
+ *
+ * @type {Object}
+ */
+var proto = GaiaDialog.extend();
+
+/**
+ * Runs when an instance of `GaiaTabs`
+ * is first created.
+ *
+ * The initial value of the `select` attribute
+ * is used to select a tab.
+ *
+ * @private
+ */
+proto.createdCallback = function() {
+  this.onCreated();
+
+  this.els.submit = this.shadowRoot.querySelector('.submit');
+  this.els.cancel = this.shadowRoot.querySelector('.cancel');
+  this.els.list = this.shadowRoot.querySelector('ul');
+
+  this.multiple = this.hasAttribute('multiple');
+
+  on(this.els.list, 'click', this.onListClick, this);
+  on(this.els.submit, 'click', this.close, this);
+  on(this.els.cancel, 'click', this.close, this);
+};
+
+proto.onListClick = function(e) {
+  var el = getLi(e.target);
+  var selected = el.getAttribute('aria-selected') === 'true';
+
+  if (this.multiple) { this.onChangeMultiple(el, selected); }
+  else { this.onChange(el, selected); }
+};
+
+proto.onChange = function(el, selected) {
+  this.clearSelected();
+  if (!selected) { el.setAttribute('aria-selected', !selected); }
+  this.fireChange();
+  this.close();
+};
+
+proto.onChangeMultiple = function(el, selected) {
+  el.setAttribute('aria-selected', !selected);
+  this.fireChange();
+};
+
+proto.clearSelected = function() {
+  [].forEach.call(this.selectedOptions, function(option) {
+    option.removeAttribute('aria-selected');
+  });
+};
+
+proto.fireChange = function() {
+  var e = new CustomEvent('change', { detail: { value: this.valueString }});
+  this.dispatchEvent(e);
+};
+
+proto.attrs = {
+  multiple: {
+    get: function() { return !!this._multiple; },
+    set: function(value) {
+      value = value === '' ? true : value;
+      if (value === this._multiple) { return; }
+      if (!value) {
+        this._multiple = false;
+        this.removeAttribute('multiple');
+      } else {
+        this._multiple = true;
+        this.setAttribute('multiple', '');
+      }
+    }
+  },
+
+  options: {
+    get: function() { return this.querySelectorAll('li'); }
+  },
+
+  selectedOptions: {
+    get: function() { return this.querySelectorAll('li[aria-selected="true"]'); }
+  },
+
+  selected: {
+    get: function() { return this.selectedOptions[0]; }
+  },
+
+  value: {
+    get: function() {
+      var selected = this.selectedOptions[0];
+      return selected && selected.getAttribute('value');
+    }
+  },
+
+  valueString: {
+    get: function() {
+      var selected = this.selected;
+      return selected && selected.textContent;
+    }
+  },
+
+  length: {
+    get: function() { return this.options.length; }
+  }
+};
+
+Object.defineProperties(proto, proto.attrs);
+
+proto.template = `
+<style>
+.shadow-host {
+  display: none;
+}
+
+.shadow-host[opened],
+.shadow-host.animating {
+  display: block;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+/** Title (duplicate from gaia-dialog)
+ ---------------------------------------------------------*/
+
+.shadow-content h1 {
+  padding: 16px;
+  font-size: 23px;
+  line-height: 26px;
+  font-weight: 200;
+  font-style: italic;
+  color: #858585;
+}
+
+/** List
+ ---------------------------------------------------------*/
+
+ul {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+
+/** Options
+ ---------------------------------------------------------*/
+
+.shadow-content li {
+  position: relative;
+  display: block;
+  padding: 16px;
+  text-align: left;
+  -moz-user-select: none;
+  cursor: pointer;
+}
+
+.shadow-content li[aria-selected='true'] {
+  color: #00CAF2;
+  font-weight: normal;
+}
+
+.shadow-content li:after {
+  content: '';
+  display: block;
+  position: absolute;
+  height: 1px;
+  left: 16px;
+  right: 16px;
+  bottom: 1px;
+  background: #E7E7E7;
+}
+
+.shadow-content li:last-of-type:after {
+  display: none
+}
+
+/** Buttons
+ ---------------------------------------------------------*/
+
+gaia-dialog:not([multiple]) .submit {
+  display: none !important;
+}
+
+gaia-dialog:not([multiple]) .cancel {
+  width: 100% !important;
+}
+
+gaia-dialog:not([multiple]) .cancel:after {
+  display: none% !important;
+}
+
+/** Tick Icon
+ ---------------------------------------------------------*/
+
+.shadow-content li[aria-selected='true']:before {
+  content: 'tick';
+  position: absolute;
+  top: 50%; right: 20px;
+  display: block;
+  margin-top: -12px;
+  font-family: 'gaia-icons';
+  font-style: normal;
+  font-size: 14px;
+  font-weight: 500;
+  text-rendering: optimizeLegibility;
+}
+
+</style>
+
+<gaia-dialog>
+  <content select="h1"></content>
+  <ul><content select="li"></content></ul>
+  <fieldset>
+    <button class="cancel">Cancel</button>
+    <button class="submit primary">Select</button>
+  </fieldset>
+</gaia-dialog>`;
+
+
+function on(el, name, fn, ctx) {
+  if (ctx) { fn = fn.bind(ctx); }
+  el.addEventListener(name, fn);
+}
+
+function getLi(el) {
+  return el && (el.tagName === 'LI' ? el : getLi(el.parentNode));
+}
+
+
+// Register and expose the constructor
+try {
+  module.exports = document.registerElement('gaia-dialog-select', { prototype: proto });
+  module.exports.proto = proto;
+} catch (e) {
+  if (e.name !== 'NotSupportedError') {
+    throw e;
+  }
+}
+
+});})(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-dialog-select',this));

gaia/distros/spark/apps/directory/components/gaia-dialog/gaia-dialog.js

@@ -0,0 +1,586 @@
+;(function(define){define(function(require,exports,module){
+/*jshint laxbreak:true*/
+/*jshint esnext:true*/
+
+'use strict';
+
+/**
+ * Extend from the `HTMLElement` prototype
+ *
+ * @type {Object}
+ */
+var proto = Object.create(HTMLElement.prototype);
+
+var innerHTML = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
+var removeAttribute = proto.removeAttribute;
+var setAttribute = proto.setAttribute;
+var has = Object.prototype.hasOwnProperty;
+
+/**
+ * Runs when an instance of `GaiaTabs`
+ * is first created.
+ *
+ * The initial value of the `select` attribute
+ * is used to select a tab.
+ *
+ * @private
+ */
+proto.createdCallback = function() {
+  this.createShadowRoot().innerHTML = template;
+
+  this.els = {
+    inner: this.shadowRoot.querySelector('.dialog-inner'),
+    background: this.shadowRoot.querySelector('.background'),
+    window: this.shadowRoot.querySelector('.window')
+  };
+
+  this.shadowRoot.addEventListener('click', e => this.onClick(e));
+  this.setupAnimationListeners();
+  this.styleHack();
+};
+
+proto.onClick = function(e) {
+  var el = closest('[on-click]', e.target, this);
+  if (!el) { return; }
+  var method = el.getAttribute('on-click');
+  if (typeof this[method] == 'function') { this[method](); }
+};
+
+proto.setupAnimationListeners = function() {
+  this.addEventListener('animationstart', this.onAnimationStart.bind(this));
+  this.addEventListener('animationend', this.onAnimationEnd.bind(this));
+};
+
+proto.styleHack = function() {
+  var style = this.shadowRoot.querySelector('style').cloneNode(true);
+  this.classList.add('shadow-content', 'shadow-host');
+  style.setAttribute('scoped', '');
+  this.appendChild(style);
+};
+
+proto.open = function(options) {
+  if (this.isOpen) { return; }
+  this.animateIn(options);
+  this.isOpen = true;
+  this.setAttribute('opened', '');
+  this.dispatch('opened');
+};
+
+proto.close = function(options) {
+  if (!this.isOpen) { return; }
+  var self = this;
+  self.isOpen = false;
+  this.animateOut(function() {
+    self.removeAttribute('opened');
+    self.dispatch('closed');
+  });
+};
+
+proto.attributeChangedCallback = function(name, from, to) {
+  if (this.attrs[name]) { this[name] = to; }
+};
+
+proto.setAttribute = function(attr, value) {
+  this.els.inner.setAttribute(attr, value);
+  setAttribute.call(this, attr, value);
+};
+
+proto.removeAttribute = function(attr) {
+  this.els.inner.removeAttribute(attr);
+  removeAttribute.call(this, attr);
+};
+
+proto.animateIn = function(e) {
+  var hasTarget = e && ('clientX' in e || e.touches);
+  if (hasTarget) { return  this.animateInFromTarget(e); }
+
+  var self = this;
+  this.dispatch('animationstart');
+  this.els.background.classList.add('animate-in');
+  this.els.background.addEventListener('animationend', function fn() {
+    self.els.background.removeEventListener('animationend', fn);
+    self.els.window.classList.add('animate-in');
+    self.dispatch('animationend');
+  });
+};
+
+proto.animateInFromTarget = function(e) {
+  var pos = e.touches && e.touches[0] || e;
+  var scale = Math.sqrt(innerWidth * innerHeight) / 10;
+  var background = this.els.background;
+  var duration = scale * 7;
+  var end = 'transitionend';
+  var self = this;
+
+  background.style.transform = 'translate(' + pos.clientX + 'px, ' + pos.clientY + 'px)';
+  background.style.transitionDuration = duration + 'ms';
+  background.classList.add('circular');
+  this.dispatch('animationstart');
+
+  var reflow = background.offsetTop;
+
+  background.style.transform += ' scale(' + scale + ')';
+  background.style.opacity = 1;
+
+  background.addEventListener(end, function fn() {
+    background.removeEventListener(end, fn);
+    self.els.window.classList.add('animate-in');
+    self.dispatch('animationend');
+  });
+};
+
+proto.animateOut = function(callback) {
+  var end = 'animationend';
+  var background = this.els.background;
+  var self = this;
+  var classes = {
+    el: this.classList,
+    window: this.els.window.classList,
+    background: this.els.background.classList
+  };
+
+  this.dispatch('animationstart');
+  classes.window.add('animate-out');
+
+  this.els.window.addEventListener(end, function fn(e) {
+    self.els.window.removeEventListener(end, fn);
+    e.stopPropagation();
+    classes.background.add('animate-out');
+    self.els.background.addEventListener(end, function fn() {
+      self.els.background.removeEventListener(end, fn);
+      classes.window.remove('animate-out', 'animate-in');
+      classes.background.remove('animate-out', 'animate-in');
+      background.classList.remove('circular');
+      background.style = '';
+      self.dispatch('animationend');
+      if (callback) { callback(); }
+    });
+  });
+};
+
+proto.onAnimationStart = function() {
+  this.classList.add('animating');
+};
+
+proto.onAnimationEnd = function() {
+  this.classList.remove('animating');
+};
+
+proto.dispatch = function(name) {
+  this.dispatchEvent(new CustomEvent(name));
+};
+
+proto.attrs = {
+  opened: {
+    get: function() { return !!this.isOpen; },
+    set: function(value) {
+      value = value === '' || value;
+      if (!value) { this.close(); }
+      else { this.open(); }
+    }
+  }
+};
+
+Object.defineProperties(proto, proto.attrs);
+
+// Override `innerHTML` to prevent the scoped
+// stylesheet being erased by mistake.
+Object.defineProperty(proto, 'innerHTML', {
+  get: function() { return innerHTML.get.call(this); },
+  set: function(html) {
+    var style = this.querySelector('style');
+    innerHTML.set.call(this, html);
+    this.appendChild(style);
+  }
+});
+
+var template = `
+<style>
+
+.shadow-content * {
+  box-sizing: border-box;
+  font-weight: inherit;
+  font-size: inherit;
+}
+
+.shadow-content p,
+.shadow-content h1,
+.shadow-content h2,
+.shadow-content h3,
+.shadow-content h4,
+.shadow-content button,
+.shadow-content fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.shadow-host {
+  display: none;
+  position: fixed;
+  top: 0px; left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 200;
+  font-style: italic;
+  text-align: center;
+}
+
+.shadow-host[opened],
+.shadow-host.animating {
+  display: block;
+}
+
+/** Inner
+ ---------------------------------------------------------*/
+
+.dialog-inner {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+/** Background
+ ---------------------------------------------------------*/
+
+.background {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: rgba(199,199,199,0.85);
+}
+
+/**
+ * .circular
+ */
+
+.background.circular {
+  width: 40px;
+  height: 40px;
+  margin: -20px;
+  border-radius: 50%;
+  will-change: transform, opacity;
+  transition-property: opacity, transform;
+  transition-timing-function: linear;
+}
+
+/**
+ * .animate-in
+ */
+
+.background.animate-in {
+  animation-name: gaia-dialog-fade-in;
+  animation-duration: 300ms;
+  animation-fill-mode: forwards;
+}
+
+/**
+ * .animate-out
+ */
+
+.background.animate-out {
+  animation-name: gaia-dialog-fade-out;
+  animation-delay: 300ms;
+  animation-duration: 300ms;
+  animation-fill-mode: forwards;
+  opacity: 1;
+}
+
+/** Window
+ ---------------------------------------------------------*/
+
+.window {
+  position: relative;
+  width: 90%;
+  max-width: 350px;
+  margin: auto;
+  box-shadow: 0 1px 0 0px rgba(0,0,0,0.15);
+  background: var(--color-iota);
+  opacity: 0;
+}
+
+.window.animate-in {
+  animation-name: gaia-dialog-entrance;
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+  animation-fill-mode: forwards;
+}
+
+.window.animate-out {
+  animation-name: gaia-dialog-fade-out;
+  animation-duration: 200ms;
+  animation-delay: 100ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  opacity: 1;
+}
+
+/** Title
+ ---------------------------------------------------------*/
+
+.shadow-content h1 {
+  padding: 16px;
+  font-size: 23px;
+  line-height: 26px;
+  font-weight: 200;
+  font-style: italic;
+  color: #858585;
+}
+
+.shadow-content strong {
+  font-weight: 700;
+}
+
+.shadow-content small {
+  font-size: 0.8em;
+}
+
+/** Section
+ ---------------------------------------------------------*/
+
+.shadow-content section {
+  padding: 33px 18px;
+  color: #858585;
+}
+
+.shadow-content section > *:not(:last-child) {
+  margin-bottom: 13px;
+}
+
+/** Paragraphs
+ ---------------------------------------------------------*/
+
+.shadow-content p {
+  text-align: left;
+}
+
+/** Buttons
+ ---------------------------------------------------------*/
+
+.shadow-content button {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 50px;
+  margin: 0;
+  border: 0;
+  padding: 0rem 16px;
+  cursor: pointer;
+  font: inherit;
+  background: var(--color-beta);
+  color: var(--color-epsilon);
+  transition: all 200ms;
+  transition-delay: 300ms;
+  border-radius: 0;
+}
+
+/**
+ * .primary
+ */
+
+.shadow-content button.primary {
+  color: var(--highlight-color);
+}
+
+/**
+ * .danger
+ */
+
+.shadow-content button.danger {
+  color: var(--color-destructive);
+}
+
+/**
+ * Disabled buttons
+ */
+
+.shadow-content button[disabled] {
+  color: var(--color-zeta);
+}
+
+/** Button Divider Line
+ ---------------------------------------------------------*/
+
+.shadow-content button:after {
+  content: '';
+  display: block;
+  position: absolute;
+  height: 1px;
+  left: 6px;
+  right: 6px;
+  top: 49px;
+  background: #E7E7E7;
+}
+
+.shadow-content button:last-of-type:after {
+  display: none;
+}
+
+.shadow-content button:active {
+  background-color: var(--highlight-color);
+  color: #fff;
+  transition: none;
+}
+
+.shadow-content button:active:after {
+  background: var(--highlight-color);
+  transition: none;
+}
+
+.shadow-content button[data-icon]:before {
+  float: left;
+}
+
+/** Fieldset (button group)
+ ---------------------------------------------------------*/
+
+.shadow-content fieldset {
+  overflow: hidden;
+}
+
+.shadow-content fieldset button {
+  position: relative;
+  float: left;
+  width: 50%;
+}
+
+.shadow-content fieldset button:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  right: 0px;
+  left: auto;
+  width: 1px;
+  height: calc(100% - 12px);
+  background: #e7e7e7;
+  transition: all 200ms;
+  transition-delay: 200ms;
+}
+
+</style>
+
+<div class="dialog-inner">
+  <div class="background" on-click="close"></div>
+  <div class="window"><content></content></div>
+</div>`;
+
+var animations = `
+@keyframes gaia-dialog-entrance {
+  0% {
+    opacity: 0;
+    transform: translateY(100px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
+@keyframes gaia-dialog-fade-in {
+  0% { opacity: 0 }
+  100% { opacity: 1 }
+}
+
+@keyframes gaia-dialog-fade-out {
+  0% { opacity: 1 }
+  100% { opacity: 0 }
+}`;
+
+(function() {
+  var style = document.createElement('style');
+  style.innerHTML = animations;
+
+  headReady().then(() => {
+    document.head.appendChild(style);
+  });
+
+  /**
+   * Resolves a promise once document.head is ready.
+   *
+   * @private
+   */
+  function headReady() {
+    return new Promise(resolve => {
+      if (document.head) { return resolve(); }
+      window.addEventListener('load', function fn() {
+        window.removeEventListener('load', fn);
+        resolve();
+      });
+    });
+  }
+})();
+
+
+// Register and expose the constructor
+try {
+  module.exports = document.registerElement('gaia-dialog', { prototype: proto });
+  module.exports.proto = proto;
+
+  module.exports.extend = function() {
+    return mixin(Object.create(proto), extended);
+  };
+} catch (e) {
+  if (e.name !== 'NotSupportedError') {
+    throw e;
+  }
+}
+
+var extended = {
+  onCreated: function() {
+    var self = this;
+
+    this.createShadowRoot().innerHTML = this.template;
+    this.els = { dialog: this.shadowRoot.querySelector('gaia-dialog') };
+    this.setupAnimationListeners();
+    this.styleHack();
+
+    this.els.dialog.addEventListener('opened', function() {
+      setAttribute.call(self, 'opened', '');
+    });
+
+    this.els.dialog.addEventListener('closed', function() {
+      removeAttribute.call(self, 'opened');
+    });
+  },
+
+  open: function(e) {
+    this.els.dialog.open(e);
+  },
+
+  close: function() {
+    this.els.dialog.close();
+  },
+
+  setAttribute: function(attr, value) {
+    this.els.dialog.setAttribute(attr, value);
+    setAttribute.call(this, attr, value);
+  },
+
+  removeAttribute: function(attr) {
+    this.els.dialog.removeAttribute(attr);
+    removeAttribute.call(this, attr);
+  }
+};
+
+function closest(selector, el, top) {
+  return el && el !== top
+    ? (el.matches(selector) ? el : closest(el.parentNode))
+    : null;
+}
+
+function mixin(a, b) {
+  for (var key in b) { a[key] = b[key]; }
+  return a;
+}
+
+});})(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-dialog',this));

gaia/distros/spark/apps/directory/components/gaia-dialog/index.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>&lt;gaia-dialog&gt;</title>
+  <meta name="description" content="gaia-dialog" />
+  <link rel="import" type="text/html" href="../src/gaia-dialog.html">
+  <link rel="stylesheet" type="text/css" href="bower_components/base/base.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-theme/gaia-theme.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-fonts/style.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-icons/gaia-icons.css">
+  <script src="bower_components/gaia-theme/lib/gaia-theme-selector.js"></script>
+  <script src="bower_components/pressed/pressed.js"></script>
+  <script src="bower_components/gaia-icons/gaia-icons.js"></script>
+  <script src="bower_components/gaia-button/gaia-button.js"></script>
+  <script src="bower_components/gaia-text-input/gaia-text-input.js"></script>
+  <script src="gaia-dialog.js"></script>
+  <script src="gaia-dialog-alert.js"></script>
+  <script src="gaia-dialog-confirm.js"></script>
+  <script src="gaia-dialog-prompt.js"></script>
+  <script src="gaia-dialog-action.js"></script>
+  <script src="gaia-dialog-select.js"></script>
+  <script src="gaia-dialog-menu.js"></script>
+  <style>
+    body {
+      padding-top: 48px;
+    }
+  </style>
+</head>
+<body class="l-align-center">
+  <gaia-theme-selector></gaia-theme-selector>
+
+  <div id="buttons">
+    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-alert">Alert</gaia-button></div>
+    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-confirm">Confirm</gaia-button></div>
+    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-prompt">Prompt</gaia-button></div>
+    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-action">Action</gaia-button></div>
+    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-select">Select</gaia-button></div>
+    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-select[multiple]">Select Multiple</gaia-button></div>
+    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-menu">Menu</gaia-button></div>
+    <div class="l-mb-small"><gaia-button data-for="#custom-dialog-1">Custom</gaia-button></div>
+  </div>
+
+  <div id="dialogs">
+    <gaia-dialog-alert>No SIM card is present</gaia-dialog-alert>
+    <gaia-dialog-confirm>Are you sure you want to delete this contact?</gaia-dialog-confirm>
+    <gaia-dialog-prompt>Device name</gaia-dialog-prompt>
+
+    <gaia-dialog-action>
+      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu mollis tortor.</h1>
+      <button>Action 1</button>
+      <button>Action 2</button>
+    </gaia-dialog-action>
+
+    <gaia-dialog-select>
+      <h1>Ring tone</h1>
+      <li>Classic prism</li>
+      <li>Wallphone</li>
+      <li>Disco drive</li>
+      <li>Touchmatic</li>
+      <li>Classic courier</li>
+      <li>Hacker</li>
+    </gaia-dialog-select>
+
+    <gaia-dialog-select multiple>
+      <h1>Ring tone</h1>
+      <li>Classic prism</li>
+      <li>Wallphone</li>
+      <li>Disco drive</li>
+      <li>Touchmatic</li>
+      <li>Classic courier</li>
+      <li>Hacker</li>
+    </gaia-dialog-select>
+
+    <gaia-dialog-menu>
+      <button data-icon="firefox">Open in new window</button>
+      <button data-icon="firefox">Add to Home Screen</button>
+      <button data-icon="firefox">Share link</button>
+      <button data-icon="firefox">Settings</button>
+    </gaia-dialog-menu>
+
+    <gaia-dialog id="custom-dialog-1">
+      <section>
+        <h1>Application Download</h1>
+        <p>Do you want to download and install this application?</p>
+      </section>
+      <fieldset>
+        <button>Cancel</button>
+        <button>Action</button>
+      </fieldset>
+    </gaia-dialog>
+
+    <gaia-dialog>
+      <h1>Main Heading</h1>
+      <h2>Sub Heading</h2>
+      <hr></hr>
+      <p>Lorem ipsum dolor sit amet, consecutor adipisicing elit, sed do eiusod tempor incidenti ut la et dolore magna...</p>
+      <button>Action</button>
+      <button>Cancel</button>
+    </gaia-dialog>
+
+    <gaia-dialog>
+      <h1>Confirmation</h1>
+      <p>Lorem ipsum dolor sit amet, consecutor adipisicing elit, sed do eiusod tempor incidenti ut la et dolore magna...</p>
+      <hr>
+      <p>Lorem ipsum dolor sit amet, consecutor adipisicing elit, sed do eiusod tempor incidenti ut la et dolore magna...</p>
+      <button>Action</button>
+      <button>Action</button>
+      <button>Cancel</button>
+    </gaia-dialog>
+  </div>
+  <script>
+    var buttons = document.querySelectorAll('gaia-button');
+    [].forEach.call(buttons, function(button) {
+      button.addEventListener('click', function(e) {
+        var dialog = document.querySelector(button.dataset.for);
+        dialog.open(e);
+      });
+    });
+  </script>
+</body>
+</html>

gaia/distros/spark/apps/directory/components/gaia-dialog/src/gaia-dialog.html

@@ -0,0 +1,134 @@
+
+<template id="template">
+  <style>
+
+    gaia-dialog.host {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 16px;
+      font-size: 16px;
+      font-style: italic;
+      color: #666;
+    }
+
+    .inner {
+      max-height: 100%;
+      overflow: auto;
+      background: #F4F4F4;
+    }
+
+    .content > *:not(section) {
+      margin: 0 16px 16px;
+    }
+
+    .content > :first-child {
+      margin-top: 16px;
+    }
+
+    .content h1,
+    .content h2 {
+      text-align: center;
+      font-weight: lighter;
+      color: #858585;
+    }
+
+    .content h1 {
+      font-size: 1.6em;
+    }
+
+    .content h2 {
+      font-size: 1em;
+    }
+
+    .content h1 + h2 {
+      margin-top: -16px;
+    }
+
+    .content hr {
+      height: 1px;
+      border: 0;
+      background: #E7E7E7;
+    }
+
+    .content button {
+      box-sizing: border-box;
+      position: relative;
+      display: block;
+      width: 100%;
+      border: none;
+      outline: 0;
+      padding: 16px;
+      margin: 0;
+      background: #fff;
+      font: inherit;
+      color: #1EADCB;
+    }
+
+    .content button:after {
+      content: "";
+      display: block;
+      position: absolute;
+      right: 0;
+      left: 0;
+      top: 0;
+      margin: 0 8px;
+      height: 2px;
+      background: #f4f4f4
+    }
+
+    .content button:first-child:after {
+      display: none;
+    }
+
+    .content section {
+      display: flex;
+      overflow: hidden;
+    }
+
+    .content section > button {
+      flex: 1;
+    }
+
+    .content section > button:after {
+      width: 2px;
+      height: auto;
+      left: 0;
+      bottom: 0;
+      right: auto;
+      margin: 8px 0;
+    }
+  </style>
+
+  <div class="inner">
+    <content></content>
+  </div>
+</template>
+
+<script>
+var proto = Object.create(HTMLElement.prototype);
+var thisDoc = document.currentScript.ownerDocument;
+var template = thisDoc.getElementById('template');
+
+proto.createdCallback = function() {
+  var root = this.createShadowRoot();
+  var html = template.content.cloneNode(true);
+  root.appendChild(html);
+  this.configureStyle();
+};
+
+proto.configureStyle = function() {
+  var style = this.shadowRoot.querySelector('style').cloneNode(true);
+  this.classList.add('content', 'host');
+  style.setAttribute('scoped', '');
+  this.appendChild(style);
+};
+
+document.registerElement('gaia-dialog', { prototype: proto });
+</script>

gaia/distros/spark/apps/directory/components/gaia-fonts/bower.json

@@ -0,0 +1,16 @@
+{
+  "name": "gaia-fonts",
+  "version": "0.2.1",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "main": "style.css",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

gaia/distros/spark/apps/directory/components/gaia-fonts/style.css

@@ -0,0 +1,54 @@
+
+@font-face {
+  font-family: "FiraSans";
+  src: url("fonts/FiraSans-Light.woff") format("woff");
+  font-weight: 300; /* lighter */
+}
+
+@font-face {
+  font-family: "FiraSans";
+  src: url("fonts/FiraSans-LightItalic.woff") format("woff");
+  font-style: italic;
+  font-weight: 300; /* lighter */
+}
+
+@font-face {
+  font-family: "FiraSans";
+  src: url("fonts/FiraSans-Regular.woff") format("woff");
+  font-style: normal;
+  font-weight: normal; /* 400 */
+}
+
+@font-face {
+  font-family: "FiraSans";
+  src: url("fonts/FiraSans-RegularItalic.woff") format("woff");
+  font-style: italic;
+  font-weight: normal; /* 400 */
+}
+
+@font-face {
+  font-family: "FiraSans";
+  src: url("fonts/FiraSans-Medium.woff") format("woff");
+  font-style: italic;
+  font-weight: bold; /* 700 */
+}
+
+@font-face {
+  font-family: "FiraSans";
+  src: url("fonts/FiraSans-MediumItalic.woff") format("woff");
+  font-style: italic;
+  font-weight: bold; /* 700 */
+}
+
+@font-face {
+  font-family: "FiraSans";
+  src: url("fonts/FiraSans-Bold.woff") format("woff");
+  font-weight: 800; /* bolder */
+}
+
+@font-face {
+  font-family: "FiraSans";
+  src: url("fonts/FiraSans-BoldItalic.woff") format("woff");
+  font-style: italic;
+  font-weight: 800; /* bolder */
+}

gaia/distros/spark/apps/directory/components/gaia-header/bower.json

@@ -0,0 +1,30 @@
+{
+  "name": "gaia-header",
+  "version": "0.8.3",
+  "homepage": "https://github.com/gaia-components/gaia-header",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "main": "gaia-header.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "!.jshintrc",
+    "node_modules",
+    "bower_components",
+    "test",
+    "index.html",
+    "package.json",
+    "README.md"
+  ],
+  "dependencies": {
+    "gaia-icons": "gaia-components/gaia-icons#~0.8.0",
+    "gaia-component": "gaia-components/gaia-component#~0.3.0",
+    "font-fit": "gaia-components/font-fit#~0.3.0"
+  },
+  "devDependencies": {
+    "gaia-theme": "gaia-components/gaia-theme",
+    "gaia-fonts": "gaia-components/gaia-fonts",
+    "base": "gaia-components/base"
+  }
+}

gaia/distros/spark/apps/directory/components/gaia-icons/bin/report.js

@@ -0,0 +1,118 @@
+'use strict';
+
+// Create a report about unused icons in a project.
+
+var fs = require('fs');
+var path = require('path');
+var exec = require('child_process').exec;
+
+var optimist = require('optimist');
+
+var cli = optimist
+  .usage('Create a report about unused icons in a project.' + '\n' +
+  'Usage: $0 path/to/your/project/');
+var projectDir = cli.argv._[0];
+
+// No folder passed? Show help message then.
+if (!projectDir) {
+  cli.showHelp();
+  process.exit(0);
+}
+
+// Check if the directory exist.
+var stats = fs.lstatSync(projectDir);
+if (!stats.isDirectory()) {
+  console.log('\x1b[31mPlease provide a valid folder.\x1b[0m\n');
+  cli.showHelp();
+  process.exit(0);
+}
+
+/**
+ * Get the list of all the icons in the font.
+ * @returns {Array}
+ */
+function getIcons() {
+  var icons = fs.readdirSync('./images/');
+
+  icons = icons.map(function(icon) {
+    return path.basename(icon, '.svg');
+  });
+
+  return icons;
+}
+
+/**
+ * Use a grep pattern to extract used icons from files.
+ * @param {string} grep
+ * @param {Function} callback
+ */
+function getUsedIcons(grep, callback) {
+  exec(grep, function(err, stdout, stderr) {
+    var usedIcons = stdout
+      .trim()
+      .split('\n')
+      .map(function(icon) {
+        // Take only the icon name.
+        return icon.split(/["']/)[1];
+      })
+      .filter(function(icon) {
+        // Remove non string items.
+        return icon && icon.match(/^[a-z0-9-]+$/);
+      });
+
+    callback(usedIcons);
+
+    if (err) {
+      console.log(err);
+    }
+  });
+}
+
+/**
+ * Get the list of unused icons in a folder. The patterns of extraction are:
+ *   * data-icon="[^"]+"
+ *   * .dataset.icon ?= ?.+
+ */
+function getUnusedIcons() {
+  var usedIcons = [];
+  var length = 2;
+
+  var cb = function(icons) {
+    usedIcons = usedIcons.concat(icons);
+    length--;
+
+    if (length > 0) {
+      return;
+    }
+
+    var allIcons = getIcons();
+    var unusedIcons = [];
+
+    allIcons.forEach(function(icon) {
+      if (usedIcons.indexOf(icon) === -1) {
+        unusedIcons.push(icon);
+      }
+    });
+
+    outputUnusedIcons(allIcons, unusedIcons);
+  };
+
+  getUsedIcons('grep -rhoP \'data-icon="[^"]+"\' ' + projectDir, cb);
+  getUsedIcons('grep -rhoP \'.dataset.icon ?= ?.+\' ' + projectDir, cb);
+}
+
+/**
+ * Display the list of unused icons to the screen.
+ * @param {Array.<string>} icons
+ * @param {Array.<string>} unusedIcons
+ */
+function outputUnusedIcons(icons, unusedIcons) {
+  console.log('\x1b[36mList of unused icons in %s (%d/%d):\x1b[0m',
+    projectDir, unusedIcons.length, icons.length);
+
+  unusedIcons.forEach(function(icon) {
+    console.log('* ' + icon);
+  });
+}
+
+getUnusedIcons();

gaia/distros/spark/apps/directory/components/gaia-icons/bower.json

@@ -0,0 +1,30 @@
+{
+  "name": "gaia-icons",
+  "version": "0.8.0",
+  "homepage": "https://github.com/wilsonpage/gaia-icons",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "main": [
+    "gaia-icons.js",
+    "gaia-icons.css",
+    "fonts/gaia-icons.ttf",
+    "gaia-icons-embedded.css"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "!.jshintrc",
+    "node_modules",
+    "bower_components",
+    "templates",
+    "images",
+    "test",
+    "tests",
+    "index.html",
+    "create-svg-icon-set-file.py",
+    "Gruntfile.js",
+    "README.md",
+    "package.json"
+  ]
+}

gaia/distros/spark/apps/directory/components/gaia-icons/gaia-icons.css

@@ -0,0 +1,25 @@
+/* Generated by grunt-webfont */
+/* Based on https://github.com/endtwist/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.css */
+
+
+@font-face {
+	font-family: "gaia-icons";
+	src: url("fonts/gaia-icons.ttf") format("truetype");
+	font-weight: 500;
+	font-style: normal;
+}
+
+
+[data-icon]:before,
+.ligature-icons {
+	font-family: "gaia-icons";
+	content: attr(data-icon);
+	display: inline-block;
+	font-weight: 500;
+	font-style: normal;
+	text-decoration: inherit;
+	text-transform: none;
+	text-rendering: optimizeLegibility;
+	font-size: 30px;
+	-webkit-font-smoothing: antialiased;
+}

gaia/distros/spark/apps/directory/components/gaia-icons/gaia-icons.js

@@ -0,0 +1,38 @@
+(function(define){define(function(require,exports,module){
+/*jshint laxbreak:true*/
+
+/**
+ * Exports
+ */
+
+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){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));

gaia/distros/spark/apps/directory/components/gaia-list/bower.json

@@ -0,0 +1,26 @@
+{
+  "name": "gaia-list",
+  "version": "0.1.7",
+  "homepage": "https://github.com/gaia-components/gaia-list",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "main": "gaia-list.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "devDependencies": {
+    "gaia-theme": "gaia-components/gaia-theme#dev",
+    "gaia-fonts": "gaia-components/gaia-fonts#~0.2.1",
+    "gaia-icons": "gaia-components/gaia-icons#~0.6.1"
+  },
+  "dependencies": {
+    "gaia-component": "gaia-components/gaia-component#~0.3.0",
+    "base": "gaia-components/base"
+  }
+}

gaia/distros/spark/apps/directory/components/gaia-list/gaia-list.js

@@ -0,0 +1,311 @@
+;(function(define){'use strict';define(function(require,exports,module){
+/*jshint esnext:true*/
+
+/**
+ * Dependencies
+ */
+
+var component = require('gaia-component');
+
+/**
+ * Pointer event abstraction to make
+ * it work for touch and mouse.
+ *
+ * @type {Object}
+ */
+var pointer = [
+  { down: 'touchstart', up: 'touchend', move: 'touchmove' },
+  { down: 'mousedown', up: 'mouseup', move: 'mousemove' }
+]['ontouchstart' in window ? 0 : 1];
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-list', {
+  created: function() {
+    this.setupShadowRoot();
+    this.els = { inner: this.shadowRoot.querySelector('.inner') };
+    this.addEventListener('click', this.onPointerDown);
+    this.makeAccessible();
+  },
+
+  makeAccessible: function() {
+    [].forEach.call(this.children, (el) => { el.tabIndex = 0; });
+  },
+
+  itemShouldRipple: function(el) {
+    if (scrolling) { return false; }
+    else if (el.classList.contains('ripple')) { return true; }
+    else if (el.classList.contains('no-ripple')) { return false; }
+    else if (this.classList.contains('ripple')){ return true; }
+    else if (this.classList.contains('no-ripple')){ return false; }
+    else if (el.tagName === 'A') { return true; }
+    else { return false; }
+  },
+
+  onPointerDown: function(e) {
+    var point = e.touches ? e.changedTouches[0] : e;
+    var target = this.getChild(e.target);
+
+    if (!this.itemShouldRipple(target)) { return; }
+
+    var pos = {
+      list: this.getBoundingClientRect(),
+      item: target.getBoundingClientRect()
+    };
+
+    var els = {
+      container: document.createElement('div'),
+      ripple: document.createElement('div')
+    };
+
+    els.container.className = 'ripple-container';
+    els.container.style.left = (pos.item.left - pos.list.left) + 'px';
+    els.container.style.top = (pos.item.top - pos.list.top) + 'px';
+    els.container.style.width = pos.item.width + 'px';
+    els.container.style.height = pos.item.height + 'px';
+
+    var offset = {
+      x: point.clientX - pos.item.left,
+      y: point.clientY - pos.item.top
+    };
+
+    els.ripple.className = 'ripple';
+    els.ripple.style.left = offset.x + 'px';
+    els.ripple.style.top = offset.y + 'px';
+    els.ripple.style.visibility = 'hidden';
+
+    els.container.appendChild(els.ripple);
+    this.els.inner.appendChild(els.container);
+
+    // var reflow = els.ripple.offsetTop;
+    var scale = pos.item.width / 1.2;
+    var duration = 500;
+
+    setTimeout(function() {
+      els.ripple.style.visibility = '';
+      els.ripple.style.transform = 'scale(' + scale + ')';
+      els.ripple.style.transitionDuration = duration  + 'ms';
+      setTimeout(function() {
+        els.ripple.style.transitionDuration = '1000ms';
+        els.ripple.style.opacity = '0';
+        setTimeout(function() {
+          els.container.remove();
+        }, 1000);
+      }, duration);
+    });
+  },
+
+  getChild: function(el) {
+    return el && (el.parentNode === this ? el : this.getChild(el.parentNode));
+  },
+
+  template: `
+    <div class="inner">
+      <content></content>
+    </div>
+
+    <style>
+
+    /** Reset
+     ---------------------------------------------------------*/
+
+    label { background: none; }
+
+    /** Host
+     ---------------------------------------------------------*/
+
+    :host {
+      position: relative;
+
+      display: block;
+      overflow: hidden;
+      font-size: 17px;
+    }
+
+    /** Children
+     ---------------------------------------------------------*/
+
+    ::content > *:not(style) {
+      position: relative;
+      z-index: 2;
+
+      box-sizing: border-box;
+      display: flex;
+      width: 100%;
+      min-height: 60px;
+      padding: 9px 16px;
+      margin: 0;
+      border: 0;
+      outline: 0;
+
+      font-size: 18px;
+      font-weight: normal;
+      font-style: normal;
+      background: transparent;
+      align-items: center;
+      list-style-type: none;
+
+      color:
+        var(--text-color);
+    }
+
+    ::content > a {
+      cursor: pointer;
+    }
+
+    /** Titles
+     ---------------------------------------------------------*/
+
+    ::content h1,
+    ::content h2,
+    ::content h3,
+    ::content h4 {
+      font-weight: 400;
+    }
+
+    /** Layout Helpers
+     ---------------------------------------------------------*/
+
+    /**
+     * [flexbox]
+     *
+     * A helper attribute to allow users to
+     * quickly define content as a flexbox.
+     */
+
+    ::content [flexbox] {
+      display: flex;
+    }
+
+    /**
+     * [flex]
+     *
+     * A helper attribute to allow users to
+     * quickly define area as flexible.
+     */
+
+    ::content [flex] {
+      flex: 1;
+    }
+
+    /** Border
+     ---------------------------------------------------------*/
+
+    ::content > *:before {
+      content: '';
+      position: absolute;
+      top: 0px;
+      left: 16px;
+      right: 16px;
+      height: 1px;
+
+      background:
+        var(--border-color,
+        var(--background-plus));
+    }
+
+    /* Hack: Hide the line before the second element, since the first element is
+     * the <style scoped> element */
+    ::content > :first-child:before,
+    ::content > style:first-child ~ :nth-child(2):before,
+    ::content > gaia-header:first-child ~ :nth-child(2):before,
+    ::content > gaia-sub-header:first-child ~ :nth-child(2):before,
+    ::content > h1:first-child ~ :nth-child(2):before,
+    ::content > h2:first-child ~ :nth-child(2):before,
+    ::content > .borderless:before {
+      display: none;
+    }
+
+    /** Titles
+     ---------------------------------------------------------*/
+
+    ::content small,
+    ::content p {
+      font-size: 0.7em;
+      line-height: 1.35em;
+    }
+
+    /** Icon
+     ---------------------------------------------------------*/
+
+    ::content i {
+      display: inline-block;
+      width: 40px;
+    }
+
+    ::content i:before {
+      display: block;
+    }
+
+    ::content > * > i:last-child {
+      width: auto;
+    }
+
+    /**
+     * Reverse the icons when the document is RTL mode
+     */
+
+    :host-context([dir=rtl]) ::content i:before {
+      transform: scale(-1, 1);
+    }
+
+    /** Divided
+     ---------------------------------------------------------*/
+
+    ::content .divided {
+      -moz-border-start: solid 1px;
+      -moz-padding-start: 14px;
+
+      border-color:
+        var(--border-color,
+        var(--background-plus));
+    }
+
+    /** Ripple Container
+     ---------------------------------------------------------*/
+
+    .ripple-container.ripple-container {
+      box-sizing: content-box;
+      position: absolute;
+      z-index: -1;
+      padding-top: 1px;
+      overflow: hidden;
+    }
+
+    /** Ripple
+     ---------------------------------------------------------*/
+
+    .ripple-container > .ripple {
+      background: var(--border-color);
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 2px;
+      height: 2px;
+      margin: -1px;
+      border-radius: 50%;
+      transition-property: transform, opacity;
+      will-change: transform;
+    }
+
+    </style>
+  `
+});
+
+var scrolling = false;
+var scrollTimeout;
+
+addEventListener('scroll', function() {
+  scrolling = true;
+  clearTimeout(scrollTimeout);
+  scrollTimeout = setTimeout(function() {
+    scrolling = false;
+  }, 100);
+});
+
+});})(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-list',this));

gaia/distros/spark/apps/directory/components/gaia-list/index.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>&lt;gaia-list&gt;</title>
+  <meta name="description" content="gaia-list example" />
+  <link rel="stylesheet" type="text/css" href="bower_components/base/base.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-theme/gaia-theme.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-fonts/style.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-icons/style.css">
+  <script src="bower_components/gaia-theme/lib/gaia-theme-selector.js"></script>
+  <script src="bower_components/gaia-icons/gaia-icons.js"></script>
+  <script src="bower_components/gaia-component/gaia-component.js"></script>
+  <script src="gaia-list.js"></script>
+  <style type="text/css">
+
+    body {
+      padding: 16px;
+      padding-top: 48px;
+    }
+
+    gaia-list.settings [data-icon='forward'] {
+      color: var(--text-color-minus);
+    }
+
+    gaia-list .divided {
+      border-left: solid 1px;
+      padding-left: 14px;
+
+      border-color:
+        var(--border-color,
+        var(--background-plus));
+    }
+
+    gaia-list.contacts .face {
+      position: absolute;
+      top: 50%; right: 16px;
+      width: 40px;
+      height: 40px;
+      margin-top: -20px;
+      border-radius: 50%;
+      border: solid 2px;
+
+      border-color:
+        var(--border-color,
+        var(--background-minus));
+      background: var(--background-plus);
+    }
+
+    gaia-list.email > * {
+      padding-left: 32px !important;
+    }
+
+    gaia-list.email time {
+      position: absolute;
+      right: 0; top: 0;
+      margin: 9px 16px;
+      font-size: 0.7em;
+      opacity: 0.6;
+    }
+
+    gaia-list.email p {
+      opacity: 0.6;
+    }
+
+    gaia-list.email .unread:after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 16px; top: 50%;
+      width: 8px;
+      height: 8px;
+      margin-top: -4px;
+      border-radius: 50%;
+
+      background:
+        var(--highlight-color);
+    }
+
+
+  </style>
+</head>
+<body role="application">
+  <gaia-theme-selector></gaia-theme-selector>
+  <h1 class="large l-align-center l-mb-mega">&lt;gaia-list&gt;</h1>
+  <section>
+    <gaia-list class="settings l-mb-mega">
+      <a>
+        <i data-icon="brightness"></i><h3>Menu 1</h3><i data-icon="forward-light"></i></a>
+      <a><i data-icon="location"></i><h3>Menu 2</h3><i data-icon="forward-light"></i></a>
+      <a><i data-icon="settings"></i>Menu 3<i data-icon="forward-light"></i></a>
+      <li>
+        <label class="l-flex l-flex-grow" for="wifi-switch">
+          <i data-icon="wifi-4"></i><h3>Wifi</h3>
+        </label>
+        <gaia-switch id="wifi-switch" class="divided"></gaia-switch>
+      </li>
+    </gaia-list>
+
+    <gaia-list class="contacts l-mb-mega">
+      <a>
+        <div>
+          <h3>Noah Green</h3>
+          <p>Atsara Kitchens</p>
+          <div class="face"></div>
+        </div>
+      </a>
+      <a>
+        <div>
+          <h3>Will Grand</h3>
+          <p>CBN Studio</p>
+          <div class="face"></div>
+        </div>
+      </a>
+      <a>
+        <div>
+          <h3>Carolina Grey</h3>
+          <p>Mozilla</p>
+          <div class="face"></div>
+        </div>
+      </a>
+    </gaia-list>
+
+    <gaia-list class="email">
+      <a class="unread">
+        <div>
+          <h3>Will Gordan</h3>
+          <p>Send photos please!</p>
+          <p>You're the best, thank you so much for all</p><time>11:30AM</time>
+        </div>
+      </a>
+      <a class="unread">
+        <div>
+          <h3>Jennifer Liu</h3>
+          <p>Road trip next weekend</p>
+          <p>I've been wanting to visit that place for a</p>
+          <time>11:30AM</time>
+        </div>
+      </a>
+      <a>
+        <div>
+          <h3>Michael Stanford</h3>
+          <p>You might like this or not?</p>
+          <p>Great find, I definitely check with Brian if</p>
+          <time>11:30AM</time>
+        </div>
+      </a>
+      <a class="unread">
+        <div>
+          <h3>Jennifer Liu</h3>
+          <p>Road trip next weekend</p>
+          <p>I'vee been wanting to visit that place for a</p>
+          <time>11:30AM</time>
+        </div>
+      </a>
+      <a>
+        <div>
+          <h3>Michael Stanford</h3>
+          <p>You might like this or not?</p>
+          <p>Great find, I definitely check with Brian if</p>
+          <time>11:30AM</time>
+        </div>
+      </a>
+    </gaia-list>
+  </section>
+</body>
+</html>

gaia/distros/spark/apps/directory/components/gaia-sub-header/bower.json

@@ -0,0 +1,28 @@
+{
+  "name": "gaia-sub-header",
+  "version": "0.4.1",
+  "homepage": "https://github.com/gaia-components/gaia-subheader",
+  "authors": [
+    "rnowm <arnau@arnaumarch.com>"
+  ],
+  "main": "gaia-sub-header.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "index.html",
+    "package.json",
+    "README.md"
+  ],
+  "devDependencies": {
+    "base": "gaia-components/base",
+    "gaia-theme": "gaia-components/gaia-theme",
+    "gaia-fonts": "gaia-components/gaia-fonts"
+  },
+  "dependencies": {
+    "gaia-component": "gaia-components/gaia-component#^0.3.8"
+  }
+}

gaia/distros/spark/apps/directory/components/gaia-sub-header/gaia-sub-header.js

@@ -0,0 +1,103 @@
+(function(define){'use strict';define(function(require,exports,module){
+/*jshint esnext:true*/
+/*jshint node:true*/
+/*globals define*/
+
+/**
+ * Dependencies
+ */
+
+var component = require('gaia-component');
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-sub-header', {
+  created: function() {
+    this.setupShadowRoot();
+  },
+
+  template: `<div class="inner">
+      <div class="line left"></div>
+      <div class="middle"><content></content></div>
+      <div class="line right"></div>
+    </div>
+
+    <style>
+
+    :host {
+      display: block;
+    }
+
+    .inner {
+      display: flex;
+      margin: 16px 16px 0 16px;
+      align-items: center;
+    }
+
+    .line {
+      position: relative;
+      height: 2px;
+      flex: 1;
+
+      background:
+        var(--border-color,
+        var(--background-plus));
+    }
+
+    .middle {
+      margin: 0 14px 0 14px;
+      padding: 0;
+      text-transform: uppercase;
+      font-size: 14px;
+      font-weight: normal;
+
+      color:
+        var(--title-color);
+    }
+
+    a,
+    button {
+      position: relative;
+      display: block;
+      -moz-padding-end: 16px;
+      font: inherit;
+      cursor: pointer;
+
+      color:
+        var(--highlight-color);
+    }
+
+    /**
+     * .pressed
+     */
+
+    a:active,
+    button:active {
+      opacity: 0.5;
+    }
+
+    a:after,
+    button:after {
+      content: " ";
+      position: absolute;
+      width: 0px;
+      height: 0px;
+      top: 6px;
+      right: 0px;
+      border-bottom: 8px solid;
+      -moz-border-end: 8px solid transparent;
+
+      border-bottom-color:
+        var(--highlight-color,
+        var(--color-zeta))
+    }
+
+    </style>`
+});
+
+});})((function(n,w){'use strict';return typeof define=='function'&&define.amd?
+define:typeof module=='object'?function(c){c(require,exports,module);}:
+function(c){var m={exports:{}},r=function(n){return w[n];};
+w[n]=c(r,m.exports,m)||m.exports;};})('gaia-sub-header',this));

gaia/distros/spark/apps/directory/components/gaia-tabs/bower.json

@@ -0,0 +1,24 @@
+{
+  "name": "gaia-tabs",
+  "version": "0.0.1",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "main": "gaia-tabs.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "examples",
+    "test",
+    "tests",
+    "README.md"
+  ],
+  "dependencies": {
+    "gaia-component": "gaia-components/gaia-component#~0.3.0"
+  },
+  "devDependencies": {
+    "base": "gaia-components/base"
+  }
+}

gaia/distros/spark/apps/directory/components/gaia-tabs/gaia-tabs.js

@@ -0,0 +1,235 @@
+;(function(umd){umd(function(require,exports,module){
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var component = require('gaia-component');
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-tabs', {
+
+  /**
+   * Runs on creation
+   *
+   * The initial value of the `select`
+   * attribute is used to select a tab.
+   *
+   * @private
+   */
+  created: function() {
+    this.setupShadowRoot();
+
+    this.els = {
+      marker: this.shadowRoot.querySelector('.marker')
+    };
+
+    this.makeAccessible();
+    this.addEventListener('click', this.onClick);
+    this.select(this.getAttribute('selected'));
+    this.setupMarker();
+  },
+
+  getLength: function() {
+    var style = this.querySelector('style') ? 1 : 0;
+    return this.children.length - style;
+  },
+
+  setupMarker: function() {
+    this.els.marker.style.width = (1 / this.getLength() * 100) + '%';
+  },
+
+  setMarkerPosition: function(index) {
+    index = document.dir === 'rtl' ? this.getLength() - index - 1 : index;
+    this.els.marker.style.transform = 'translateX(' + index * 100 + '%)';
+  },
+
+  /**
+   * Add necessary attributes to
+   * improve accessibility.
+   *
+   * @private
+   */
+  makeAccessible: function() {
+    this.setAttribute('role', 'tablist');
+    for (var el = this.firstElementChild; el; el = el.nextElementSibling) {
+      el.setAttribute('role', 'tab');
+      el.tabIndex = 0;
+    }
+  },
+
+  /**
+   * Walks up the DOM from the `event.target`
+   * until it finds an immediate child of the
+   * element, then selects the index
+   * of that element.
+   *
+   * @param  {Event} e
+   * @private
+   */
+  onClick: function(e) {
+    var el = e.target;
+    var i;
+    while (el) {
+      i = [].indexOf.call(this.children, el);
+      if (i > -1) { return this.select(i); }
+      el = el.parentNode;
+    }
+  },
+
+  /**
+   * Select a tab by index.
+   *
+   * @param  {Number} index
+   * @public
+   */
+  select: function(index) {
+    if (index === null) { return; }
+
+    // Make sure it's a number
+    index = Number(index);
+
+    var el = this.children[index];
+    this.deselect(this.selected);
+    this.setMarkerPosition(index);
+    this.selectedChild = el;
+    this.selected = index;
+
+    el.setAttribute('aria-selected', 'true');
+    el.classList.add('selected');
+
+    var e = new CustomEvent('change');
+    setTimeout(this.dispatchEvent.bind(this, e));
+  },
+
+  /**
+   * Deselect a tab by index.
+   * @param  {Number} index
+   * @public
+   */
+  deselect: function(index) {
+    var el = this.children[index];
+    if (!el) { return; }
+    el.removeAttribute('aria-selected');
+    el.classList.remove('selected');
+    if (this.current == el) {
+      this.selectedChild = null;
+      this.selected = null;
+    }
+  },
+
+  template: `
+    <div class="inner">
+      <content></content>
+      <div class="marker"></div>
+    </div>
+    <style>
+
+    /** Host
+     ---------------------------------------------------------*/
+
+    :host {
+      display: block;
+      position: relative;
+      border-top: 1px solid;
+      overflow: hidden;
+
+      border-color:
+        var(--border-color,
+        var(--background-plus))
+    }
+
+    /** Inner
+     ---------------------------------------------------------*/
+
+    .inner {
+      display: flex;
+      height: 45px;
+    }
+
+    /** Direct Children
+     ---------------------------------------------------------*/
+
+    ::content > * {
+      position: relative;
+
+      display: block;
+      height: 100%;
+      text-align: center;
+      line-height: 45px;
+      outline: 0;
+      border: 0;
+      flex: 1;
+
+      font-size: 17px;
+      font-style: italic;
+      font-weight: lighter;
+      background: none;
+      cursor: pointer;
+      color: inherit;
+      transition:
+        color,
+        opacity 0.2s;
+      transition-delay: 200ms;
+    }
+
+    /**
+     * :active
+     */
+
+    ::content > :active {
+      transition: none;
+      opacity: 0.3;
+    }
+
+    /**
+     * .selected
+     */
+
+    ::content > .selected {
+      color: var(--highlight-color, #000);
+      transition: none;
+    }
+
+    /**
+     * [disabled]
+     */
+
+    ::content > [disabled] {
+      transition: none;
+      opacity: 0.3;
+      pointer-events: none;
+    }
+
+    /** Style
+     ---------------------------------------------------------*/
+
+    ::content style {
+      display: none !important;
+    }
+
+    /** Marker
+     ---------------------------------------------------------*/
+
+    .marker {
+      position: absolute;
+      bottom: 0px;
+      left: 0px;
+      height: 3px;
+      background: var(--highlight-color, #000);
+      transition: transform 0.2s;
+      transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+    }
+
+    </style>
+  `
+});
+
+});})(typeof define=='function'&&define.amd?define
+:(function(n,w){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-tabs',this));

gaia/distros/spark/apps/directory/components/gaia-tabs/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>&lt;gaia-tabs&gt;</title>
+  <meta name="description" content="gaia-tabs example" />
+  <link rel="stylesheet" type="text/css" href="bower_components/base/base.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-theme/gaia-theme.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-fonts/style.css">
+  <script src="bower_components/gaia-theme/lib/gaia-theme-selector.js"></script>
+  <script src="bower_components/gaia-component/gaia-component.js"></script>
+  <script src="gaia-tabs.js"></script>
+  <style type="text/css">
+
+    body {
+      padding: 16px;
+      padding-top: 48px;
+    }
+
+  </style>
+</head>
+<body>
+  <gaia-theme-selector></gaia-theme-selector>
+  <h1 class="large l-align-center l-mb-mega">&lt;gaia-tabs&gt;</h1>
+  <section>
+    <gaia-tabs selected="2">
+      <a href="#" class="icon-dialer">Item 1</a>
+      <a href="#" class="icon-contacts">Item 2</a>
+      <a href="#" class="icon-call-log">Item 3</a>
+      <a href="#" disabled="">Item 4</a>
+      <a href="#">Item 5</a>
+    </gaia-tabs>
+  </section>
+</body>
+</html>

gaia/distros/spark/apps/directory/components/gaia-tabs/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "gaia-tabs",
+  "version": "0.1.0",
+  "main": "gaia-tabs.js",
+  "directories": {
+    "example": "examples",
+    "test": "test"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "gaia-test-lint && gaia-test-unit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gaia-components/gaia-tabs.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/gaia-components/gaia-tabs/issues"
+  },
+  "homepage": "https://github.com/gaia-components/gaia-tabs",
+  "dependencies": {
+    "gaia-test": "git://github.com/gaia-components/gaia-test"
+  }
+}

gaia/distros/spark/apps/directory/components/gaia-text-input/bower.json

@@ -0,0 +1,27 @@
+{
+  "name": "gaia-text-input",
+  "version": "0.1.2",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "main": "gaia-text-input.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "README.md"
+  ],
+  "dependencies": {
+    "gaia-icons": "gaia-components/gaia-icons#~0.8.0",
+    "gaia-component": "gaia-components/gaia-component#~0.3.3"
+  },
+  "devDependencies": {
+    "gaia-fonts": "gaia-components/gaia-fonts#~0.2.1",
+    "gaia-theme": "gaia-components/gaia-theme#~0.4.3",
+    "base": "gaia-components/base",
+    "gaia-icons": "gaia-components/gaia-icons#master"
+  }
+}

gaia/distros/spark/apps/directory/components/gaia-text-input/gaia-text-input-multiline.js

@@ -0,0 +1,216 @@
+(function(define){define(function(require,exports,module){
+/*jshint esnext:true*/
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var component = require('gaia-component');
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-text-input-multiline', {
+  created: function() {
+    this.setupShadowRoot();
+
+    this.els = {
+      inner: this.shadowRoot.querySelector('.inner'),
+      field: this.shadowRoot.querySelector('textarea')
+    };
+
+    this.type = this.getAttribute('type');
+    this.disabled = this.hasAttribute('disabled');
+    this.placeholder = this.getAttribute('placeholder');
+    this.required = this.getAttribute('required');
+    this.value = this.getAttribute('value');
+  },
+
+  clear: function(e) {
+    this.value = '';
+  },
+
+  attrs: {
+    placeholder: {
+      get: function() { return this.els.field.placeholder; },
+      set: function(value) { this.els.field.placeholder = value || ''; }
+    },
+
+    value: {
+      get: function() { return this.els.field.value; },
+      set: function(value) { this.els.field.value = value; }
+    },
+
+    required: {
+      get: function() { return this.els.field.required; },
+      set: function(value) { this.els.field.required = value; }
+    },
+
+    disabled: {
+      get: function() { return this.els.field.disabled; },
+      set: function(value) {
+        value = !!(value === '' || value);
+        this.els.field.disabled = value;
+      }
+    }
+  },
+
+  template: `<div class="inner">
+      <content select="label"></content>
+      <div class="fields">
+        <textarea></textarea>
+        <div class="focus focus-1"></div>
+        <div class="focus focus-2"></div>
+      </div>
+    </div>
+    <style>
+
+    /** Reset
+     ---------------------------------------------------------*/
+
+    textarea {
+      box-sizing: border-box;
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    /** Host
+     ---------------------------------------------------------*/
+
+    :host {
+      display: block;
+      margin-top: var(--base-m, 18px);
+      margin-bottom: var(--base-m, 18px);
+    }
+
+    /** Inner
+     ---------------------------------------------------------*/
+
+    .inner {
+      height: 100%;
+    }
+
+    /** Label
+     ---------------------------------------------------------*/
+
+    label {
+      font-size: 14px;
+      display: block;
+      margin: 0 0 4px 16px;
+    }
+
+    /**
+     * [disbled]
+     */
+
+    [disabled] label {
+      opacity: 0.3;
+    }
+
+    /** Fields
+     ---------------------------------------------------------*/
+
+    .fields {
+      box-sizing: border-box;
+      position: relative;
+      width: 100%;
+      height: 100%;
+
+      --gi-border-color:
+        var(--input-border-color,
+        var(--border-color,
+        var(--background-plus,
+        #e7e7e7)));
+
+      border-color:
+        var(--gi-border-color);
+
+      border:
+        var(--input-border,
+        var(--border,
+        1px solid var(--gi-border-color)));
+    }
+
+    /** Textarea
+     ---------------------------------------------------------*/
+
+    textarea {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 86px;
+      padding: 10px 16px;
+      font-size: inherit;
+      border: none;
+      margin: 0;
+      font: inherit;
+      resize: none;
+
+      /* dynamic */
+
+      color:
+        var(--text-color, #000);
+
+      background:
+        var(--text-input-background,
+        var(--input-background,
+        var(--background-minus,
+        #fff)));
+    }
+
+    /**
+     * [disabled]
+     */
+
+    textarea[disabled] {
+      background: transparent;
+    }
+
+    /** Placeholder Text
+     ---------------------------------------------------------*/
+
+    ::-moz-placeholder {
+      font-style: italic;
+
+      color:
+        var(--input-placeholder-color, #909ca7);
+    }
+
+    /** Focus Bar
+     ---------------------------------------------------------*/
+
+    .focus {
+      position: absolute;
+      bottom: 0px;
+      width: 100%;
+      height: 3px;
+      transition: all 200ms;
+      transform: scaleX(0);
+      visibility: hidden;
+      background: var(--highlight-color, #000);
+    }
+
+    /**
+     * input:focus
+     */
+
+    :focus ~ .focus {
+      transform: scaleX(1);
+      transition-delay: 200ms;
+      visibility: visible;
+    }
+
+    .focus-2 {
+      top: 0;
+      bottom: auto;
+    }
+
+    </style>`
+});
+
+});})((function(n,w){return typeof define=='function'&&define.amd?
+define:typeof module=='object'?function(c){c(require,exports,module);}:function(c){
+var m={exports:{}},r=function(n){return w[n];};w[n]=c(r,m.exports,m)||m.exports;};})('gaia-text-input-multiline',this));

gaia/distros/spark/apps/directory/components/gaia-text-input/gaia-text-input-pin.js

@@ -0,0 +1,279 @@
+(function(define){define(function(require,exports,module){
+/*jshint esnext:true*/
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var component = require('gaia-component');
+
+/**
+ * Locals
+ */
+
+var DEFAULT_LENGTH = 4;
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-text-input-pin', {
+  created: function() {
+    this.setupShadowRoot();
+
+    this.els = {
+      inner: this.shadowRoot.querySelector('.inner'),
+      fields: this.shadowRoot.querySelector('.fields'),
+      input: this.shadowRoot.querySelector('input')
+    };
+
+    this.disabled = this.hasAttribute('disabled');
+    this.length = this.getAttribute('length') || DEFAULT_LENGTH;
+
+    this.addEventListener('keyup', () => this.updateCells());
+  },
+
+  updateCells: function() {
+    var l = this.els.input.value.length;
+    this.els.cells.forEach((cell, i) => {
+      cell.classList.toggle('populated', i < l);
+      cell.classList.toggle('focused', i == l);
+    });
+  },
+
+  onBackspace: function(e) {
+    var input = e.target;
+    var empty = !input.value;
+    var previous = input.previousElementSibling;
+
+    if (!empty && previous) {
+      previous.clear();
+      previous.focus();
+    } else if (empty && previous) {
+      previous.focus();
+    }
+  },
+
+  setupFields: function() {
+    this.els.fields.innerHTML = '';
+    this.els.cells = [];
+
+    for (var i = 0, l = this.length; i < l; i++) {
+      var el = document.createElement('div');
+      el.className = 'cell';
+      this.els.fields.appendChild(el);
+      this.els.cells.push(el);
+    }
+  },
+
+  attributeChangedCallback: function(attr, from, to) {
+    if (attrs[attr]) { this[attr] = to; }
+  },
+
+  clear: function(e) {
+    this.value = '';
+  },
+
+  /**
+   * Attributes
+   */
+
+  attrs: {
+    length: {
+      get: function() { return this._length; },
+      set: function(value) {
+        value = Number(value);
+        this._length = value;
+        this.els.input.setAttribute('maxlength', this.length);
+        this.setupFields();
+      }
+    },
+
+    value: {
+      get: function() { return this.els.input.value; },
+      set: function(value) { this.els.input.value = value; }
+    },
+
+    disabled: {
+      get: function() { return this.els.input.disabled; },
+      set: function(value) {
+        value = !!(value === '' || value);
+        this.els.input.disabled = value;
+      }
+    }
+  },
+
+  template: `
+    <div class="inner">
+      <content select="label"></content>
+      <div class="container">
+        <input />
+        <div class="fields"></div>
+      </div>
+    </div>
+
+    <style>
+
+    /** Host
+     ---------------------------------------------------------*/
+
+    :host {
+      display: block;
+      height: 40px;
+      margin-top: var(--base-m, 18px);
+      margin-bottom: var(--base-m, 18px);
+      font-size: 40px;
+    }
+
+    /** Inner
+     ---------------------------------------------------------*/
+
+    .inner {
+      height: 100%;
+    }
+
+    /** Label
+     ---------------------------------------------------------*/
+
+    label {
+      font-size: 14px;
+      display: block;
+      margin: 0 0 4px 16px;
+    }
+
+    /** Container
+     ---------------------------------------------------------*/
+
+    .container {
+      position: relative;
+      z-index: 0;
+      height: 100%;
+    }
+
+    /** Input (hidden)
+     ---------------------------------------------------------*/
+
+    input {
+      opacity: 0;
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      z-index: 1;
+    }
+
+    /** Fields
+     ---------------------------------------------------------*/
+
+    .fields {
+      display: flex;
+      position: relative;
+      height: 100%;
+      margin-left: -1rem;
+    }
+
+    /**
+     * [disbled]
+     */
+
+    [disabled] + .fields {
+      pointer-events: none;
+    }
+
+    /** Cell
+     ---------------------------------------------------------*/
+
+    .cell {
+      position: relative;
+      height: 100%;
+      margin-left: 1rem;
+      flex: 1;
+
+      /* dynamic */
+
+      --gi-border-color:
+        var(--input-border-color,
+        var(--border-color,
+        var(--background-plus,
+        #e7e7e7)));
+
+      border-color:
+        var(--gi-border-color);
+
+      border:
+        var(--input-border,
+        var(--border,
+        1px solid var(--gi-border-color)));
+
+      background:
+        var(--text-input-background,
+        var(--input-background,
+        var(--background-minus,
+        #fff)));
+    }
+
+    /**
+     * [disbled]
+     */
+
+    [disabled] + .fields .cell {
+      background: none;
+    }
+
+    /** Dot
+     ---------------------------------------------------------*/
+
+    .cell::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 14px;
+      height: 14px;
+      margin: -7px;
+      border-radius: 50%;
+      opacity: 0;
+
+      /* dynamic */
+
+      background:
+        var(--text-color);
+    }
+
+    /**
+     * .populated
+     */
+
+    .cell.populated::after {
+      opacity: 1;
+    }
+
+    .cell::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 3px;
+      visibility: hidden;
+      background: var(--highlight-color, #000);
+    }
+
+    /**
+     * input:focus
+     */
+
+    input:focus + .fields .cell::before {
+      visibility: visible;
+    }
+
+    </style>
+  `
+});
+
+});})((function(n,w){return typeof define=='function'&&define.amd?
+define:typeof module=='object'?function(c){c(require,exports,module);}:function(c){
+var m={exports:{}},r=function(n){return w[n];};w[n]=c(r,m.exports,m)||m.exports;};})('gaia-text-input-pin',this));

gaia/distros/spark/apps/directory/components/gaia-text-input/gaia-text-input.js

@@ -0,0 +1,317 @@
+(function(define){define(function(require,exports,module){
+/*jshint esnext:true*/
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var component = require('gaia-component');
+require('gaia-icons'); // Load gaia-icons
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-text-input', {
+  extends: HTMLInputElement,
+
+  created: function() {
+    this.setupShadowRoot();
+
+    this.els = {
+      inner: this.shadowRoot.querySelector('.inner'),
+      input: this.shadowRoot.querySelector('input'),
+      clear: this.shadowRoot.querySelector('.clear')
+    };
+
+    this.type = this.getAttribute('type');
+    this.disabled = this.hasAttribute('disabled');
+    this.clearable = this.hasAttribute('clearable');
+    this.placeholder = this.getAttribute('placeholder');
+    this.required = this.getAttribute('required');
+    this.value = this.getAttribute('value');
+
+    // Don't take focus from the input field
+    this.els.clear.addEventListener('mousedown', (e) => e.preventDefault());
+    this.els.clear.addEventListener('click', e => this.clear(e));
+  },
+
+  clear: function(e) {
+    this.value = '';
+  },
+
+  focus: function() {
+    this.els.input.focus();
+  },
+
+  /**
+   * Attributes
+   */
+
+  attrs: {
+    type: {
+      get: function() { return this.els.input.getAttribute('type'); },
+      set: function(value) {
+        if (!value) { return; }
+        this.els.inner.setAttribute('type', value);
+        this.els.input.setAttribute('type', value);
+      }
+    },
+
+    placeholder: {
+      get: function() { return this.field.placeholder; },
+      set: function(value) {
+        if (!value && value !== '') { return; }
+        this.els.input.placeholder = value;
+      }
+    },
+
+    clearable: {
+      get: function() { return this._clearable; },
+      set: function(value) {
+        var clearable = !!(value === '' || value);
+        if (clearable === this.clearable) { return; }
+
+        if (clearable) {
+          this.els.inner.setAttribute('clearable', '');
+          this.setAttribute('clearable', '');
+        } else {
+          this.els.inner.removeAttribute('clearable');
+          this.removeAttribute('clearable');
+        }
+
+        this._clearable = clearable;
+      }
+    },
+
+    value: {
+      get: function() { return this.els.input.value; },
+      set: function(value) { this.els.input.value = value; }
+    },
+
+    required: {
+      get: function() { return this.els.input.required; },
+      set: function(value) { this.els.input.required = value; }
+    },
+
+    maxlength: {
+      get: function() { return this.els.input.getAttribute('maxlength'); },
+      set: function(value) { this.els.input.setAttribute('maxlength', value); }
+    },
+
+    disabled: {
+      get: function() { return this.els.input.disabled; },
+      set: function(value) {
+        value = !!(value === '' || value);
+        this.els.input.disabled = value;
+      }
+    }
+  },
+
+  template: `
+    <div class="inner">
+      <content select="label"></content>
+      <div class="fields">
+        <input type="text"/>
+        <button class="clear" tabindex="-1"></button>
+        <div class="focus"></div>
+      </div>
+    </div>
+
+    <style>
+
+    :host {
+      display: block;
+      height: 40px;
+      margin-top: var(--base-m, 18px);
+      margin-bottom: var(--base-m, 18px);
+    }
+
+    /** Reset
+     ---------------------------------------------------------*/
+
+    input,
+    button {
+      box-sizing: border-box;
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    /** Inner
+     ---------------------------------------------------------*/
+
+    .inner {
+      height: 100%;
+    }
+
+    /** Label
+     ---------------------------------------------------------*/
+
+    label {
+      font-size: 14px;
+      display: block;
+      margin: 0 0 4px 16px;
+    }
+
+    /**
+     * [disbled]
+     */
+
+    [disabled] label {
+      opacity: 0.3;
+    }
+
+    /** Fields
+     ---------------------------------------------------------*/
+
+    .fields {
+      position: relative;
+      width: 100%;
+      height: 100%;
+
+      --gi-border-color:
+        var(--input-border-color,
+        var(--border-color,
+        var(--background-plus,
+        #e7e7e7)));
+
+      border-color:
+        var(--gi-border-color);
+
+      border:
+        var(--input-border,
+        var(--border,
+        1px solid var(--gi-border-color)));
+    }
+
+    /**
+     * [type='search']
+     */
+
+    [type='search'] .fields {
+      border-radius: 30px;
+      overflow: hidden;
+    }
+
+    /** Input Field
+     ---------------------------------------------------------*/
+
+    input {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border: none;
+      padding: 0 16px;
+      margin: 0;
+      font: inherit;
+      resize: none;
+
+      /* Dynamic */
+
+      color:
+        var(--text-color, #000);
+
+      background:
+        var(--text-input-background,
+        var(--input-background,
+        var(--background-minus,
+        #fff)));
+    }
+
+    /**
+     * [disabled]
+     */
+
+    input[disabled] {
+      background: transparent;
+    }
+
+    /** Placeholder Text
+     ---------------------------------------------------------*/
+
+    ::-moz-placeholder {
+      font-style: italic;
+
+      color:
+        var(--input-placeholder-color, #909ca7);
+    }
+
+    /** Clear Button
+     ---------------------------------------------------------*/
+
+    .clear {
+      display: none;
+      position: absolute;
+      top: 11px;
+      right: 10px;
+      width: 18px;
+      height: 18px;
+      padding: 0;
+      margin: 0;
+      border-radius: 50%;
+      opacity: 0;
+      color: #fff;
+      cursor: pointer;
+
+      background:
+        var(--input-clear-background, #999);
+    }
+
+    /**
+     * [clearable]
+     */
+
+    [clearable] .clear {
+      display: block;
+    }
+
+    /**
+     * input:focus
+     */
+
+    input:focus ~ .clear {
+      opacity: 1;
+    }
+
+    /** Clear Icon
+     ---------------------------------------------------------*/
+
+    .clear:before {
+      font: normal 500 19px/16.5px 'gaia-icons';
+      content: 'close';
+      display: block;
+      text-rendering: optimizeLegibility;
+    }
+
+    /** Focus Bar
+     ---------------------------------------------------------*/
+
+    .focus {
+      position: absolute;
+      bottom: 0px;
+      width: 100%;
+      height: 3px;
+      transition: all 200ms;
+      transform: scaleX(0);
+      visibility: hidden;
+      background: var(--highlight-color, #000);
+    }
+
+    /**
+     * input:focus
+     */
+
+    :focus ~ .focus {
+      transform: scaleX(1);
+      transition-delay: 200ms;
+      visibility: visible;
+    }
+    </style>
+  `
+});
+
+});})((function(n,w){return typeof define=='function'&&define.amd?
+define:typeof module=='object'?function(c){c(require,exports,module);}:function(c){
+var m={exports:{}},r=function(n){return w[n];};w[n]=c(r,m.exports,m)||m.exports;};})('gaia-text-input',this));

gaia/distros/spark/apps/directory/components/gaia-text-input/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>&lt;gaia-text-input&gt;</title>
+  <meta name="description" content="gaia-text-input demo">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="bower_components/base/base.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-icons/gaia-icons.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-theme/gaia-theme.css">
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-fonts/style.css">
+  <script src="bower_components/gaia-theme/lib/gaia-theme-selector.js"></script>
+  <script src="bower_components/gaia-component/gaia-component.js"></script>
+  <script src="gaia-text-input.js"></script>
+  <script src="gaia-text-input-multiline.js"></script>
+  <script src="gaia-text-input-pin.js"></script>
+  <style type="text/css">
+
+    body {
+      padding: 48px 24px 24px;
+    }
+
+  </style>
+</head>
+<body>
+  <gaia-theme-selector></gaia-theme-selector>
+
+  <button id="btn">Focus</button>
+
+
+  <gaia-text-input id="field" placeholder="Default"></gaia-text-input>
+  <gaia-text-input placeholder="Search" type="search"></gaia-text-input>
+  <gaia-text-input placeholder="Email" type="email" clearable></gaia-text-input>
+  <gaia-text-input-multiline placeholder="Multiline"></gaia-text-input-multiline>
+  <gaia-text-input-pin length="4"></gaia-text-input-pin>
+
+  <gaia-text-input placeholder="Disabled" disabled></gaia-text-input>
+  <gaia-text-input placeholder="Search" type="search" disabled></gaia-text-input>
+  <gaia-text-input placeholder="Email" type="email" clearable disabled></gaia-text-input>
+  <gaia-text-input-multiline placeholder="Multiline" disabled></gaia-text-input-multiline>
+  <gaia-text-input-pin length="4" disabled></gaia-text-input-pin>
+
+  <!-- <gaia-text-input-password></gaia-text-input-password> -->
+
+
+  <script>
+    btn.onclick = e => field.focus();
+  </script>
+</body>
+</html>

gaia/distros/spark/apps/directory/components/gaia-text-input/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "gaia-text-input",
+  "homepage": "https://github.com/gaia-components/gaia-text-input",
+  "license": "ISC",
+  "main": "gaia-text-input.js",
+  "directories": {
+    "test": "test"
+  },
+  "devDependencies": {
+    "bower": "^1.3.5",
+    "karma": "^0.12.16",
+    "karma-firefox-launcher": "^0.1.3",
+    "karma-mocha": "^0.1.3",
+    "karma-sinon-chai": "^0.1.6",
+    "mozilla-download": "0.4.4"
+  },
+  "scripts": {
+    "test": "./node_modules/karma/bin/karma start test/karma.conf.js --single-run",
+    "test-dev": "./node_modules/karma/bin/karma start test/karma.conf.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/gaia-components/gaia-text-input.git"
+  },
+  "bugs": {
+    "url": "https://github.com/gaia-components/gaia-text-input/issues"
+  }
+}

gaia/distros/spark/apps/directory/components/gaia-theme/bower.json

@@ -0,0 +1,26 @@
+{
+  "name": "gaia-theme",
+  "version": "0.5.0",
+  "homepage": "https://github.com/gaia-components/gaia-theme",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "!.jshintrc",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "index.html",
+    "README.md"
+  ],
+  "devDependencies": {
+    "gaia-icons": "gaia-components/gaia-icons",
+    "gaia-header": "gaia-components/gaia-header",
+    "gaia-button": "gaia-components/gaia-button",
+    "gaia-switch": "gaia-components/gaia-switch",
+    "gaia-checkbox": "gaia-components/gaia-checkbox"
+  }
+}

gaia/distros/spark/apps/directory/components/gaia-theme/gaia-theme.css

@@ -0,0 +1,244 @@
+/*
+Gaia theme variables
+*/
+
+
+:root {
+
+  /** Grey Colors
+   ---------------------------------------------------------*/
+
+  --color-alpha: #333333;
+  --color-beta: #ffffff;
+  --color-gamma: #4d4d4d;
+  --color-delta: #5f5f5f;
+  --color-epsilon: #858585;
+  --color-zeta: #a6a6a6;
+  --color-eta: #c7c7c7;
+  --color-theta: #e7e7e7;
+  --color-iota: #f4f4f4;
+
+/** Brand Colors
+ ---------------------------------------------------------*/
+
+  --color-darkblue: #00539f;
+  --color-blue: #00caf2;
+  --color-turquoise: #27c8c2;
+  --color-darkorange: #e66000;
+  --color-orange: #ff9500;
+  --color-yellow: #ffcb00;
+  --color-violet: #c40c84;
+
+  --color-warning: #fbbd3c;
+  --color-destructive: #e2443a;
+  --color-preffered: #00ba91;
+
+  /** Background
+   ---------------------------------------------------------*/
+
+  --background: var(--color-beta);
+  --background-plus: var(--color-theta);
+  --background-minus: var(--color-zeta);
+
+  /** Borders
+   ---------------------------------------------------------*/
+
+  --border-color: var(--color-theta);
+
+  /** Text Color
+   ---------------------------------------------------------*/
+
+  --text-color: var(--color-gamma);
+  --text-color-minus: var(--color-eta);
+
+  /** Button
+   ---------------------------------------------------------*/
+
+  --button-background: var(--color-iota);
+
+  /** Links
+   ---------------------------------------------------------*/
+
+  --link-color: var(--highlight-color);
+
+  /** Inputs
+   ---------------------------------------------------------*/
+
+  --input-background: var(--color-beta);
+  --input-color: var(--color-alpha);
+  --input-clear-background: #909ca7;
+
+  /** Buttons
+   ---------------------------------------------------------*/
+
+  --button-box-shadow:
+    inset 0 -1px 0 #d8d8d8,
+    inset 0 1px 0 #eeeeee;
+  --button-box-shadow-active: var(--button-box-shadow);
+
+  /** Header
+   ---------------------------------------------------------*/
+
+  --header-disabled-button-color: rgba(255,255,255,0.3);
+
+  /** Transitions
+   ---------------------------------------------------------*/
+
+  --transition-duration: 0.2s;
+}
+
+
+.theme-productivity {
+
+  /** Brand Color
+   ---------------------------------------------------------*/
+
+  --highlight-color: var(--color-orange);
+
+  /** Header
+   ---------------------------------------------------------*/
+
+  --header-background: var(--highlight-color);
+  --header-color: var(--color-beta);
+}
+
+.theme-communications {
+
+  /** Brand Color
+   ---------------------------------------------------------*/
+
+  --highlight-color: var(--color-turquoise);
+
+  /** Links
+   ---------------------------------------------------------*/
+
+  --link-color: #177874;
+
+  /** Header
+   ---------------------------------------------------------*/
+
+  --header-background: var(--highlight-color);
+  --header-color: var(--color-beta);
+  --header-icon-color: var(--color-beta);
+  --header-button-color: var(--color-beta);
+}
+
+.theme-settings {
+
+  /** Background
+   ---------------------------------------------------------*/
+
+  --background: var(--color-iota);
+  --background-plus: var(--color-beta);
+  --background-minus: var(--color-epsilon);
+  --background-minus-minus: var(--color-zeta);
+
+  /** Highlight
+   ---------------------------------------------------------*/
+
+  --highlight-color: var(--color-blue);
+
+  /** Borders
+   ---------------------------------------------------------*/
+
+  --border-color: var(--color-theta);
+
+  /** Text Color
+   ---------------------------------------------------------*/
+
+  --text-color: var(--color-gamma);
+
+  /** Titles
+   ---------------------------------------------------------*/
+
+  --title-color: var(--background-minus);
+
+  /** Buttons
+   ---------------------------------------------------------*/
+
+  --button-background: var(--background-plus);
+
+  /** Switch
+   ---------------------------------------------------------*/
+
+  --switch-background: var(--background-minus-minus);
+
+  /** Checkbox
+   ---------------------------------------------------------*/
+
+  --checkbox-border-color: var(--background-minus-minus);
+
+  /** Header
+   ---------------------------------------------------------*/
+
+  --header-color: var(--title-color);
+  --header-background: var(--background);
+  --header-button-color: var(--highlight-color);
+  --header-disabled-button-color: var(--color-theta);
+  --header-action-button-color: var(--title-color);
+}
+
+.theme-media {
+
+  /** Highlight Color
+   ---------------------------------------------------------*/
+
+  --highlight-color: var(--color-blue);
+
+  /** Background
+   ---------------------------------------------------------*/
+
+  --background: var(--color-alpha);
+  --background-plus: var(--color-gamma);
+  --background-minus: #2B2B2B;
+  --background-minus-minus: #1a1a1a;
+
+  /** Text Color
+   ---------------------------------------------------------*/
+
+  --text-color: var(--color-beta);
+
+  /** Button
+   ---------------------------------------------------------*/
+
+  --button-background: var(--background-plus);
+
+  /** Header
+   ---------------------------------------------------------*/
+
+  --header-background: var(--background);
+  --header-icon-color: var(--text-color);
+  --header-button-color: var(--highlight-color);
+
+  /** Borders
+   ---------------------------------------------------------*/
+
+  --border-color: var(--color-gamma);
+
+  /** Inputs
+   ---------------------------------------------------------*/
+
+  --input-background: var(--background-plus);
+
+  /** Text Input
+   ---------------------------------------------------------*/
+
+  --text-input-background: var(--background-minus);
+
+  /** Switch
+   ---------------------------------------------------------*/
+
+  --switch-head-border-color: var(--background-minus-minus);
+  --switch-background: var(--background-minus-minus);
+
+  /** Checkbox
+   ---------------------------------------------------------*/
+
+  --checkbox-border-color: var(--background-minus-minus);
+
+  /** Buttons
+   ---------------------------------------------------------*/
+
+   --button-box-shadow: none;
+   --button-box-shadow-active: none;
+}

gaia/distros/spark/apps/directory/components/gaia-theme/lib/gaia-theme-selector.js

@@ -0,0 +1,111 @@
+(function(define){'use strict';define(function(require,exports,module){
+/*jshint esnext:true*/
+
+/**
+ * Extend from the `HTMLElement` prototype
+ *
+ * @type {Object}
+ */
+var proto = Object.create(HTMLElement.prototype);
+
+proto.createdCallback = function() {
+  this.createShadowRoot().innerHTML = template;
+
+  this.els = {
+    themes: this.shadowRoot.querySelector('.themes'),
+    rtl: this.shadowRoot.querySelector('.toggle-rtl')
+  };
+
+  this.els.rtl.addEventListener('click', this.onRtlClick.bind(this));
+  this.els.themes.addEventListener('click', this.onThemeClick.bind(this));
+  this.styleHack();
+  this.set(localStorage.theme || 'settings');
+};
+
+proto.styleHack = function() {
+  var style = this.shadowRoot.querySelector('style');
+  style.setAttribute('scoped', '');
+  this.appendChild(style.cloneNode(true));
+};
+
+proto.onThemeClick = function(e) {
+  var theme = e.target.value;
+  if (theme) { this.set(theme); }
+};
+
+proto.onRtlClick = function() {
+  document.dir = this.els.rtl.checked ? 'rtl' : 'ltr';
+};
+
+proto.set = function(theme) {
+  var radio = this.shadowRoot.querySelector('[value="' + theme + '"]');
+  document.body.classList.remove('theme-' + this.theme);
+  document.body.classList.add('theme-' + theme);
+  radio.checked = true;
+  this.theme = theme;
+  localStorage.theme = theme;
+};
+
+var template = `
+<style>
+
+* { margin: 0; padding: 0; }
+
+gaia-theme-selector {
+  position: fixed;
+  top: 0; left: 0;
+  z-index: 101;
+  width: 100%;
+  height: 30px;
+  background: rgba(255,255,255,0.8);
+  color: #000;
+  font-size: 9px;
+  text-align: center;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+  direction: ltr;
+}
+
+form {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+form label {
+  -moz-margin-start: 9px;
+}
+
+form input {
+  -moz-margin-end: 6px;
+  vertical-align: middle;
+}
+
+.rtl {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+}
+
+</style>
+
+<form>
+  <label class="rtl"><input type="checkbox" class="toggle-rtl" />RTL</label>
+  <span class="themes">
+    <label><input type="radio" name="theme" value="productivity"/>Prod</label>
+    <label><input type="radio" name="theme" value="communications"/>Comms</label>
+    <label><input type="radio" name="theme" value="media"/>Media</label>
+    <label><input type="radio" name="theme" value="settings"/>Settings</label>
+  </span>
+</form>`;
+
+document.registerElement('gaia-theme-selector', { prototype: proto });
+
+});})((function(n,w){'use strict';return typeof define=='function'&&define.amd?
+define:typeof module=='object'?function(c){c(require,exports,module);}:
+function(c){var m={exports:{}},r=function(n){return w[n];};
+w[n]=c(r,m.exports,m)||m.exports;};})('gaia-theme-selector',this));