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/sharing/components/dns-sd.js.js

@@ -0,0 +1 @@
+define(['./dns-sd.js/dist/dns-sd'], function(m) { return m; });

gaia/distros/spark/apps/sharing/components/dns-sd.js/bower.json

@@ -0,0 +1,23 @@
+{
+  "name": "dns-sd.js",
+  "version": "0.0.1",
+  "homepage": "https://github.com/justindarc/dns-sd.js",
+  "authors": [
+    "Justin D'Arcangelo <justindarc@gmail.com>"
+  ],
+  "main": "dist/dns-sd.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "example",
+    "node_modules",
+    "src",
+    "test",
+    "bower.json",
+    "LICENSE",
+    "package.json",
+    "README.md"
+  ],
+  "dependencies": {},
+  "devDependencies": {}
+}

gaia/distros/spark/apps/sharing/components/drag.js

@@ -0,0 +1 @@
+define(['./drag/drag'], function(m) { return m; });

gaia/distros/spark/apps/sharing/components/drag/bower.json

@@ -0,0 +1,20 @@
+{
+  "name": "drag",
+  "main": "drag.js",
+  "version": "0.2.0",
+  "homepage": "https://github.com/gaia-components/drag",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "evt": "gaia-components/evt#~0.4.0"
+  }
+}

gaia/distros/spark/apps/sharing/components/drag/drag.js

@@ -0,0 +1,347 @@
+(function(define){'use strict';define(['require','exports','module'],function(require,exports,module){
+
+/**
+ * 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];
+
+/**
+ * Simple logger
+ *
+ * @type {Function}
+ */
+var debug = 0 ? console.log.bind(console) : function() {};
+
+/**
+ * Exports
+ */
+
+module.exports = Drag;
+
+/**
+ * Drag creates a draggable 'handle' element,
+ * constrained within a 'container' element.
+ *
+ * Drag instances dispatch useful events and provides
+ * methods to support common draggable UI use-cases,
+ * like snapping.
+ *
+ * In Gaia we use `Drag` for our switch components.
+ *
+ * Example:
+ *
+ *   var container = document.getElementById(#my-container);
+ *   var handle = document.getElementById(#my-handle);
+ *
+ *   new Drag({
+ *     container: {
+ *       el: container,
+ *       width: container.clientWidth,
+ *       height: container.clientHeight
+ *     },
+ *     handle: {
+ *       el: handle,
+ *       width: handle.clientWidth,
+ *       height: handle.clientHeight,
+ *       x: 0,
+ *       y: 0
+ *     }
+ *   });
+ *
+ * @param {Object} config
+ */
+function Drag(config) {
+  debug('init', config);
+  this.config(config);
+  this.dragging = false;
+  this.setupEvents();
+}
+
+/**
+ * Update the configuration.
+ *
+ * @param  {Object} config
+ */
+Drag.prototype.config = function(config) {
+  this.slideDuration = config.slideDuration || 140;
+  this.container = config.container;
+  this.handle = config.handle;
+  this.max = {
+    x: this.container.width - this.handle.width,
+    y: this.container.height - this.handle.height
+  };
+};
+
+/**
+ * Preserve context and bind initial
+ * 'down' event listener.
+ *
+ * @private
+ */
+Drag.prototype.setupEvents = function() {
+  debug('setup events', pointer);
+  this.onPointerStart = this.onPointerStart.bind(this);
+  this.onPointerMove = this.onPointerMove.bind(this);
+  this.onPointerEnd = this.onPointerEnd.bind(this);
+  this.handle.el.addEventListener(pointer.down, this.onPointerStart);
+};
+
+/**
+ * Adds events listeners and updates
+ * the `dragging` flag.
+ *
+ * @param  {Event} e
+ * @private
+ */
+Drag.prototype.onPointerStart = function(e) {
+  debug('pointer start', e);
+  this.point = getPoint(e);
+  addEventListener(pointer.move, this.onPointerMove);
+  addEventListener(pointer.up, this.onPointerEnd);
+  clearTimeout(this.timeout);
+  this.timeout = setTimeout(() => this.dragging = true, 200);
+};
+
+/**
+ * Removes events listeners and updates
+ * the `dragging` flag.
+ *
+ * @param  {Event} e
+ * @private
+ */
+Drag.prototype.onPointerEnd = function(e) {
+  debug('pointer end', e);
+  clearTimeout(this.timeout);
+  this.timeout = setTimeout(() => this.dragging = false);
+  removeEventListener(pointer.move, this.onPointerMove);
+  removeEventListener(pointer.up, this.onPointerEnd);
+  this.dispatch('ended', e);
+};
+
+/**
+ * Moves the handle when the pointer moves.
+ *
+ * @param  {Event} e
+ * @private
+ */
+Drag.prototype.onPointerMove = function(e) {
+  debug('pointer move', e);
+  e.preventDefault();
+  var previous = this.point;
+  this.point = getPoint(e);
+  this.setDuration(0);
+  this.translateDelta(
+    this.point.pageX - previous.pageX,
+    this.point.pageY - previous.pageY
+  );
+};
+
+/**
+ * Translate the handle by given delta.
+ *
+ * @param  {Number} deltaX
+ * @param  {Number} deltaY
+ * @public
+ */
+Drag.prototype.translateDelta = function(deltaX, deltaY) {
+  debug('translate by', deltaX, deltaY);
+  this.translate(
+    this.handle.x + deltaX,
+    this.handle.y + deltaY
+  );
+};
+
+/**
+ * Translate the handle to given coordinates.
+ *
+ * Numbers are interpreted as pixels and
+ * Strings as ratio/percentage.
+ *
+ * Example:
+ *
+ *   drag.translate(50, 0); // translate(50px, 0px);
+ *   drag.translate('0.5', 0); // translate(<halfway>, 0px);
+ *
+ * @param  {Number|String} x
+ * @param  {Number|String} y
+ * @public
+ */
+Drag.prototype.translate = function(x, y) {
+  debug('translate', x, y);
+  var position = this.clamp(this.normalize(x, y));
+  var translate = 'translate(' + position.x + 'px,' + position.y + 'px)';
+  var ratio = {
+    x: (position.x / this.max.x) || 0,
+    y: (position.y / this.max.y) || 0
+  };
+
+  // Set the transform to move the handle
+  this.handle.el.style.transform = translate;
+
+  // Update the handle position reference
+  this.handle.x = position.x;
+  this.handle.y = position.y;
+
+  // dispatch event with useful data
+  this.dispatch('translate', this.handle);
+};
+
+/**
+ * Transition the handle to given coordinates.
+ *
+ * Example:
+ *
+ *   drag.transition(50, 0); // 50px, 0px;
+ *   drag.transition('0.5', 0); // <halfway>, 0px
+ *
+ * @param  {Number|String} x
+ * @param  {Number|String} y
+ * @public
+ */
+Drag.prototype.transition = function(x, y) {
+  debug('transition', x, y);
+  var pos = this.clamp(this.normalize(x, y));
+  var duration = this.getDuration(this.handle, pos);
+  this.setDuration(duration);
+  this.translate(pos.x, pos.y);
+};
+
+/**
+ * Normalize x/y parametes to pixel values.
+ *
+ * Strings are interpreted as a ratio of
+ * max x/y position.
+ *
+ * @param  {Number|String} x
+ * @param  {Number|String} y
+ * @return {Object} {x,y}
+ * @private
+ */
+Drag.prototype.normalize = function(x, y) {
+  return {
+    x: typeof x == 'string' ? (Number(x) * this.max.x) : x,
+    y: typeof y == 'string' ? (Number(y) * this.max.y) : y
+  }
+};
+
+/**
+ * Snap the handle to nearest edge(s).
+ *
+ * @public
+ */
+Drag.prototype.snap = function() {
+  debug('snap');
+  var edges = this.getClosestEdges();
+  this.transition(edges.x, edges.y)
+  this.dispatch('snapped', edges);
+};
+
+/**
+ * Clamp coordinates between the
+ * allowed min/max values.
+ *
+ * @param  {Object} pos {x,y}
+ * @return {Object} {x,y}
+ */
+Drag.prototype.clamp = function(pos) {
+  return {
+    x: Math.max(0, Math.min(this.max.x, pos.x)),
+    y: Math.max(0, Math.min(this.max.y, pos.y)),
+  };
+};
+
+/**
+ * Get the ideal transition duration based
+ * on how much distance has to be tranvelled.
+ *
+ * When snapping, we don't want to use the same
+ * duration for short distances as long.
+ *
+ * @param  {Object} from {x,y}
+ * @param  {Object} to   {x,y}
+ * @return {Number}
+ */
+Drag.prototype.getDuration = function(from, to) {
+  var distanceX = Math.abs(from.x - to.x);
+  var distanceY = Math.abs(from.y - to.y);
+  var distance = Math.max(distanceX, distanceY);
+  var axis = distanceY > distanceX ? 'y' : 'x';
+  var ratio = distance / this.max[axis];
+  return this.slideDuration * ratio;
+};
+
+/**
+ * Set the handle's transition duration.
+ *
+ * @param {Number} ms
+ */
+Drag.prototype.setDuration = function(ms) {
+  this.handle.el.style.transitionDuration = ms + 'ms';
+}
+
+/**
+ * Get the closest x and y edges.
+ *
+ * The strings returns represent
+ * ratio/percentage of axis' overall range.
+ *
+ * @return {Object} {x,y}
+ */
+Drag.prototype.getClosestEdges = function() {
+  return {
+    x: this.handle.x <= (this.max.x / 2) ?  '0' : '1',
+    y: this.handle.y <= (this.max.y / 2) ?  '0' : '1'
+  };
+};
+
+/**
+ * Dispatch a DOM event on the container
+ * element. All events are namespaced ('drag').
+ *
+ * @param  {String} name
+ * @param  {*} detail
+ */
+Drag.prototype.dispatch = function(name, detail) {
+  var e = new CustomEvent('drag' + name, { bubble: false, detail: detail })
+  this.container.el.dispatchEvent(e);
+  debug('dispatched', e);
+};
+
+/**
+ * Add an event listener.
+ *
+ * @param  {String}   name
+ * @param  {Function} fn
+ */
+Drag.prototype.on = function(name, fn) {
+  this.container.el.addEventListener('drag' + name, fn);
+}
+
+/**
+ * Remove and event listener.
+ *
+ * @param  {String}   name
+ * @param  {Function} fn
+ */
+Drag.prototype.off = function(name, fn) {
+  this.container.el.removeEventListener('drag' + name, fn);
+}
+
+/**
+ * Utils
+ */
+
+function getPoint(e) {
+  return ~e.type.indexOf('mouse') ? e : e.touches[0];
+}
+
+});})((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;};})('drag',this));

gaia/distros/spark/apps/sharing/components/drag/index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>drag</title>
+
+  <script src="bower_components/evt/index.js"></script>
+  <script src="drag.js"></script>
+  <style>
+    * { box-sizing: border-box; }
+
+    .parent {
+      width: 300px;
+      height: 100px;
+      background: pink;
+    }
+
+    .child {
+      width: 100px;
+      height: 100px;
+      background: red;
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+  <div class="parent" id="container">
+    <div class="child" id="handle"></div>
+  </div>
+  <script>
+    var Drag = window.drag;
+    var drag = new Drag({
+      container: {
+        el: container,
+        width: container.clientWidth,
+        height: container.clientHeight
+      },
+      handle: {
+        el: handle,
+        width: handle.clientWidth,
+        height: handle.clientHeight,
+        x: 0,
+        y: 0
+      }
+    });
+
+    drag.on('ended', function() {
+      drag.snap();
+    });
+  </script>
+</body>
+</html>

gaia/distros/spark/apps/sharing/components/drag/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "drag",
+  "version": "0.1.1",
+  "description": "",
+  "main": "drag.js",
+  "scripts": {
+    "install": "bower install",
+    "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": "https://github.com/gaia-components/drag.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/gaia-components/drag/issues"
+  },
+  "homepage": "https://github.com/gaia-components/drag",
+  "dependencies": {
+    "evt": "git://github.com/gaia-components/evt#v0.4.0"
+  },
+  "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"
+  }
+}

