Check in dist files for beta

.gitignore

@@ -10,7 +10,6 @@ npm-debug.log
 # Fabric files
 *.sublime-workspace
 docs.css
-dist
 
 # Docs files
 docs/app

dist/components/Breadcrumb/Breadcrumb.hbs

@@ -0,0 +1,17 @@
+<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
+<div class="ms-Breadcrumb {{#if props.customClasses}} {{props.customClasses}}{{/if}}">
+  <div class="ms-Breadcrumb-overflow">
+    <div class="ms-Breadcrumb-overflowButton ms-Icon ms-Icon--ellipsis" tabindex="1"></div>
+    <div class="ms-Breadcrumb-overflowMenu">
+      <ul class="ms-ContextualMenu is-open"></ul>
+    </div>
+  </div>
+  <ul class="ms-Breadcrumb-list">
+    {{#each props.items}}
+      <li class="ms-Breadcrumb-listItem">
+        <a class="ms-Breadcrumb-itemLink" tabindex="0">{{name}}</a>
+        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight"></i>
+      </li>
+    {{/each}}
+  </ul>
+</div>

dist/components/Breadcrumb/Breadcrumb.json

@@ -0,0 +1,8 @@
+{
+  "name": "Breadcrumb",
+  "template": "Breadcrumb.html",
+  "class": "ms-Breadcrumb",
+  "dependencies": [
+    "ContextualMenu"
+  ]
+}

dist/components/Breadcrumb/Breadcrumb.scss

@@ -0,0 +1,173 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Breadcrumb styles
+
+
+.ms-Breadcrumb {
+  @include ms-baseFont;
+  margin: 23px 0 1px;
+
+  &.is-overflow {
+    .ms-Breadcrumb-overflow {
+      display: inline;
+    }
+  }
+}
+
+.ms-Breadcrumb-chevron {
+  font-size: $ms-font-size-l;
+  color: $ms-color-neutralSecondary;
+  vertical-align: top;
+  margin: 10px 0;
+}
+
+.ms-Breadcrumb-list {
+  display: inline;
+  white-space: nowrap;
+  padding: 0;
+  margin: 0;
+
+  .ms-Breadcrumb-listItem {
+    list-style-type: none;
+    vertical-align: top;
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+
+    &:last-of-type {
+      .ms-Breadcrumb-chevron {
+        display: none;
+      }
+    }
+  }
+}
+
+.ms-Breadcrumb-overflow {
+  display: none;
+  position: relative;
+  margin-right: -4px;
+
+  .ms-Breadcrumb-overflowButton {
+    font-size: $ms-font-size-s;
+    display: inline-block;
+    color: $ms-color-themePrimary;
+    padding: 12px 8px 3px;
+    cursor: pointer;
+    vertical-align: top;
+  }
+}
+
+.ms-Breadcrumb-overflowMenu {
+  display: none;
+  position: absolute;
+
+  &.is-open {
+    display: block;
+    top: 36px;
+    left: 0;
+    @include drop-shadow;
+    background-color: $ms-color-white;
+    border: 1px solid $ms-color-neutralTertiaryAlt;
+    z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle);
+  }
+
+  &::before {
+    position: absolute;
+    @include drop-shadow;
+    top: -6px;
+    left: 6px;
+    content: ' ';
+    width: 16px;
+    height: 16px;
+    transform: rotate(45deg);
+    background-color: $ms-color-white;
+  }
+
+  .ms-ContextualMenu {
+    border: 0;
+    box-shadow: none;
+    position: relative;
+    width: 190px;
+
+    &.is-open {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.ms-Breadcrumb-itemLink,
+.ms-Breadcrumb-overflowButton {
+  text-decoration: none;
+  outline: transparent;
+
+  &:hover {
+    background-color: $ms-color-neutralLighter;
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: $ms-color-neutralSecondaryAlt solid 1px;
+    color: $ms-color-black;
+  }
+
+  &:active {
+    outline: transparent;
+    background-color: $ms-color-neutralTertiaryAlt;
+  }
+}
+
+.ms-Breadcrumb-itemLink {
+  font-weight: $ms-font-weight-light;
+  font-size: $ms-font-size-xl;
+  color: $ms-color-neutralPrimary;
+  display: inline-block;
+  padding: 0 4px;
+  max-width: 160px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+
+@media screen and (max-width: $ms-screen-md-max) {
+  .ms-Breadcrumb {
+    margin: 10px 0;
+  }
+
+  .ms-Breadcrumb-itemLink {
+    font-size: $ms-font-size-l;
+  }
+
+  .ms-Breadcrumb-chevron {
+    font-size: $ms-font-size-m;
+    margin-top: 7px;
+  }
+
+  .ms-Breadcrumb-overflow {
+    .ms-Breadcrumb-overflowButton {
+      padding-top: 8px;
+      padding-bottom: 3px;
+    }
+  }
+}
+
+@media screen and (max-width: $ms-screen-sm-max) {
+  .ms-Breadcrumb-itemLink {
+    font-size: $ms-font-size-m;
+    max-width: 116px;
+  }
+
+  .ms-Breadcrumb-chevron {
+    margin-top: 4px;
+  }
+
+  .ms-Breadcrumb-overflow {
+    .ms-Breadcrumb-overflowButton {
+      padding-top: 5px;
+      padding-bottom: 3px;
+    }
+  }
+}

dist/components/Button/Button.hbs

@@ -0,0 +1,16 @@
+<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
+<{{props.tag}} 
+  class="ms-Button {{props.customClasses}}
+   {{#if props.modifier}} ms-Button--{{props.modifier}} {{/if}} 
+    {{#if props.label}}{{else}}ms-Button--noLabel{{/if}}">
+  {{#if props.icon}}
+    <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--{{props.icon}}"></i></span>
+  {{/if}}
+  <span class="ms-Button-label">{{props.label}}</span>
+  {{#if props.description}}
+    <span class="ms-Button-description">{{props.description}}</span>
+  {{/if}}
+  {{#if props.dropdownIcon}}
+    <span class="ms-Button-dropdownIcon"><i class="ms-Icon ms-Icon--{{props.dropdownIcon}}"></i></span>
+  {{/if}}
+</{{props.tag}}>

dist/components/Button/Button.json

@@ -0,0 +1,17 @@
+{
+  "name": "Button",
+  "template": "Button.html",
+  "class": "ms-Button",
+  "wrapBranches": true,
+  "fileOrder": [
+    "Button.html",
+    "Button.Primary.html",
+    "Button.Hero.html",
+    "Button.Compound.html",
+    "Button.Submenu.html"
+  ],
+  "props":  {
+    "label": "Create Account",
+    "tag": "button"
+  }
+}