Add super-basic sky widgets.

sky/framework/sky-radio/sky-radio.sky

+<!--
+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="/sky/framework/sky-button/sky-button.sky" as="SkyButton" />
+
+<sky-element name="sky-radio">
+<template>
+  <style>
+    :host {
+      display: inline-block;
+      -webkit-user-select: none;
+      width: 14px;
+      height: 14px;
+      border-radius: 7px;
+      border: 1px solid blue;
+      margin: 0 5px;
+    }
+    :host([highlight=true]) box {
+      background-color: orange;
+    }
+    dot {
+      -webkit-user-select: none;
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+      background-color: black;
+      margin: 2px;
+    }
+  </style>
+  <template if="{{ selected }}">
+    <dot />
+  </template>
+</template>
+<script>
+const kControllerMap = new WeakMap();
+
+class RadioGroupController {
+  static forRadio(radio) {
+    var scope = radio;

[esprehn, 2014/12/18 00:54:28]

this.ownerScope, I added it :)

+    while (scope.parentNode)
+      scope = scope.parentNode;
+
+    var controller = kControllerMap.get(scope);
+    if (!controller)
+      kControllerMap.set(scope, new RadioGroupController());
+    return kControllerMap.get(scope);
+  }
+  constructor() {
+    this.radios = new Set();
+  }
+  addRadio(radio) {
+    this.radios.add(radio)
+  }
+  removeRadio(radio) {
+    this.radios.remove(radio);
+  }
+  takeSelectionFromGroup(selectedRadio) {
+    // Emtpy/null/undefined group means and isolated radio.
+    if (!selectedRadio.group)
+      return;
+    this.radios.forEach(function(radio) {
+      if (selectedRadio === radio)
+        return;
+      if (radio.group != selectedRadio.group)
+        return;
+      radio.setSelected(false);
+    })
+  }
+};
+
+module.exports = class extends SkyButton {
+  created() {
+    super.created();
+    this.setSelected(this.getAttribute('selected'));

[esprehn, 2014/12/18 00:54:28]

this.cachedController = null;

You want to define all your properties inside created() to stay in fast mode.

+    this.group = this.getAttribute('group');
+
+    this.addEventListener("mouseup", function() {
+      this.setSelected(true);
+    });
+  }
+  attached() {
+    super.attached();
+    this.cachedController = RadioGroupController.forRadio(this);
+    this.cachedController.addRadio(this);
+    // If we're selected and just now attaching, take selection from the group.
+    if (this.selected)
+      this.cachedController.takeSelectionFromGroup(this);

[esprehn, 2014/12/18 00:54:28]

It seems like addRadio should do this?

+  }
+  detached() {
+    super.detached();
+    this.cachedController.removeButton(this);
+  }
+  setSelected(selected) {
+    if (selected == this.selected)
+      return;
+    this.setAttribute('selected', selected);
+    this.selected = selected;
+    if (selected && this.cachedController)
+      this.cachedController.takeSelectionFromGroup(this);
+  }
+}.register();
+</script>
+</sky-element>