gaia/distros/spark/apps/sharing/components/evt.js

@@ -0,0 +1 @@
+define(['./evt/index'], function(m) { return m; });

gaia/distros/spark/apps/sharing/components/evt/bower.json

@@ -0,0 +1,19 @@
+{
+  "name": "evt",
+  "main": "index.js",
+  "version": "0.4.0",
+  "homepage": "https://github.com/wilsonpage/evt",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "package.json",
+    "test",
+    "tests",
+    "README.md"
+  ]
+}

gaia/distros/spark/apps/sharing/components/evt/index.js

@@ -0,0 +1,154 @@
+
+/**
+ * Evt
+ *
+ * A super lightweight
+ * event emitter library.
+ *
+ * @version 0.3.3
+ * @author Wilson Page <wilson.page@me.com>
+ */
+
+;(function() {
+
+/**
+ * Locals
+ */
+
+var proto = Events.prototype;
+var slice = [].slice;
+
+/**
+ * Creates a new event emitter
+ * instance, or if passed an
+ * object, mixes the event logic
+ * into it.
+ *
+ * @param  {Object} obj
+ * @return {Object}
+ */
+function Events(obj) {
+  if (!(this instanceof Events)) return new Events(obj);
+  if (obj) return mixin(obj, proto);
+}
+
+/**
+ * Registers a callback
+ * with an event name.
+ *
+ * @param  {String}   name
+ * @param  {Function} cb
+ * @return {Event}
+ */
+proto.on = function(name, cb) {
+  this._cbs = this._cbs || {};
+  (this._cbs[name] || (this._cbs[name] = [])).push(cb);
+  return this;
+};
+
+/**
+ * Attach a callback that once
+ * called, detaches itself.
+ *
+ * TODO: Implement `.off()` to work
+ * with `once()` callbacks.
+ *
+ * @param  {String}   name
+ * @param  {Function} cb
+ * @public
+ */
+proto.once = function(name, cb) {
+  this.on(name, one);
+  function one() {
+    cb.apply(this, arguments);
+    this.off(name, one);
+  }
+};
+
+/**
+ * Removes a single callback,
+ * or all callbacks associated
+ * with the passed event name.
+ *
+ * @param  {String}   name
+ * @param  {Function} cb
+ * @return {Event}
+ */
+proto.off = function(name, cb) {
+  this._cbs = this._cbs || {};
+
+  if (!name) { this._cbs = {}; return; }
+  if (!cb) { return delete this._cbs[name]; }
+
+  var cbs = this._cbs[name] || [];
+  var i;
+
+  while (cbs && ~(i = cbs.indexOf(cb))) { cbs.splice(i, 1); }
+  return this;
+};
+
+/**
+ * Fires an event, triggering
+ * all callbacks registered on this
+ * event name.
+ *
+ * @param  {String} name
+ * @return {Event}
+ */
+proto.fire = proto.emit = function(options) {
+  var cbs = this._cbs = this._cbs || {};
+  var name = options.name || options;
+  var batch = (cbs[name] || []).concat(cbs['*'] || []);
+  var ctx = options.ctx || this;
+
+  if (batch.length) {
+    this._fireArgs = arguments;
+    var args = slice.call(arguments, 1);
+    while (batch.length) {
+      batch.shift().apply(ctx, args);
+    }
+  }
+
+  return this;
+};
+
+proto.firer = function(name) {
+  var self = this;
+  return function() {
+    var args = slice.call(arguments);
+    args.unshift(name);
+    self.fire.apply(self, args);
+  };
+};
+
+/**
+ * Util
+ */
+
+/**
+ * Mixes in the properties
+ * of the second object into
+ * the first.
+ *
+ * @param  {Object} a
+ * @param  {Object} b
+ * @return {Object}
+ */
+function mixin(a, b) {
+  for (var key in b) a[key] = b[key];
+  return a;
+}
+
+/**
+ * Expose 'Event' (UMD)
+ */
+
+if (typeof exports === 'object') {
+  module.exports = Events;
+} else if (typeof define === 'function' && define.amd) {
+  define([],function(){ return Events; });
+} else {
+  window.evt = Events;
+}
+
+})();

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

@@ -0,0 +1 @@
+define(['./font-fit/font-fit'], function(m) { return m; });

gaia/distros/spark/apps/sharing/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/sharing/components/font-fit/font-fit.js

