diff --git a/dist/svg/wds-icons-megaphone.svg b/dist/svg/wds-icons-megaphone.svg
new file mode 100644
index 000000000..e757120eb
--- /dev/null
+++ b/dist/svg/wds-icons-megaphone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M3.9 4.5C1.8 4.5 0 6.3 0 8.4s1.8 3.9 3.9 3.9H4l3 4.9c.4.8 1.5 1 2.4.6.8-.4 1-1.5.6-2.4l-1.9-3h2.1l7.9 4.5V0l-7.9 4.5H3.9z"/></svg>
\ No newline at end of file
diff --git a/docs/assets/design-system.js b/docs/assets/design-system.js
index d638715f3..7fd96f998 100644
--- a/docs/assets/design-system.js
+++ b/docs/assets/design-system.js
@@ -11,4 +11,4 @@ e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTe
 var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","icons-small");var r=e.createTextNode("Icons: Small set (18x18)");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("To have small icons properly styled use both ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-icon");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" and ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-icon-small");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" classes.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","assets-wrapper");var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","icons-tiny");var r=e.createTextNode("Icons: Tiny set (12x12)");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("To have tiny icons properly styled use both ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-icon");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" and ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-icon-tiny");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" classes.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","assets-wrapper");var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","icons-social");var r=e.createTextNode("Icons: Social networks");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("Social networks icons are a subset of the standard icon set. Asset names for social networks icons are defined by the same pattern as the standard icons, i.e. ");e.appendChild(n,r);var r=e.createElement("code"),d=e.createElement("strong"),l=e.createTextNode("wds-icons-ICON_NAME");e.appendChild(d,l),e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(", e.g. ");e.appendChild(n,r);var r=e.createElement("code"),d=e.createTextNode("wds-icons-facebook");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(".");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","assets-wrapper");var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","stores");var r=e.createTextNode("Mobile apps stores");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("\n\t\tTo help with the promotion of our community apps Google Play and App Store badges should be displayed\n\t\twhen possible. Each badge should be translated to our supported languages and point to the respective\n\t\tdownload page.\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("\n\t\tAsset names for mobile apps stores are defined by the pattern\n\t\t");e.appendChild(n,r);var r=e.createElement("code"),d=e.createElement("strong"),l=e.createTextNode("wds-company-store-STORE_NAME");e.appendChild(d,l),e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(",\n\t\te.g. ");e.appendChild(n,r);var r=e.createElement("code"),d=e.createTextNode("wds-company-store-appstore");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(".\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","assets-wrapper");var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","avatar-badges");var r=e.createTextNode("Avatar badges");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("\n\t\tTo help communicate special user permissions badges should be displayed when sensible and placed\n\t\tat the top-left corner of the avatar. For clarity when a user hovers over the badge a label should\n\t\tdisplay identifying what type of user he/she is.\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("\n\t\tAsset names for avatar badges are defined by the pattern ");e.appendChild(n,r);var r=e.createElement("code"),d=e.createElement("strong"),l=e.createTextNode("avatar-badges-BADGE_NAME");e.appendChild(d,l),e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(",\n\t\te.g. ");e.appendChild(n,r);var r=e.createElement("code"),d=e.createTextNode("avatar-badges-admin");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(".\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","assets-wrapper");var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=e.childAt(t,[8]),r=e.childAt(n,[3]),d=e.childAt(t,[10]),l=e.childAt(d,[5]),o=e.childAt(t,[12]),i=e.childAt(o,[5]),p=e.childAt(t,[14]),c=e.childAt(p,[5]),s=e.childAt(t,[16]),m=e.childAt(s,[7]),h=e.childAt(t,[18]),u=e.childAt(h,[7]),v=new Array(122);return v[0]=e.createMorphAt(e.childAt(t,[4]),1,1),v[1]=e.createMorphAt(r,1,1),v[2]=e.createMorphAt(r,3,3),v[3]=e.createMorphAt(r,5,5),v[4]=e.createMorphAt(r,7,7),v[5]=e.createMorphAt(r,9,9),v[6]=e.createMorphAt(r,11,11),v[7]=e.createMorphAt(r,13,13),v[8]=e.createMorphAt(r,15,15),v[9]=e.createMorphAt(r,17,17),v[10]=e.createMorphAt(r,19,19),v[11]=e.createMorphAt(r,21,21),v[12]=e.createMorphAt(r,23,23),v[13]=e.createMorphAt(r,25,25),v[14]=e.createMorphAt(r,27,27),v[15]=e.createMorphAt(r,29,29),v[16]=e.createMorphAt(r,31,31),v[17]=e.createMorphAt(r,33,33),v[18]=e.createMorphAt(r,35,35),v[19]=e.createMorphAt(r,37,37),v[20]=e.createMorphAt(r,39,39),v[21]=e.createMorphAt(r,41,41),v[22]=e.createMorphAt(r,43,43),v[23]=e.createMorphAt(r,45,45),v[24]=e.createMorphAt(r,47,47),v[25]=e.createMorphAt(r,49,49),v[26]=e.createMorphAt(r,51,51),v[27]=e.createMorphAt(r,53,53),v[28]=e.createMorphAt(r,55,55),v[29]=e.createMorphAt(r,57,57),v[30]=e.createMorphAt(r,59,59),v[31]=e.createMorphAt(r,61,61),v[32]=e.createMorphAt(r,63,63),v[33]=e.createMorphAt(r,65,65),v[34]=e.createMorphAt(r,67,67),v[35]=e.createMorphAt(r,69,69),v[36]=e.createMorphAt(r,71,71),v[37]=e.createMorphAt(r,73,73),v[38]=e.createMorphAt(r,75,75),v[39]=e.createMorphAt(r,77,77),v[40]=e.createMorphAt(r,79,79),v[41]=e.createMorphAt(r,81,81),v[42]=e.createMorphAt(r,83,83),v[43]=e.createMorphAt(r,85,85),v[44]=e.createMorphAt(r,87,87),v[45]=e.createMorphAt(r,89,89),v[46]=e.createMorphAt(r,91,91),v[47]=e.createMorphAt(r,93,93),v[48]=e.createMorphAt(r,95,95),v[49]=e.createMorphAt(r,97,97),v[50]=e.createMorphAt(r,99,99),v[51]=e.createMorphAt(r,101,101),v[52]=e.createMorphAt(r,103,103),v[53]=e.createMorphAt(r,105,105),v[54]=e.createMorphAt(r,107,107),v[55]=e.createMorphAt(r,109,109),v[56]=e.createMorphAt(r,111,111),v[57]=e.createMorphAt(r,113,113),v[58]=e.createMorphAt(r,115,115),v[59]=e.createMorphAt(r,117,117),v[60]=e.createMorphAt(r,119,119),v[61]=e.createMorphAt(r,121,121),v[62]=e.createMorphAt(n,5,5),v[63]=e.createMorphAt(l,1,1),v[64]=e.createMorphAt(l,3,3),v[65]=e.createMorphAt(l,5,5),v[66]=e.createMorphAt(l,7,7),v[67]=e.createMorphAt(l,9,9),v[68]=e.createMorphAt(l,11,11),v[69]=e.createMorphAt(l,13,13),v[70]=e.createMorphAt(l,15,15),v[71]=e.createMorphAt(l,17,17),v[72]=e.createMorphAt(l,19,19),v[73]=e.createMorphAt(l,21,21),v[74]=e.createMorphAt(l,23,23),v[75]=e.createMorphAt(l,25,25),v[76]=e.createMorphAt(l,27,27),v[77]=e.createMorphAt(l,29,29),v[78]=e.createMorphAt(l,31,31),v[79]=e.createMorphAt(l,33,33),v[80]=e.createMorphAt(l,35,35),v[81]=e.createMorphAt(l,37,37),v[82]=e.createMorphAt(l,39,39),v[83]=e.createMorphAt(l,41,41),v[84]=e.createMorphAt(l,43,43),v[85]=e.createMorphAt(l,45,45),v[86]=e.createMorphAt(l,47,47),v[87]=e.createMorphAt(l,49,49),v[88]=e.createMorphAt(d,7,7),v[89]=e.createMorphAt(i,1,1),v[90]=e.createMorphAt(i,3,3),v[91]=e.createMorphAt(i,5,5),v[92]=e.createMorphAt(i,7,7),v[93]=e.createMorphAt(i,9,9),v[94]=e.createMorphAt(o,7,7),v[95]=e.createMorphAt(c,1,1),v[96]=e.createMorphAt(c,3,3),v[97]=e.createMorphAt(c,5,5),v[98]=e.createMorphAt(c,7,7),v[99]=e.createMorphAt(c,9,9),v[100]=e.createMorphAt(c,11,11),v[101]=e.createMorphAt(c,13,13),v[102]=e.createMorphAt(c,15,15),v[103]=e.createMorphAt(c,17,17),v[104]=e.createMorphAt(c,19,19),v[105]=e.createMorphAt(c,21,21),v[106]=e.createMorphAt(c,23,23),v[107]=e.createMorphAt(c,25,25),v[108]=e.createMorphAt(c,27,27),v[109]=e.createMorphAt(c,29,29),v[110]=e.createMorphAt(c,31,31),v[111]=e.createMorphAt(p,7,7),v[112]=e.createMorphAt(m,1,1),v[113]=e.createMorphAt(m,3,3),v[114]=e.createMorphAt(s,9,9),v[115]=e.createMorphAt(u,1,1),v[116]=e.createMorphAt(u,3,3),v[117]=e.createMorphAt(u,5,5),v[118]=e.createMorphAt(u,7,7),v[119]=e.createMorphAt(u,9,9),v[120]=e.createMorphAt(u,11,11),v[121]=e.createMorphAt(h,9,9),v},statements:[["block","link-to",["overview.svg-assets"],[],0,null,["loc",[null,[8,1],[8,68]]]],["inline","icon-box",[],["name","alert"],["loc",[null,[34,2],[34,27]]],0,0],["inline","icon-box",[],["name","arrow"],["loc",[null,[35,2],[35,27]]],0,0],["inline","icon-box",[],["name","bell"],["loc",[null,[36,2],[36,26]]],0,0],["inline","icon-box",[],["name","bold"],["loc",[null,[37,2],[37,26]]],0,0],["inline","icon-box",[],["name","bookmark"],["loc",[null,[38,2],[38,30]]],0,0],["inline","icon-box",[],["name","bullet-list"],["loc",[null,[39,2],[39,33]]],0,0],["inline","icon-box",[],["name","camera"],["loc",[null,[40,2],[40,28]]],0,0],["inline","icon-box",[],["name","checkbox"],["loc",[null,[41,2],[41,30]]],0,0],["inline","icon-box",[],["name","checkmark"],["loc",[null,[42,2],[42,31]]],0,0],["inline","icon-box",[],["name","checkmark-circle"],["loc",[null,[43,2],[43,38]]],0,0],["inline","icon-box",[],["name","clipboard"],["loc",[null,[44,2],[44,31]]],0,0],["inline","icon-box",[],["name","community"],["loc",[null,[45,2],[45,31]]],0,0],["inline","icon-box",[],["name","controls"],["loc",[null,[46,2],[46,30]]],0,0],["inline","icon-box",[],["name","cross"],["loc",[null,[47,2],[47,27]]],0,0],["inline","icon-box",[],["name","document"],["loc",[null,[48,2],[48,30]]],0,0],["inline","icon-box",[],["name","dropdown"],["loc",[null,[49,2],[49,30]]],0,0],["inline","icon-box",[],["name","eye"],["loc",[null,[50,2],[50,25]]],0,0],["inline","icon-box",[],["name","eye-crossed"],["loc",[null,[51,2],[51,33]]],0,0],["inline","icon-box",[],["name","flag"],["loc",[null,[52,2],[52,26]]],0,0],["inline","icon-box",[],["name","gear"],["loc",[null,[53,2],[53,26]]],0,0],["inline","icon-box",[],["name","gift"],["loc",[null,[54,2],[54,26]]],0,0],["inline","icon-box",[],["name","grid"],["loc",[null,[55,2],[55,26]]],0,0],["inline","icon-box",[],["name","help"],["loc",[null,[56,2],[56,26]]],0,0],["inline","icon-box",[],["name","hourglass"],["loc",[null,[57,2],[57,31]]],0,0],["inline","icon-box",[],["name","house"],["loc",[null,[58,2],[58,27]]],0,0],["inline","icon-box",[],["name","image"],["loc",[null,[59,2],[59,27]]],0,0],["inline","icon-box",[],["name","image-add"],["loc",[null,[60,2],[60,31]]],0,0],["inline","icon-box",[],["name","image-remove"],["loc",[null,[61,2],[61,34]]],0,0],["inline","icon-box",[],["name","information"],["loc",[null,[62,2],[62,33]]],0,0],["inline","icon-box",[],["name","italics"],["loc",[null,[63,2],[63,29]]],0,0],["inline","icon-box",[],["name","link"],["loc",[null,[64,2],[64,26]]],0,0],["inline","icon-box",[],["name","loading"],["loc",[null,[65,2],[65,29]]],0,0],["inline","icon-box",[],["name","lock"],["loc",[null,[66,2],[66,26]]],0,0],["inline","icon-box",[],["name","magnifying-glass"],["loc",[null,[67,2],[67,38]]],0,0],["inline","icon-box",[],["name","mail"],["loc",[null,[68,2],[68,26]]],0,0],["inline","icon-box",[],["name","map"],["loc",[null,[69,2],[69,25]]],0,0],["inline","icon-box",[],["name","megaphone"],["loc",[null,[70,2],[70,31]]],0,0],["inline","icon-box",[],["name","menu"],["loc",[null,[71,2],[71,26]]],0,0],["inline","icon-box",[],["name","menu-control"],["loc",[null,[72,2],[72,34]]],0,0],["inline","icon-box",[],["name","more"],["loc",[null,[73,2],[73,26]]],0,0],["inline","icon-box",[],["name","note"],["loc",[null,[74,2],[74,26]]],0,0],["inline","icon-box",[],["name","numbered-list"],["loc",[null,[75,2],[75,35]]],0,0],["inline","icon-box",[],["name","pages"],["loc",[null,[76,2],[76,27]]],0,0],["inline","icon-box",[],["name","pencil"],["loc",[null,[77,2],[77,28]]],0,0],["inline","icon-box",[],["name","play"],["loc",[null,[78,2],[78,26]]],0,0],["inline","icon-box",[],["name","plus"],["loc",[null,[79,2],[79,26]]],0,0],["inline","icon-box",[],["name","question"],["loc",[null,[80,2],[80,30]]],0,0],["inline","icon-box",[],["name","quote"],["loc",[null,[81,2],[81,27]]],0,0],["inline","icon-box",[],["name","refresh"],["loc",[null,[82,2],[82,29]]],0,0],["inline","icon-box",[],["name","reply"],["loc",[null,[83,2],[83,27]]],0,0],["inline","icon-box",[],["name","reply-arrow"],["loc",[null,[84,2],[84,33]]],0,0],["inline","icon-box",[],["name","share"],["loc",[null,[85,2],[85,27]]],0,0],["inline","icon-box",[],["name","text"],["loc",[null,[86,2],[86,26]]],0,0],["inline","icon-box",[],["name","trash"],["loc",[null,[87,2],[87,27]]],0,0],["inline","icon-box",[],["name","trash-open"],["loc",[null,[88,2],[88,32]]],0,0],["inline","icon-box",[],["name","undo"],["loc",[null,[89,2],[89,26]]],0,0],["inline","icon-box",[],["name","unlock"],["loc",[null,[90,2],[90,28]]],0,0],["inline","icon-box",[],["name","upload"],["loc",[null,[91,2],[91,28]]],0,0],["inline","icon-box",[],["name","upvote"],["loc",[null,[92,2],[92,28]]],0,0],["inline","icon-box",[],["name","user"],["loc",[null,[93,2],[93,26]]],0,0],["inline","icon-box",[],["name","video-camera"],["loc",[null,[94,2],[94,34]]],0,0],["block","component-demo",[],["codeOnly",!0],1,null,["loc",[null,[97,1],[99,20]]]],["inline","icon-box",[],["name","alert","size","small"],["loc",[null,[107,2],[107,40]]],0,0],["inline","icon-box",[],["name","bold","size","small"],["loc",[null,[108,2],[108,39]]],0,0],["inline","icon-box",[],["name","bookmark","size","small"],["loc",[null,[109,2],[109,43]]],0,0],["inline","icon-box",[],["name","bullet-list","size","small"],["loc",[null,[110,2],[110,46]]],0,0],["inline","icon-box",[],["name","checkmark","size","small"],["loc",[null,[111,2],[111,44]]],0,0],["inline","icon-box",[],["name","clipboard","size","small"],["loc",[null,[112,2],[112,44]]],0,0],["inline","icon-box",[],["name","community","size","small"],["loc",[null,[113,2],[113,44]]],0,0],["inline","icon-box",[],["name","eye","size","small"],["loc",[null,[114,2],[114,38]]],0,0],["inline","icon-box",[],["name","eye-crossed","size","small"],["loc",[null,[115,2],[115,46]]],0,0],["inline","icon-box",[],["name","house","size","small"],["loc",[null,[116,2],[116,40]]],0,0],["inline","icon-box",[],["name","italics","size","small"],["loc",[null,[117,2],[117,42]]],0,0],["inline","icon-box",[],["name","lock","size","small"],["loc",[null,[118,2],[118,39]]],0,0],["inline","icon-box",[],["name","menu-control","size","small"],["loc",[null,[119,2],[119,47]]],0,0],["inline","icon-box",[],["name","numbered-list","size","small"],["loc",[null,[120,2],[120,48]]],0,0],["inline","icon-box",[],["name","pages","size","small"],["loc",[null,[121,2],[121,40]]],0,0],["inline","icon-box",[],["name","pencil","size","small"],["loc",[null,[122,2],[122,41]]],0,0],["inline","icon-box",[],["name","quote","size","small"],["loc",[null,[123,2],[123,40]]],0,0],["inline","icon-box",[],["name","reply","size","small"],["loc",[null,[124,2],[124,40]]],0,0],["inline","icon-box",[],["name","reply-arrow","size","small"],["loc",[null,[125,2],[125,46]]],0,0],["inline","icon-box",[],["name","share","size","small"],["loc",[null,[126,2],[126,40]]],0,0],["inline","icon-box",[],["name","text","size","small"],["loc",[null,[127,2],[127,39]]],0,0],["inline","icon-box",[],["name","trash","size","small"],["loc",[null,[128,2],[128,40]]],0,0],["inline","icon-box",[],["name","trash-open","size","small"],["loc",[null,[129,2],[129,45]]],0,0],["inline","icon-box",[],["name","unlock","size","small"],["loc",[null,[130,2],[130,41]]],0,0],["inline","icon-box",[],["name","upvote","size","small"],["loc",[null,[131,2],[131,41]]],0,0],["block","component-demo",[],["codeOnly",!0],2,null,["loc",[null,[134,1],[136,20]]]],["inline","icon-box",[],["name","dropdown","size","tiny"],["loc",[null,[144,2],[144,42]]],0,0],["inline","icon-box",[],["name","menu-control","size","tiny"],["loc",[null,[145,2],[145,46]]],0,0],["inline","icon-box",[],["name","reply","size","tiny"],["loc",[null,[146,2],[146,39]]],0,0],["inline","icon-box",[],["name","upvote","size","tiny"],["loc",[null,[147,2],[147,40]]],0,0],["inline","icon-box",[],["name","upvote-reply","size","tiny"],["loc",[null,[148,2],[148,46]]],0,0],["block","component-demo",[],["codeOnly",!0],3,null,["loc",[null,[151,1],[153,20]]]],["inline","icon-box",[],["name","facebook"],["loc",[null,[162,2],[162,30]]],0,0],["inline","icon-box",[],["name","googleplus"],["loc",[null,[163,2],[163,32]]],0,0],["inline","icon-box",[],["name","instagram"],["loc",[null,[164,2],[164,31]]],0,0],["inline","icon-box",[],["name","line"],["loc",[null,[165,2],[165,26]]],0,0],["inline","icon-box",[],["name","meneame"],["loc",[null,[166,2],[166,29]]],0,0],["inline","icon-box",[],["name","nk"],["loc",[null,[167,2],[167,24]]],0,0],["inline","icon-box",[],["name","odnoklassniki"],["loc",[null,[168,2],[168,35]]],0,0],["inline","icon-box",[],["name","qzone"],["loc",[null,[169,2],[169,27]]],0,0],["inline","icon-box",[],["name","reddit"],["loc",[null,[170,2],[170,28]]],0,0],["inline","icon-box",[],["name","tumblr"],["loc",[null,[171,2],[171,28]]],0,0],["inline","icon-box",[],["name","twitter"],["loc",[null,[172,2],[172,29]]],0,0],["inline","icon-box",[],["name","vkontakte"],["loc",[null,[173,2],[173,31]]],0,0],["inline","icon-box",[],["name","weibo"],["loc",[null,[174,2],[174,27]]],0,0],["inline","icon-box",[],["name","wykop"],["loc",[null,[175,2],[175,27]]],0,0],["inline","icon-box",[],["name","youtube"],["loc",[null,[176,2],[176,29]]],0,0],["inline","icon-box",[],["name","linkedin"],["loc",[null,[177,2],[177,30]]],0,0],["block","component-demo",[],["codeOnly",!0],4,null,["loc",[null,[180,1],[182,20]]]],["inline","asset-box",[],["group","company-store","name","appstore","height",50],["loc",[null,[199,2],[199,63]]],0,0],["inline","asset-box",[],["group","company-store","name","googleplay","height",50],["loc",[null,[200,2],[200,65]]],0,0],["block","component-demo",[],["codeOnly",!0],5,null,["loc",[null,[203,1],[205,20]]]],["inline","asset-box",[],["group","avatar-badges","name","admin","class","is-avatar-badge","height",24,"width",24],["loc",[null,[220,2],[220,93]]],0,0],["inline","asset-box",[],["group","avatar-badges","name","content-moderator","class","is-avatar-badge","height",24,"width",24],["loc",[null,[221,2],[221,105]]],0,0],["inline","asset-box",[],["group","avatar-badges","name","discussion-moderator","class","is-avatar-badge","height",24,"width",24],["loc",[null,[222,2],[222,108]]],0,0],["inline","asset-box",[],["group","avatar-badges","name","helper","class","is-avatar-badge","height",24,"width",24],["loc",[null,[223,2],[223,94]]],0,0],["inline","asset-box",[],["group","avatar-badges","name","staff","class","is-avatar-badge","height",24,"width",24],["loc",[null,[224,2],[224,93]]],0,0],["inline","asset-box",[],["group","avatar-badges","name","vstf","class","is-avatar-badge","height",24,"width",24],["loc",[null,[225,2],[225,92]]],0,0],["block","component-demo",[],["codeOnly",!0],6,null,["loc",[null,[228,1],[230,20]]]]],locals:[],templates:[e,t,a,n,r,d,l]}}())}),define("design-system/templates/route-components/avatars",["exports"],function(e){e.default=Ember.HTMLBars.template(function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:10,column:1},end:{line:12,column:1}},moduleName:"design-system/templates/route-components/avatars.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(1);
 return n[0]=e.createMorphAt(t,0,0,a),e.insertBoundary(t,0),n},statements:[["inline","wds-avatar",[],["src",["subexpr","concat",[["get","rootURL",["loc",[null,[11,25],[11,32]]],0,0,0,0],"images/craig.jpg"],[],["loc",[null,[11,17],[11,52]]],0,0],"alt","user name"],["loc",[null,[11,0],[11,70]]],0,0]],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:1,column:0},end:{line:14,column:0}},moduleName:"design-system/templates/route-components/avatars.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createElement("h1"),n=e.createTextNode("Avatars");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");e.appendChild(t,a);var a=e.createElement("p"),n=e.createTextNode("\n\tAvatars across Fandom should be circular with a 2px internal border.\n");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","avatar-circle");var r=e.createTextNode("Circle avatar");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("To display an avatar image encapsulated in a circle, use ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-avatar");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" class in your ");e.appendChild(n,r);var r=e.createElement("code"),d=e.createTextNode("<img>");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" tag.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(1);return n[0]=e.createMorphAt(e.childAt(t,[4]),5,5),n},statements:[["block","component-demo",[],[],0,null,["loc",[null,[10,1],[12,20]]]]],locals:[],templates:[e]}}())}),define("design-system/templates/route-components/buttons",["exports"],function(e){e.default=Ember.HTMLBars.template(function(){var e=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:26,column:2},end:{line:26,column:31}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Primary button");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),t=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:27,column:2},end:{line:27,column:47}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Primary disabled");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:25,column:1},end:{line:28,column:1}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(2);return n[0]=e.createMorphAt(t,1,1,a),n[1]=e.createMorphAt(t,3,3,a),n},statements:[["block","wds-button",[],[],0,null,["loc",[null,[26,2],[26,46]]]],["block","wds-button",[],["disabled",!0],1,null,["loc",[null,[27,2],[27,62]]]]],locals:[],templates:[e,t]}}(),t=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:35,column:2},end:{line:35,column:58}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Secondary button");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),t=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:36,column:2},end:{line:36,column:74}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Secondary disabled");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:34,column:1},end:{line:37,column:1}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(2);return n[0]=e.createMorphAt(t,1,1,a),n[1]=e.createMorphAt(t,3,3,a),n},statements:[["block","wds-button",[],["class","wds-is-secondary"],0,null,["loc",[null,[35,2],[35,73]]]],["block","wds-button",[],["class","wds-is-secondary","disabled",!0],1,null,["loc",[null,[36,2],[36,89]]]]],locals:[],templates:[e,t]}}(),a=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:44,column:2},end:{line:44,column:48}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Text button");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),t=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:45,column:2},end:{line:45,column:64}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Text disabled");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:43,column:1},end:{line:46,column:1}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(2);return n[0]=e.createMorphAt(t,1,1,a),n[1]=e.createMorphAt(t,3,3,a),n},statements:[["block","wds-button",[],["class","wds-is-text"],0,null,["loc",[null,[44,2],[44,63]]]],["block","wds-button",[],["class","wds-is-text","disabled",!0],1,null,["loc",[null,[45,2],[45,79]]]]],locals:[],templates:[e,t]}}(),n=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:53,column:2},end:{line:53,column:24}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Primary");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),t=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:54,column:2},end:{line:54,column:51}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Secondary");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),a=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:55,column:2},end:{line:55,column:41}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Text");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:52,column:1},end:{line:56,column:1}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(3);return n[0]=e.createMorphAt(t,1,1,a),n[1]=e.createMorphAt(t,3,3,a),n[2]=e.createMorphAt(t,5,5,a),n},statements:[["block","wds-button",[],[],0,null,["loc",[null,[53,2],[53,39]]]],["block","wds-button",[],["class","wds-is-secondary"],1,null,["loc",[null,[54,2],[54,66]]]],["block","wds-button",[],["class","wds-is-text"],2,null,["loc",[null,[55,2],[55,56]]]]],locals:[],templates:[e,t,a]}}(),r=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:63,column:2},end:{line:63,column:48}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Primary");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),t=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:64,column:2},end:{line:64,column:67}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Secondary");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),a=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:65,column:2},end:{line:65,column:57}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Text");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:62,column:1},end:{line:66,column:1}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(3);return n[0]=e.createMorphAt(t,1,1,a),n[1]=e.createMorphAt(t,3,3,a),n[2]=e.createMorphAt(t,5,5,a),n},statements:[["block","wds-button",[],["class","wds-is-squished"],0,null,["loc",[null,[63,2],[63,63]]]],["block","wds-button",[],["class","wds-is-secondary wds-is-squished"],1,null,["loc",[null,[64,2],[64,82]]]],["block","wds-button",[],["class","wds-is-text wds-is-squished"],2,null,["loc",[null,[65,2],[65,72]]]]],locals:[],templates:[e,t,a]}}(),d=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:70,column:2},end:{line:76,column:2}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("html[lang^='zh'] &__start-a-wiki-button {\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tpadding: 9px 12px 8px;\n}\n");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),l=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:87,column:2},end:{line:87,column:49}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Primary");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),t=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:88,column:2},end:{line:88,column:68}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Secondary");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),a=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:89,column:2},end:{line:89,column:58}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Text");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:86,column:1},end:{line:90,column:1}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(3);return n[0]=e.createMorphAt(t,1,1,a),n[1]=e.createMorphAt(t,3,3,a),n[2]=e.createMorphAt(t,5,5,a),n},statements:[["block","wds-button",[],["class","wds-is-stretched"],0,null,["loc",[null,[87,2],[87,64]]]],["block","wds-button",[],["class","wds-is-secondary wds-is-stretched"],1,null,["loc",[null,[88,2],[88,83]]]],["block","wds-button",[],["class","wds-is-text wds-is-stretched"],2,null,["loc",[null,[89,2],[89,73]]]]],locals:[],templates:[e,t,a]}}(),o=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:97,column:2},end:{line:97,column:89}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createComment("");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(1);return n[0]=e.createMorphAt(t,0,0,a),e.insertBoundary(t,0),e.insertBoundary(t,null),n},statements:[["inline","wds-icon",[],["name","facebook"],["loc",[null,[97,61],[97,89]]],0,0]],locals:[],templates:[]}}(),t=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:98,column:2},end:{line:98,column:77}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createComment("");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(1);return n[0]=e.createMorphAt(t,0,0,a),e.insertBoundary(t,0),e.insertBoundary(t,null),n},statements:[["inline","wds-icon",[],["name","nk"],["loc",[null,[98,55],[98,77]]],0,0]],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:96,column:1},end:{line:99,column:1}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(2);return n[0]=e.createMorphAt(t,1,1,a),n[1]=e.createMorphAt(t,3,3,a),n},statements:[["block","wds-button",[],["class","wds-is-square wds-is-facebook-color"],0,null,["loc",[null,[97,2],[97,104]]]],["block","wds-button",[],["class","wds-is-square wds-is-nk-color"],1,null,["loc",[null,[98,2],[98,92]]]]],locals:[],templates:[e,t]}}(),i=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:106,column:2},end:{line:106,column:79}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Multiline button label with 3rd line");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:105,column:1},end:{line:107,column:1}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(1);return n[0]=e.createMorphAt(t,1,1,a),n},statements:[["block","wds-button",[],["class","fixed-width-140px"],0,null,["loc",[null,[106,2],[106,94]]]]],locals:[],templates:[e]}}(),p=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:114,column:2},end:{line:114,column:49}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Link button");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),t=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:115,column:2},end:{line:115,column:84}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("Secondary link button");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:113,column:1},end:{line:116,column:1}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n\t\t");e.appendChild(t,a);var a=e.createComment("");e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(2);return n[0]=e.createMorphAt(t,1,1,a),n[1]=e.createMorphAt(t,3,3,a),n},statements:[["block","wds-button",[],["tagName","a","href","#"],0,null,["loc",[null,[114,2],[114,64]]]],["block","wds-button",[],["tagName","a","href","#","class","wds-is-secondary"],1,null,["loc",[null,[115,2],[115,99]]]]],locals:[],templates:[e,t]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:1,column:0},end:{line:118,column:0}},moduleName:"design-system/templates/route-components/buttons.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createElement("h1"),n=e.createTextNode("Buttons");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");e.appendChild(t,a);var a=e.createElement("p"),n=e.createTextNode("\n\tButtons provide a way for users to interact with our applications.\n\tThey can contain text, icons, or both and come in three different sizes: standard, squished, and stretched.\n\tTo help with the CTA hierarchy on a screen buttons can be displayed as primary (filled), secondary (outlined),\n\tor just text (no container). Choosing the right button style ties directly to the importance of it in relation\n\tto the content around it on the screen.\n");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");e.appendChild(t,a);var a=e.createElement("p"),n=e.createTextNode("\n\tThe HTML ");e.appendChild(a,n);var n=e.createElement("code"),r=e.createTextNode("<button>");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode(" element represents a clickable button.\n\tIt provides a way for a user to interact with the application. Add ");e.appendChild(a,n);var n=e.createElement("code");e.setAttribute(n,"class","format-code");var r=e.createTextNode(".wds-button");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\tclass to apply Fandom Design System styling. This results with a default Primary button.\n\tThere are two more base variants: Secondary and Text.\n");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");e.appendChild(t,a);var a=e.createElement("p"),n=e.createTextNode("\n\tPassing additional ");e.appendChild(a,n);var n=e.createElement("code"),r=e.createTextNode("disabled");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode(" attribute will change button's styling and functionality.\n\tThis Boolean attribute indicates that the user cannot interact with the button.\n\tOther ");e.appendChild(a,n);var n=e.createElement("a");e.setAttribute(n,"href","https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes");var r=e.createTextNode("\n\tvalid HTML attributes");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode(" may be passed as well.\n");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","primary");var r=e.createTextNode("Primary buttons");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("Default version for general use.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","secondary");var r=e.createTextNode("Secondary buttons");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("Adding class ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-is-secondary");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" changes the button's looks. It is used to create a button that draws less user's attention.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","text");var r=e.createTextNode("Text buttons");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("These buttons are denoted with ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-is-text");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" class. They are the least obtrusive. Nevertheless, their paddings remain untouched, which provides the same clickable area.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","sizes:regular");var r=e.createTextNode("Button sizes: regular");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("Size of the button of any aforementioned variant can be adjusted. These are the default sizes of the buttons — for comparison.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","sizes:squished");var r=e.createTextNode("Button sizes: squished");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("To make the button smaller use ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-is-squished");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" class. This can help with fitting a button in tighter layouts.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n);var n=e.createTextNode("\t");e.appendChild(a,n);var n=e.createElement("p");e.setAttribute(n,"class","warning-note");var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createElement("strong"),d=e.createTextNode("Important note:");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" for readability purposes we use different styling for squished button in Global Navigation for Chinese - the font is larger and has bold removed.\n\t\tThis is why in ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode("/scss/wds-components/_global-navigation.scss");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" you will find the following piece of code:\n");e.appendChild(n,r);var r=e.createComment("");e.appendChild(n,r);var r=e.createTextNode("\n\t\tPlease remember, that this solution is only single-use and temporary. It is not recommended to apply it as a common solution in other places/components.\n\t\tIf it becomes a broader issue, more versatile and maintainable solution must be implemented.\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","sizes:stretched");var r=e.createTextNode("Button sizes: stretched");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("For a button greater in size use ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-is-stretched");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" class. This may come in handy to draw more user's attention to the button and increase the clickable area around the label.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","sizes:stretched");var r=e.createTextNode("Button sizes: square");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("For a fixed size square button use ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-is-square");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" class. This button will be 45px x 45px with content centered inside. This type of button is mostly used for icons, example: social icons.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","other:multiline");var r=e.createTextNode("Other usages: multiline button");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("Button labels can wrap to multiple lines.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","other:link");var r=e.createTextNode("Other usages: link button");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("When no special handlers of the click event are needed — just navigation to a certain URL, consider using an anchor tag ");e.appendChild(n,r);var r=e.createElement("code"),d=e.createTextNode("<a>");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" styled as a button. It is achieved by adding a ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-button");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" class just like for the ");e.appendChild(n,r);var r=e.createElement("code"),d=e.createTextNode("<button>");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" element. Optionally add any other desired button classes.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=e.childAt(t,[16]),r=new Array(10);return r[0]=e.createMorphAt(e.childAt(t,[8]),5,5),r[1]=e.createMorphAt(e.childAt(t,[10]),5,5),r[2]=e.createMorphAt(e.childAt(t,[12]),5,5),r[3]=e.createMorphAt(e.childAt(t,[14]),5,5),r[4]=e.createMorphAt(n,5,5),r[5]=e.createMorphAt(e.childAt(n,[7]),5,5),r[6]=e.createMorphAt(e.childAt(t,[18]),5,5),r[7]=e.createMorphAt(e.childAt(t,[20]),5,5),r[8]=e.createMorphAt(e.childAt(t,[22]),5,5),r[9]=e.createMorphAt(e.childAt(t,[24]),5,5),
 r},statements:[["block","component-demo",[],[],0,null,["loc",[null,[25,1],[28,20]]]],["block","component-demo",[],[],1,null,["loc",[null,[34,1],[37,20]]]],["block","component-demo",[],[],2,null,["loc",[null,[43,1],[46,20]]]],["block","component-demo",[],[],3,null,["loc",[null,[52,1],[56,20]]]],["block","component-demo",[],[],4,null,["loc",[null,[62,1],[66,20]]]],["block","code-sample",[],["language","scss"],5,null,["loc",[null,[70,2],[76,18]]]],["block","component-demo",[],[],6,null,["loc",[null,[86,1],[90,20]]]],["block","component-demo",[],[],7,null,["loc",[null,[96,1],[99,20]]]],["block","component-demo",[],[],8,null,["loc",[null,[105,1],[107,20]]]],["block","component-demo",[],[],9,null,["loc",[null,[113,1],[116,20]]]]],locals:[],templates:[e,t,a,n,r,d,l,o,i,p]}}())}),define("design-system/templates/route-components/dropdowns",["exports"],function(e){e.default=Ember.HTMLBars.template(function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:15,column:1},end:{line:20,column:1}},moduleName:"design-system/templates/route-components/dropdowns.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createElement("div");e.setAttribute(a,"class","wds-dropdown");var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","wds-dropdown__toggle");var r=e.createTextNode("…");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","wds-dropdown__content");var r=e.createTextNode("…");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),t=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:50,column:1},end:{line:66,column:1}},moduleName:"design-system/templates/route-components/dropdowns.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createElement("div");e.setAttribute(a,"class","wds-dropdown");var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","wds-dropdown__toggle");var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createElement("span"),d=e.createTextNode("Default dropdown aligned to left");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r),e.setNamespace("http://www.w3.org/2000/svg");var r=e.createElement("svg");e.setAttribute(r,"class","wds-icon wds-dropdown__toggle-chevron");var d=e.createTextNode("\n\t\t\t");e.appendChild(r,d);var d=e.createElement("use");e.setAttribute(d,"xmlns:xlink","http://www.w3.org/1999/xlink"),e.setAttributeNS(d,"http://www.w3.org/1999/xlink","xlink:href","#wds-icons-dropdown"),e.appendChild(r,d);var d=e.createTextNode("\n\t\t");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode("\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n),e.setNamespace(null);var n=e.createElement("div");e.setAttribute(n,"class","wds-dropdown__content");var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createElement("ul");e.setAttribute(r,"class","wds-list");var d=e.createTextNode("\n\t\t\t");e.appendChild(r,d);var d=e.createElement("li"),l=e.createTextNode("List item 1");e.appendChild(d,l),e.appendChild(r,d);var d=e.createTextNode("\n\t\t\t");e.appendChild(r,d);var d=e.createElement("li"),l=e.createTextNode("List item 2");e.appendChild(d,l),e.appendChild(r,d);var d=e.createTextNode("\n\t\t\t");e.appendChild(r,d);var d=e.createElement("li"),l=e.createTextNode("List item 3");e.appendChild(d,l),e.appendChild(r,d);var d=e.createTextNode("\n\t\t");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode("\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),a=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:89,column:1},end:{line:94,column:1}},moduleName:"design-system/templates/route-components/dropdowns.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createElement("div");e.setAttribute(a,"class","wds-dropdown");var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","wds-dropdown__toggle");var r=e.createTextNode("…");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","wds-dropdown__content wds-is-right-aligned");var r=e.createTextNode("…");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),n=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:117,column:1},end:{line:122,column:1}},moduleName:"design-system/templates/route-components/dropdowns.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createElement("div");e.setAttribute(a,"class","wds-dropdown");var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","wds-dropdown__toggle");var r=e.createTextNode("…");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","wds-dropdown__content wds-is-dark");var r=e.createTextNode("…");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),r=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:128,column:2},end:{line:130,column:2}},moduleName:"design-system/templates/route-components/dropdowns.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\t\t\t");e.appendChild(t,a);var a=e.createElement("span"),n=e.createTextNode("Click me!");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}(),t=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:131,column:2},end:{line:137,column:2}},moduleName:"design-system/templates/route-components/dropdowns.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\t\t\t");e.appendChild(t,a);var a=e.createElement("ul");e.setAttribute(a,"class","wds-list");var n=e.createTextNode("\n\t\t\t\t");e.appendChild(a,n);var n=e.createElement("li"),r=e.createTextNode("List item 1");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t\t\t\t");e.appendChild(a,n);var n=e.createElement("li"),r=e.createTextNode("List item 2");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t\t\t\t");e.appendChild(a,n);var n=e.createElement("li"),r=e.createTextNode("List item 3");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t\t\t");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:127,column:1},end:{line:138,column:1}},moduleName:"design-system/templates/route-components/dropdowns.hbs"},isEmpty:!1,arity:1,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createComment("");e.appendChild(t,a);var a=e.createComment("");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(2);return n[0]=e.createMorphAt(t,0,0,a),n[1]=e.createMorphAt(t,1,1,a),e.insertBoundary(t,0),e.insertBoundary(t,null),n},statements:[["block","dropdown.toggle",[],[],0,null,["loc",[null,[128,2],[130,22]]]],["block","dropdown.content",[],[],1,null,["loc",[null,[131,2],[137,23]]]]],locals:["dropdown"],templates:[e,t]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:1,column:0},end:{line:140,column:0}},moduleName:"design-system/templates/route-components/dropdowns.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createElement("h1"),n=e.createTextNode("Dropdowns");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");e.appendChild(t,a);var a=e.createElement("p"),n=e.createTextNode("\n\tDropdowns allow users to select from a list and should be clearly labeled to communicate the content inside it.\n\tContent inside dropdowns should be grouped by relativity and ranked on importance and/or value to a user.\n");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","dropdowns-composition");var r=e.createTextNode("Dropdown composition");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("Dropdown component consists of 3 elements:");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("ul"),r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createElement("li"),d=e.createTextNode("dropdown container (wraps dropdown toggle and dropdown content)");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createElement("li"),d=e.createTextNode("dropdown toggle");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createElement("li"),d=e.createTextNode("dropdown content");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode("\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","dropdowns-interactions");var r=e.createTextNode("Interactions");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("\n\t\tWhen user clicks on a dropdown toggle you need to add ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode("wds-is-active");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode("\n\t\tclass to the parent ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-dropdown");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" element.\n\t\tThere should be only one dropdown open at any time, so you should also remove this class from all the other dropdowns.\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","dropdowns-default-variant");var r=e.createTextNode("Default");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("Default dropdown, aligned to left with delicate shadow.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","wds-dropdown wds-is-active");var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createElement("div");e.setAttribute(r,"class","wds-dropdown__toggle");var d=e.createTextNode("\n\t\t\t");e.appendChild(r,d);var d=e.createElement("span"),l=e.createTextNode("Default dropdown aligned to left");e.appendChild(d,l),e.appendChild(r,d);var d=e.createTextNode("\n\t\t\t");e.appendChild(r,d),e.setNamespace("http://www.w3.org/2000/svg");var d=e.createElement("svg");e.setAttribute(d,"class","wds-icon wds-dropdown__toggle-chevron");var l=e.createTextNode("\n\t\t\t\t");e.appendChild(d,l);var l=e.createElement("use");e.setAttribute(l,"xmlns:xlink","http://www.w3.org/1999/xlink"),e.setAttributeNS(l,"http://www.w3.org/1999/xlink","xlink:href","#wds-icons-dropdown"),e.appendChild(d,l);var l=e.createTextNode("\n\t\t\t");e.appendChild(d,l),e.appendChild(r,d);var d=e.createTextNode("\n\t\t");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r),e.setNamespace(null);var r=e.createElement("div");e.setAttribute(r,"class","wds-dropdown__content");var d=e.createTextNode("\n\t\t\t");e.appendChild(r,d);var d=e.createElement("ul");e.setAttribute(d,"class","wds-list");var l=e.createTextNode("\n\t\t\t\t");e.appendChild(d,l);var l=e.createElement("li"),o=e.createTextNode("List item 1");e.appendChild(l,o),e.appendChild(d,l);var l=e.createTextNode("\n\t\t\t\t");e.appendChild(d,l);var l=e.createElement("li"),o=e.createTextNode("List item 2");e.appendChild(l,o),e.appendChild(d,l);var l=e.createTextNode("\n\t\t\t\t");e.appendChild(d,l);var l=e.createElement("li"),o=e.createTextNode("List item 3");e.appendChild(l,o),e.appendChild(d,l);var l=e.createTextNode("\n\t\t\t");e.appendChild(d,l),e.appendChild(r,d);var d=e.createTextNode("\n\t\t");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode("\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","dropdowns-right-aligned-variant");var r=e.createTextNode("Right aligned variant");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("\n\t\tDropdown aligned to the right side of the container. To align dropdown to right, you have to add ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-is-right-aligned");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" class to ");e.appendChild(n,r);var r=e.createElement("code"),d=e.createTextNode("wds-dropdown__content");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" element.\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","wds-dropdown wds-is-active");var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createElement("div");e.setAttribute(r,"class","wds-dropdown__toggle");var d=e.createTextNode("\n\t\t\t");e.appendChild(r,d);var d=e.createElement("span"),l=e.createTextNode("Right aligned dropdown");e.appendChild(d,l),e.appendChild(r,d);var d=e.createTextNode("\n\t\t\t");e.appendChild(r,d),e.setNamespace("http://www.w3.org/2000/svg");var d=e.createElement("svg");e.setAttribute(d,"class","wds-icon wds-dropdown__toggle-chevron");var l=e.createTextNode("\n\t\t\t\t");e.appendChild(d,l);var l=e.createElement("use");e.setAttribute(l,"xmlns:xlink","http://www.w3.org/1999/xlink"),e.setAttributeNS(l,"http://www.w3.org/1999/xlink","xlink:href","#wds-icons-dropdown"),e.appendChild(d,l);var l=e.createTextNode("\n\t\t\t");e.appendChild(d,l),e.appendChild(r,d);var d=e.createTextNode("\n\t\t");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r),e.setNamespace(null);var r=e.createElement("div");e.setAttribute(r,"class","wds-dropdown__content wds-is-right-aligned");var d=e.createTextNode("\n\t\t\t");e.appendChild(r,d);var d=e.createElement("ul");e.setAttribute(d,"class","wds-list");var l=e.createTextNode("\n\t\t\t\t");e.appendChild(d,l);var l=e.createElement("li"),o=e.createTextNode("List item 1");e.appendChild(l,o),e.appendChild(d,l);var l=e.createTextNode("\n\t\t\t\t");e.appendChild(d,l);var l=e.createElement("li"),o=e.createTextNode("List item 2");e.appendChild(l,o),e.appendChild(d,l);var l=e.createTextNode("\n\t\t\t\t");e.appendChild(d,l);var l=e.createElement("li"),o=e.createTextNode("List item 3");e.appendChild(l,o),e.appendChild(d,l);var l=e.createTextNode("\n\t\t\t");e.appendChild(d,l),e.appendChild(r,d);var d=e.createTextNode("\n\t\t");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode("\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","dropdowns-dark-variant");var r=e.createTextNode("Dark variant");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("\n\t\tDropdown with increased shadow intensity. To increase dropdown shadow intensity, you have to add ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-is-dark");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" class to ");e.appendChild(n,r);var r=e.createElement("code"),d=e.createTextNode("wds-dropdown__content");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" element.\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("div");e.setAttribute(n,"class","wds-dropdown wds-is-active");var r=e.createTextNode("\n\t\t");e.appendChild(n,r);var r=e.createElement("div");e.setAttribute(r,"class","wds-dropdown__toggle");var d=e.createTextNode("\n\t\t\t");e.appendChild(r,d);var d=e.createElement("span"),l=e.createTextNode("Dark variant of dropdown");e.appendChild(d,l),e.appendChild(r,d);var d=e.createTextNode("\n\t\t\t");e.appendChild(r,d),e.setNamespace("http://www.w3.org/2000/svg");var d=e.createElement("svg");e.setAttribute(d,"class","wds-icon wds-dropdown__toggle-chevron");var l=e.createTextNode("\n\t\t\t\t");e.appendChild(d,l);var l=e.createElement("use");e.setAttribute(l,"xmlns:xlink","http://www.w3.org/1999/xlink"),e.setAttributeNS(l,"http://www.w3.org/1999/xlink","xlink:href","#wds-icons-dropdown"),e.appendChild(d,l);var l=e.createTextNode("\n\t\t\t");e.appendChild(d,l),e.appendChild(r,d);var d=e.createTextNode("\n\t\t");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode("\n\t\t");e.appendChild(n,r),e.setNamespace(null);var r=e.createElement("div");e.setAttribute(r,"class","wds-dropdown__content wds-is-dark");var d=e.createTextNode("\n\t\t\t");e.appendChild(r,d);var d=e.createElement("ul");e.setAttribute(d,"class","wds-list");var l=e.createTextNode("\n\t\t\t\t");e.appendChild(d,l);var l=e.createElement("li"),o=e.createTextNode("List item 1");e.appendChild(l,o),e.appendChild(d,l);var l=e.createTextNode("\n\t\t\t\t");e.appendChild(d,l);var l=e.createElement("li"),o=e.createTextNode("List item 2");e.appendChild(l,o),e.appendChild(d,l);var l=e.createTextNode("\n\t\t\t\t");e.appendChild(d,l);var l=e.createElement("li"),o=e.createTextNode("List item 3");e.appendChild(l,o),e.appendChild(d,l);var l=e.createTextNode("\n\t\t\t");e.appendChild(d,l),e.appendChild(r,d);var d=e.createTextNode("\n\t\t");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode("\n\t");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","dropdowns-demo");var r=e.createTextNode("Demo");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(5);return n[0]=e.createMorphAt(e.childAt(t,[4]),7,7),n[1]=e.createMorphAt(e.childAt(t,[8]),7,7),n[2]=e.createMorphAt(e.childAt(t,[10]),7,7),n[3]=e.createMorphAt(e.childAt(t,[12]),7,7),n[4]=e.createMorphAt(e.childAt(t,[14]),3,3),n},statements:[["block","component-demo",[],["codeOnly",!0],0,null,["loc",[null,[15,1],[20,20]]]],["block","component-demo",[],["codeOnly",!0],1,null,["loc",[null,[50,1],[66,20]]]],["block","component-demo",[],["codeOnly",!0],2,null,["loc",[null,[89,1],[94,20]]]],["block","component-demo",[],["codeOnly",!0],3,null,["loc",[null,[117,1],[122,20]]]],["block","wds-dropdown",[],[],4,null,["loc",[null,[127,1],[138,18]]]]],locals:[],templates:[e,t,a,n,r]}}())}),define("design-system/templates/route-components/lists",["exports"],function(e){e.default=Ember.HTMLBars.template(function(){var e=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:12,column:2},end:{line:17,column:2}},moduleName:"design-system/templates/route-components/lists.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\n\t");e.appendChild(t,a);var a=e.createElement("li"),n=e.createTextNode("List element 1");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\t");e.appendChild(t,a);var a=e.createElement("li"),n=e.createTextNode("List element 2");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\t");e.appendChild(t,a);var a=e.createElement("li"),n=e.createTextNode("List element 3");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:11,column:1},end:{line:18,column:1}},moduleName:"design-system/templates/route-components/lists.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createComment("");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(1);return n[0]=e.createMorphAt(t,0,0,a),e.insertBoundary(t,0),e.insertBoundary(t,null),n},statements:[["block","wds-list",[],[],0,null,["loc",[null,[12,2],[17,15]]]]],locals:[],templates:[e]}}(),t=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:26,column:2},end:{line:31,column:2}},moduleName:"design-system/templates/route-components/lists.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\n\t");e.appendChild(t,a);var a=e.createElement("li"),n=e.createTextNode("List element 1");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\t");e.appendChild(t,a);var a=e.createElement("li"),n=e.createTextNode("List element 2");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\t");e.appendChild(t,a);var a=e.createElement("li"),n=e.createTextNode("List element 3");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:25,column:1},end:{line:32,column:1}},moduleName:"design-system/templates/route-components/lists.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createComment("");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(1);return n[0]=e.createMorphAt(t,0,0,a),e.insertBoundary(t,0),e.insertBoundary(t,null),n},statements:[["block","wds-list",[],["class","wds-has-big-items"],0,null,["loc",[null,[26,2],[31,15]]]]],locals:[],templates:[e]}}(),a=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:40,column:2},end:{line:45,column:2}},moduleName:"design-system/templates/route-components/lists.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\n\t");e.appendChild(t,a);var a=e.createElement("li"),n=e.createTextNode("List element 1");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\t");e.appendChild(t,a);var a=e.createElement("li"),n=e.createTextNode("List element 2");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\t");e.appendChild(t,a);var a=e.createElement("li"),n=e.createTextNode("List element 3");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:39,column:1},end:{line:46,column:1}},moduleName:"design-system/templates/route-components/lists.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createComment("");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(1);return n[0]=e.createMorphAt(t,0,0,a),e.insertBoundary(t,0),e.insertBoundary(t,null),n},statements:[["block","wds-list",[],["class","wds-has-lines-between"],0,null,["loc",[null,[40,2],[45,15]]]]],locals:[],templates:[e]}}(),n=function(){var e=function(){return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:54,column:2},end:{line:59,column:2}},moduleName:"design-system/templates/route-components/lists.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createTextNode("\n\t");e.appendChild(t,a);var a=e.createElement("li"),n=e.createElement("a");e.setAttribute(n,"href","http://wikia.com");var r=e.createTextNode("Linked element 1");e.appendChild(n,r),e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\t");e.appendChild(t,a);var a=e.createElement("li"),n=e.createElement("a");e.setAttribute(n,"href","http://wikia.com");var r=e.createTextNode("Linked element 2");e.appendChild(n,r),e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\t");e.appendChild(t,a);var a=e.createElement("li"),n=e.createElement("a");e.setAttribute(n,"href","http://wikia.com");var r=e.createTextNode("Linked element 3");e.appendChild(n,r),e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(){return[]},statements:[],locals:[],templates:[]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:53,column:1},end:{line:60,column:1}},moduleName:"design-system/templates/route-components/lists.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createComment("");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(1);return n[0]=e.createMorphAt(t,0,0,a),e.insertBoundary(t,0),e.insertBoundary(t,null),n},statements:[["block","wds-list",[],["class","wds-is-linked"],0,null,["loc",[null,[54,2],[59,15]]]]],locals:[],templates:[e]}}();return{meta:{revision:"Ember@2.8.2",loc:{source:null,start:{line:1,column:0},end:{line:62,column:0}},moduleName:"design-system/templates/route-components/lists.hbs"},isEmpty:!1,arity:0,cachedFragment:null,hasRendered:!1,buildFragment:function(e){var t=e.createDocumentFragment(),a=e.createElement("h1"),n=e.createTextNode("Lists");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");e.appendChild(t,a);var a=e.createElement("p"),n=e.createTextNode("\n\tA list contains a single column of related options (based on the context around it) for the user to choose from.\n\tLists can contain text, icons, or both and can expand to multiple lines if needed.\n");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","list");var r=e.createTextNode("List");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("To display a regular list, add ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-list");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" class in your ");e.appendChild(n,r);var r=e.createElement("code"),d=e.createTextNode("<ul>");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" tag.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","big-list");var r=e.createTextNode("Big list");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("To display list with more space around its elements, add class ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-has-big-items");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(". This modificator makes padding broader and font size bigger in each element. ");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","list-with-separators");var r=e.createTextNode("List with line separator");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-has-lines-between");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" class adds subtle separator between each element of your list.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n\n");e.appendChild(t,a);var a=e.createElement("section"),n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("h2");e.setAttribute(n,"id","list-linked");var r=e.createTextNode("List with linked items");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\t");e.appendChild(a,n);var n=e.createElement("p"),r=e.createTextNode("For lists with linked elements, like menus, use class ");e.appendChild(n,r);var r=e.createElement("code");e.setAttribute(r,"class","format-code");var d=e.createTextNode(".wds-is-linked");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" — it expands ");e.appendChild(n,r);var r=e.createElement("code"),d=e.createTextNode("<a>");e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" node inside list elements to be fully clickable, without any gaps around. It is necessary to remember about adding anchor ");e.appendChild(n,r);var r=e.createElement("code"),d=e.createTextNode("<a>");
