diff --git a/src/css/g-menu.css b/src/css/g-menu.css
new file mode 100644
index 0000000000..047c32633f
--- /dev/null
+++ b/src/css/g-menu.css
@@ -0,0 +1,11 @@
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+@host {
+ display: inline-block;
+ background: white;
+ border: 1px solid #cfcfcf;
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
+}
\ No newline at end of file
diff --git a/src/css/g-menuitem.css b/src/css/g-menuitem.css
new file mode 100644
index 0000000000..050e39a041
--- /dev/null
+++ b/src/css/g-menuitem.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+@host {
+ display: block;
+ box-sizing: border-box;
+ padding: 11px 10px;
+ margin: 10px;
+ border: 1px solid transparent;
+ border-radius: 3px;
+ cursor: pointer;
+}
+
+@host.selected {
+ border: 1px solid rgba(0, 0, 0, 0.16);
+ background: whitesmoke;
+}
+
+.label {
+ margin: 0 15px;
+}
+
+g-icon, .label, .label > * {
+ display: inline-block;
+ vertical-align: middle;
+}
diff --git a/src/g-menu.html b/src/g-menu.html
new file mode 100644
index 0000000000..62873bb31c
--- /dev/null
+++ b/src/g-menu.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/g-menuitem.html b/src/g-menuitem.html
new file mode 100644
index 0000000000..770d3ec003
--- /dev/null
+++ b/src/g-menuitem.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/component.js b/test/component.js
new file mode 100644
index 0000000000..88f69e0651
--- /dev/null
+++ b/test/component.js
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+suite('component', function() {
+ var foo;
+
+ setup(function() {
+ foo = document.createElement('g-foo');
+ work.appendChild(foo);
+ });
+
+ teardown(function() {
+ work.textContent = '';
+ });
+
+ function async(inFn) {
+ setTimeout(inFn, 1);
+ }
+
+ test('string attribute', function() {
+ foo.str = 'hello world';
+ expect(foo._str).to.be('hello world');
+ foo.setAttribute('str', 'good bye');
+ async(function() {
+ expect(foo._str).to.be('good bye');
+ });
+ });
+
+ test('boolean attribute', function() {
+ foo.bool = true;
+ expect(foo._bool).to.be(true);
+ foo.bool = false;
+ expect(foo._bool).to.be(false);
+ foo.setAttribute('bool', true);
+ async(function() {
+ expect(foo._bool).to.be(true);
+ })
+ });
+
+ test('number attribute', function() {
+ foo.num = 3;
+ expect(foo._num).to.be(3);
+ foo.setAttribute('num', 5);
+ async(function() {
+ expect(foo._num).to.be(5);
+ })
+ });
+
+ test('string property', function() {
+ foo.strp = 'hello world';
+ expect(foo._strp).to.be('hello world');
+ });
+
+ test('boolean property', function() {
+ foo.boolp = true;
+ expect(foo._boolp).to.be(true);
+ foo.boolp = false;
+ expect(foo._boolp).to.be(false);
+ });
+
+ test('number property', function() {
+ foo.nump = 3;
+ expect(foo._nump).to.be(3);
+ });
+
+ test('node reference', function() {
+ var ref = foo.$.ref1;
+ expect(ref.id).to.be('ref1');
+ ref = foo.$.ref2;
+ expect(ref.textContent).to.be('hello!!!');
+ });
+
+ test('handler', function() {
+ expect(foo._click).to.be(undefined);
+ foo.click();
+ expect(foo._click).to.be(true);
+ })
+});
+
diff --git a/test/g-foo.html b/test/g-foo.html
new file mode 100644
index 0000000000..db41f8674f
--- /dev/null
+++ b/test/g-foo.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
diff --git a/test/icon.js b/test/icon.js
new file mode 100644
index 0000000000..938c69a3f7
--- /dev/null
+++ b/test/icon.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+suite('g-icon', function() {
+ var icon;
+
+ setup(function() {
+ icon = document.createElement('g-icon');
+ work.appendChild(icon);
+ });
+
+ teardown(function() {
+ work.textContent = '';
+ });
+
+ suite('attributes', function() {
+ test('src', function() {
+ var i = ShadowDOM.localQuery(icon.shadow, '.icon');
+ var src = 'http://foo.com/bar.png';
+ icon.src = src;
+ expect(i.style.backgroundImage).to.be('url(' + src + ')');
+ });
+ });
+});
diff --git a/test/test.html b/test/test.html
index 06dc87481d..082befa6d2 100644
--- a/test/test.html
+++ b/test/test.html
@@ -14,6 +14,7 @@
+
@@ -31,6 +32,7 @@
+
diff --git a/workbench/images/chat.svg b/workbench/images/chat.svg
new file mode 100644
index 0000000000..15598d7a13
--- /dev/null
+++ b/workbench/images/chat.svg
@@ -0,0 +1,9 @@
+
+
+
+
diff --git a/workbench/images/edit_page.svg b/workbench/images/edit_page.svg
new file mode 100644
index 0000000000..734dca2037
--- /dev/null
+++ b/workbench/images/edit_page.svg
@@ -0,0 +1,9 @@
+
+
+
+
diff --git a/workbench/images/email.svg b/workbench/images/email.svg
new file mode 100644
index 0000000000..89966bea13
--- /dev/null
+++ b/workbench/images/email.svg
@@ -0,0 +1,13 @@
+
+
+
+
diff --git a/workbench/images/favorite.svg b/workbench/images/favorite.svg
new file mode 100644
index 0000000000..b531f03ad2
--- /dev/null
+++ b/workbench/images/favorite.svg
@@ -0,0 +1,9 @@
+
+
+
+
diff --git a/workbench/menu.html b/workbench/menu.html
new file mode 100644
index 0000000000..972c2500c3
--- /dev/null
+++ b/workbench/menu.html
@@ -0,0 +1,27 @@
+
+
+
+
+ Menu
+
+
+
+
+
+
+
+ Post a Comment
+ Share Link
+ Email Link
+ Add to Favorites
+
+
+