@@ -0,0 +1,132 @@
+;(function(define){define(['require','exports','module'],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/sharing/components/fxos-achievements-service.js

@@ -0,0 +1 @@
+define(['./fxos-achievements-service/achievements-service'], function(m) { return m; });

gaia/distros/spark/apps/sharing/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/sharing/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/sharing/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/sharing/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/sharing/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/sharing/components/fxos-dev-mode-dialog.js

@@ -0,0 +1 @@
+define(['./fxos-dev-mode-dialog/fxos-dev-mode-dialog'], function(m) { return m; });

gaia/distros/spark/apps/sharing/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/sharing/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/sharing/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/sharing/components/fxos-mvc.js

@@ -0,0 +1 @@
+define(['./fxos-mvc/mvc'], function(m) { return m; });

gaia/distros/spark/apps/sharing/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/sharing/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/sharing/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/sharing/components/fxos-web-server.js

@@ -0,0 +1 @@
+define(['./fxos-web-server/dist/fxos-web-server'], function(m) { return m; });

gaia/distros/spark/apps/sharing/components/fxos-web-server/bower.json

@@ -0,0 +1,23 @@
+{
+  "name": "fxos-web-server",
+  "version": "0.0.7",
+  "homepage": "https://github.com/justindarc/fxos-web-server",
+  "authors": [
+    "Justin D'Arcangelo <justindarc@gmail.com>"
+  ],
+  "main": "dist/fxos-web-server.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "example",
+    "node_modules",
+    "src",
+    "test",
+    "bower.json",
+    "LICENSE",
+    "package.json",
+    "README.md"
+  ],
+  "dependencies": {},
+  "devDependencies": {}
+}

gaia/distros/spark/apps/sharing/components/fxos-web-server/dist/fxos-web-server.js

@@ -0,0 +1,710 @@
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.HTTPServer=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/*jshint esnext:true*/
+/*exported BinaryUtils*/
+'use strict';
+
+module.exports = window.BinaryUtils = (function() {
+
+var BinaryUtils = {
+  stringToArrayBuffer: function(string) {
+    var length = (string || '').length;
+    var arrayBuffer = new ArrayBuffer(length);
+    var uint8Array = new Uint8Array(arrayBuffer);
+    for (var i = 0; i < length; i++) {
+      uint8Array[i] = string.charCodeAt(i);
+    }
+
+    return arrayBuffer;
+  },
+
+  arrayBufferToString: function(arrayBuffer) {
+    var results = [];
+    var uint8Array = new Uint8Array(arrayBuffer);
+
+    for (var i = 0, length = uint8Array.length; i < length; i += 200000) {
+      results.push(String.fromCharCode.apply(null, uint8Array.subarray(i, i + 200000)));
+    }
+
+    return results.join('');
+  },
+
+  blobToArrayBuffer: function(blob, callback) {
+    var fileReader = new FileReader();
+    fileReader.onload = function() {
+      if (typeof callback === 'function') {
+        callback(fileReader.result);
+      }
+    };
+    fileReader.readAsArrayBuffer(blob);
+
+    return fileReader.result;
+  },
+
+  mergeArrayBuffers: function(arrayBuffers, callback) {
+    return BinaryUtils.blobToArrayBuffer(new Blob(arrayBuffers), callback);
+  }
+};
+
+return BinaryUtils;
+
+})();
+
+},{}],2:[function(require,module,exports){
+/*jshint esnext:true*/
+/*exported EventTarget*/
+'use strict';
+
+module.exports = window.EventTarget = (function() {
+
+function EventTarget(object) {
+  if (typeof object !== 'object') {
+    return;
+  }
+
+  for (var property in object) {
+    this[property] = object[property];
+  }
+}
+
+EventTarget.prototype.constructor = EventTarget;
+
+EventTarget.prototype.dispatchEvent = function(name, data) {
+  var events    = this._events || {};
+  var listeners = events[name] || [];
+  listeners.forEach((listener) => {
+    listener.call(this, data);
+  });
+};
+
+EventTarget.prototype.addEventListener = function(name, listener) {
+  var events    = this._events = this._events || {};
+  var listeners = events[name] = events[name] || [];
+  if (listeners.find(fn => fn === listener)) {
+    return;
+  }
+
+  listeners.push(listener);
+};
+
+EventTarget.prototype.removeEventListener = function(name, listener) {
+  var events    = this._events || {};
+  var listeners = events[name] || [];
+  for (var i = listeners.length - 1; i >= 0; i--) {
+    if (listeners[i] === listener) {
+      listeners.splice(i, 1);
+      return;
+    }
+  }
+};
+
+return EventTarget;
+
+})();
+
+},{}],3:[function(require,module,exports){
+/*jshint esnext:true*/
+/*exported HTTPRequest*/
+'use strict';
+
+module.exports = window.HTTPRequest = (function() {
+
+var EventTarget = require('./event-target');
+var BinaryUtils = require('./binary-utils');
+
+const CRLF = '\r\n';
+
+function HTTPRequest(socket) {
+  var parts = [];
+  var receivedLength = 0;
+
+  var checkRequestComplete = () => {
+    var contentLength = parseInt(this.headers['Content-Length'], 10);
+    if (isNaN(contentLength)) {
+      this.complete = true;
+      this.dispatchEvent('complete', this);
+      return;
+    }
+
+    if (receivedLength < contentLength) {
+      return;
+    }
+
+    BinaryUtils.mergeArrayBuffers(parts, (data) => {
+      this.body = parseBody(this.headers['Content-Type'], data);
+      this.complete = true;
+      this.dispatchEvent('complete', this);
+    });
+
+    socket.ondata = null;
+  };
+
+  socket.ondata = (event) => {
+    var data = event.data;
+
+    if (parts.length > 0) {
+      parts.push(data);
+      receivedLength += data.byteLength;
+      checkRequestComplete();
+      return;
+    }
+
+    var firstPart = parseHeader(this, data);
+    if (this.invalid) {
+      this.dispatchEvent('error', this);
+
+      socket.close();
+      socket.ondata = null;
+      return;
+    }
+
+    if (firstPart) {
+      parts.push(firstPart);
+      receivedLength += firstPart.byteLength;
+    }
+
+    checkRequestComplete();
+  };
+}
+
+HTTPRequest.prototype = new EventTarget();
+
+HTTPRequest.prototype.constructor = HTTPRequest;
+
+function parseHeader(request, data) {
+  if (!data) {
+    request.invalid = true;
+    return null;
+  }
+
+  data = BinaryUtils.arrayBufferToString(data);
+
+  var requestParts = data.split(CRLF + CRLF);
+
+  var header = requestParts.shift();
+  var body   = requestParts.join(CRLF + CRLF);
+
+  var headerLines = header.split(CRLF);
+  var requestLine = headerLines.shift().split(' ');
+  
+  var method  = requestLine[0];
+  var uri     = requestLine[1];
+  var version = requestLine[2];
+
+  if (version !== HTTPServer.HTTP_VERSION) {
+    request.invalid = true;
+    return null;
+  }
+
+  var uriParts = uri.split('?');
+  
+  var path   = uriParts.shift();
+  var params = parseURLEncodedString(uriParts.join('?'));
+
+  var headers = {};
+  headerLines.forEach((headerLine) => {
+    var parts = headerLine.split(': ');
+    if (parts.length !== 2) {
+      return;
+    }
+
+    var name  = parts[0];
+    var value = parts[1];
+
+    headers[name] = value;
+  });
+
+  request.method  = method;
+  request.path    = path;
+  request.params  = params;
+  request.headers = headers;
+
+  if (headers['Content-Length']) {
+    // request.body = parseBody(headers['Content-Type'], body);
+    return BinaryUtils.stringToArrayBuffer(body);
+  }
+
+  return null;
+}
+
+function setOrAppendValue(object, name, value) {
+  var existingValue = object[name];
+  if (existingValue === undefined) {
+    object[name] = value;
+  } else {
+    if (Array.isArray(existingValue)) {
+      existingValue.push(value);
+    } else {
+      object[name] = [existingValue, value];
+    }
+  }
+}
+
+function parseURLEncodedString(string) {
+  var values = {};
+
+  string.split('&').forEach((pair) => {
+    if (!pair) {
+      return;
+    }
+
+    var parts = decodeURIComponent(pair).split('=');
+
+    var name  = parts.shift();
+    var value = parts.join('=');
+
+    setOrAppendValue(values, name, value);
+  });
+
+  return values;
+}
+
+function parseMultipartFormDataString(string, boundary) {
+  var values = {};
+
+  string.split('--' + boundary).forEach((data) => {
+    data = data.replace(/^\r\n/, '').replace(/\r\n$/, '');
+
+    if (!data || data === '--') {
+      return;
+    }
+
+    var parts = data.split(CRLF + CRLF);
+    
+    var header = parts.shift();
+    var value  = {
+      headers: {},
+      metadata: {},
+      value: parts.join(CRLF + CRLF)
+    };
+
+    var name;
+
+    var headers = header.split(CRLF);
+    headers.forEach((header) => {
+      var headerParams = header.split(';');
+      var headerParts = headerParams.shift().split(': ');
+
+      var headerName  = headerParts[0];
+      var headerValue = headerParts[1];
+
+      if (headerName  !== 'Content-Disposition' ||
+          headerValue !== 'form-data') {
+        value.headers[headerName] = headerValue;
+        return;
+      }
+
+      headerParams.forEach((param) => {
+        var paramParts = param.trim().split('=');
+
+        var paramName  = paramParts[0];
+        var paramValue = paramParts[1];
+
+        paramValue = paramValue.replace(/\"(.*?)\"/, '$1') || paramValue;
+
+        if (paramName === 'name') {
+          name = paramValue;
+        }
+
+        else {
+          value.metadata[paramName] = paramValue;
+        }
+      });
+    });
+
+    if (name) {
+      setOrAppendValue(values, name, value);
+    }
+  });
+
+  return values;
+}
+
+function parseBody(contentType, data) {
+  contentType = contentType || 'text/plain';
+
+  var contentTypeParams = contentType.replace(/\s/g, '').split(';');
+  var mimeType = contentTypeParams.shift();
+
+  var body = BinaryUtils.arrayBufferToString(data);
+
+  var result;
+
+  try {
+    switch (mimeType) {
+      case 'application/x-www-form-urlencoded':
+        result = parseURLEncodedString(body);
+        break;
+      case 'multipart/form-data':
+        contentTypeParams.forEach((contentTypeParam) => {
+          var parts = contentTypeParam.split('=');
+
+          var name  = parts[0];
+          var value = parts[1];
+
+          if (name === 'boundary') {
+            result = parseMultipartFormDataString(body, value);
+          }
+        });
+        break;
+      case 'application/json':
+        result = JSON.parse(body);
+        break;
+      case 'application/xml':
+        result = new DOMParser().parseFromString(body, 'text/xml');
+        break;
+      default:
+        break;
+    }
+  } catch (exception) {
+    console.log('Unable to parse HTTP request body with Content-Type: ' + contentType);
+  }
+
+  return result || body;
+}
+
+return HTTPRequest;
+
+})();
+
+},{"./binary-utils":1,"./event-target":2}],4:[function(require,module,exports){
+/*jshint esnext:true*/
+/*exported HTTPResponse*/
+'use strict';
+
+module.exports = window.HTTPResponse = (function() {
+
+var EventTarget = require('./event-target');
+var BinaryUtils = require('./binary-utils');
+var HTTPStatus  = require('./http-status');
+
+const CRLF = '\r\n';
+const BUFFER_SIZE = 64 * 1024;
+
+function HTTPResponse(socket, timeout) {
+  this.socket  = socket;
+  this.timeout = timeout;
+
+  this.headers = {};
+  this.headers['Content-Type'] = 'text/html';
+  this.headers['Connection']   = 'close';
+
+  if (this.timeout) {
+    this.timeoutHandler = setTimeout(() => {
+      this.send(null, 500);
+    }, this.timeout);
+  }
+}
+
+HTTPResponse.prototype = new EventTarget();
+
+HTTPResponse.prototype.constructor = HTTPResponse;
+
+HTTPResponse.prototype.send = function(body, status) {
+  return createResponse(body, status, this.headers, (response) => {
+    var offset = 0;
+    var remaining = response.byteLength;
+
+    var sendNextPart = () => {
+      var length = Math.min(remaining, BUFFER_SIZE);
+
+      var bufferFull = this.socket.send(response, offset, length);
+
+      offset += length;
+      remaining -= length;
+
+      if (remaining > 0) {
+        if (!bufferFull) {
+          sendNextPart();
+        }
+      }
+      
+      else {
+        clearTimeout(this.timeoutHandler);
+
+        this.socket.close();
+        this.dispatchEvent('complete');
+      }
+    };
+
+    this.socket.ondrain = sendNextPart;
+
+    sendNextPart();
+  });
+};
+
+HTTPResponse.prototype.sendFile = function(fileOrPath, status) {
+  if (fileOrPath instanceof File) {
+    BinaryUtils.blobToArrayBuffer(fileOrPath, (arrayBuffer) => {
+      this.send(arrayBuffer, status);
+    });
+
+    return;
+  }
+
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', fileOrPath, true);
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = () => {
+    this.send(xhr.response, status);
+  };
+
+  xhr.send(null);
+};
+
+function createResponseHeader(status, headers) {
+  var header = HTTPStatus.getStatusLine(status);
+
+  for (var name in headers) {
+    header += name + ': ' + headers[name] + CRLF;
+  }
+
+  return header;
+}
+
+function createResponse(body, status, headers, callback) {
+  body    = body    || '';
+  status  = status  || 200;
+  headers = headers || {};
+
+  headers['Content-Length'] = body.length || body.byteLength;
+
+  var response = new Blob([
+    createResponseHeader(status, headers),
+    CRLF,
+    body
+  ]);
+
+  return BinaryUtils.blobToArrayBuffer(response, callback);
+}
+
+return HTTPResponse;
+
+})();
+
+},{"./binary-utils":1,"./event-target":2,"./http-status":6}],5:[function(require,module,exports){
+/*jshint esnext:true*/
+/*exported HTTPServer*/
+'use strict';
+
+module.exports = window.HTTPServer = (function() {
+
+var EventTarget  = require('./event-target');
+var HTTPRequest  = require('./http-request');
+var HTTPResponse = require('./http-response');
+var IPUtils      = require('./ip-utils');
+
+const DEFAULT_PORT = 8080;
+const DEFAULT_TIMEOUT = 20000;
+
+const CRLF = '\r\n';
+
+function HTTPServer(port, options) {
+  this.port = port || DEFAULT_PORT;
+
+  options = options || {};
+  for (var option in options) {
+    this[option] = options[option];
+  }
+
+  this.running = false;
+}
+
+HTTPServer.HTTP_VERSION = 'HTTP/1.1';
+
+HTTPServer.prototype = new EventTarget();
+
+HTTPServer.prototype.constructor = HTTPServer;
+
+HTTPServer.prototype.timeout = DEFAULT_TIMEOUT;
+
+HTTPServer.prototype.start = function() {
+  if (this.running) {
+    return;
+  }
+
+  console.log('Starting HTTP server on port ' + this.port);
+
+  var socket = navigator.mozTCPSocket.listen(this.port, {
+    binaryType: 'arraybuffer'
+  });
+
+  socket.onconnect = (connectEvent) => {
+    var request = new HTTPRequest(connectEvent);
+    
+    request.addEventListener('complete', () => {
+      var response = new HTTPResponse(connectEvent, this.timeout);
+
+      this.dispatchEvent('request', {
+        request: request,
+        response: response
+      });
+    });
+
+    request.addEventListener('error', () => {
+      console.warn('Invalid request received');
+    });
+  };
+
+  this.socket = socket;
+  this.running = true;
+};
+
+HTTPServer.prototype.stop = function() {
+  if (!this.running) {
+    return;
+  }
+
+  console.log('Shutting down HTTP server on port ' + this.port);
+
+  this.socket.close();
+
+  this.running = false;
+};
+
+return HTTPServer;
+
+})();
+
+},{"./event-target":2,"./http-request":3,"./http-response":4,"./ip-utils":7}],6:[function(require,module,exports){
+/*jshint esnext:true*/
+/*exported HTTPStatus*/
+'use strict';
+
+module.exports = window.HTTPStatus = (function() {
+
+const CRLF = '\r\n';
+
+var HTTPStatus = {};
+
+HTTPStatus.STATUS_CODES = {
+  100: 'Continue',
+  101: 'Switching Protocols',
+  102: 'Processing',
+  200: 'OK',
+  201: 'Created',
+  202: 'Accepted',
+  203: 'Non Authoritative Information',
+  204: 'No Content',
+  205: 'Reset Content',
+  206: 'Partial Content',
+  207: 'Multi-Status',
+  300: 'Mutliple Choices',
+  301: 'Moved Permanently',
+  302: 'Moved Temporarily',
+  303: 'See Other',
+  304: 'Not Modified',
+  305: 'Use Proxy',
+  307: 'Temporary Redirect',
+  400: 'Bad Request',
+  401: 'Unauthorized',
+  402: 'Payment Required',
+  403: 'Forbidden',
+  404: 'Not Found',
+  405: 'Method Not Allowed',
+  406: 'Not Acceptable',
+  407: 'Proxy Authentication Required',
+  408: 'Request Timeout',
+  409: 'Conflict',
+  410: 'Gone',
+  411: 'Length Required',
+  412: 'Precondition Failed',
+  413: 'Request Entity Too Large',
+  414: 'Request-URI Too Long',
+  415: 'Unsupported Media Type',
+  416: 'Requested Range Not Satisfiable',
+  417: 'Expectation Failed',
+  419: 'Insufficient Space on Resource',
+  420: 'Method Failure',
+  422: 'Unprocessable Entity',
+  423: 'Locked',
+  424: 'Failed Dependency',
+  500: 'Server Error',
+  501: 'Not Implemented',
+  502: 'Bad Gateway',
+  503: 'Service Unavailable',
+  504: 'Gateway Timeout',
+  505: 'HTTP Version Not Supported',
+  507: 'Insufficient Storage'
+};
+
+HTTPStatus.getStatusLine = function(status) {
+  var reason = HTTPStatus.STATUS_CODES[status] || 'Unknown';
+
+  return [HTTPServer.HTTP_VERSION, status, reason].join(' ') + CRLF;
+};
+
+return HTTPStatus;
+
+})();
+
+},{}],7:[function(require,module,exports){
+/*jshint esnext:true*/
+/*exported IPUtils*/
+'use strict';
+
+module.exports = window.IPUtils = (function() {
+
+const CRLF = '\r\n';
+
+var IPUtils = {
+  getAddresses: function(callback) {
+    if (typeof callback !== 'function') {
+      console.warn('No callback provided');
+      return;
+    }
+
+    var addresses = {
+      '0.0.0.0': true
+    };
+
+    var rtc = new mozRTCPeerConnection({ iceServers: [] });
+    rtc.createDataChannel('', { reliable: false });
+
+    rtc.onicecandidate = function(evt) {
+      if (evt.candidate) {
+        parseSDP('a=' + evt.candidate.candidate);
+      }
+    };
+
+    rtc.createOffer((description) => {
+      parseSDP(description.sdp);
+      rtc.setLocalDescription(description, noop, noop);
+    }, (error) => {
+      console.warn('Unable to create offer', error);
+    });
+
+    function addAddress(address) {
+      if (addresses[address]) {
+        return;
+      }
+
+      addresses[address] = true;
+      callback(address);
+    }
+
+    function parseSDP(sdp) {
+      sdp.split(CRLF).forEach((line) => {
+        var parts = line.split(' ');
+
+        if (line.indexOf('a=candidate') !== -1) {
+          if (parts[7] === 'host') {
+            addAddress(parts[4]);
+          }
+        }
+
+        else if (line.indexOf('c=') !== -1) {
+          addAddress(parts[2]);
+        }
+      });
+    }
+  }
+};
+
+function noop() {}
+
+return IPUtils;
+
+})();
+
+},{}]},{},[5])(5)
+});

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