-e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" wrapping each elements content.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(4);return n[0]=e.createMorphAt(e.childAt(t,[4]),5,5),n[1]=e.createMorphAt(e.childAt(t,[6]),5,5),n[2]=e.createMorphAt(e.childAt(t,[8]),5,5),n[3]=e.createMorphAt(e.childAt(t,[10]),5,5),n},statements:[["block","component-demo",[],[],0,null,["loc",[null,[11,1],[18,20]]]],["block","component-demo",[],[],1,null,["loc",[null,[25,1],[32,20]]]],["block","component-demo",[],[],2,null,["loc",[null,[39,1],[46,20]]]],["block","component-demo",[],[],3,null,["loc",[null,[53,1],[60,20]]]]],locals:[],templates:[e,t,a,n]}}())}),define("design-system/utils/beautify",["exports","npm:highlight.js/lib/languages/scss","npm:highlight.js/lib/languages/xml"],function(e,t,a){function n(){l||(hljs.registerLanguage("scss",t.default),hljs.registerLanguage("xml",a.default))}function r(e,t){for(var a=new Array(t++ +1).join(d),n=new Array(t-1).join(d),l=void 0,o=0;o<e.children.length;o++)l=document.createTextNode("\n"+a),e.insertBefore(l,e.children[o]),r(e.children[o],t),e.lastElementChild==e.children[o]&&(l=document.createTextNode("\n"+n),e.appendChild(l));return e}e.registerHljsLanguage=n;var d="  ",l=!1;e.default=function(e){var t=document.createElement("div");return t.innerHTML=e.replace(/\n/g,"").replace(/<!---->/g,""),r(t,0).innerHTML.trim().replace(/disabled=""/g,"disabled")}}),define("design-system/config/environment",["ember"],function(e){var t="design-system";try{var a=t+"/config/environment",n=document.querySelector('meta[name="'+a+'"]').getAttribute("content"),r=JSON.parse(unescape(n)),d={default:r};return Object.defineProperty(d,"__esModule",{value:!0}),d}catch(e){throw new Error('Could not read config from meta tag with name "'+a+'".')}}),runningTests||require("design-system/app").default.create({name:"design-system",version:"5.1.0+4a67c4fe"});
\ No newline at end of file
+e.appendChild(r,d),e.appendChild(n,r);var r=e.createTextNode(" wrapping each elements content.");e.appendChild(n,r),e.appendChild(a,n);var n=e.createTextNode("\n\n");e.appendChild(a,n);var n=e.createComment("");e.appendChild(a,n),e.appendChild(t,a);var a=e.createTextNode("\n");return e.appendChild(t,a),t},buildRenderNodes:function(e,t,a){var n=new Array(4);return n[0]=e.createMorphAt(e.childAt(t,[4]),5,5),n[1]=e.createMorphAt(e.childAt(t,[6]),5,5),n[2]=e.createMorphAt(e.childAt(t,[8]),5,5),n[3]=e.createMorphAt(e.childAt(t,[10]),5,5),n},statements:[["block","component-demo",[],[],0,null,["loc",[null,[11,1],[18,20]]]],["block","component-demo",[],[],1,null,["loc",[null,[25,1],[32,20]]]],["block","component-demo",[],[],2,null,["loc",[null,[39,1],[46,20]]]],["block","component-demo",[],[],3,null,["loc",[null,[53,1],[60,20]]]]],locals:[],templates:[e,t,a,n]}}())}),define("design-system/utils/beautify",["exports","npm:highlight.js/lib/languages/scss","npm:highlight.js/lib/languages/xml"],function(e,t,a){function n(){l||(hljs.registerLanguage("scss",t.default),hljs.registerLanguage("xml",a.default))}function r(e,t){for(var a=new Array(t++ +1).join(d),n=new Array(t-1).join(d),l=void 0,o=0;o<e.children.length;o++)l=document.createTextNode("\n"+a),e.insertBefore(l,e.children[o]),r(e.children[o],t),e.lastElementChild==e.children[o]&&(l=document.createTextNode("\n"+n),e.appendChild(l));return e}e.registerHljsLanguage=n;var d="  ",l=!1;e.default=function(e){var t=document.createElement("div");return t.innerHTML=e.replace(/\n/g,"").replace(/<!---->/g,""),r(t,0).innerHTML.trim().replace(/disabled=""/g,"disabled")}}),define("design-system/config/environment",["ember"],function(e){var t="design-system";try{var a=t+"/config/environment",n=document.querySelector('meta[name="'+a+'"]').getAttribute("content"),r=JSON.parse(unescape(n)),d={default:r};return Object.defineProperty(d,"__esModule",{value:!0}),d}catch(e){throw new Error('Could not read config from meta tag with name "'+a+'".')}}),runningTests||require("design-system/app").default.create({name:"design-system",version:"5.2.0+43d73cd2"});
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 5655ca57e..4e41e042b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     
-<meta name="design-system/config/environment" content="%7B%22modulePrefix%22%3A%22design-system%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22design-system%22%2C%22version%22%3A%225.1.0+4a67c4fe%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
+<meta name="design-system/config/environment" content="%7B%22modulePrefix%22%3A%22design-system%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22design-system%22%2C%22version%22%3A%225.2.0+43d73cd2%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
 
     <link rel="stylesheet" href="/assets/vendor.css">
     <link rel="stylesheet" href="/assets/design-system.css">