@@ -0,0 +1 @@
+define(['./gaia-button/gaia-button'], function(m) { return m; });

gaia/distros/spark/apps/sharing/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/sharing/components/gaia-button/gaia-button.js

@@ -0,0 +1,198 @@
+(function(define){define(['require','exports','module','gaia-component'],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/sharing/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/sharing/components/gaia-checkbox.js

@@ -0,0 +1 @@
+define(['./gaia-checkbox/gaia-checkbox'], function(m) { return m; });

gaia/distros/spark/apps/sharing/components/gaia-checkbox/bower.json

@@ -0,0 +1,29 @@
+{
+  "name": "gaia-checkbox",
+  "version": "0.1.0",
+  "homepage": "https://github.com/gaia-components/gaia-checkbox",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "main": "gaia-checkbox.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "index.html",
+    "package.json",
+    "README.md"
+  ],
+  "devDependencies": {
+    "base": "gaia-components/base",
+    "gaia-fonts": "gaia-components/gaia-fonts",
+    "gaia-theme": "gaia-components/gaia-theme"
+  },
+  "dependencies": {
+    "gaia-icons": "gaia-components/gaia-icons#^0.9.0",
+    "gaia-component": "gaia-components/gaia-component#^0.3.8"
+  }
+}

gaia/distros/spark/apps/sharing/components/gaia-checkbox/gaia-checkbox.js

@@ -0,0 +1,272 @@
+/* global define */
+(function(define){'use strict';define(['require','exports','module','gaia-icons','gaia-component'],function(require,exports,module){
+
+/**
+ * Dependencies
+ */
+
+require('gaia-icons');
+var component = require('gaia-component');
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-checkbox', {
+  extends: HTMLInputElement.prototype,
+
+  created: function() {
+    this.setupShadowRoot();
+
+    this.els = { inner: this.shadowRoot.querySelector('.inner') };
+    this.addEventListener('click', this.onClick.bind(this));
+
+    // Setup initial attributes
+    this.checked = this.getAttribute('checked');
+    this.danger = this.getAttribute('danger');
+    this.name = this.getAttribute('name');
+
+    // process everything that doesn't affect user interaction
+    // after the component is created
+    setTimeout(() => this.makeAccessible());
+  },
+
+  makeAccessible: function() {
+    this.setAttribute('role', 'checkbox');
+
+    // Make tabable
+    this.tabIndex = 0;
+
+    this.setAttr('aria-checked', this.checked);
+  },
+
+  onClick: function(e) {
+    e.stopPropagation();
+    this.checked = !this.checked;
+  },
+
+  toggle: function(value) {
+    value = arguments.length ? value : !this.checked;
+    if (value || value === '') { this.check(); }
+    else { this.uncheck(); }
+  },
+
+  check: function() {
+    if (this.checked) { return; }
+    this.setAttr('checked', '');
+    this.setAttribute('aria-checked', true);
+    this._checked = true;
+  },
+
+  uncheck: function() {
+    if (!this.checked) { return; }
+    this.removeAttr('checked');
+    this.setAttribute('aria-checked', false);
+    this._checked = false;
+  },
+
+  attrs: {
+    checked: {
+      get: function() { return !!this._checked; },
+      set: function() { this.toggle(); }
+    },
+
+    danger: {
+      get: function() { return this._danger; },
+      set: function(value) {
+        if (value || value === '') { this.setAttr('danger', value); }
+        else { this.removeAttr('danger'); }
+        this._danger = value;
+      }
+    },
+
+    name: {
+      get: function() { return this._name; },
+      set: function(value) {
+        if (value === null) { this.removeAttr('name'); }
+        else { this.setAttr('name', value); }
+        this._name = value;
+      }
+    }
+  },
+
+  template: `<div class="inner">
+      <div class="background"></div>
+      <div class="tick"></div>
+    </div>
+    <style>
+
+    /** Host
+     ---------------------------------------------------------*/
+
+    :host {
+      position: relative;
+      display: inline-block;
+      cursor: pointer;
+      outline: 0;
+    }
+
+    /** Inner
+     ---------------------------------------------------------*/
+
+    .inner {
+      display: block;
+      box-sizing: border-box;
+      position: relative;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 2px solid #a6a6a6;
+      z-index: 0;
+
+      --gaia-checkbox-background:
+        var(--checkbox-background,
+        var(--input-background,
+        var(--button-background,
+        var(--background-plus))));
+
+      background:
+        var(--gaia-checkbox-background);
+
+      border-color:
+        var(--checkbox-border-color,
+        var(--border-color,
+        var(--background-minus)));
+    }
+
+    /**
+     * Increase hit area
+     */
+
+    .inner:before {
+      content: '';
+      position: absolute;
+      top: -10px; right: -10px;
+      bottom: -10px; left: -10px;
+    }
+
+    /** Background
+     ---------------------------------------------------------*/
+
+    .background {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      top: 0px;
+      left: 0px;
+      position: absolute;
+      z-index: -1;
+      opacity: 0;
+      background: var(--highlight-color, #000);
+    }
+
+    /**
+     * .active
+     */
+
+    .inner[checked] .background {
+      animation-name: gaia-checkbox-animation;
+      animation-duration: 350ms;
+      animation-fill-mode: forwards;
+    }
+
+    /** Tick
+     ---------------------------------------------------------*/
+
+    .tick {
+      text-align: center;
+      line-height: 26px;
+      margin-left: -1px;
+      opacity: 0;
+
+      transition-property: opacity;
+      transition-duration: 100ms;
+
+      color: var(--highlight-color, #000);
+    }
+
+    /**
+     * [checked]
+     */
+
+    [checked] .tick {
+      opacity: 1;
+      transition-delay: 140ms;
+    }
+
+    /** Icon
+     ---------------------------------------------------------*/
+
+    .tick:before {
+      font-family: 'gaia-icons';
+      content: 'tick';
+      font-style: normal;
+      font-weight: 500;
+      text-rendering: optimizeLegibility;
+      font-size: 16px;
+      line-height: 1;
+    }
+
+    </style>`,
+
+    globalCss: `@keyframes gaia-checkbox-animation {
+      0% {
+        transform: scale(0);
+        opacity: 1;
+      }
+      65% {
+        transform: scale(1);
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+        transform: scale(1);
+      }
+    }`
+});
+
+// Makes checkboxs togglable via keboard
+addEventListener('keypress', function(e) {
+  if (e.which !== 32) { return; }
+  var el = document.activeElement;
+  var isCheckbox = el.tagName === 'GAIA-CHECKBOX';
+  if (isCheckbox) { el.click(); }
+});
+
+// Bind a 'click' delegate to the
+// window to listen for all clicks
+// and toggle checkboxes when required.
+addEventListener('click', function(e) {
+  var label = getLabel(e.target);
+  var gaiaCheckbox = getLinkedCheckbox(label);
+  if (gaiaCheckbox) { gaiaCheckbox.toggle(); }
+}, true);
+
+/**
+ * Find a checkbox when given a <label>.
+ *
+ * @param  {Element} label
+ * @return {GaiaCheckbox|null}
+ */
+function getLinkedCheckbox(label) {
+  if (!label) { return; }
+  var id = label.getAttribute('for');
+  var el = id && document.getElementById(id);
+  return el && el.tagName === 'GAIA-CHECKBOX' ? el : null;
+}
+
+/**
+ * Walk up the DOM tree from a given
+ * element until a <label> is found.
+ *
+ * @param  {Element} el
+ * @return {HTMLLabelElement|undefined}
+ */
+function getLabel(el) {
+  return el && (el.tagName == 'LABEL' ? el : getLabel(el.parentNode));
+}
+
+});})(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-checkbox',this));

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

@@ -0,0 +1 @@
+define(['./gaia-component/gaia-component'], function(m) { return m; });

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

@@ -0,0 +1,18 @@
+{
+  "name": "gaia-component",
+  "version": "0.3.8",
+  "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/sharing/components/gaia-component/gaia-component.js

@@ -0,0 +1,420 @@
+/* globals define */
+;(function(define){'use strict';define(['require','exports','module'],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; }
+  el.lightStyle = document.createElement('style');
+  el.lightStyle.setAttribute('scoped', '');
+  el.lightStyle.innerHTML = el.lightCss;
+  el.appendChild(el.lightStyle);
+}
+
+/**
+ * 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/sharing/components/gaia-dialog.js

@@ -0,0 +1 @@
+define(['./gaia-dialog/gaia-dialog'], function(m) { return m; });

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

@@ -0,0 +1,31 @@
+{
+  "name": "gaia-dialog",
+  "version": "0.2.1",
+  "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"
+  ],
+  "devDependencies": {
+    "base": "gaia-components/base",
+    "pressed": "gaia-components/pressed",
+    "gaia-fonts": "gaia-components/gaia-fonts",
+    "gaia-theme": "gaia-components/gaia-theme",
+    "gaia-button": "gaia-components/gaia-button"
+  },
+  "dependencies": {
+    "gaia-text-input": "gaia-components/gaia-text-input",
+    "gaia-icons": "gaia-components/gaia-icons#^0.8.0",
+    "gaia-component": "gaia-components/gaia-component#^0.3.7"
+  }
+}

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

@@ -0,0 +1,111 @@
+/* global define */
+;(function(define){'use strict';define(['require','exports','module','gaia-dialog','gaia-component'],function(require,exports,module){
+/**
+ * Dependencies
+ */
+
+var GaiaDialogProto = require('gaia-dialog').prototype;
+var component = require('gaia-component');
+
+/**
+ * Exports
+ */
+module.exports = component.register('gaia-dialog-action', {
+  created: function() {
+    this.setupShadowRoot();
+
+    this.els = {
+      dialog: this.shadowRoot.querySelector('gaia-dialog'),
+      submit: this.shadowRoot.querySelector('.submit'),
+      cancel: this.shadowRoot.querySelector('.cancel')
+    };
+  },
+
+  open: function(e) {
+    return GaiaDialogProto.show.call(this)
+      .then(() => this.els.dialog.open(e));
+  },
+
+  close: function() {
+    return GaiaDialogProto.show.call(this)
+      .then(() => this.els.dialog.close());
+  },
+
+  template: `
+    <gaia-dialog>
+      <section>
+        <content select="h1"></content>
+      </section>
+      <content select="button"></content>
+      <button on-click="close" class="cancel">Cancel</button>
+    </gaia-dialog>
+
+    <style>
+
+    :host {
+      display: none;
+    }
+
+    :host[opened],
+    :host.animating {
+      display: block;
+      position: fixed;
+      width: 100%;
+      height: 100%;
+    }
+
+    /** Button
+     ---------------------------------------------------------*/
+
+    ::content section {
+      padding: 33px 16px;
+    }
+
+    ::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;
+    }
+
+    ::content button:after {
+      content: '';
+      display: block;
+      position: absolute;
+      height: 1px;
+      left: 6px;
+      right: 6px;
+      top: 49px;
+      background: #E7E7E7;
+    }
+
+    ::content button:last-child:after {
+      display: none;
+    }
+
+    ::content button:active {
+      background-color: var(--highlight-color);
+      color: #fff;
+      transition: none;
+    }
+
+    ::content button:active:after {
+      background: var(--highlight-color);
+      transition: none;
+    }
+
+    </style>`
+});
+
+});})(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/sharing/components/gaia-dialog/gaia-dialog-alert.js

@@ -0,0 +1,57 @@
+/* global define */
+;(function(define){'use strict';define(['require','exports','module','gaia-dialog','gaia-component'],function(require,exports,module){
+
+/**
+ * Dependencies
+ */
+
+var GaiaDialogProto = require('gaia-dialog').prototype;
+var component = require('gaia-component');
+
+/**
+ * Exports
+ */
+module.exports = component.register('gaia-dialog-alert', {
+  created: function() {
+    this.setupShadowRoot();
+    this.els = {
+      dialog: this.shadowRoot.querySelector('gaia-dialog')
+    };
+  },
+
+  open: function(e) {
+    return GaiaDialogProto.show.call(this)
+      .then(() => this.els.dialog.open(e));
+  },
+
+  close: function() {
+    return GaiaDialogProto.show.call(this)
+      .then(() => this.els.dialog.close());
+  },
+
+  template: `
+    <gaia-dialog>
+      <section>
+        <p><content></content></p>
+      </section>
+      <div>
+        <button class="submit primary" on-click="close">Ok</button>
+      </div>
+    </gaia-dialog>
+
+    <style>
+
+    :host {
+      display: none;
+      position: fixed;
+      width: 100%;
+      height: 100%;
+    }
+
+    </style>`
+});
+
+});})(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/sharing/components/gaia-dialog/gaia-dialog-confirm.js

@@ -0,0 +1,69 @@
+/* global define */
+;(function(define){'use strict';define(['require','exports','module','gaia-dialog','gaia-component'],function(require,exports,module){
+
+/**
+ * Dependencies
+ */
+
+var GaiaDialogProto = require('gaia-dialog').prototype;
+var component = require('gaia-component');
+
+/**
+ * Exports
+ */
+module.exports = component.register('gaia-dialog-confirm', {
+  created: function() {
+    this.setupShadowRoot();
+
+    this.els = {
+      dialog: this.shadowRoot.querySelector('gaia-dialog'),
+      submit: this.shadowRoot.querySelector('.submit'),
+      cancel: this.shadowRoot.querySelector('.cancel')
+    };
+
+    this.els.cancel.addEventListener('click', this.close.bind(this));
+    this.els.submit.addEventListener('click', this.close.bind(this));
+  },
+
+  open: function(e) {
+    return GaiaDialogProto.show.call(this)
+      .then(() => this.els.dialog.open(e));
+  },
+
+  close: function() {
+    return GaiaDialogProto.show.call(this)
+      .then(() => this.els.dialog.close());
+  },
+
+  template: `
+    <gaia-dialog>
+      <section>
+        <p><content></content></p>
+      </section>
+      <fieldset>
+        <button class="cancel">Cancel</button>
+        <button class="submit danger">Confirm</button>
+      </fieldset>
+    </gaia-dialog>
+
+    <style>
+
+    :host {
+      display: none;
+    }
+
+    :host[opened],
+    :host.animating {
+      display: block;
+      position: fixed;
+      width: 100%;
+      height: 100%;
+    }
+
+    </style>`
+});
+
+});})(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-confirm',this));

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

@@ -0,0 +1,92 @@
+/* global define */
+;(function(define){'use strict';define(['require','exports','module','gaia-dialog','gaia-component'],function(require,exports,module){
+
+/**
+ * Dependencies
+ */
+
+var GaiaDialogProto = require('gaia-dialog').prototype;
+var component = require('gaia-component');
+
+/**
+ * Exports
+ */
+module.exports = component.register('gaia-dialog-menu', {
+  created: function() {
+    this.setupShadowRoot();
+    this.els = {
+      dialog: this.shadowRoot.querySelector('gaia-dialog')
+    };
+  },
+
+  open: function(e) {
+    return GaiaDialogProto.show.call(this)
+      .then(() => this.els.dialog.open(e));
+  },
+
+  close: function() {
+    return GaiaDialogProto.show.call(this)
+      .then(() => this.els.dialog.close());
+  },
+
+  template: `
+    <gaia-dialog>
+      <div class="items"><content select="button"></content></div>
+    </gaia-dialog>
+
+    <style>
+
+    :host {
+      display: none;
+      position: fixed;
+      width: 100%;
+      height: 100%;
+    }
+
+    ::content > button {
+      position: relative;
+      display: block;
+      width: 100%;
+      height: 50px;
+      line-height: 51px;
+      margin: 0;
+      border: 0;
+      padding: 0rem 16px;
+      font: inherit;
+      font-style: italic;
+      text-align: start;
+      background: var(--color-beta);
+      color: var(--highlight-color);
+    }
+
+    ::content > button[data-icon]:before {
+      width: 50px;
+      font-size: 22px;
+      vertical-align: middle;
+    }
+
+    /** 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>`
+});
+
+});})(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/sharing/components/gaia-dialog/gaia-dialog-prompt.js

@@ -0,0 +1,83 @@
+/* global define */
+;(function(define){'use strict';define(['require','exports','module','gaia-dialog','gaia-component','gaia-text-input'],function(require,exports,module){
+
+/**
+ * Dependencies
+ */
+
+var GaiaDialogProto = require('gaia-dialog').prototype;
+var component = require('gaia-component');
+
+require('gaia-text-input');
+
+/**
+ * Exports
+ */
+module.exports = component.register('gaia-dialog-prompt', {
+  created: function() {
+    this.setupShadowRoot();
+
+    this.els = {
+      dialog: this.shadowRoot.querySelector('gaia-dialog'),
+      input: this.shadowRoot.querySelector('gaia-text-input'),
+      submit: this.shadowRoot.querySelector('.submit'),
+      cancel: this.shadowRoot.querySelector('.cancel')
+    };
+
+    this.els.dialog.addEventListener('opened', () => {
+      this.setAttribute('opened', '');
+    });
+
+    this.els.dialog.addEventListener('closed', () => {
+      this.removeAttribute('opened');
+    });
+
+    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));
+  },
+
+  open: function(e) {
+    return GaiaDialogProto.show.call(this)
+      .then(() => this.els.dialog.open(e));
+  },
+
+  close: function() {
+    return GaiaDialogProto.show.call(this)
+      .then(() => this.els.dialog.close());
+  },
+
+  template: `
+    <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>
+
+    <style>
+
+    :host {
+      display: none;
+    }
+
+    :host[opened],
+    :host.animating {
+      display: block;
+      position: fixed;
+      width: 100%;
+      height: 100%;
+    }
+
+    gaia-text-input {
+      margin: 16px !important;
+    }
+
+    </style>`
+});
+
+});})(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/sharing/components/gaia-dialog/gaia-dialog-select.js

@@ -0,0 +1,230 @@
+/* global define */
+;(function(define){'use strict';define(['require','exports','module','gaia-dialog','gaia-component'],function(require,exports,module){
+
+/**
+ * Dependencies
+ */
+
+var GaiaDialogProto = require('gaia-dialog').prototype;
+var component = require('gaia-component');
+
+/**
+ * Exports
+ */
+module.exports = component.register('gaia-dialog-select', {
+  created: function() {
+    this.setupShadowRoot();
+
+    this.els = {
+      dialog: this.shadowRoot.querySelector('gaia-dialog'),
+      submit: this.shadowRoot.querySelector('.submit'),
+      cancel: this.shadowRoot.querySelector('.cancel'),
+      list: this.shadowRoot.querySelector('ul')
+    };
+
+    this.multiple = this.hasAttribute('multiple');
+    this.els.list.addEventListener('click', this.onListClick.bind(this));
+    this.els.submit.addEventListener('click', this.close.bind(this));
+    this.els.cancel.addEventListener('click', this.close.bind(this));
+  },
+
+  open: function(e) {
+    return GaiaDialogProto.show.call(this)
+      .then(() => this.els.dialog.open(e));
+  },
+
+  close: function() {
+    return GaiaDialogProto.show.call(this)
+      .then(() => this.els.dialog.close());
+  },
+
+  onListClick: function(e) {
+    var el = e.target.closest('li');
+    var selected = el.getAttribute('aria-selected') === 'true';
+
+    if (this.multiple) { this.onChangeMultiple(el, selected); }
+    else { this.onChange(el, selected); }
+  },
+
+  onChange: function(el, selected) {
+    this.clearSelected();
+    if (!selected) { el.setAttribute('aria-selected', !selected); }
+    this.fireChange();
+    this.close();
+  },
+
+  onChangeMultiple: function(el, selected) {
+    el.setAttribute('aria-selected', !selected);
+    this.fireChange();
+  },
+
+  clearSelected: function() {
+    [].forEach.call(this.selectedOptions, function(option) {
+      option.removeAttribute('aria-selected');
+    });
+  },
+
+  fireChange: function() {
+    var e = new CustomEvent('change', { detail: { value: this.valueString }});
+    this.dispatchEvent(e);
+  },
+
+  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; }
+    }
+  },
+
+  template: `
+    <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>
+
+    <style>
+
+    :host {
+      display: none;
+      position: fixed;
+      width: 100%;
+      height: 100%;
+    }
+
+    /** Title (duplicate from gaia-dialog)
+     ---------------------------------------------------------*/
+
+    ::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
+     ---------------------------------------------------------*/
+
+    ::content li {
+      position: relative;
+      display: block;
+      padding: 16px;
+      text-align: start;
+      -moz-user-select: none;
+      cursor: pointer;
+    }
+
+    ::content li[aria-selected='true'] {
+      color: #00CAF2;
+      font-weight: normal;
+    }
+
+    ::content li:after {
+      content: '';
+      display: block;
+      position: absolute;
+      height: 1px;
+      left: 16px;
+      right: 16px;
+      bottom: 1px;
+      background: #E7E7E7;
+    }
+
+    ::content li:last-of-type:after {
+      display: none
+    }
+
+    /** Buttons
+     ---------------------------------------------------------*/
+
+    ::host:not([multiple]) .submit {
+      display: none !important;
+    }
+
+    ::host:not([multiple]) .cancel {
+      width: 100% !important;
+    }
+
+    ::host:not([multiple]) .cancel:after {
+      display: none% !important;
+    }
+
+    /** Tick Icon
+     ---------------------------------------------------------*/
+
+    ::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>`
+});
+
+});})(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/sharing/components/gaia-dialog/gaia-dialog.js

@@ -0,0 +1,466 @@
+;(function(define){'use strict';define(['require','exports','module','gaia-component'],(require,exports,module) => {
+
+/**
+ * Dependencies
+ */
+var component = require('gaia-component');
+
+/**
+ * Simple logger (toggle 0)
+ *
+ * @type {Function}
+ */
+var debug = 0 ? console.log.bind(console) : () => {};
+
+/**
+ * Use the dom-scheduler if it's around,
+ * else fallback to fake shim.
+ *
+ * @type {Object}
+ */
+var schedule = (window.scheduler && typeof window.scheduler.mutation === "function" ? window.scheduler : null) || {
+  mutation: block => Promise.resolve(block()),
+  transition(block, el, event, timeout) {
+    block();
+    return after(el, event, timeout || 500);
+  }
+};
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-dialog', {
+  created() {
+    this.setupShadowRoot();
+
+    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));
+  },
+
+  onClick(e) {
+    var el = e.target.closest('[on-click]');
+    if (!el) { return; }
+    debug('onClick');
+    var method = el.getAttribute('on-click');
+    if (typeof this[method] == 'function') { this[method](); }
+  },
+
+  open(options) {
+    if (this.isOpen) { return; }
+    debug('open dialog');
+    this.isOpen = true;
+
+    this.show()
+      .then(() => this.animateBackgroundIn(options))
+      .then(() => this.animateWindowIn());
+  },
+
+  close(options) {
+    if (!this.isOpen) { return; }
+    debug('close dialog');
+    this.isOpen = false;
+
+    this.animateWindowOut()
+      .then(() => this.animateBackgroundOut())
+      .then(() => this.hide());
+  },
+
+  animateBackgroundIn(options) {
+    if (options) { return this.animateBackgroundInFrom(options); }
+
+    var el = this.els.background;
+    return schedule.transition(() => {
+      debug('animate background in');
+      el.classList.remove('animate-out');
+      el.classList.add('animate-in');
+    }, el, 'animationend');
+  },
+
+  animateBackgroundOut() {
+    var el = this.els.background;
+    return schedule.transition(() => {
+      debug('animate background out');
+      el.classList.add('animate-out');
+      el.classList.remove('animate-in');
+    }, el, 'animationend')
+      .then(() => el.style = '');
+  },
+
+  animateBackgroundInFrom(pos) {
+    var el = this.els.background;
+    var scale = Math.sqrt(window.innerWidth * window.innerHeight) / 15;
+    var duration = scale * 9;
+
+    return schedule.mutation(() => {
+        el.classList.add('circular');
+        el.classList.remove('animate-out');
+        el.style.transform = `translate(${pos.clientX}px, ${pos.clientY}px)`;
+        el.style.transitionDuration = duration + 'ms';
+        el.offsetTop; // Hack, any ideas?
+      })
+
+      .then(() => {
+        return schedule.transition(() => {
+          debug('animate background in from', pos);
+          el.style.transform += ` scale(${scale})`;
+          el.style.opacity = 1;
+        }, el, 'transitionend', duration * 1.5);
+      });
+  },
+
+  show() {
+    return schedule.mutation(() => {
+      debug('show');
+      this.style.display = 'block';
+    });
+  },
+
+  hide() {
+    return schedule.mutation(() => {
+      debug('hide');
+      this.style.display = 'none';
+    });
+  },
+
+  animateWindowIn() {
+    var el = this.els.window;
+    return schedule.transition(() => {
+      debug('animate window in');
+      el.classList.add('animate-in');
+    }, el, 'animationend');
+  },
+
+  animateWindowOut() {
+    var el = this.els.window;
+
+    return schedule.transition(() => {
+      debug('animate window out');
+      el.classList.remove('animate-out', 'animate-in');
+    }, el, 'animationend');
+  },
+
+  attrs: {
+    opened: {
+      get: function() { return !!this.isOpen; },
+      set: function(value) {
+        value = value === '' || value;
+        if (!value) { this.close(); }
+        else { this.open(); }
+      }
+    }
+  },
+
+  template: `
+    <div class="dialog-inner">
+      <div class="background" on-click="close"></div>
+      <div class="window"><content></content></div>
+    </div>
+
+    <style>
+
+    ::content * {
+      box-sizing: border-box;
+      font-weight: inherit;
+      font-size: inherit;
+    }
+
+    ::content p,
+    ::content h1,
+    ::content h2,
+    ::content h3,
+    ::content h4,
+    ::content button,
+    ::content fieldset {
+      padding: 0;
+      margin: 0;
+      border: 0;
+    }
+
+    :host {
+      display: none;
+      position: fixed;
+      top: 0px; left: 0px;
+      width: 100%;
+      height: 100%;
+      z-index: 200;
+      font-style: italic;
+      text-align: center;
+    }
+
+    /** 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: 260ms;
+      animation-fill-mode: forwards;
+    }
+
+    /**
+     * .animate-out
+     */
+
+    .background.animate-out {
+      animation-name: gaia-dialog-fade-out;
+      animation-duration: 260ms;
+      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);
+      transition: opacity 300ms;
+      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;
+      opacity: 1;
+    }
+
+    .window.animate-out {
+      animation-name: gaia-dialog-fade-out;
+      animation-duration: 150ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+      opacity: 1;
+    }
+
+    /** Title
+     ---------------------------------------------------------*/
+
+    ::content h1 {
+      padding: 16px;
+      font-size: 23px;
+      line-height: 26px;
+      font-weight: 200;
+      font-style: italic;
+      color: #858585;
+    }
+
+    ::content strong {
+      font-weight: 700;
+    }
+
+    ::content small {
+      font-size: 0.8em;
+    }
+
+    /** Section
+     ---------------------------------------------------------*/
+
+    ::content section {
+      padding: 33px 18px;
+      color: #858585;
+    }
+
+    ::content section > *:not(:last-child) {
+      margin-bottom: 13px;
+    }
+
+    /** Paragraphs
+     ---------------------------------------------------------*/
+
+    ::content p {
+      text-align: -moz-start;
+    }
+
+    /** Buttons
+     ---------------------------------------------------------*/
+
+    ::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
+     */
+
+    ::content button.primary {
+      color: var(--highlight-color);
+    }
+
+    /**
+     * .danger
+     */
+
+    ::content button.danger {
+      color: var(--color-destructive);
+    }
+
+    /**
+     * Disabled buttons
+     */
+
+    ::content button[disabled] {
+      color: var(--color-zeta);
+    }
+
+    /** 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;
+    }
+
+    ::content button:active {
+      background-color: var(--highlight-color);
+      color: #fff;
+      transition: none;
+    }
+
+    ::content button:active:after {
+      background: var(--highlight-color);
+      transition: none;
+    }
+
+    ::content button[data-icon]:before {
+      float: left;
+    }
+
+    /** Fieldset (button group)
+     ---------------------------------------------------------*/
+
+    ::content fieldset {
+      overflow: hidden;
+    }
+
+    ::content fieldset button {
+      position: relative;
+      float: left;
+      width: 50%;
+    }
+
+    ::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>`,
+
+  globalCss: `
+    @keyframes gaia-dialog-entrance {
+      0% { transform: translateY(100px); }
+      100% { 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 }
+    }`
+});
+
+/**
+ * Utils
+ */
+
+function after(target, event, timeout) {
+  return new Promise(resolve => {
+    var timer = timeout && setTimeout(cb, timeout);
+    target.addEventListener(event, cb);
+    function cb() {
+      target.removeEventListener(event, cb);
+      clearTimeout(timer);
+      resolve();
+    }
+  });
+}
+
+});})(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/sharing/components/gaia-dialog/index.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>&lt;gaia-dialog&gt;</title>
+  <meta name="description" content="gaia-dialog demo" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <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-component/gaia-component.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="bower_components/dom-scheduler/lib/dom-scheduler.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: 48px var(--base-m) 0 var(--base-m);
+      background-color: var(--background);
+    }
+  </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 on-click="close">Action 1</button>
+      <button on-click="close">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 on-click="close" data-icon="firefox">Open in new window</button>
+      <button on-click="close" data-icon="firefox">Add to Home Screen</button>
+      <button on-click="close" data-icon="firefox">Share link</button>
+      <button on-click="close" 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 on-click="close">Cancel</button>
+        <button on-click="close">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 on-click="close">Action</button>
+      <button on-click="close">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 on-click="close">Action</button>
+      <button on-click="close">Action</button>
+      <button on-click="close">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/sharing/components/gaia-dialog/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "gaia-dialog",
+  "version": "0.2.1",
+  "homepage": "https://github.com/gaia-components/gaia-dialog",
+  "license": "MIT",
+  "main": "gaia-dialog.js",
+  "devDependencies": {
+    "babel": "^5.2.12",
+    "bower": "^1.4.1",
+    "browserify": "^10.1.0",
+    "jshint": "^2.7.0"
+  },
+  "scripts": {
+    "install": "bower install",
+    "lint": "jshint gaia-dialog*.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/gaia-components/gaia-dialog.git"
+  },
+  "bugs": {
+    "url": "https://github.com/gaia-components/gaia-dialog/issues"
+  },
+  "browser": {
+    "gaia-component": "./bower_components/gaia-component/gaia-component.js"
+  }
+}

gaia/distros/spark/apps/sharing/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/sharing/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/sharing/components/gaia-header.js

@@ -0,0 +1 @@
+define(['./gaia-header/gaia-header'], function(m) { return m; });

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

@@ -0,0 +1,30 @@
+{
+  "name": "gaia-header",
+  "version": "0.8.4",
+  "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/sharing/components/gaia-icons.js

@@ -0,0 +1 @@
+define(['./gaia-icons/gaia-icons'], function(m) { return m; });

gaia/distros/spark/apps/sharing/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/sharing/components/gaia-icons/bower.json

@@ -0,0 +1,30 @@
+{
+  "name": "gaia-icons",
+  "version": "0.9.1",
+  "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/sharing/components/gaia-icons/gaia-icons.css

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

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

@@ -0,0 +1,38 @@
+/* global define */
+(function(define){'use strict';define(['require','exports','module'],function(require,exports,module){
+
+/**
+ * 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){'use strict';return typeof module=='object'?function(c){
+c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){
+return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-icons',this));

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

@@ -0,0 +1 @@
+define(['./gaia-list/gaia-list'], function(m) { return m; });

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

@@ -0,0 +1,30 @@
+{
+  "name": "gaia-list",
+  "version": "0.2.1",
+  "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",
+    "index.html",
+    "package.json",
+    "README.md"
+  ],
+  "devDependencies": {
+    "base": "gaia-components/base",
+    "gaia-fonts": "gaia-components/gaia-fonts",
+    "gaia-icons": "gaia-components/gaia-icons",
+    "gaia-switch": "gaia-components/gaia-switch",
+    "gaia-theme": "gaia-components/gaia-theme"
+  },
+  "dependencies": {
+    "gaia-component": "gaia-components/gaia-component#^0.3.6"
+  }
+}

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

@@ -0,0 +1,321 @@
+/* global define */
+;(function(define){'use strict';define(['require','exports','module','gaia-component'],function(require,exports,module){
+
+/**
+ * Dependencies
+ */
+
+var component = require('gaia-component');
+
+/**
+ * Pointer event abstraction to make
+ * it work for touch and mouse.
+ *
+ * @type {Object}
+ */
+/*jshint ignore:start */
+var pointer = [
+  { down: 'touchstart', up: 'touchend', move: 'touchmove' },
+  { down: 'mousedown', up: 'mouseup', move: 'mousemove' }
+]['ontouchstart' in window ? 0 : 1];
+/*jshint ignore:end */
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-list', {
+  extends: HTMLUListElement.prototype,
+
+  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')
+    };
+
+    requestAnimationFrame(this.ripple.bind(this, point, pos, els));
+  },
+
+  ripple: function(point, pos, els) {
+    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 end = 'transitionend';
+    requestAnimationFrame(function() {
+      els.ripple.style.visibility = '';
+      els.ripple.style.transform = 'scale(' + pos.item.width + ')';
+      els.ripple.style.transitionDuration = '500ms';
+
+      els.ripple.addEventListener(end, function fn() {
+        els.ripple.removeEventListener(end, fn);
+        els.ripple.style.transitionDuration = '1000ms';
+        els.ripple.style.opacity = '0';
+
+        els.ripple.addEventListener(end, function fn() {
+          els.ripple.removeEventListener(end, fn);
+          els.container.remove();
+        });
+      });
+    });
+  },
+
+  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;
+    }
+
+    /** Descriptions
+     ---------------------------------------------------------*/
+
+    ::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);
+      text-align: end;
+    }
+
+    /** 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/sharing/components/gaia-loading.js

@@ -0,0 +1 @@
+define(['./gaia-loading/gaia-loading'], function(m) { return m; });

gaia/distros/spark/apps/sharing/components/gaia-loading/bower.json

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

gaia/distros/spark/apps/sharing/components/gaia-loading/gaia-loading.js

@@ -0,0 +1,82 @@
+;(function(define){define(['require','exports','module','gaia-component'],function(require,exports,module){
+/*jshint esnext:true*/
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var component = require('gaia-component');
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-loading', {
+  created: function() {
+    this.setupShadowRoot();
+  },
+
+  template: `
+    <div class="circle circle-1"></div>
+    <div class="circle circle-2"></div>
+
+    <style>
+
+    /** Host
+     ---------------------------------------------------------*/
+
+    :host {
+      position: relative;
+      display: block;
+      width: 40px;
+      height: 40px;
+      margin: var(--base-l, 24px) auto;
+    }
+
+    /** Circle
+     ---------------------------------------------------------*/
+
+    .circle {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+
+      animation-name: gaia-loading-animation;
+      animation-iteration-count: infinite;
+      animation-timing-function: cubic-bezier(0,.64,.46,.46);
+      animation-duration: 2000ms;
+
+      background:
+        var(--highlight-color);
+    }
+
+    .circle-2 {
+      animation-delay: 395ms;
+    }
+
+    </style>`,
+
+  globalCss: `
+    @keyframes gaia-loading-animation {
+      0% {
+        transform: scale(0);
+        opacity: 0.9;
+      }
+      40% {
+        transform: scale(1.4);
+        opacity: 0;
+      }
+      100% {
+        transform: scale(2);
+        opacity: 0;
+      }
+    }`
+});
+
+});})(typeof define=='function'&&define.amd?define
+:(function(n,w){'use strict';return typeof module=='object'?function(c){
+c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){
+return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-loading',this));

gaia/distros/spark/apps/sharing/components/gaia-loading/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>&lt;gaia-loading&gt;</title>
+  <meta name="description" content="gaia-loading example" />
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-theme/gaia-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="gaia-loading.js"></script>
+  <style type="text/css">
+
+    body {
+      padding: 16px;
+      padding-top: 48px;
+    }
+
+  </style>
+</head>
+<body role="application">
+  <gaia-theme-selector></gaia-theme-selector>
+  <h1 class="large l-align-center l-mb-mega">&lt;gaia-loading&gt;</h1>
+  <section class="l-align-center">
+    <gaia-loading></gaia-loading>
+  </section>
+</body>
+</html>

gaia/distros/spark/apps/sharing/components/gaia-progress.js

@@ -0,0 +1 @@
+define(['./gaia-progress/gaia-progress'], function(m) { return m; });

gaia/distros/spark/apps/sharing/components/gaia-progress/bower.json

@@ -0,0 +1,24 @@
+{
+  "name": "gaia-progress",
+  "main": "gaia-progress.js",
+  "version": "0.0.0",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "devDependencies": {
+    "base": "gaia-components/base",
+    "gaia-fonts": "gaia-components/gaia-font#~0.2.1",
+    "gaia-theme": "gaia-components/gaia-theme#~0.4.4"
+  },
+  "dependencies": {
+    "gaia-component": "gaia-components/gaia-component#~0.3.0"
+  }
+}

gaia/distros/spark/apps/sharing/components/gaia-progress/gaia-progress.js

@@ -0,0 +1,130 @@
+;(function(define){define(['require','exports','module','gaia-component'],function(require,exports,module){
+/*jshint esnext:true*/
+
+/**
+ * Dependencies
+ */
+
+var component = require('gaia-component');
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-progress', {
+  created: function() {
+    this.setupShadowRoot();
+
+    this.els = {
+      inner: this.shadowRoot.querySelector('.inner'),
+      bar: this.shadowRoot.querySelector('.bar'),
+    };
+
+    this.els.inner.setAttribute('role', 'progressbar');
+    this.els.inner.setAttribute('aria-valuemin', '0');
+    this.els.inner.setAttribute('aria-valuemax', '100');
+
+    this.value = this.getAttribute('value') || 0;
+  },
+
+  fillTime: 2000,
+
+  attrs: {
+    value: {
+      get: function() { return this._value || 0; },
+      set: function(value) {
+
+        // Clamp it
+        value = Math.min(100, Math.max(0, Number(value)));
+
+        if (value) {
+          var delta = Math.abs(this.value - value);
+          var duration = (delta / 100) * this.fillTime;
+          this.els.bar.style.transform = `translateX(${value}%)`;
+          this.els.bar.style.transitionDuration = duration + 'ms';
+          this.els.inner.setAttribute('aria-valuenow', value);
+        } else {
+          this.els.inner.removeAttribute('aria-valuenow');
+        }
+
+        this.els.inner.classList.toggle('no-value', !value);
+        this._value = value;
+      }
+    }
+  },
+
+  template: `
+    <div class="inner">
+      <div class="bar"></div>
+    </div>
+
+    <style>
+
+      :host {
+        display: block;
+        overflow: hidden;
+        height: 4px;
+      }
+
+      .inner {
+        height: 100%;
+        background:
+          var(--border-color,
+          var(--background-plus))
+      }
+
+      .bar {
+        position: relative;
+        top: 0;
+        left: -100%;
+
+        width: 100%;
+        height: 100%;
+
+        background: var(--highlight-color);
+        transition: transform 0ms linear;
+      }
+
+      .bar:after {
+        position: absolute;
+        left: 100%;
+        top: -8px;
+
+        display: block;
+        content: '';
+        width: 0;
+        height: 0;
+
+        border-top: 8px solid transparent;
+        border-bottom: 8px solid transparent;
+        border-left: 8px solid var(--highlight-color);
+      }
+
+      .no-value .bar {
+        left: 0;
+
+        width: calc(100% + 150px);
+        animation: moving-backward 1500ms infinite linear;
+        background: repeating-linear-gradient(
+          135deg,
+          var(--highlight-color),
+          var(--highlight-color) 50px,
+          var(--border-color, var(--background-plus)) 50px,
+          var(--border-color, var(--background-plus)) 100px);
+      }
+
+    </style>
+  `,
+
+  globalCss: `
+    @keyframes moving-backward {
+      0% { transform: translateX(0); }
+      100% { transform: translateX(-142px); }
+    }
+  `
+});
+
+});})(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-progress',this));

gaia/distros/spark/apps/sharing/components/gaia-progress/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>gaia-progress</title>
+  <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-progress.js"></script>
+  <style>
+
+    body {
+      padding: var(--base-m);
+      padding-top: var(--base-l);
+    }
+
+    gaia-progress {
+      margin-bottom: var(--base-s);
+    }
+
+  </style>
+</head>
+
+<body>
+  <gaia-theme-selector></gaia-theme-selector>
+
+  <gaia-progress id="progress" value="10"></gaia-progress>
+  <gaia-progress></gaia-progress>
+
+  <button id="btn">Load some</button>
+
+  <script>
+    btn.onclick = function() {
+      var amount = 10;
+      progress.value += amount;
+    }
+  </script>
+</body>
+</html>

gaia/distros/spark/apps/sharing/components/gaia-progress/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "gaia-progress",
+  "homepage": "https://github.com/gaia-components/gaia-progress",
+  "license": "ISC",
+  "main": "script.js",
+  "directories": {
+    "example": "examples",
+    "test": "test"
+  },
+  "devDependencies": {
+    "bower": "^1.3.5",
+    "browserify": "^5.11.2",
+    "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.3"
+  },
+  "scripts": {
+    "install": "bower install",
+    "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",
+    "build": "mkdir -p dist && browserify gaia-progress.js --outfile ./dist/gaia-progress.js --standalone GaiaHeader"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/gaia-components/gaia-progress.git"
+  },
+  "bugs": {
+    "url": "https://github.com/gaia-components/gaia-progress/issues"
+  },
+  "browser": {
+    "gaia-component": "./bower_components/gaia-component/gaia-component.js",
+    "gaia-icons": "./bower_components/gaia-icons/gaia-icons.js",
+    "pressed": "./bower_components/pressed/pressed.js"
+  }
+}

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

@@ -0,0 +1 @@
+define(['./gaia-sub-header/gaia-sub-header'], function(m) { return m; });

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

@@ -0,0 +1,24 @@
+{
+  "name": "gaia-sub-header",
+  "version": "0.3.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"
+  ],
+  "devDependencies": {
+    "gaia-theme": "gaia-components/gaia-theme#v1",
+    "gaia-fonts": "gaia-components/gaia-fonts#~0.2.1"
+  },
+  "dependencies": {
+    "gaia-component": "gaia-components/gaia-component#~0.3.0"
+  }
+}

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

@@ -0,0 +1,103 @@
+(function(define){'use strict';define(['require','exports','module','gaia-component'],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(--color-epsilon);
+    }
+
+    a,
+    button {
+      position: relative;
+      display: block;
+      padding-right: 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;
+      border-left: 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/sharing/components/gaia-sub-header/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>&lt;gaia-sub-header&gt;</title>
+  <meta name="description" content="gaia-sub-header example" />
+  <link rel="stylesheet" type="text/css" href="bower_components/gaia-theme/gaia-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/pressed/pressed.js"></script>
+  <script src="gaia-sub-header.js"></script>
+  <style type="text/css">
+
+    body {
+      padding: 16px;
+      padding-top: 48px;
+    }
+
+  </style>
+</head>
+<body role="application">
+  <gaia-theme-selector></gaia-theme-selector>
+  <h1 class="large l-align-center l-mb-mega">&lt;gaia-sub-header&gt;</h1>
+  <section>
+    <gaia-sub-header>Sub-Header</gaia-sub-header>
+  </section>
+  <section>
+    <gaia-sub-header><a href="#">Gaia Sub-Header Link</a></gaia-sub-header>
+  </section>
+</body>
+</html>

gaia/distros/spark/apps/sharing/components/gaia-switch.js

@@ -0,0 +1 @@
+define(['./gaia-switch/gaia-switch'], function(m) { return m; });

gaia/distros/spark/apps/sharing/components/gaia-switch/bower.json

@@ -0,0 +1,30 @@
+{
+  "name": "gaia-switch",
+  "version": "0.2.1",
+  "homepage": "https://github.com/gaia-components/gaia-switch",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "main": "gaia-switch.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "index.html",
+    "package.json",
+    "README.md"
+  ],
+  "devDependencies": {
+    "base": "gaia-components/base",
+    "gaia-fonts": "gaia-components/gaia-fonts",
+    "gaia-list": "gaia-components/gaia-list",
+    "gaia-theme": "gaia-components/gaia-theme"
+  },
+  "dependencies": {
+    "drag": "gaia-components/drag#~0.2.0",
+    "gaia-component": "gaia-components/gaia-component#^0.3.6"
+  }
+}

gaia/distros/spark/apps/sharing/components/gaia-switch/gaia-switch.js

@@ -0,0 +1,450 @@
+/* globals define */
+(function(define){'use strict';define(['require','exports','module','gaia-component','drag'],function(require,exports,module){
+
+/**
+ * Dependencies
+ */
+
+var component = require('gaia-component');
+var Drag = require('drag');
+
+/**
+ * Simple logger
+ * @type {Function}
+ */
+var debug = 0 ? console.log.bind(console) : function() {};
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-switch', {
+  extends: HTMLInputElement.prototype,
+
+  rtl: true,
+
+  created: function() {
+    this.setupShadowRoot();
+
+    this.els = {
+      inner: this.shadowRoot.querySelector('.inner'),
+      track: this.shadowRoot.querySelector('.track'),
+      handle: this.shadowRoot.querySelector('.handle')
+    };
+
+    // Bind context
+    this.updateDir = this.updateDir.bind(this);
+    this.toggle = this.toggle.bind(this);
+
+    // Events
+    on(this, 'click', e => this.onClick(e));
+
+    // Configure
+    this.setupDrag();
+    this.disabled = this.getAttribute('disabled');
+    this.checked = this.getAttribute('checked');
+
+    // process everything that doesn't affect user interaction
+    // after the component is created
+    setTimeout(() => {
+      // enable transitions after creation
+      this.activateTransitions();
+      this.makeAccessible();
+    });
+  },
+
+  /**
+   * Accessibility enhancements.
+   * Read gaia-switch as switch.
+   * make it tabable
+   * read its checked and disabled state
+   */
+  makeAccessible: function() {
+    this.setAttribute('role', 'switch');
+
+    // Make tabable
+    this.tabIndex = 0;
+
+    this.setAttribute('aria-checked', this.checked);
+    if (this.disabled) {
+      this.setAttr('aria-disabled', true);
+    }
+  },
+
+  attached: function() {
+    debug('attached');
+    on(document, 'dirchanged', this.updateDir);
+  },
+
+  detached: function() {
+    debug('detached');
+    off(document, 'dirchanged', this.updateDir);
+  },
+
+  setupDrag: function() {
+    debug('setup drag');
+
+    this.drag = new Drag({
+      container: {
+        el: this.els.track,
+        width: 50,
+        height: 32
+      },
+
+      handle: {
+        el: this.els.handle,
+        width: 32,
+        height: 32,
+        x: 0,
+        y: 0
+      },
+    });
+
+    this.drag.on('ended', () => this.drag.snap());
+    this.drag.on('snapped', (e) => this.onSnapped(e));
+  },
+
+  activateTransitions: function() {
+    debug('activate transitions');
+    this.els.inner.classList.add('transitions-on');
+  },
+
+  onClick: function(e) {
+    debug('click', e);
+    e.stopPropagation();
+    if (this.drag.dragging) { return; }
+    if (this.disabled) { return; }
+    this.toggle();
+  },
+
+  updateDir: function() {
+    debug('update dir', dir());
+    this.updatePosition();
+  },
+
+  onSnapped: function(e) {
+    debug('snapped', e, convert.toChecked(e.detail.x));
+    this.checked = convert.toChecked(e.detail.x);
+  },
+
+  toggle: function(value) {
+    debug('toggle', value);
+    this.checked = !this.checked;
+  },
+
+  updatePosition: function() {
+    var edge = convert.toEdge(this.checked);
+    this.drag.transition(edge, 0);
+    debug('updated position', edge);
+  },
+
+  attrs: {
+    checked: {
+      get: function() { return this._checked; },
+      set: function(value) {
+        debug('set checked', value);
+        value = !!(value || value === '');
+
+        if (this._checked === value) { return; }
+
+        var changed = this._checked !== undefined;
+        this._checked = value;
+
+        this.els.handle.style.transform = '';
+        this.els.handle.style.transition = '';
+
+        if (value) {
+          this.setAttr('checked', '');
+          this.setAttribute('aria-checked', true);
+        } else {
+          this.removeAttr('checked');
+          this.setAttribute('aria-checked', false);
+        }
+
+        this.updatePosition();
+
+        if (changed) { this.dispatchEvent(new CustomEvent('change')); }
+      }
+    },
+
+    disabled: {
+      get: function() { return this._disabled; },
+      set: function(value) {
+        value = !!(value || value === '');
+        if (this._disabled === value) { return; }
+        debug('set disabled', value);
+        this._disabled = value;
+        if (value) {
+          this.setAttr('disabled', '');
+          this.setAttr('aria-disabled', true);
+        } else {
+          this.removeAttr('disabled');
+          this.removeAttr('aria-disabled');
+        }
+      }
+    }
+  },
+
+  template: `
+    <div class="inner">
+      <div class="track">
+        <div class="handle">
+          <div class="handle-head"></div>
+        </div>
+      </div>
+    </div>
+    <style>
+
+    :host {
+      display: inline-block;
+      position: relative;
+      border-radius: 18px;
+      outline: 0;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    /** Inner
+     ---------------------------------------------------------*/
+
+    .inner {
+      display: block;
+      width: 50px;
+      height: 32px;
+      direction: ltr;
+    }
+
+    /** Track
+     ---------------------------------------------------------*/
+
+    .track {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      border-radius: 18px;
+
+      /* Themeable */
+
+      background:
+        var(--switch-background,
+        var(--background-minus,
+        var(--background-plus,
+        rgba(0,0,0,0.2))));
+    }
+
+    /** Track Background
+     ---------------------------------------------------------*/
+
+    .track:after {
+      content: " ";
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 25px;
+      transform: scale(0);
+      transition-property: transform;
+      transition-duration: 200ms;
+      transition-delay: 300ms;
+
+      /* Theamable */
+
+      background-color:
+        var(--highlight-color, #000)
+    }
+
+    /**
+     * [checked]
+     */
+
+    [checked] .track:after {
+      transform: scale(1);
+    }
+
+    /** Handle
+     ---------------------------------------------------------*/
+
+    .handle {
+      position: relative;
+      z-index: 1;
+      width: 32px;
+      height: 32px;
+    }
+
+    /**
+     * transitions-on
+     */
+
+    .inner:not(.transitions-on) .handle {
+      transition: none !important;
+    }
+
+    /** Handle Head
+     ---------------------------------------------------------*/
+
+    .handle-head {
+      display: flex;
+      box-sizing: border-box;
+      width: 36px;
+      height: 36px;
+      position: relative;
+      top: -2px;
+      left: -2px;
+      border-radius: 50%;
+      border: 1px solid;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+
+      /* Themable */
+
+      background:
+        var(--switch-head-background,
+        var(--input-background,
+        var(--button-background,
+        var(--background-plus,
+        #fff))));
+
+      border-color:
+        var(--switch-head-border-color,
+        var(--switch-background,
+        var(--border-color,
+        var(--background-minus,
+        rgba(0,0,0,0.2)))));
+    }
+
+    /** Handle Head Circle
+     ---------------------------------------------------------*/
+
+    .handle-head:after {
+      content: "";
+      display: block;
+      width: 15px;
+      height: 15px;
+      border-radius: 50%;
+      transform: scale(0);
+      transition-property: transform;
+      transition-duration: 300ms;
+      transition-delay: 600ms;
+
+      /* Themeable */
+
+      background:
+        var(--highlight-color, #000)
+    }
+
+    /**
+     * [checked]
+     */
+
+    [checked] .handle-head:after {
+      transform: scale(1);
+    }
+
+  </style>`
+});
+
+// Toggle switches when the component is
+// focused and the spacebar is pressed.
+addEventListener('keypress', function(e) {
+  var isSpaceKey = e.which === 32;
+  var el = document.activeElement;
+  var isGaiaSwitch = el.tagName === 'GAIA-SWITCH';
+  if (isSpaceKey && isGaiaSwitch) { el.click(); }
+});
+
+/**
+ * TODO: Replace this <label> stuff
+ * with smarter <gaia-label>
+ */
+
+// Bind a 'click' delegate to the
+// window to listen for all clicks
+// and toggle checkboxes when required.
+addEventListener('click', function(e) {
+  var label = getLabel(e.target);
+  var gaiaSwitch = getLinkedSwitch(label);
+  if (gaiaSwitch) { gaiaSwitch.toggle(); }
+}, true);
+
+/**
+ * Find a gaiaSwitch when given a <label>.
+ *
+ * @param  {Element} label
+ * @return {GaiaCheckbox|null}
+ */
+function getLinkedSwitch(label) {
+  if (!label) { return; }
+  var id = label.getAttribute('for');
+  var el = id && document.getElementById(id);
+  return el && el.tagName === 'GAIA-SWITCH' ? el : null;
+}
+
+/**
+ * Walk up the DOM tree from a given
+ * element until a <label> is found.
+ *
+ * @param  {Element} el
+ * @return {HTMLLabelElement|undefined}
+ */
+function getLabel(el) {
+  return el && (el.tagName == 'LABEL' ? el : getLabel(el.parentNode));
+}
+
+/**
+ * Utils
+ */
+
+/**
+ * Get the document direction.
+ *
+ * @return {String} ('ltr'|'rtl')
+ */
+function dir() {
+  return document.dir || 'ltr';
+}
+
+/**
+ * Handles convertion of edges values
+ * to checked Booleans and checked
+ * Booleans to edge values.
+ *
+ * This is because in LTR mode when the
+ * handle is against the left edge the
+ * switch is checked, in RTL mode it's
+ * the opposite.
+ *
+ * @type {Object}
+ */
+var convert = {
+  ltr: {
+    edges: { '0': false, '1': true },
+    checked: { 'true': '1', 'false': '0' }
+  },
+
+  rtl: {
+    edges: { '0': true, '1': false },
+    checked: { 'true': '0', 'false': '1' }
+  },
+
+  toChecked: function(edge) {
+    return this[dir()].edges[edge];
+  },
+
+  toEdge: function(checked) {
+    return this[dir()].checked[checked];
+  }
+};
+
+function on(el, name, fn) { el.addEventListener(name, fn); }
+function off(el, name, fn) { el.removeEventListener(name, fn); }
+
+});})(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-switch',this));

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

@@ -0,0 +1 @@
+define(['./gaia-text-input/gaia-text-input'], function(m) { return m; });

gaia/distros/spark/apps/sharing/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/sharing/components/gaia-text-input/gaia-text-input-multiline.js

@@ -0,0 +1,216 @@
+(function(define){define(['require','exports','module','gaia-component'],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/sharing/components/gaia-text-input/gaia-text-input-pin.js

@@ -0,0 +1,279 @@
+(function(define){define(['require','exports','module','gaia-component'],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/sharing/components/gaia-text-input/gaia-text-input.js

@@ -0,0 +1,317 @@
+(function(define){define(['require','exports','module','gaia-component','gaia-icons'],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/sharing/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>