docs: add changelog for 4.2.0

closes #17246

.bazelrc

@@ -0,0 +1,6 @@
+# Disable sandboxing because it's too slow.
+# https://github.com/bazelbuild/bazel/issues/2424
+build --spawn_strategy=standalone
+
+# Performance: avoid stat'ing input files
+build --watchfs

.circleci/config.yml

@@ -0,0 +1,20 @@
+version: 2
+jobs:
+  build:
+    working_directory: ~/ng
+    docker:
+      - image: alexeagle/ngcontainer
+    steps:
+      - checkout
+      - restore_cache:
+          key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
+      - run: npm install
+      - run: npm run postinstall
+      - run: ./node_modules/.bin/gulp lint
+      # Build twice, workaround for
+      # https://github.com/bazelbuild/bazel/issues/3114
+      - run: bazel build ... || bazel build ...
+      - save_cache:
+          key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
+          paths:
+            - "node_modules"

.gitignore

@@ -1,6 +1,7 @@
 .DS_STORE
 
 /dist/
+bazel-*
 node_modules
 bower_components
 

.pullapprove.yml

@@ -97,15 +97,15 @@ groups:
       - vicb
       - IgorMinar #fallback
 
-  compiler/animations:
+  animations:
     conditions:
       files:
-        - "packages/compiler/src/animation/*"
+        - "packages/animation/*"
+        - "packages/platform-browser/animations/*"
     users:
       - matsko #primary
-      - tbosch
-      - IgorMinar #fallback
       - mhevery #fallback
+      - IgorMinar #fallback
 
   compiler/i18n:
     conditions:

BUILD

@@ -0,0 +1,18 @@
+package(default_visibility = ["//visibility:public"])
+exports_files(["tsconfig.json"])
+
+# This rule belongs in node_modules/BUILD
+# It's here as a workaround for
+# https://github.com/bazelbuild/bazel/issues/374#issuecomment-296217940
+filegroup(
+    name = "node_modules",
+    srcs = glob([
+        # Performance workaround: list individual files
+        # This won't scale in the general case.
+        # TODO(alexeagle): figure out what to do
+        "node_modules/typescript/lib/**",
+        "node_modules/zone.js/**/*.d.ts",
+        "node_modules/rxjs/**/*.d.ts",
+        "node_modules/@types/**/*.d.ts",
+    ]),
+)

CHANGELOG.md

@@ -1,3 +1,49 @@
+<a name="4.2.0"></a>
+# [4.2.0](https://github.com/angular/angular/compare/4.2.0-rc.2...4.2.0) salubrious-stratagem (2017-06-08)
+
+
+### Bug Fixes
+
+* **animations:** ensure web-animations understands a numeric CSS perspective value ([819514a](https://github.com/angular/angular/commit/819514a)), closes [#14007](https://github.com/angular/angular/issues/14007)
+* **animations:** evaluate substitutions on option param values ([e9886d7](https://github.com/angular/angular/commit/e9886d7))
+* **forms:** fix min and max validator behavior on non-numbers ([a222c3e](https://github.com/angular/angular/commit/a222c3e))
+* **router:** opening links in new window ([4c32cb9](https://github.com/angular/angular/commit/4c32cb9))
+* **upgrade:** call setInterval outside the Angular zone ([269bbe0](https://github.com/angular/angular/commit/269bbe0))
+
+
+### Features
+
+* **compiler-cli:** introduce synchronous codegen API ([b00b80a](https://github.com/angular/angular/commit/b00b80a))
+
+
+### Performance Improvements
+
+* **animations:** do not create a closure each time a node is removed ([fe6b39d](https://github.com/angular/angular/commit/fe6b39d))
+* **animations:** only apply `:leave` flags if animations are set to run ([b55adee](https://github.com/angular/angular/commit/b55adee))
+
+
+
+<a name="4.2.0-rc.2"></a>
+# [4.2.0-rc.2](https://github.com/angular/angular/compare/4.2.0-rc.1...4.2.0-rc.2) (2017-06-01)
+
+### Bug Fixes
+
+* **animations:** always change to desired animation state even if no transition fires ([#17025](https://github.com/angular/angular/issues/17025)) ([665e707](https://github.com/angular/angular/commit/665e707)), closes [#16947](https://github.com/angular/angular/issues/16947)
+* **animations:** do not retain deleted nodes during an non-removal animation ([#17153](https://github.com/angular/angular/issues/17153)) ([068133e](https://github.com/angular/angular/commit/068133e)), closes [#17086](https://github.com/angular/angular/issues/17086)
+* **common:** always use 'other' case for locales with no plural rules ([#16990](https://github.com/angular/angular/issues/16990)) ([535d9da](https://github.com/angular/angular/commit/535d9da))
+* **compiler:** enableLegacyTemplate should not be ignored ([#17051](https://github.com/angular/angular/issues/17051)) ([8ffa483](https://github.com/angular/angular/commit/8ffa483)), closes [#15555](https://github.com/angular/angular/issues/15555)
+* **router:** make remove trailing slash consistent with URL params ([c20f60b](https://github.com/angular/angular/commit/c20f60b)), closes [#16069](https://github.com/angular/angular/issues/16069)
+
+### Features
+
+* **compiler:** emit typescript nodes from an output ast ([#16823](https://github.com/angular/angular/issues/16823)) ([18bf772](https://github.com/angular/angular/commit/18bf772))
+* **compiler-cli:** produce template diagnostics error messages ([#17125](https://github.com/angular/angular/issues/17125)) ([230255f](https://github.com/angular/angular/commit/230255f))
+* **tsc-wrapped:** always convert shorthand imports ([#16898](https://github.com/angular/angular/issues/16898)) ([ea8a43d](https://github.com/angular/angular/commit/ea8a43d))
+
+### Performance Improvements
+
+* **animations:** do not place enterId values on elements for querying purposes ([#17150](https://github.com/angular/angular/issues/17150)) ([ad6a57e](https://github.com/angular/angular/commit/ad6a57e))
+
 <a name="4.2.0-rc.1"></a>
 # [4.2.0-rc.1](https://github.com/angular/angular/compare/4.2.0-rc.0...4.2.0-rc.1) (2017-05-26)
 
@@ -342,7 +388,9 @@ Note: 4.1.0-beta.0 release also contains all the changes present in the 4.0.1 re
 * **router:** should pass new data to Observable when query params change ([#15387](https://github.com/angular/angular/issues/15387)) ([08f2f08](https://github.com/angular/angular/commit/08f2f08)), closes [#15290](https://github.com/angular/angular/issues/15290)
 * prevent strictNullChecks support until [#15432](https://github.com/angular/angular/issues/15432) is fixed ([#15434](https://github.com/angular/angular/issues/15434)) ([b800a0c](https://github.com/angular/angular/commit/b800a0c))
 
+### BREAKING CHANGES
 
+From 4.0.0 @angular/core uses a [`WeakMap`](https://github.com/angular/angular/commit/52b21275f4c2c26c46627f5648b41a33bb5c8283), a polyfill needs to be included for [browsers that do not support it natively](http://kangax.github.io/compat-table/es6/#test-WeakMap).
 
 <a name="4.0.0-rc.6"></a>
 # [4.0.0-rc.6](https://github.com/angular/angular/compare/4.0.0-rc.5...4.0.0-rc.6) (2017-03-23)

WORKSPACE

@@ -0,0 +1,12 @@
+load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
+
+git_repository(
+    name = "io_bazel_rules_typescript",
+    remote = "https://github.com/bazelbuild/rules_typescript.git",
+    tag = "0.0.3",
+)
+
+load("@io_bazel_rules_typescript//:defs.bzl", "node_repositories", "yarn_install")
+
+node_repositories()
+yarn_install(package_json = "//:package.json")

aio/content/examples/.gitignore

@@ -45,6 +45,7 @@ dist/
 # aot
 **/*.ngfactory.ts
 **/*.ngsummary.json
+**/*.ngsummary.ts
 **/*.shim.ngstyle.ts
 **/*.metadata.json
 !aot/bs-config.json

aio/content/examples/template-syntax/src/app/app.component.html

@@ -803,6 +803,15 @@ The null hero's name is {{nullHero && nullHero.name}}
   <!-- #enddocregion safe-6 -->
 </div>
 
+<div>
+  <!-- #docregion non-null-assertion-1 -->
+  <!--No hero, no text -->
+  <div *ngIf="hero">
+    The hero's name is {{hero!.name}}
+  </div>
+  <!-- #enddocregion non-null-assertion-1 -->
+</div>
+
 <a class="to-toc" href="#toc">top</a>
 
 <!-- TODO: discuss this in the Style binding section -->

aio/content/guide/browser-support.md

@@ -68,7 +68,7 @@ Angular supports most recent browsers. This includes the following specific vers
     </td>
 
     <td>
-      Marshmallow (6.0)
+      Nougat (7.0)<br>Marshmallow (6.0)
     </td>
 
     <td>

aio/content/guide/glossary.md

@@ -19,26 +19,14 @@ unexpected definitions.
 
 ## Ahead-of-time (AOT) compilation
 
-<div class="l-sub-section">
-
-
-
 You can compile Angular applications at build time.
 By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly
 to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle.
 Ahead-of-time compiled applications also benefit from decreased load time and increased performance.
 
 
-</div>
-
-
-
 ## Angular module
 
-<div class="l-sub-section">
-
-
-
 Helps you organize an application into cohesive blocks of functionality.
 An Angular module identifies the components, directives, and pipes that the application uses along with the list of external Angular modules that the application needs, such as `FormsModule`.
 
@@ -48,23 +36,11 @@ called `AppModule` and resides in a file named `app.module.ts`.
 For details and examples, see the [Angular Modules (NgModule)](guide/ngmodule) page.
 
 
-</div>
-
-
-
 ## Annotation
 
-<div class="l-sub-section">
-
-
-
 In practice, a synonym for [Decoration](guide/glossary#decorator).
 
 
-</div>
-
-
-
 {@a attribute-directive}
 
 
@@ -73,10 +49,6 @@ In practice, a synonym for [Decoration](guide/glossary#decorator).
 
 ## Attribute directives
 
-<div class="l-sub-section">
-
-
-
 A category of [directive](guide/glossary#directive) that can listen to and modify the behavior of
 other HTML elements, attributes, properties, and components. They are usually represented
 as HTML attributes, hence the name.
@@ -86,18 +58,10 @@ For example, you can use the `ngClass` directive to add and remove CSS class nam
 Learn about them in the [_Attribute Directives_](guide/attribute-directives) guide.
 
 
-</div>
-
-
-
 {@a B}
 
 ## Barrel
 
-<div class="l-sub-section">
-
-
-
 A way to *roll up exports* from several ES2015 modules into a single convenient ES2015 module.
 The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules.
 
@@ -157,17 +121,8 @@ You can often achieve the same result using [Angular modules](guide/glossary#ang
 </div>
 
 
-
-</div>
-
-
-
 ## Binding
 
-<div class="l-sub-section">
-
-
-
 Usually refers to [data binding](guide/glossary#data-binding) and the act of
 binding an HTML object property to a data object property.
 
@@ -175,16 +130,8 @@ Sometimes refers to a [dependency-injection](guide/glossary#dependency-injection
 between a "token"&mdash;also referred to as a "key"&mdash;and a dependency [provider](guide/glossary#provider).
 
 
-</div>
-
-
-
 ## Bootstrap
 
-<div class="l-sub-section">
-
-
-
 You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`).
 Bootstrapping identifies an application's top level "root" [component](guide/glossary#component),
 which is the first component that is loaded for the application.
@@ -193,17 +140,10 @@ For more information, see the [Setup](guide/setup) page.
 You can bootstrap multiple apps in the same `index.html`, each app with its own top-level root.
 
 
-</div>
-
-
 {@a C}
 
 ## camelCase
 
-<div class="l-sub-section">
-
-
-
 The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter
 _except the first letter, which is lowercase_.
 
@@ -213,19 +153,11 @@ camelCase is also known as *lower camel case* to distinguish it from *upper came
 In Angular documentation, "camelCase" always means *lower camel case*.
 
 
-</div>
-
-
-
 {@a component}
 
 
 ## Component
 
-<div class="l-sub-section">
-
-
-
 An Angular class responsible for exposing data to a [view](guide/glossary#view) and handling most of the view’s display and user-interaction logic.
 
 The *component* is one of the most important building blocks in the Angular system.
@@ -240,17 +172,10 @@ Those familiar with "MVC" and "MVVM" patterns will recognize
 the component in the role of "controller" or "view model".
 
 
-</div>
-
-
 {@a D}
 
 ## dash-case
 
-<div class="l-sub-section">
-
-
-
 The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (`-`).
 This form is also known as kebab-case.
 
@@ -259,16 +184,8 @@ the root of filenames (such as `hero-list.component.ts`) are often
 spelled in dash-case.
 
 
-</div>
-
-
-
 ## Data binding
 
-<div class="l-sub-section">
-
-
-
 Applications display data values to a user and respond to user
 actions (such as clicks, touches, and keystrokes).
 
@@ -292,10 +209,6 @@ operations and supporting declaration syntax.
  * [Two-way data binding with ngModel](guide/template-syntax#ngModel).
 
 
-</div>
-
-
-
 {@a decorator}
 
 
@@ -304,10 +217,6 @@ operations and supporting declaration syntax.
 
 ## Decorator | decoration
 
-<div class="l-sub-section">
-
-
-
 A *function* that adds metadata to a class, its members (properties, methods) and function arguments.
 
 Decorators are an experimental (stage 2), JavaScript language [feature](https://github.com/wycats/javascript-decorators). TypeScript adds support for decorators.
@@ -340,17 +249,8 @@ Always include parentheses `()` when applying a decorator.
 </div>
 
 
-
-</div>
-
-
-
 ## Dependency injection
 
-<div class="l-sub-section">
-
-
-
 A design pattern and mechanism
 for creating and delivering parts of an application to other
 parts of an application that request them.
@@ -401,10 +301,6 @@ You can register your own providers.
 Read more in the [Dependency Injection](guide/dependency-injection) page.
 
 
-</div>
-
-
-
 {@a directive}
 
 
@@ -413,10 +309,6 @@ Read more in the [Dependency Injection](guide/dependency-injection) page.
 
 ## Directive
 
-<div class="l-sub-section">
-
-
-
 An Angular class responsible for creating, reshaping, and interacting with HTML elements
 in the browser DOM. The directive is Angular's most fundamental feature.
 
@@ -447,17 +339,10 @@ shaping or reshaping HTML layout, typically by adding, removing, or manipulating
 elements and their children.
 
 
-</div>
-
-
 {@a E}
 
 ## ECMAScript
 
-<div class="l-sub-section">
-
-
-
 The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript).
 
 The latest approved version of JavaScript is
@@ -473,47 +358,21 @@ to ES5 JavaScript.
 Angular developers can write in ES5 directly.
 
 
-</div>
-
-
-
 ## ES2015
 
-<div class="l-sub-section">
-
-
-
 Short hand for [ECMAScript](guide/glossary#ecmascript) 2015.
 
-</div>
-
-
 
 ## ES5
 
-<div class="l-sub-section">
-
-
-
 Short hand for [ECMAScript](guide/glossary#ecmascript) 5, the version of JavaScript run by most modern browsers.
 
-</div>
-
-
 
 ## ES6
 
-<div class="l-sub-section">
-
-
-
 Short hand for [ECMAScript](guide/glossary#ecmascript) 2015.
 
 
-</div>
-
-
-
 {@a F}
 
 
@@ -526,25 +385,13 @@ Short hand for [ECMAScript](guide/glossary#ecmascript) 2015.
 
 ## Injector
 
-<div class="l-sub-section">
-
-
-
 An object in the Angular [dependency-injection system](guide/glossary#dependency-injection)
 that can find a named dependency in its cache or create a dependency
 with a registered [provider](guide/glossary#provider).
 
 
-</div>
-
-
-
 ## Input
 
-<div class="l-sub-section">
-
-
-
 A directive property that can be the *target* of a
 [property binding](guide/template-syntax#property-binding) (explained in detail in the [Template Syntax](guide/template-syntax) page).
 Data values flow *into* this property from the data source identified
@@ -553,16 +400,8 @@ in the template expression to the right of the equal sign.
 See the [Input and output properties](guide/template-syntax#inputs-outputs) section of the [Template Syntax](guide/template-syntax) page.
 
 
-</div>
-
-
-
 ## Interpolation
 
-<div class="l-sub-section">
-
-
-
 A form of [property data binding](guide/glossary#data-binding) in which a
 [template expression](guide/glossary#template-expression) between double-curly braces
 renders as text.  That text may be concatenated with neighboring text
@@ -581,9 +420,6 @@ Read more about [interpolation](guide/template-syntax#interpolation) in the
 [Template Syntax](guide/template-syntax) page.
 
 
-</div>
-
-
 {@a J}
 
 {@a jit}
@@ -591,40 +427,22 @@ Read more about [interpolation](guide/template-syntax#interpolation) in the
 
 ## Just-in-time (JIT) compilation
 
-<div class="l-sub-section">
-
-
-
 A bootstrapping method of compiling components and modules in the browser
 and launching the application dynamically. Just-in-time mode is a good choice during development.
 Consider using the [ahead-of-time](guide/glossary#aot) mode for production apps.
 
 
-</div>
-
-
 {@a K}
 
 ## kebab-case
 
-<div class="l-sub-section">
-
-
-
 See [dash-case](guide/glossary#dash-case).
 
 
-</div>
-
-
 {@a L}
 
 ## Lifecycle hooks
 
-<div class="l-sub-section">
-
-
-
 [Directives](guide/glossary#directive) and [components](guide/glossary#component) have a lifecycle
 managed by Angular as it creates, updates, and destroys them.
 
@@ -648,21 +466,13 @@ Angular calls these hook methods in the following order:
 Read more in the [Lifecycle Hooks](guide/lifecycle-hooks) page.
 
 
-</div>
-
-
 {@a M}
 
 ## Module
 
-<div class="l-sub-section">
-
-
-
 <div class="alert is-important">
 
 
-
 Angular has the following types of modules:
 
 * [Angular modules](guide/glossary#angular-module).
@@ -699,20 +509,12 @@ class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
 You rarely access Angular feature modules directly. You usually import them from an Angular [scoped package](guide/glossary#scoped-package) such as `@angular/core`.
 
 
-</div>
-
-
-
 {@a N}
 
 {@a O}
 
 ## Observable
 
-<div class="l-sub-section">
-
-
-
 An array whose items arrive asynchronously over time.
 Observables help you manage asynchronous data, such as data coming from a backend service.
 Observables are used within Angular itself, including Angular's event system and its HTTP client service.
@@ -721,14 +523,8 @@ To use observables, Angular uses a third-party library called Reactive Extension
 Observables are a proposed feature for ES2016, the next version of JavaScript.
 
 
-</div>
-
 ## Output
 
-<div class="l-sub-section">
-
-
-
 A directive property that can be the *target* of event binding
 (read more in the [event binding](guide/template-syntax#event-binding)
 section of the [Template Syntax](guide/template-syntax) page).
@@ -738,17 +534,10 @@ in the template expression to the right of the equal sign.
 See the [Input and output properties](guide/template-syntax#inputs-outputs) section of the [Template Syntax](guide/template-syntax) page.
 
 
-</div>
-
-
 {@a P}
 
 ## PascalCase
 
-<div class="l-sub-section">
-
-
-
 The practice of writing individual words, compound words, or phrases such that each word or abbreviation begins with a capital letter.
 Class names are typically spelled in PascalCase. For example, `Person` and `HeroDetailComponent`.
 
@@ -756,16 +545,8 @@ This form is also known as *upper camel case* to distinguish it from *lower came
 In this documentation, "PascalCase" means *upper camel case* and  "camelCase" means *lower camel case*.
 
 
-</div>
-
-
-
 ## Pipe
 
-<div class="l-sub-section">
-
-
-
 An Angular pipe is a function that transforms input values to output values for
 display in a [view](guide/glossary#view).
 Here's an example that uses the built-in `currency` pipe to display
@@ -783,35 +564,19 @@ You can also write your own custom pipes.
 Read more in the page on [pipes](guide/pipes).
 
 
-</div>
-
-
-
 ## Provider
 
-<div class="l-sub-section">
-
-
-
 A _provider_ creates a new instance of a dependency for the
 [dependency injection](guide/glossary#dependency-injection) system.
 It relates a lookup token to code&mdash;sometimes called a "recipe"&mdash;that can create a dependency value.
 
 
-</div>
-
-
-
 {@a Q}
 
 {@a R}
 
 ## Reactive forms
 
-<div class="l-sub-section">
-
-
-
 A technique for building Angular forms through code in a component.
 The alternative technique is [template-driven forms](guide/glossary#template-driven-forms).
 
@@ -825,16 +590,8 @@ When building reactive forms:
 Reactive forms are powerful, flexible, and a good choice for more complex data-entry form scenarios, such as dynamic generation of form controls.
 
 
-</div>
-
-
-
 ## Router
 
-<div class="l-sub-section">
-
-
-
 Most applications consist of many screens or [views](guide/glossary#view).
 The user navigates among them by clicking links and buttons,
 and performing other similar actions that cause the application to
@@ -855,47 +612,24 @@ directives that users can click to navigate.
 For more information, see the [Routing & Navigation](guide/router) page.
 
 
-</div>
-
-
-
 ## Router module
 
-<div class="l-sub-section">
-
-
-
 A separate [Angular module](guide/glossary#angular-module) that provides the necessary service providers and directives for navigating through application views.
 
 For more information, see the [Routing & Navigation](guide/router) page.
 
 
-</div>
-
-
-
 ## Routing component
 
-<div class="l-sub-section">
-
-
-
 An Angular [component](guide/glossary#component) with a `RouterOutlet` that displays views based on router navigations.
 
 For more information, see the [Routing & Navigation](guide/router) page.
 
 
-</div>
-
-
 {@a S}
 
 ## Scoped package
 
-<div class="l-sub-section">
-
-
-
 A way to group related *npm* packages.
 Read more at the [npm-scope](https://docs.npmjs.com/misc/scope) page.
 
@@ -912,17 +646,8 @@ is that the scoped package name begins with the Angular *scope name*, `@angular`
 </code-example>
 
 
-
-</div>
-
-
-
 ## Service
 
-<div class="l-sub-section">
-
-
-
 For data or logic that is not associated
 with a specific view or that you want to share across components, build services.
 
@@ -938,27 +663,15 @@ Applications often require services such as a data service or a logging service.
 For more information, see the [Services](tutorial/toh-pt4) page of the [Tour of Heroes](tutorial) tutorial.
 
 
-</div>
-
-
-
 {@a snake-case}
 
 
 ## snake_case
 
-<div class="l-sub-section">
-
-
-
 The practice of writing compound words or phrases such that an
 underscore (`_`) separates one word from the next. This form is also known as *underscore case*.
 
 
-</div>
-
-
-
 {@a structural-directive}
 
 
@@ -967,10 +680,6 @@ underscore (`_`) separates one word from the next. This form is also known as *u
 
 ## Structural directives
 
-<div class="l-sub-section">
-
-
-
 A category of [directive](guide/glossary#directive) that can
 shape or reshape HTML layout, typically by adding and removing elements in the DOM.
 The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are well-known examples.
@@ -978,32 +687,17 @@ The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive
 Read more in the [Structural Directives](guide/structural-directives) page.
 
 
-</div>
-
-
 {@a T}
 
 ## Template
 
-<div class="l-sub-section">
-
-
-
 A chunk of HTML that Angular uses to render a [view](guide/glossary#view) with
 the support and guidance of an Angular [directive](guide/glossary#directive),
 most notably a [component](guide/glossary#component).
 
 
-</div>
-
-
-
 ## Template-driven forms
 
-<div class="l-sub-section">
-
-
-
 A technique for building Angular forms using HTML forms and input elements in the view.
 The alternate technique is [Reactive Forms](guide/glossary#reactive-forms).
 
@@ -1020,16 +714,8 @@ Read about how to build template-driven forms
 in the [Forms](guide/forms) page.
 
 
-</div>
-
-
-
 ## Template expression
 
-<div class="l-sub-section">
-
-
-
 A TypeScript-like syntax that Angular evaluates within
 a [data binding](guide/glossary#data-binding).
 
@@ -1038,30 +724,14 @@ in the [Template expressions](guide/template-syntax#template-expressions) sectio
 of the [Template Syntax](guide/template-syntax) page.
 
 
-</div>
-
-
-
 ## Transpile
 
-<div class="l-sub-section">
-
-
-
 The process of transforming code written in one form of JavaScript
 (such as TypeScript) into another form of JavaScript  (such as [ES5](guide/glossary#es5)).
 
 
-</div>
-
-
-
 ## TypeScript
 
-<div class="l-sub-section">
-
-
-
 A version of JavaScript that supports most [ECMAScript 2015](guide/glossary#es2015)
 language features such as [decorators](guide/glossary#decorator).
 
@@ -1076,20 +746,12 @@ you can use other JavaScript dialects such as [ES5](guide/glossary#es5).
 Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org/).
 
 
-</div>
-
-
-
 {@a U}
 
 {@a V}
 
 ## View
 
-<div class="l-sub-section">
-
-
-
 A portion of the screen that displays information and responds
 to user actions such as clicks, mouse moves, and keystrokes.
 
@@ -1103,10 +765,6 @@ dynamically as the user navigates through the application, typically
 under the control of a [router](guide/glossary#router).
 
 
-</div>
-
-
-
 {@a W}
 
 
@@ -1120,10 +778,6 @@ under the control of a [router](guide/glossary#router).
 
 ## Zone
 
-<div class="l-sub-section">
-
-
-
 A mechanism for encapsulating and intercepting
 a JavaScript application's asynchronous activity.
 
@@ -1142,6 +796,3 @@ the information it displays via [data bindings](guide/glossary#data-binding).
 
 Learn more about zones in this
 [Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
-
-</div>
-

aio/content/guide/template-syntax.md

@@ -104,7 +104,7 @@ including:
 Other notable differences from JavaScript syntax include:
 
 * no support for the bitwise operators `|` and `&`
-* new [template expression operators](guide/template-syntax#expression-operators), such as `|` and `?.`
+* new [template expression operators](guide/template-syntax#expression-operators), such as `|`, `?.` and `!`.
 
 {@a expression-context}
 
@@ -1931,6 +1931,27 @@ It works perfectly with long property paths such as `a?.b?.c?.d`.
 
 <hr/>
 
+{@a non-null-assertion-operator}
+
+### The non-null assertion operator ( <span class="syntax">!</span> )
+
+The Angular **non-null assertion operator (`!`)** is a post-fix operator that asserts that the preceeding property path
+will never be null or undefined.
+
+Unlike the [_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe naviation operator (?.)")
+the **non-null assertion operator** does not guard against a null or undefined; rather, it informs the TypeScript type
+checker that there is something it might be unaware of that ensures that this property path is defined. This prevents
+TypeScript from reporting that the path is possibly null or undefined when strict null checking is enabled.
+
+For example, if you use [*ngIf](guide/template-syntax#ngIf) to check if `hero` is defined, you can assert the uses of
+`hero` are defined in the body of the template.
+
+<code-example path="template-syntax/src/app/app.component.html" region="non-null-assertion-1" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+The Angular **non-null assertion operator (`!`)** is like TypeScript's _non-null assertion operator (!)_
+introduced in [TypeScript 2.0](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html).
+
 ## Summary
 You've completed this survey of template syntax.
 Now it's time to put that knowledge to work on your own components and directives.

aio/content/guide/ts-to-js.md

@@ -66,7 +66,7 @@ Anything you can import from `@angular` is a nested member of this `ng` object:
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/app.module.ts" region="ng2import">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/app.module.es6" region="ng2import">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/app.module.es6" region="ng2import">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/app.module.es6" region="ng2import">
   </code-pane>
@@ -104,7 +104,7 @@ Here is a `HeroComponent` as it might be defined and "exported" in each of the f
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero.component.ts" region="appexport">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="appexport">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="appexport">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero.component.es6" region="appexport">
   </code-pane>
@@ -121,7 +121,7 @@ In _ES5_ you use the shared namespace object to access "exported" entities from
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/app.module.ts" region="appimport">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/app.module.es6" region="appimport">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/app.module.es6" region="appimport">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/app.module.es6" region="appimport">
   </code-pane>
@@ -167,7 +167,7 @@ Use the constructor function pattern instead, adding methods to the prototype.
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero.component.ts" region="class">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="class">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="class">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero.component.es6" region="class">
   </code-pane>
@@ -193,7 +193,7 @@ See these variations side-by-side:
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero.component.ts" region="metadata">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="metadata">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="metadata">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero.component.es6" region="metadata">
   </code-pane>
@@ -213,7 +213,7 @@ The component, `HeroTitleComponent` in this case, then references the template f
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-title.component.ts" region="templateUrl">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/hero-title.component.es6" region="templateUrl">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-title.component.es6" region="templateUrl">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-title.component.es6" region="templateUrl">
   </code-pane>
@@ -322,7 +322,7 @@ Just implement the methods and ignore interfaces when translating code samples f
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-lifecycle.component.ts">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-lifecycle.component.es6">
   </code-pane>
@@ -354,7 +354,7 @@ combined in the metadata `inputs` and `outputs` _arrays_.
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/confirm.component.ts">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/confirm.component.es6">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/confirm.component.es6">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/confirm.component.es6">
   </code-pane>
@@ -412,7 +412,7 @@ This format should be familiar to AngularJS developers.
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-di.component.ts">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/hero-di.component.es6">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-di.component.es6">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-di.component.es6">
   </code-pane>
@@ -430,8 +430,8 @@ In _TypeScript_ and _ES6-with-decorators_, you precede the class constructor par
 by calling the `@Inject()` decorator with the injection token.
 In the following example, the token is the string `'heroName'`.
 
-The other JavaScript dialects add a `parameters` array to the class contructor function.
-Each item constains a new instance of `Inject`:
+The other JavaScript dialects add a `parameters` array to the class constructor function.
+Each item constrains a new instance of `Inject`:
 
 * _Plain ES6_&mdash;each item is a new instance of `Inject(token)` in a sub-array.
 * _ES5_&mdash;simply list the string tokens.
@@ -442,7 +442,7 @@ array as before. Create a new instance of `ng.core.Inject(token)` for each param
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-di-inject.component.ts">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-di-inject.component.es6">
   </code-pane>
@@ -475,7 +475,7 @@ array as before. Use a nested array to define a parameter's complete injection s
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-title.component.ts">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/hero-title.component.es6">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-title.component.es6">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-title.component.es6">
   </code-pane>
@@ -522,7 +522,7 @@ The  `host` value is an object whose properties are host property and listener b
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-host.component.ts">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/hero-host.component.es6">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-host.component.es6">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-host.component.es6">
   </code-pane>
@@ -545,7 +545,7 @@ These particular _TypeScript_ and _ES6_ code snippets happen to be identical.
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-host-meta.component.ts">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6">
   </code-pane>
 </code-tabs>
 
@@ -578,7 +578,7 @@ The `queries` property value is a hash map.
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-queries.component.ts" region="view">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6" region="view">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6" region="view">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-queries.component.es6" region="view">
   </code-pane>
@@ -597,7 +597,7 @@ They can be added in the same way as [`@ViewChild`](api/core/ViewChild) and
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-queries.component.ts" region="content">
   </code-pane>
-  <code-pane title="ES6 JavaScript with decorators" path="ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6" region="content">
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6" region="content">
   </code-pane>
   <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-queries.component.es6" region="content">
   </code-pane>

aio/content/marketing/contribute.html

@@ -0,0 +1,34 @@
+<header class="marketing-banner">
+  <h1 class="banner-headline no-toc no-anchor">Contribute to Angular</h1>
+</header>
+
+<article class="contribute-container">
+  <h2 class="no-anchor">Angular Projects</h2>
+
+  <p>We'd love for you to contribute to our source code and to make Angular projects even better.</p>
+
+  <div class="l-sub-section">
+    <h3 class="no-anchor">Angular</h3>
+
+    Angular is a next generation mobile and desktop application development platform.
+
+    <a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button>Contribute to Angular</a>
+  </div>
+
+  <div class="l-sub-section">
+    <h3 class="no-anchor">Angular Material</h3>
+
+    Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design specification for use in Angular single-page applications (SPAs).
+
+    <a href="https://github.com/angular/material2/blob/master/CONTRIBUTING.md" class="button" md-button>Contribute to Angular Material</a>
+  </div>
+
+  <div class="l-sub-section">
+    <h3 class="no-anchor">AngularFire</h3>
+
+    AngularFire is the officially supported Angular binding for Firebase. Firebase is a full backend so you don't need servers to build your Angular app.
+
+    <a href="https://github.com/angular/angularfire2" class="button" md-button> Contribute to AngularFire</a>
+  </div>
+
+</article>

aio/content/marketing/contribute.md

@@ -1,37 +0,0 @@
-<h1 class="no-toc">Contribute to Angular</h1>
-
-Help us build the framework of the future!
-
-## Angular Projects
-
-We'd love for you to contribute to our source code and to make Angular projects even better.
-
-~~~ {.l-sub-section}
-
-### Angular
-
-Angular is a next generation mobile and desktop application development platform.
-
-<a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button>Contribute to Angular</a>
-
-~~~
-
-~~~ {.l-sub-section}
-
-### Angular Material
-
-Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design specification for use in Angular single-page applications (SPAs).
-
-<a href="https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md" class="button" md-button>Contribute to Angular Material</a>
-
-~~~
-
-~~~ {.l-sub-section}
-
-### AngularFire
-
-AngularFire is the officially supported Angular binding for Firebase. Firebase is a full backend so you don't need servers to build your Angular app.
-
-<a href="https://github.com/firebase/angularFire" class="button" md-button> Contribute to AngularFire</a>
-
-~~~

aio/content/marketing/docs.md

@@ -3,25 +3,24 @@
 Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop
 
 <div class="card-container">
-  <a href="generated/live-examples/quickstart/eplnkr.html" target="_blank" class="card"
+  <a href="generated/live-examples/quickstart/eplnkr.html" target="_blank" class="docs-card"
     title="Experience Angular in a live coding environment">
       <section>Experience Angular</section>
       <p>A quick look at an Angular application.</p>
       <p class="card-footer">Angular in Action</p>
   </a>
 
-  <div class="card">
+  <div class="docs-card">
       <section>Get Going with Angular</section>
-      <p>Get going on your own environment with the Quickstart and Tutorial</p>
-      <p class="card-footer center" >
-        <a href="guide/quickstart" title="Angular Quickstart">Quickstart</a> &nbsp;
-        <a href="tutorial" title="Angular Tutorial">Tutorial</a>
+      <p>Get going on your own environment with the Quickstart.</p>
+      <p class="card-footer" >
+        <a href="guide/quickstart" title="Angular Quickstart">Quickstart</a>
       </p>
       <!--<p class="card-footer"><a href="guide/quickstart">Quickstart</a></p>
       <p class="card-footer"><a href="guide/tutorial">Tutorial</a></p>-->
   </div>
 
-  <a href="guide/architecture" class="card" title="Angular Architecture">
+  <a href="guide/architecture" class="docs-card" title="Angular Architecture">
       <section>Fundamentals</section>
       <p>Learn Angular application fundamentals, starting with an architecture overview.</p>
       <p class="card-footer">Architecture</p>

aio/content/marketing/events.html

@@ -1,7 +1,9 @@
-<h1 class="no-toc">Events</h1>
+<header class="marketing-banner">
+  <h1 class="banner-headline no-toc no-anchor">Events</h1>
+</header>
 
-<h3>Where we'll be presenting:</h3>
 <article class="l-content ">
+<p>Where we'll be presenting:</p>
   <table class="is-full-width">
     <thead>
     <tr>
@@ -11,24 +13,6 @@
     </tr>
     </thead>
     <tbody>
-    <!-- DEVOXX - UK -->
-    <tr>
-      <th><a href="http://www.devoxx.co.uk/" title="DEVOXX - UK">DEVOXX - UK</a></th>
-      <td>London, United Kingdom</td>
-      <td>May 11, 2017</td>
-    </tr>
-    <!-- Google IO -->
-    <tr>
-      <th><a href="https://events.google.com/io" title="Google IO">Google IO</a></th>
-      <td>Mountain View, California</td>
-      <td>May 17, 2017</td>
-    </tr>
-    <!-- AngleBrackets-->
-    <tr>
-      <th><a href="https://anglebrackets.org" title="AngleBrackets">AngleBrackets</a></th>
-      <td>Orlando, Florida</td>
-      <td>May 21, 2017</td>
-    </tr>
     <!-- ngJapan -->
     <tr>
       <th><a href="http://ngjapan.org/" title="ng-Japan">ng-Japan</a></th>

aio/content/marketing/features.html

@@ -1,88 +1,113 @@
-<h1 class="no-toc">Features &amp; Benefit</h1>
+<header class="marketing-banner">
+  <h1 class="banner-headline no-toc no-anchor">Features & Benefits</h1>
+</header>
 
 <article class="l-content ">
   <div class="flex-center">
-    <div><h2 class="text-headline">Cross Platform</h2>
-      <div class="feature-row">
-
-        <div class="feature">
-          <h5>Progressive Web Apps</h5>
-          <p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
-            High performance, offline, and zero-step installation.</p>
+    <div>
+      <div class="feature-section">
+        <div class="feature-header">
+          <div class="text-headline">Cross Platform</div>
+          <img src="../assets/images/icons/feature-icon.svg" height="70px">
         </div>
+        <div class="feature-row">
 
-        <div class="feature">
-          <h5>Native</h5>
-          <p class="text-body">Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.</p>
-        </div>
+          <div class="feature">
+            <div class="feature-title">Progressive Web Apps</div>
+            <p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
+              High performance, offline, and zero-step installation.</p>
+          </div>
 
-        <div class="feature">
-          <h5>Desktop</h5>
-          <p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.</p>
+          <div class="feature">
+            <div class="feature-title">Native</div>
+            <p class="text-body">Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.</p>
+          </div>
+
+          <div class="feature">
+            <div class="feature-title">Desktop</div>
+            <p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.</p>
+          </div>
         </div>
       </div>
 
-      <h2 class="text-headline">Speed and Performance</h2>
-      <div class="feature-row">
-
-        <div class="feature">
-          <h5>Code Generation</h5>
-          <p class="text-body">Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.</p>
+      <div class="feature-section">
+        <div class="feature-header">
+          <div class="text-headline">Speed and Performance</div>
+          <img src="../assets/images/icons/feature-icon.svg" height="70px">
         </div>
+        <div class="feature-row">
 
-        <div class="feature">
-          <h5>Universal</h5>
-          <p class="text-body">Serve the first view of your application on node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.</p>
-        </div>
+          <div class="feature">
+            <div class="feature-title">Code Generation</div>
+            <p class="text-body">Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.</p>
+          </div>
 
-        <div class="feature">
-          <h5>Code Splitting</h5>
-          <p class="text-body">Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.</p>
-        </div>
+          <div class="feature">
+            <div class="feature-title">Universal</div>
+            <p class="text-body">Serve the first view of your application on node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.</p>
+          </div>
 
-      </div>
-
-      <h2 class="text-headline">Productivity</h2>
-      <div class="feature-row">
-
-        <div class="feature">
-          <h5>Templates</h5>
-          <p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
-        </div>
-
-        <div class="feature">
-          <h5>Angular CLI</h5>
-          <p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
-        </div>
-
-        <div class="feature">
-          <h5>IDEs</h5>
-          <p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
+          <div class="feature">
+            <div class="feature-title">Code Splitting</div>
+            <p class="text-body">Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.</p>
+          </div>
         </div>
       </div>
 
-      <h2 class="text-headline">Full Development Story</h2>
-      <div class="feature-row">
-
-        <div class="feature">
-          <h5>Testing</h5>
-          <p class="text-body">With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.</p>
+      <div class="feature-section">
+        <div class="feature-header">
+          <div class="text-headline">Productivity</div>
+          <img src="../assets/images/icons/feature-icon.svg" height="70px">
         </div>
+        <div class="feature-row">
 
-        <div class="feature">
-          <h5>Animation</h5>
-          <p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
+          <div class="feature">
+            <div class="feature-title">Templates</div>
+            <p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
+          </div>
+
+          <div class="feature">
+            <div class="feature-title">Angular CLI</div>
+            <p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
+          </div>
+
+          <div class="feature">
+            <div class="feature-title">IDEs</div>
+            <p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
+          </div>
         </div>
+      </div>
 
-        <div class="feature">
-          <h5>Accessibility</h5>
-          <p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
+      <div class="feature-section">
+        <div class="feature-header">
+          <div class="text-headline">Full Development Story</div>
+          <img src="../assets/images/icons/feature-icon.svg" height="70px">
         </div>
+        <div class="feature-row">
 
+          <div class="feature">
+            <div class="feature-title">Testing</div>
+            <p class="text-body">With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.</p>
+          </div>
+
+          <div class="feature">
+            <div class="feature-title">Animation</div>
+            <p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
+          </div>
+
+          <div class="feature">
+            <div class="feature-title">Accessibility</div>
+            <p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 
-  <div class="cta-bar"><a href="guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a></div>
+  <div class="cta-bar announcement-bar">
+    <button class="button">
+      <a href="guide/quickstart">Get Started</a>
+    </button>
+  </div>
 
 </article>

aio/content/marketing/index.html

@@ -1,27 +1,47 @@
-<header class="background-sky l-relative">
+<!--FULL HEADER BLOCK-->
+<header class="l-relative">
 
-  <div class="hero background-superhero-paper is-large">
+  <!--BACKGROUND IMAGE-->
+  <div class="background-sky hero"></div>
 
-    <img src="assets/images/logos/angular/angular.svg" class="hero-logo"/>
-    <h1 class="text-headline no-toc">One framework.<br>Mobile &amp; desktop.</h1>
-    <a href="guide/quickstart" md-button="md-button" class="hero-cta mat-raised button button-large button-plain">Get Started</a>
+<!--INTRO SECTION -->
+  <section id="intro">
+
+    <!-- LOGO -->
+    <div class="hero-logo">
+      <img src="assets/images/logos/angular/angular.svg"/>
+    </div>
+
+      <!-- CONTAINER     -->
+    <div class="homepage-container">
+      <!-- container content starts -->
+
+      <div class="hero-headline no-toc">One framework.<br>Mobile &amp; desktop.</div>
+      <button class="button button-large button-plain hero-cta">
+        <a href="guide/quickstart">Get Started</a>
+      </button>
+  </div><!-- CONTAINER END -->
+  </section>
 
-    <announcement-bar class="announcement-bar">
-      <div class="announcement-bar-slide cleafix is-visible">
-        <img src="assets/images/logos/angular/angular-banner-logo-grey.png" width="64"/>
-        <p>Angular v4.0 is out! Smaller, faster, no biggie...</p>
-        <a href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank" class="button mat-button">Learn More</a>
-      </div>
-    </announcement-bar>
 
-  </div>
 </header>
 
-<article class="l-content ">
+<article class="l-content">
+  <div class="home-rows">
 
-  <div class="home-rows"><!-- Group 1-->
-    <div layout="row" layout-xs="column" class="home-row">
+    <!--Announcement Bar-->
+    <div class="homepage-container">
+      <div class="announcement-bar">
+        <img src="assets/images/logos/angular/angular-banner-logo-grey.png" width="64"/>
+        <p>Angular v4.0 is out! Smaller, faster, no biggie...</p>
+        <button class="button">
+          <a href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank">Learn More</a>
+        </button>
+      </div>
+    </div>
 
+    <!-- Group 1-->
+    <div layout="row" layout-xs="column" class="home-row homepage-container">
       <div class="promo-img-container promo-1">
         <div>
           <img height="222" src="assets/images/home/responsive-framework.svg" alt="responsive framework">
@@ -30,17 +50,18 @@
 
       <div class="text-container">
         <div class="text-block promo-1-desc l-pad-top-2">
-          <h2 class="text-headline">Develop Across All Platforms</h2>
+          <div class="text-headline">Develop Across All Platforms</div>
           <p class="text-body">Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.
           </p>
         </div>
       </div>
-    </div><!-- Group 2-->
-
+    </div>
+    <hr>
+    <!-- Group 2-->
     <div layout="row" layout-xs="column" class="home-row">
       <div class="text-container">
         <div class="text-block">
-          <h2 class="text-headline">Speed & Performance</h2>
+          <div class="text-headline">Speed & Performance</div>
           <p class="text-body">Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.</p>
           <p class="text-body">Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
         </div>
@@ -51,8 +72,10 @@
           <img height="222" src="assets/images/home/speed-performance.svg" alt="speed and performance">
         </div>
       </div>
-    </div><!-- Group 3-->
+    </div>
+    <hr>
 
+    <!-- Group 3-->
     <div layout="row" layout-xs="column" class="home-row">
       <div class="promo-img-container promo-3">
         <div><img src="assets/images/home/joyful-development.png" alt="IDE example"></div>
@@ -60,18 +83,21 @@
 
       <div class="text-container">
         <div class="text-block promo-3-desc">
-          <h2 class="text-headline">Incredible Tooling</h2>
+          <div class="text-headline">Incredible Tooling</div>
           <p class="text-body">Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work.
           </p>
         </div>
       </div>
-    </div><!-- Group 4-->
 
+    </div>
+    <hr>
+
+    <!-- Group 4-->
     <div layout="row" layout-xs="column" class="home-row">
 
       <div class="text-container">
         <div class="text-block l-pad-top-2">
-          <h2 class="text-headline">Loved by Millions</h2>
+          <div class="text-headline">Loved by Millions</div>
           <p class="text-body">From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.</p>
         </div>
       </div>
@@ -83,9 +109,20 @@
       </div>
     </div>
 
-    <div class="cta-bar">
-      <a href="/guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a>
-    </div>
+  <!-- CTA CARDS -->
+  <div layout="row" layout-xs="column" class="home-row">
+
+    <a href="tutorial">
+      <div class="card">
+          <img src="../assets/images/icons/code-icon.svg" height="70px">
+          <div class="card-text-container">
+            <div class="text-headline">Start Tutorial</div>
+            <p>Start building your Angular application in TypeScript.</p>
+          </div>
+      </div>
+    </a>
   </div>
 
+  </div> <!-- end of home rows -->
+
 </article>

aio/content/marketing/presskit.html

@@ -1,5 +1,8 @@
-<h1 class="no-toc">Press Kit</h1>
-<div class="presskit-container l-space-neg-top-8">
+<header class="marketing-banner">
+  <h1 class="banner-headline no-toc no-anchor">Press kit</h1>
+</header>
+
+<article class="presskit-container">
   <div class="presskit-row">
     <div class="presskit-inner">
       <div>
@@ -189,4 +192,4 @@
       </div>
     </div>
   </div>
-</div>
+</article>

aio/content/marketing/resources.html

@@ -1,2 +1,7 @@
-<h1 class="no-toc">Explore Angular Resources</h1>
-<aio-resource-list></aio-resource-list>
+<header class="marketing-banner">
+  <h1 class="banner-headline no-toc no-anchor">Explore Angular Resources</h1>
+</header>
+
+<article>
+  <aio-resource-list></aio-resource-list>
+</article>

aio/e2e/app.e2e-spec.ts

@@ -22,7 +22,7 @@ describe('site App', function() {
 
     // navigate to a different page
     page.getLink('features').click();
-    expect(page.getDocViewerText()).toMatch(/Features/i);
+    expect(page.getDocViewerText()).toMatch(/Progressive web apps/i);
 
     // Show the menu
     page.docsMenuLink.click();
@@ -41,6 +41,26 @@ describe('site App', function() {
     expect(page.getInnerHtml(codeExample)).toContain('<h1>Tour of Heroes</h1>');
   });
 
+  describe('scrolling to the top', () => {
+    it('should scroll to the top when navigating to another page', () => {
+      page.navigateTo('guide/docs');
+      page.scrollToBottom();
+      page.getScrollTop().then(scrollTop => expect(scrollTop).toBeGreaterThan(0));
+
+      page.navigateTo('guide/api');
+      page.getScrollTop().then(scrollTop => expect(scrollTop).toBe(0));
+    });
+
+    it('should scroll to the top when navigating to the same page', () => {
+      page.navigateTo('guide/docs');
+      page.scrollToBottom();
+      page.getScrollTop().then(scrollTop => expect(scrollTop).toBeGreaterThan(0));
+
+      page.navigateTo('guide/docs');
+      page.getScrollTop().then(scrollTop => expect(scrollTop).toBe(0));
+    });
+  });
+
   describe('api-docs', () => {
     it('should show a link to github', () => {
       page.navigateTo('api/common/NgClass');

aio/e2e/app.po.ts

@@ -42,6 +42,14 @@ export class SitePage {
     return browser.executeScript('return arguments[0].innerHTML;', element);
   }
 
+  getScrollTop() {
+    return browser.executeScript('return window.pageYOffset');
+  }
+
+  scrollToBottom() {
+    return browser.executeScript('window.scrollTo(0, document.body.scrollHeight)');
+  }
+
   /**
    * Replace the ambient Google Analytics tracker with homebrew spy
    * don't send commands to GA during e2e testing!

aio/package.json

@@ -72,7 +72,7 @@
     "concurrently": "^3.4.0",
     "cross-spawn": "^5.1.0",
     "dgeni": "^0.4.7",
-    "dgeni-packages": "^0.19.0",
+    "dgeni-packages": "^0.19.1",
     "entities": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-plugin-jasmine": "^2.2.0",
@@ -107,6 +107,7 @@
     "ts-node": "~2.0.0",
     "tslint": "~4.5.0",
     "typescript": "2.2.0",
+    "unist-util-filter": "^0.2.1",
     "unist-util-source": "^1.0.1",
     "unist-util-visit": "^1.1.1",
     "vrsource-tslint-rules": "^4.0.1",

aio/src/app/app.component.html

@@ -1,3 +1,5 @@
+<div id="top-of-page"></div>
+
 <div *ngIf="isFetching" class="progress-bar-container">
   <md-progress-bar mode="indeterminate" color="warn"></md-progress-bar>
 </div>
@@ -5,30 +7,26 @@
 <md-toolbar color="primary" class="app-toolbar">
   <button class="hamburger" md-button
     (click)="sidenav.toggle()" title="Docs menu">
-    <md-icon svgIcon="menu"></md-icon>
+    <md-icon [ngClass]="{'sidenav-open': !isSideBySide }" svgIcon="menu"></md-icon>
   </button>
   <a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a>
   <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
   <aio-search-box class="search-container" #searchBox (search)="doSearch($event)"></aio-search-box>
-  <span class="fill-remaining-space"></span>
 </md-toolbar>
 <aio-search-results #searchResults *ngIf="showSearchResults" (resultSelected)="hideSearchResults()"></aio-search-results>
 
 <md-sidenav-container class="sidenav-container" [class.starting]="isStarting" role="main">
 
   <md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode" (open)="updateHostClasses()" (close)="updateHostClasses()">
-    <aio-nav-menu *ngIf="!isSideBySide" [nodes]="topMenuNarrowNodes" [currentNode]="currentNode"></aio-nav-menu>
-    <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNode" ></aio-nav-menu>
+    <aio-nav-menu *ngIf="!isSideBySide" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow"></aio-nav-menu>
+    <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" ></aio-nav-menu>
 
     <div class="doc-version" title="Angular docs version {{currentDocVersion?.title}}">
-      <select (change)="onDocVersionChange($event.target.selectedIndex)">
-        <option *ngFor="let version of docVersions" [value]="version.title">{{version.title}}</option>
-      </select>
+      <aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="docVersions && docVersions[0]"></aio-select>
     </div>
   </md-sidenav>
 
   <section class="sidenav-content" [id]="pageId" role="content">
-    <div id="top-of-page"></div>
     <aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered()"></aio-doc-viewer>
     <aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
   </section>

aio/src/app/app.component.spec.ts

@@ -24,10 +24,14 @@ import { ScrollService } from 'app/shared/scroll.service';
 import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
 import { SearchResultsComponent } from 'app/search/search-results/search-results.component';
 import { SearchService } from 'app/search/search.service';
+import { SelectComponent, Option } from 'app/shared/select/select.component';
 import { SwUpdateNotificationsService } from 'app/sw-updates/sw-update-notifications.service';
 import { TocComponent } from 'app/embedded/toc/toc.component';
 import { MdSidenav } from '@angular/material';
 
+const sideBySideBreakPoint = 992;
+const hideToCBreakPoint = 800;
+
 describe('AppComponent', () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
@@ -42,7 +46,7 @@ describe('AppComponent', () => {
     component = fixture.componentInstance;
 
     fixture.detectChanges();
-    component.onResize(1033); // wide by default
+    component.onResize(sideBySideBreakPoint + 1); // wide by default
 
     docViewer = fixture.debugElement.query(By.css('aio-doc-viewer')).nativeElement;
     hamburger = fixture.debugElement.query(By.css('.hamburger')).nativeElement;
@@ -70,16 +74,16 @@ describe('AppComponent', () => {
 
     describe('onResize', () => {
       it('should update `isSideBySide` accordingly', () => {
-        component.onResize(1033);
+        component.onResize(sideBySideBreakPoint + 1);
         expect(component.isSideBySide).toBe(true);
-        component.onResize(500);
+        component.onResize(sideBySideBreakPoint - 1);
         expect(component.isSideBySide).toBe(false);
       });
 
       it('should update `showFloatingToc` accordingly', () => {
-        component.onResize(801);
+        component.onResize(hideToCBreakPoint + 1);
         expect(component.showFloatingToc).toBe(true);
-        component.onResize(800);
+        component.onResize(hideToCBreakPoint - 1);
         expect(component.showFloatingToc).toBe(false);
       });
     });
@@ -96,7 +100,7 @@ describe('AppComponent', () => {
     describe('SideNav when side-by-side (wide)', () => {
 
       beforeEach(() => {
-        component.onResize(1033); // side-by-side
+        component.onResize(sideBySideBreakPoint + 1); // side-by-side
       });
 
       it('should open when nav to a guide page (guide/pipes)', () => {
@@ -155,7 +159,7 @@ describe('AppComponent', () => {
     describe('SideNav when NOT side-by-side (narrow)', () => {
 
       beforeEach(() => {
-        component.onResize(1000); // NOT side-by-side
+        component.onResize(sideBySideBreakPoint - 1); // NOT side-by-side
       });
 
       it('should be closed when nav to a guide page (guide/pipes)', () => {
@@ -218,26 +222,28 @@ describe('AppComponent', () => {
     });
 
     describe('SideNav version selector', () => {
+      let selectElement: DebugElement;
+      let selectComponent: SelectComponent;
       beforeEach(() => {
-        component.onResize(1033); // side-by-side
+        component.onResize(sideBySideBreakPoint + 1); // side-by-side
+        selectElement = fixture.debugElement.query(By.directive(SelectComponent));
+        selectComponent = selectElement.componentInstance;
       });
 
       it('should pick first (current) version by default', () => {
-        const versionSelector = sidenav.querySelector('select');
-        expect(versionSelector.value).toEqual(component.versionInfo.raw);
-        expect(versionSelector.selectedIndex).toEqual(0);
+        expect(selectComponent.selected.title).toEqual(component.versionInfo.raw);
       });
 
       // Older docs versions have an href
       it('should navigate when change to a version with an href', () => {
-        component.onDocVersionChange(1);
+        selectElement.triggerEventHandler('change', { option: component.docVersions[1] as Option, index: 1});
         expect(locationService.go).toHaveBeenCalledWith(TestHttp.docVersions[0].url);
       });
 
       // The current docs version should not have an href
       // This may change when we perfect our docs versioning approach
       it('should not navigate when change to a version without an href', () => {
-        component.onDocVersionChange(0);
+        selectElement.triggerEventHandler('change', { option: component.docVersions[0] as Option, index: 0});
         expect(locationService.go).not.toHaveBeenCalled();
       });
     });

aio/src/app/app.component.ts

@@ -2,7 +2,7 @@ import { Component, ElementRef, HostBinding, HostListener, OnInit,
          QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { MdSidenav } from '@angular/material';
 
-import { CurrentNode, NavigationService, NavigationViews, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
+import { CurrentNodes, NavigationService, NavigationViews, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
 import { DocumentService, DocumentContents } from 'app/documents/document.service';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
 import { LocationService } from 'app/shared/location.service';
@@ -25,7 +25,7 @@ export class AppComponent implements OnInit {
 
   currentDocument: DocumentContents;
   currentDocVersion: NavigationNode;
-  currentNode: CurrentNode;
+  currentNodes: CurrentNodes;
   currentPath: string;
   docVersions: NavigationNode[];
   dtOn = false;
@@ -59,9 +59,8 @@ export class AppComponent implements OnInit {
   isSideBySide = false;
   private isFetchingTimeout: any;
   private isSideNavDoc = false;
-  private previousNavView: string;
 
-  private sideBySideWidth = 1032;
+  private sideBySideWidth = 992;
   sideNavNodes: NavigationNode[];
   topMenuNodes: NavigationNode[];
   topMenuNarrowNodes: NavigationNode[];
@@ -108,8 +107,11 @@ export class AppComponent implements OnInit {
   ) {  }
 
   ngOnInit() {
-    this.searchService.initWorker('app/search/search-worker.js');
-    this.searchService.loadIndex();
+    // Do not initialize the search on browsers that lack web worker support
+    if ('Worker' in window) {
+      this.searchService.initWorker('app/search/search-worker.js');
+      this.searchService.loadIndex();
+    }
 
     this.onResize(window.innerWidth);
 
@@ -136,17 +138,17 @@ export class AppComponent implements OnInit {
       }
     });
 
-    this.navigationService.currentNode.subscribe(currentNode => {
-      this.currentNode = currentNode;
+    this.navigationService.currentNodes.subscribe(currentNodes => {
+      this.currentNodes = currentNodes;
 
       // Preserve current sidenav open state by default
       let openSideNav = this.sidenav.opened;
+      const isSideNavDoc = !!currentNodes[sideNavView];
 
-      if (this.previousNavView !== currentNode.view) {
-        this.previousNavView = currentNode.view;
+      if (this.isSideNavDoc !== isSideNavDoc) {
         // View type changed. Is it now a sidenav view (e.g, guide or tutorial)?
         // Open if changed to a sidenav doc; close if changed to a marketing doc.
-        openSideNav = this.isSideNavDoc = currentNode.view === sideNavView;
+        openSideNav = this.isSideNavDoc = isSideNavDoc;
       }
       // May be open or closed when wide; always closed when narrow
       this.sideNavToggle(this.isSideBySide ? openSideNav : false);
@@ -183,6 +185,9 @@ export class AppComponent implements OnInit {
     // Stop fetching timeout (which, when render is fast, means progress bar never shown)
     clearTimeout(this.isFetchingTimeout);
 
+    // Put page in a clean visual state
+    this.scrollService.scrollToTop();
+
     // Scroll 500ms after the doc-viewer has finished rendering the new doc
     // The delay is to allow time for async layout to complete
     setTimeout(() => {
@@ -250,9 +255,9 @@ export class AppComponent implements OnInit {
     const sideNavOpen = `sidenav-${this.sidenav.opened ? 'open' : 'closed'}`;
     const pageClass = `page-${this.pageId}`;
     const folderClass = `folder-${this.folderId}`;
-    const viewClass = `view-${this.currentNode && this.currentNode.view}`;
+    const viewClasses = Object.keys(this.currentNodes || {}).map(view => `view-${view}`).join(' ');
 
-    this.hostClasses = `${sideNavOpen} ${pageClass} ${folderClass} ${viewClass}`;
+    this.hostClasses = `${sideNavOpen} ${pageClass} ${folderClass} ${viewClasses}`;
   }
 
   // Dynamically change height of table of contents container

aio/src/app/app.module.ts

@@ -45,6 +45,8 @@ import { SearchResultsComponent } from './search/search-results/search-results.c
 import { SearchBoxComponent } from './search/search-box/search-box.component';
 import { TocService } from 'app/shared/toc.service';
 
+import { SharedModule } from 'app/shared/shared.module';
+
 // These are the hardcoded inline svg sources to be used by the `<md-icon>` component
 export const svgIconProviders = [
   {
@@ -80,7 +82,8 @@ export const svgIconProviders = [
     MdSidenavModule,
     MdTabsModule,
     MdToolbarModule,
-    SwUpdatesModule
+    SwUpdatesModule,
+    SharedModule
   ],
   declarations: [
     AppComponent,

aio/src/app/embedded/api/api-list.component.html

@@ -1,26 +1,17 @@
 <div class="l-flex-wrap info-banner api-filter">
 
-  <div class="form-select-menu">
-    <button class="form-select-button has-symbol" (click)="toggleTypeMenu()">
-      <strong>Type:</strong><span class="symbol {{type.name}}"></span>{{type.title}}
-    </button>
-    <ul class="form-select-dropdown" *ngIf="showTypeMenu">
-      <li *ngFor="let t of types" (click)="setType(t)" [class.selected]="t === type">
-        <span class="symbol {{t.name}}"></span>{{t.title}}
-      </li>
-    </ul>
-  </div>
+  <aio-select (change)="setType($event.option)"
+              [options]="types"
+              [selected]="type"
+              [showSymbol]="true"
+              label="Type:">
+  </aio-select>
 
-  <div class="form-select-menu">
-    <button class="form-select-button" (click)="toggleStatusMenu()">
-      <strong>Status:</strong>{{status.title}}
-    </button>
-    <ul class="form-select-dropdown" *ngIf="showStatusMenu">
-      <li *ngFor="let s of statuses" (click)="setStatus(s)" [class.selected]="s === status">
-        {{s.title}}
-      </li>
-    </ul>
-  </div>
+  <aio-select (change)="setStatus($event.option)"
+              [options]="statuses"
+              [selected]="status"
+              label="Status:">
+  </aio-select>
 
   <div class="form-search">
     <input #filter placeholder="Filter" (input)="setQuery($event.target.value)">

aio/src/app/embedded/api/api-list.component.spec.ts

@@ -4,6 +4,7 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { ApiListComponent } from './api-list.component';
 import { ApiItem, ApiSection, ApiService } from './api.service';
 import { LocationService } from 'app/shared/location.service';
+import { SharedModule } from 'app/shared/shared.module';
 
 describe('ApiListComponent', () => {
   let component: ApiListComponent;
@@ -12,6 +13,7 @@ describe('ApiListComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [ SharedModule ],
       declarations: [ ApiListComponent ],
       providers: [
         { provide: ApiService, useClass: TestApiService },
@@ -75,17 +77,17 @@ describe('ApiListComponent', () => {
     });
 
     it('item.show should be true for items with selected status', () => {
-      component.setStatus({name: 'stable', title: 'Stable'});
+      component.setStatus({value: 'stable', title: 'Stable'});
       expectFilteredResult('status: stable', item => item.stability === 'stable');
     });
 
     it('item.show should be true for items with "security-risk" status when selected', () => {
-      component.setStatus({name: 'security-risk', title: 'Security Risk'});
+      component.setStatus({value: 'security-risk', title: 'Security Risk'});
       expectFilteredResult('status: security-risk', item => item.securityRisk);
     });
 
     it('item.show should be true for items of selected type', () => {
-      component.setType({name: 'class', title: 'Class'});
+      component.setType({value: 'class', title: 'Class'});
       expectFilteredResult('type: class', item => item.docType === 'class');
     });
 
@@ -189,8 +191,8 @@ describe('ApiListComponent', () => {
 
     it('should have query, status, and type', () => {
       component.setQuery('foo');
-      component.setStatus({name: 'stable', title: 'Stable'});
-      component.setType({name: 'class', title: 'Class'});
+      component.setStatus({value: 'stable', title: 'Stable'});
+      component.setType({value: 'class', title: 'Class'});
 
       const search = locationService.setSearch.calls.mostRecent().args[1];
       expect(search.query).toBe('foo');

aio/src/app/embedded/api/api-list.component.ts

@@ -15,10 +15,7 @@ import { combineLatest } from 'rxjs/observable/combineLatest';
 import { LocationService } from 'app/shared/location.service';
 import { ApiItem, ApiSection, ApiService } from './api.service';
 
-interface MenuItem {
-  name: string;
-  title: string;
-}
+import { Option } from 'app/shared/select/select.component';
 
 class SearchCriteria {
   query? = '';
@@ -40,29 +37,29 @@ export class ApiListComponent implements OnInit {
   private criteriaSubject = new ReplaySubject<SearchCriteria>(1);
   private searchCriteria = new SearchCriteria();
 
-  status: MenuItem;
-  type: MenuItem;
+  status: Option;
+  type: Option;
 
   // API types
-  types: MenuItem[] = [
-    { name: 'all', title: 'All' },
-    { name: 'directive', title: 'Directive' },
-    { name: 'pipe', title: 'Pipe'},
-    { name: 'decorator', title: 'Decorator' },
-    { name: 'class', title: 'Class' },
-    { name: 'interface', title: 'Interface' },
-    { name: 'function', title: 'Function' },
-    { name: 'enum', title: 'Enum' },
-    { name: 'type-alias', title: 'Type Alias' },
-    { name: 'const', title: 'Const'}
+  types: Option[] = [
+    { value: 'all', title: 'All' },
+    { value: 'directive', title: 'Directive' },
+    { value: 'pipe', title: 'Pipe'},
+    { value: 'decorator', title: 'Decorator' },
+    { value: 'class', title: 'Class' },
+    { value: 'interface', title: 'Interface' },
+    { value: 'function', title: 'Function' },
+    { value: 'enum', title: 'Enum' },
+    { value: 'type-alias', title: 'Type Alias' },
+    { value: 'const', title: 'Const'}
   ];
 
-  statuses: MenuItem[] = [
-    { name: 'all', title: 'All' },
-    { name: 'stable', title: 'Stable' },
-    { name: 'deprecated', title: 'Deprecated' },
-    { name: 'experimental', title: 'Experimental' },
-    { name: 'security-risk', title: 'Security Risk' }
+  statuses: Option[] = [
+    { value: 'all', title: 'All' },
+    { value: 'stable', title: 'Stable' },
+    { value: 'deprecated', title: 'Deprecated' },
+    { value: 'experimental', title: 'Experimental' },
+    { value: 'security-risk', title: 'Security Risk' }
   ];
 
   @ViewChild('filter') queryEl: ElementRef;
@@ -90,16 +87,16 @@ export class ApiListComponent implements OnInit {
     this.setSearchCriteria({query: (query || '').toLowerCase().trim() });
   }
 
-  setStatus(status: MenuItem) {
+  setStatus(status: Option) {
     this.toggleStatusMenu();
     this.status = status;
-    this.setSearchCriteria({status: status.name});
+    this.setSearchCriteria({status: status.value});
   }
 
-  setType(type: MenuItem) {
+  setType(type: Option) {
     this.toggleTypeMenu();
     this.type = type;
-    this.setSearchCriteria({type: type.name});
+    this.setSearchCriteria({type: type.value});
   }
 
   toggleStatusMenu() {
@@ -150,13 +147,13 @@ export class ApiListComponent implements OnInit {
     // Hack: can't bind to query because input cursor always forced to end-of-line.
     this.queryEl.nativeElement.value = q;
 
-    this.status = this.statuses.find(x => x.name === status) || this.statuses[0];
-    this.type = this.types.find(x => x.name === type) || this.types[0];
+    this.status = this.statuses.find(x => x.value === status) || this.statuses[0];
+    this.type = this.types.find(x => x.value === type) || this.types[0];
 
     this.searchCriteria = {
       query: q,
-      status: this.status.name,
-      type: this.type.name
+      status: this.status.value,
+      type: this.type.value
     };
 
     this.criteriaSubject.next(this.searchCriteria);

aio/src/app/embedded/contributor/contributor.component.ts

@@ -13,16 +13,16 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
 
             <div *ngIf="person.picture" class="contributor-image" [style.background-image]="'url('+pictureBase+person.picture+')'">
                 <div class="contributor-info">
-                    <button>
-                        <a *ngIf="person.bio" aria-label="View Bio">View Bio</a>
+                    <button *ngIf="person.bio" >
+                        <a aria-label="View Bio">View Bio</a>
                     </button>
-                    <button class="icon">
-                        <a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}" target="_blank">
+                    <button *ngIf="person.twitter" class="icon">
+                        <a href="https://twitter.com/{{person.twitter}}" target="_blank">
                             <span class="fa fa-twitter fa-2x"></span>
                         </a>
                     </button>
-                    <button class="icon">
-                        <a *ngIf="person.website" href="{{person.website}}" target="_blank">
+                    <button *ngIf="person.website" class="icon">
+                        <a href="{{person.website}}" target="_blank">
                             <span class="fa fa-link fa-2x"></span>
                         </a>
                     </button>
@@ -31,16 +31,16 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
 
             <div *ngIf="!person.picture" class="contributor-image" [style.background-image]="'url('+pictureBase+noPicture+')'">
                 <div class="contributor-info">
-                    <button>
-                        <a *ngIf="person.bio" aria-label="View Bio">View Bio</a>
+                    <button *ngIf="person.bio">
+                        <a aria-label="View Bio">View Bio</a>
                     </button>
-                    <button class="icon">
-                        <a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}" target="_blank">
+                    <button *ngIf="person.twitter" class="icon">
+                        <a href="https://twitter.com/{{person.twitter}}" target="_blank">
                             <span class="fa fa-twitter fa-2x"></span>
                         </a>
                     </button>
-                    <button class="icon">
-                        <a *ngIf="person.website" href="{{person.website}}" target="_blank">
+                    <button *ngIf="person.website" class="icon">
+                        <a href="{{person.website}}" target="_blank">
                             <span class="fa fa-link fa-2x"></span>
                         </a>
                     </button>

aio/src/app/embedded/embedded.module.ts

@@ -11,6 +11,7 @@ import { PrettyPrinter } from './code/pretty-printer.service';
 // Reusable components (used inside embedded components)
 import { MdIconModule, MdTabsModule } from '@angular/material';
 import { CodeComponent } from './code/code.component';
+import { SharedModule } from 'app/shared/shared.module';
 
 // Embedded Components
 import { ApiListComponent } from './api/api-list.component';
@@ -41,7 +42,8 @@ export class EmbeddedComponents {
   imports: [
     CommonModule,
     MdIconModule,
-    MdTabsModule
+    MdTabsModule,
+    SharedModule
   ],
   declarations: [
     embeddedComponents,

aio/src/app/embedded/toc/toc.component.html

@@ -13,7 +13,7 @@
     <md-icon class="rotating-icon" svgIcon="keyboard_arrow_right" [class.collapsed]="isCollapsed"></md-icon>
   </button>
 
-  <ul class="toc-list">
+  <ul class="toc-list" [class.embedded]="type !== 'Floating'">
     <ng-container *ngFor="let toc of tocList; let i = index">
       <li #tocItem title="{{toc.title}}" *ngIf="type === 'Floating' || toc.level !== 'h1'"
         class="{{toc.level}}" [class.secondary]="type === 'EmbeddedExpandable' && i >= primaryMax" [class.active]="i === activeIndex">

aio/src/app/layout/nav-item/nav-item.component.ts

@@ -16,9 +16,13 @@ export class NavItemComponent implements OnChanges {
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes['selectedNodes'] || changes['node']) {
-      const ix = this.selectedNodes.indexOf(this.node);
-      this.isSelected = ix !== -1;
-      if (ix !== 0) { this.isExpanded = this.isSelected; }
+      if (this.selectedNodes) {
+        const ix = this.selectedNodes.indexOf(this.node);
+        this.isSelected = ix !== -1;
+        if (ix !== 0) { this.isExpanded = this.isSelected; }
+      } else {
+        this.isSelected = false;
+      }
     }
     this.setClasses();
   }

aio/src/app/layout/nav-menu/nav-menu.component.ts

@@ -4,7 +4,7 @@ import { CurrentNode, NavigationNode } from 'app/navigation/navigation.service';
 @Component({
   selector: 'aio-nav-menu',
   template: `
-  <aio-nav-item *ngFor="let node of filteredNodes" [node]="node" [selectedNodes]="currentNode.nodes">
+  <aio-nav-item *ngFor="let node of filteredNodes" [node]="node" [selectedNodes]="currentNode?.nodes">
   </aio-nav-item>`
 })
 export class NavMenuComponent {

aio/src/app/navigation/navigation.model.ts

@@ -19,7 +19,7 @@ export interface NavigationViews {
 /**
  *  Navigation information about a node at specific URL
  *  url: the current URL
- *  view: 'SideNav' | 'TopBar' | 'Footer'
+ *  view: 'SideNav' | 'TopBar' | 'Footer' | etc
  *  nodes: the current node and its ancestor nodes within that view
  */
 export interface CurrentNode {
@@ -28,6 +28,15 @@ export interface CurrentNode {
   nodes: NavigationNode[];
 }
 
+/**
+ * A map of current nodes by view.
+ * This is needed because some urls map to nodes in more than one view.
+ * If a view does not contain a node that matches the current url then the value will be undefined.
+ */
+export interface CurrentNodes {
+  [view: string]: CurrentNode;
+}
+
 export interface VersionInfo {
   raw: string;
   major: number;

aio/src/app/navigation/navigation.service.spec.ts

@@ -1,7 +1,7 @@
 import { ReflectiveInjector } from '@angular/core';
 import { Http, ConnectionBackend, RequestOptions, BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
 import { MockBackend } from '@angular/http/testing';
-import { CurrentNode, NavigationService, NavigationViews, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
+import { CurrentNodes, NavigationService, NavigationViews, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
 import { LocationService } from 'app/shared/location.service';
 import { MockLocationService } from 'testing/location.service';
 import { Logger } from 'app/shared/logger.service';
@@ -113,7 +113,7 @@ describe('NavigationService', () => {
   });
 
   describe('currentNode', () => {
-    let currentNode: CurrentNode;
+    let currentNodes: CurrentNodes;
     let locationService: MockLocationService;
 
     const topBarNodes: NavigationNode[] = [
@@ -138,80 +138,92 @@ describe('NavigationService', () => {
 
     beforeEach(() => {
       locationService = injector.get(LocationService);
-      navService.currentNode.subscribe(selected => currentNode = selected);
+      navService.currentNodes.subscribe(selected => currentNodes = selected);
       backend.connectionsArray[0].mockRespond(createResponse(navJson));
     });
 
     it('should list the side navigation node that matches the current location, and all its ancestors', () => {
       locationService.go('b');
-      expect(currentNode).toEqual({
-        url: 'b',
-        view: 'SideNav',
-        nodes: [
-          sideNavNodes[0].children[0],
-          sideNavNodes[0]
-        ]
+      expect(currentNodes).toEqual({
+        SideNav: {
+          url: 'b',
+          view: 'SideNav',
+          nodes: [
+            sideNavNodes[0].children[0],
+            sideNavNodes[0]
+          ]
+        }
       });
 
       locationService.go('d');
-      expect(currentNode).toEqual({
-        url: 'd',
-        view: 'SideNav',
-        nodes: [
-          sideNavNodes[0].children[0].children[1],
-          sideNavNodes[0].children[0],
-          sideNavNodes[0]
-        ]
+      expect(currentNodes).toEqual({
+        SideNav: {
+          url: 'd',
+          view: 'SideNav',
+          nodes: [
+            sideNavNodes[0].children[0].children[1],
+            sideNavNodes[0].children[0],
+            sideNavNodes[0]
+          ]
+        }
       });
 
       locationService.go('f');
-      expect(currentNode).toEqual({
-        url: 'f',
-        view: 'SideNav',
-        nodes: [ sideNavNodes[1] ]
+      expect(currentNodes).toEqual({
+        SideNav: {
+          url: 'f',
+          view: 'SideNav',
+          nodes: [ sideNavNodes[1] ]
+        }
       });
     });
 
     it('should be a TopBar selected node if the current location is a top menu node', () => {
       locationService.go('features');
-      expect(currentNode).toEqual({
-        url: 'features',
-        view: 'TopBar',
-        nodes: [ topBarNodes[0] ]
+      expect(currentNodes).toEqual({
+        TopBar: {
+          url: 'features',
+          view: 'TopBar',
+          nodes: [ topBarNodes[0] ]
+        }
       });
     });
 
-    it('should be a plain object if no side navigation node matches the current location', () => {
+    it('should be a plain object if no navigation node matches the current location', () => {
       locationService.go('g?search=moo#anchor-1');
-      expect(currentNode).toEqual({
-        url: 'g',
-        view: '',
-        nodes: []
+      expect(currentNodes).toEqual({
+        '': {
+          url: 'g',
+          view: '',
+          nodes: []
+        }
       });
     });
 
     it('should ignore trailing slashes, hashes, and search params on URLs in the navmap', () => {
-      const cnode: CurrentNode = {
-        url: 'c',
-        view: 'SideNav',
-        nodes: [
-          sideNavNodes[0].children[0].children[0],
-          sideNavNodes[0].children[0],
-          sideNavNodes[0]
-        ]
+      const cnode: CurrentNodes = {
+        SideNav: {
+          url: 'c',
+          view: 'SideNav',
+          nodes: [
+            sideNavNodes[0].children[0].children[0],
+            sideNavNodes[0].children[0],
+            sideNavNodes[0]
+          ]
+        }
       };
 
       locationService.go('c');
-      expect(currentNode).toEqual(cnode, 'location: c');
+      expect(currentNodes).toEqual(cnode, 'location: c');
 
       locationService.go('c#foo');
-      expect(currentNode).toEqual(cnode, 'location: c#foo');
+      expect(currentNodes).toEqual(cnode, 'location: c#foo');
 
       locationService.go('c?foo=1');
-      expect(currentNode).toEqual(cnode, 'location: c?foo=1');
+      expect(currentNodes).toEqual(cnode, 'location: c?foo=1');
 
       locationService.go('c#foo?bar=1&baz=2');
-      expect(currentNode).toEqual(cnode, 'location: c#foo?bar=1&baz=2');
+      expect(currentNodes).toEqual(cnode, 'location: c#foo?bar=1&baz=2');
     });
   });
 

aio/src/app/navigation/navigation.service.ts

@@ -13,8 +13,8 @@ import { LocationService } from 'app/shared/location.service';
 import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
 
 // Import and re-export the Navigation model types
-import { CurrentNode, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
-export { CurrentNode, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
+import { CurrentNodes, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
+export { CurrentNodes, CurrentNode, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
 
 const navigationPath = CONTENT_URL_PREFIX + 'navigation.json';
 
@@ -35,13 +35,13 @@ export class NavigationService {
    * node (if any) that matches the current URL location
    * including its navigation view and its ancestor nodes in that view
    */
-  currentNode: Observable<CurrentNode>;
+  currentNodes: Observable<CurrentNodes>;
 
   constructor(private http: Http, private location: LocationService, private logger: Logger) {
     const navigationInfo = this.fetchNavigationInfo();
     this.navigationViews = this.getNavigationViews(navigationInfo);
 
-    this.currentNode = this.getCurrentNode(this.navigationViews);
+    this.currentNodes = this.getCurrentNodes(this.navigationViews);
     // The version information is packaged inside the navigation response to save us an extra request.
     this.versionInfo = this.getVersionInfo(navigationInfo);
   }
@@ -88,23 +88,23 @@ export class NavigationService {
   }
 
   /**
-   * Get an observable of the current node (the one that matches the current URL)
+   * Get an observable of the current nodes (the ones that match the current URL)
    * We use `publishReplay(1)` because otherwise subscribers will have to wait until the next
    * URL change before they receive an emission.
    * See above for discussion of using `connect`.
    */
-  private getCurrentNode(navigationViews: Observable<NavigationViews>): Observable<CurrentNode> {
-    const currentNode = combineLatest(
+  private getCurrentNodes(navigationViews: Observable<NavigationViews>): Observable<CurrentNodes> {
+    const currentNodes = combineLatest(
       navigationViews.map(views => this.computeUrlToNavNodesMap(views)),
       this.location.currentPath,
 
       (navMap, url) => {
         const urlKey = url.startsWith('api/') ? 'api' : url;
-        return navMap[urlKey] || { view: '', url: urlKey, nodes: [] };
+        return navMap[urlKey] || { '' : { view: '', url: urlKey, nodes: [] }};
       })
       .publishReplay(1);
-    currentNode.connect();
-    return currentNode;
+    currentNodes.connect();
+    return currentNodes;
   }
 
   /**
@@ -114,7 +114,7 @@ export class NavigationService {
    * @param navigation - A collection of navigation nodes that are to be mapped
    */
   private computeUrlToNavNodesMap(navigation: NavigationViews) {
-    const navMap = new Map<string, CurrentNode>();
+    const navMap = new Map<string, CurrentNodes>();
     Object.keys(navigation)
       .forEach(view => navigation[view]
         .forEach(node => this.walkNodes(view, navMap, node)));
@@ -138,7 +138,7 @@ export class NavigationService {
    * patching them and computing their ancestor nodes
    */
   private walkNodes(
-    view: string, navMap: Map<string, CurrentNode>,
+    view: string, navMap: Map<string, CurrentNodes>,
     node: NavigationNode, ancestors: NavigationNode[] = []) {
       const nodes = [node, ...ancestors];
       const url = node.url;
@@ -147,7 +147,9 @@ export class NavigationService {
       // only map to this node if it has a url
       if (url) {
         // Strip off trailing slashes from nodes in the navMap - they are not relevant to matching
-        navMap[url.replace(/\/$/, '')] = { url, view, nodes };
+        const cleanedUrl = url.replace(/\/$/, '');
+        const navMapItem = navMap[cleanedUrl] = navMap[cleanedUrl] || {};
+        navMapItem[view] = { url, view, nodes };
       }
 
       if (node.children) {

aio/src/app/search/search-box/search-box.component.spec.ts

@@ -44,6 +44,14 @@ describe('SearchBoxComponent', () => {
     }));
   });
 
+  describe('on input', () => {
+    it('should trigger the search event', () => {
+      const input = fixture.debugElement.query(By.css('input'));
+      input.triggerEventHandler('input', { target: { value: 'some query' } });
+      expect(host.doSearch).toHaveBeenCalledWith('some query');
+    });
+  });
+
   describe('on keyup', () => {
     it('should trigger the search event', () => {
       const input = fixture.debugElement.query(By.css('input'));

aio/src/app/search/search-box/search-box.component.ts

@@ -14,8 +14,10 @@ import { LocationService } from 'app/shared/location.service';
 @Component({
   selector: 'aio-search-box',
   template: `<input #searchBox
+    type="search"
     aria-label="search"
     placeholder="Search"
+    (input)="onSearch($event.target.value)"
     (keyup)="onSearch($event.target.value)"
     (focus)="onSearch($event.target.value)"
     (click)="onSearch($event.target.value)">`

aio/src/app/search/search-results/search-results.component.html

@@ -5,7 +5,7 @@
 <ng-template #searchResults>
   <h2 class="visually-hidden">Search Results</h2>
   <div class="search-area" *ngFor="let area of searchAreas">
-    <h3>{{area.name}} ({{area.pages.length}})</h3>
+    <h3>{{area.name}} ({{area.pages.length + area.priorityPages.length}})</h3>
     <ul class="priority-pages" >
       <li class="search-page" *ngFor="let page of area.priorityPages">
         <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">
@@ -13,7 +13,6 @@
         </a>
       </li>
     </ul>
-    <div class="more-items material-icons" *ngIf="area.priorityPages.length > 0">more_horiz</div>
     <ul>
       <li class="search-page" *ngFor="let page of area.pages">
         <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">

aio/src/app/search/search-results/search-results.component.spec.ts

@@ -33,6 +33,11 @@ describe('SearchResultsComponent', () => {
     return take === undefined ? results : results.slice(0, take);
   }
 
+  function compareTitle(l: {title: string}, r: {title: string}) {
+    return l.title.toUpperCase() > r.title.toUpperCase() ? 1 : -1;
+  }
+
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ SearchResultsComponent ],
@@ -54,13 +59,13 @@ describe('SearchResultsComponent', () => {
 
     searchResults.next({ query: '', results: results});
     expect(component.searchAreas).toEqual([
-      { name: 'api', pages: [
+      { name: 'api', priorityPages: [
         { path: 'api/d', title: 'API D', type: '', keywords: '', titleWords: '' }
-      ], priorityPages: [] },
-      { name: 'guide', pages: [
+      ], pages: [] },
+      { name: 'guide', priorityPages: [
         { path: 'guide/a', title: 'Guide A', type: '', keywords: '', titleWords: '' },
         { path: 'guide/b', title: 'Guide B', type: '', keywords: '', titleWords: '' },
-      ], priorityPages: [] }
+      ], pages: [] }
     ]);
   });
 
@@ -70,48 +75,35 @@ describe('SearchResultsComponent', () => {
       { path: 'tutorial/toh-pt1', title: 'Tutorial - part 1', type: '', keywords: '', titleWords: '' },
     ]});
     expect(component.searchAreas).toEqual([
-      { name: 'tutorial', pages: [
-        { path: 'tutorial/toh-pt1', title: 'Tutorial - part 1', type: '', keywords: '', titleWords: '' },
+      { name: 'tutorial', priorityPages: [
         { path: 'tutorial', title: 'Tutorial index', type: '', keywords: '', titleWords: '' },
-      ], priorityPages: [] }
+        { path: 'tutorial/toh-pt1', title: 'Tutorial - part 1', type: '', keywords: '', titleWords: '' },
+      ], pages: [] }
     ]);
   });
 
-  it('should sort by title within sorted area', () => {
-    const results = getTestResults(5);
-    searchResults.next({ query: '', results: results });
-
-    expect(component.searchAreas).toEqual([
-      { name: 'api', pages: [
-        { path: 'api/c', title: 'API C', type: '', keywords: '', titleWords: '' },
-        { path: 'api/d', title: 'API D', type: '', keywords: '', titleWords: '' },
-      ], priorityPages: [] },
-      { name: 'guide', pages: [
-        { path: 'guide/a', title: 'Guide A',       type: '', keywords: '', titleWords: '' },
-        { path: 'guide/a/c', title: 'Guide A - C', type: '', keywords: '', titleWords: '' },
-        { path: 'guide/b', title: 'Guide B',       type: '', keywords: '', titleWords: '' },
-      ], priorityPages: [] }
-    ]);
-  });
-
-  it('should put first 5 area results into priorityPages when more than 10 pages', () => {
+  it('should put first 5 results for each area into priorityPages', () => {
     const results = getTestResults();
-    const sorted = results.slice().sort((l, r) => l.title > r.title ? 1 : -1);
-    const expected = [
-      {
-        name: 'api',
-        pages: sorted.filter(p => p.path.startsWith('api')),
-        priorityPages: []
-      },
-      {
-        name: 'guide',
-        pages: sorted.filter(p => p.path.startsWith('guide')),
-        priorityPages: results.filter(p => p.path.startsWith('guide')).slice(0, 5)
-      }
-    ];
-
     searchResults.next({ query: '', results: results });
-    expect(component.searchAreas).toEqual(expected);
+    expect(component.searchAreas[0].priorityPages).toEqual(results.filter(p => p.path.startsWith('api')).slice(0, 5));
+    expect(component.searchAreas[1].priorityPages).toEqual(results.filter(p => p.path.startsWith('guide')).slice(0, 5));
+  });
+
+  it('should put the nonPriorityPages into the pages array, sorted by title', () => {
+    const results = getTestResults();
+    searchResults.next({ query: '', results: results });
+    expect(component.searchAreas[0].pages).toEqual([]);
+    expect(component.searchAreas[1].pages).toEqual(results.filter(p => p.path.startsWith('guide')).slice(5).sort(compareTitle));
+  });
+
+  it('should put a total count in the header of each area of search results', () => {
+    const results = getTestResults();
+    searchResults.next({ query: '', results: results });
+    fixture.detectChanges();
+    const headers = fixture.debugElement.queryAll(By.css('h3'));
+    expect(headers.length).toEqual(2);
+    expect(headers[0].nativeElement.textContent).toContain('(2)');
+    expect(headers[1].nativeElement.textContent).toContain('(13)');
   });
 
   it('should put search results with no containing folder into the default area (other)', () => {
@@ -121,9 +113,9 @@ describe('SearchResultsComponent', () => {
 
     searchResults.next({ query: '', results: results });
     expect(component.searchAreas).toEqual([
-      { name: 'other', pages: [
+      { name: 'other', priorityPages: [
         { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
-      ], priorityPages: [] }
+      ], pages: [] }
     ]);
   });
 

aio/src/app/search/search-results/search-results.component.ts

@@ -60,8 +60,10 @@ export class SearchResultsComponent implements OnInit, OnDestroy {
     });
     const keys = Object.keys(searchAreaMap).sort((l, r) => l > r ? 1 : -1);
     return keys.map(name => {
-      let pages = searchAreaMap[name];
-      const priorityPages = pages.length > 10 ? searchAreaMap[name].slice(0, 5) : [];
+      let pages: SearchResult[] = searchAreaMap[name];
+
+      // Extract the top 5 most relevant results as priorityPages
+      const priorityPages = pages.splice(0, 5);
       pages = pages.sort(compareResults);
       return { name, pages, priorityPages };
     });

aio/src/app/shared/scroll-spy.service.spec.ts

@@ -300,6 +300,7 @@ describe('ScrollSpyService', () => {
   });
 
   describe('window resize events', () => {
+    const RESIZE_EVENT_DELAY = 300;
     let onResizeSpy: jasmine.Spy;
 
     beforeEach(() => {
@@ -317,7 +318,7 @@ describe('ScrollSpyService', () => {
       window.dispatchEvent(new Event('resize'));
       expect(onResizeSpy).not.toHaveBeenCalled();
 
-      tick(300);
+      tick(RESIZE_EVENT_DELAY);
       expect(onResizeSpy).toHaveBeenCalled();
     }));
 
@@ -327,58 +328,59 @@ describe('ScrollSpyService', () => {
       onResizeSpy.calls.reset();
 
       window.dispatchEvent(new Event('resize'));
-      tick(300);
+      tick(RESIZE_EVENT_DELAY);
       expect(onResizeSpy).toHaveBeenCalled();
 
       info1.unspy();
       onResizeSpy.calls.reset();
 
       window.dispatchEvent(new Event('resize'));
-      tick(300);
+      tick(RESIZE_EVENT_DELAY);
       expect(onResizeSpy).toHaveBeenCalled();
 
       info2.unspy();
       onResizeSpy.calls.reset();
 
       window.dispatchEvent(new Event('resize'));
-      tick(300);
+      tick(RESIZE_EVENT_DELAY);
       expect(onResizeSpy).not.toHaveBeenCalled();
     }));
 
-    it('should only fire every 300ms', fakeAsync(() => {
+    it(`should only fire every ${RESIZE_EVENT_DELAY}ms`, fakeAsync(() => {
       scrollSpyService.spyOn([]);
       onResizeSpy.calls.reset();
 
       window.dispatchEvent(new Event('resize'));
-      tick(100);
+      tick(RESIZE_EVENT_DELAY - 2);
       expect(onResizeSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('resize'));
-      tick(100);
+      tick(1);
       expect(onResizeSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('resize'));
-      tick(100);
+      tick(1);
       expect(onResizeSpy).toHaveBeenCalledTimes(1);
 
       onResizeSpy.calls.reset();
-      tick(150);
+      tick(RESIZE_EVENT_DELAY / 2);
 
       window.dispatchEvent(new Event('resize'));
-      tick(100);
+      tick(RESIZE_EVENT_DELAY - 2);
       expect(onResizeSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('resize'));
-      tick(100);
+      tick(1);
       expect(onResizeSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('resize'));
-      tick(100);
+      tick(1);
       expect(onResizeSpy).toHaveBeenCalledTimes(1);
     }));
   });
 
   describe('window scroll events', () => {
+    const SCROLL_EVENT_DELAY = 10;
     let onScrollSpy: jasmine.Spy;
 
     beforeEach(() => {
@@ -395,7 +397,7 @@ describe('ScrollSpyService', () => {
       window.dispatchEvent(new Event('scroll'));
       expect(onScrollSpy).not.toHaveBeenCalled();
 
-      tick(300);
+      tick(SCROLL_EVENT_DELAY);
       expect(onScrollSpy).toHaveBeenCalled();
     }));
 
@@ -404,52 +406,52 @@ describe('ScrollSpyService', () => {
       const info2 = scrollSpyService.spyOn([]);
 
       window.dispatchEvent(new Event('scroll'));
-      tick(300);
+      tick(SCROLL_EVENT_DELAY);
       expect(onScrollSpy).toHaveBeenCalled();
 
       info1.unspy();
       onScrollSpy.calls.reset();
 
       window.dispatchEvent(new Event('scroll'));
-      tick(300);
+      tick(SCROLL_EVENT_DELAY);
       expect(onScrollSpy).toHaveBeenCalled();
 
       info2.unspy();
       onScrollSpy.calls.reset();
 
       window.dispatchEvent(new Event('scroll'));
-      tick(300);
+      tick(SCROLL_EVENT_DELAY);
       expect(onScrollSpy).not.toHaveBeenCalled();
     }));
 
-    it('should only fire every 300ms', fakeAsync(() => {
+    it(`should only fire every ${SCROLL_EVENT_DELAY}ms`, fakeAsync(() => {
       scrollSpyService.spyOn([]);
 
       window.dispatchEvent(new Event('scroll'));
-      tick(100);
+      tick(SCROLL_EVENT_DELAY - 2);
       expect(onScrollSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('scroll'));
-      tick(100);
+      tick(1);
       expect(onScrollSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('scroll'));
-      tick(100);
+      tick(1);
       expect(onScrollSpy).toHaveBeenCalledTimes(1);
 
       onScrollSpy.calls.reset();
-      tick(150);
+      tick(SCROLL_EVENT_DELAY / 2);
 
       window.dispatchEvent(new Event('scroll'));
-      tick(100);
+      tick(SCROLL_EVENT_DELAY - 2);
       expect(onScrollSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('scroll'));
-      tick(100);
+      tick(1);
       expect(onScrollSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('scroll'));
-      tick(100);
+      tick(1);
       expect(onScrollSpy).toHaveBeenCalledTimes(1);
     }));
   });

aio/src/app/shared/scroll-spy.service.ts

@@ -124,7 +124,7 @@ export class ScrollSpyService {
   private spiedElementGroups: ScrollSpiedElementGroup[] = [];
   private onStopListening = new Subject();
   private resizeEvents = Observable.fromEvent(window, 'resize').auditTime(300).takeUntil(this.onStopListening);
-  private scrollEvents = Observable.fromEvent(window, 'scroll').auditTime(300).takeUntil(this.onStopListening);
+  private scrollEvents = Observable.fromEvent(window, 'scroll').auditTime(10).takeUntil(this.onStopListening);
   private lastContentHeight: number;
   private lastMaxScrollTop: number;
 

aio/src/app/shared/scroll.service.spec.ts

@@ -5,6 +5,7 @@ import { DOCUMENT } from '@angular/platform-browser';
 import { ScrollService, topMargin } from './scroll.service';
 
 describe('ScrollService', () => {
+  const topOfPageElem = {} as Element;
   let injector: ReflectiveInjector;
   let document: MockDocument;
   let location: MockPlatformLocation;
@@ -16,7 +17,7 @@ describe('ScrollService', () => {
 
   class MockDocument {
     body = new MockElement();
-    getElementById = jasmine.createSpy('Document getElementById');
+    getElementById = jasmine.createSpy('Document getElementById').and.returnValue(topOfPageElem);
     querySelector = jasmine.createSpy('Document querySelector');
   }
 
@@ -39,6 +40,69 @@ describe('ScrollService', () => {
     scrollService = injector.get(ScrollService);
   });
 
+  describe('#topOffset', () => {
+    it('should query for the top-bar by CSS selector', () => {
+      expect(document.querySelector).not.toHaveBeenCalled();
+
+      expect(scrollService.topOffset).toBe(topMargin);
+      expect(document.querySelector).toHaveBeenCalled();
+    });
+
+    it('should be calculated based on the top-bar\'s height + margin', () => {
+      (document.querySelector as jasmine.Spy).and.returnValue({clientHeight: 50});
+      expect(scrollService.topOffset).toBe(50 + topMargin);
+    });
+
+    it('should only query for the top-bar once', () => {
+      expect(scrollService.topOffset).toBe(topMargin);
+      (document.querySelector as jasmine.Spy).calls.reset();
+
+      expect(scrollService.topOffset).toBe(topMargin);
+      expect(document.querySelector).not.toHaveBeenCalled();
+    });
+
+    it('should retrieve the top-bar\'s height again after resize', () => {
+      let clientHeight = 50;
+      (document.querySelector as jasmine.Spy).and.callFake(() => ({clientHeight}));
+
+      expect(scrollService.topOffset).toBe(50 + topMargin);
+      expect(document.querySelector).toHaveBeenCalled();
+
+      (document.querySelector as jasmine.Spy).calls.reset();
+      clientHeight = 100;
+
+      expect(scrollService.topOffset).toBe(50 + topMargin);
+      expect(document.querySelector).not.toHaveBeenCalled();
+
+      window.dispatchEvent(new Event('resize'));
+
+      expect(scrollService.topOffset).toBe(100 + topMargin);
+      expect(document.querySelector).toHaveBeenCalled();
+    });
+  });
+
+  describe('#topOfPageElement', () => {
+    it('should query for the top-of-page element by ID', () => {
+      expect(document.getElementById).not.toHaveBeenCalled();
+
+      expect(scrollService.topOfPageElement).toBe(topOfPageElem);
+      expect(document.getElementById).toHaveBeenCalled();
+    });
+
+    it('should only query for the top-of-page element once', () => {
+      expect(scrollService.topOfPageElement).toBe(topOfPageElem);
+      (document.getElementById as jasmine.Spy).calls.reset();
+
+      expect(scrollService.topOfPageElement).toBe(topOfPageElem);
+      expect(document.getElementById).not.toHaveBeenCalled();
+    });
+
+    it('should return `<body>` if unable to find the top-of-page element', () => {
+      (document.getElementById as jasmine.Spy).and.returnValue(null);
+      expect(scrollService.topOfPageElement).toBe(document.body as any);
+    });
+  });
+
   describe('#scroll', () => {
     it('should scroll to the top if there is no hash', () => {
       location.hash = '';
@@ -74,10 +138,28 @@ describe('ScrollService', () => {
 
   describe('#scrollToElement', () => {
     it('should scroll to element', () => {
-      const element = <Element><any> new MockElement();
+      const element: Element = new MockElement() as any;
       scrollService.scrollToElement(element);
       expect(element.scrollIntoView).toHaveBeenCalled();
-      expect(window.scrollBy).toHaveBeenCalledWith(0, -topMargin);
+      expect(window.scrollBy).toHaveBeenCalledWith(0, -scrollService.topOffset);
+    });
+
+    it('should scroll all the way to the top if close enough', () => {
+      const element: Element = new MockElement() as any;
+
+      (window as any).pageYOffset = 25;
+      scrollService.scrollToElement(element);
+
+      expect(element.scrollIntoView).toHaveBeenCalled();
+      expect(window.scrollBy).toHaveBeenCalledWith(0, -scrollService.topOffset);
+      (window.scrollBy as jasmine.Spy).calls.reset();
+
+      (window as any).pageYOffset = 15;
+      scrollService.scrollToElement(element);
+
+      expect(element.scrollIntoView).toHaveBeenCalled();
+      expect(window.scrollBy).toHaveBeenCalledWith(0, -scrollService.topOffset);
+      expect(window.scrollBy).toHaveBeenCalledWith(0, -15);
     });
 
     it('should do nothing if no element', () => {

aio/src/app/shared/scroll.service.ts

@@ -1,6 +1,7 @@
 import { Injectable, Inject } from '@angular/core';
 import { PlatformLocation } from '@angular/common';
 import { DOCUMENT } from '@angular/platform-browser';
+import {fromEvent} from 'rxjs/observable/fromEvent';
 
 export const topMargin = 16;
 /**
@@ -9,19 +10,20 @@ export const topMargin = 16;
 @Injectable()
 export class ScrollService {
 
-  private _topOffset: number;
+  private _topOffset: number | null;
   private _topOfPageElement: Element;
 
-  /** Offset from the top of the document to bottom of toolbar + some margin */
+  // Offset from the top of the document to bottom of any static elements
+  // at the top (e.g. toolbar) + some margin
   get topOffset() {
     if (!this._topOffset) {
-      const toolbar = document.querySelector('md-toolbar.app-toolbar');
-      this._topOffset = (toolbar ? toolbar.clientHeight : 0) + topMargin;
+      const toolbar = this.document.querySelector('md-toolbar.app-toolbar');
+      this._topOffset = (toolbar && toolbar.clientHeight || 0) + topMargin;
     }
     return this._topOffset;
   }
 
-  private get topOfPageElement() {
+  get topOfPageElement() {
     if (!this._topOfPageElement) {
       this._topOfPageElement = this.document.getElementById('top-of-page') || this.document.body;
     }
@@ -30,7 +32,10 @@ export class ScrollService {
 
   constructor(
       @Inject(DOCUMENT) private document: any,
-      private location: PlatformLocation) { }
+      private location: PlatformLocation) {
+    // On resize, the toolbar might change height, so "invalidate" the top offset.
+    fromEvent(window, 'resize').subscribe(() => this._topOffset = null);
+  }
 
   /**
    * Scroll to the element with id extracted from the current location hash fragment.
@@ -52,7 +57,14 @@ export class ScrollService {
   scrollToElement(element: Element) {
     if (element) {
       element.scrollIntoView();
-      if (window && window.scrollBy) { window.scrollBy(0, -this.topOffset); }
+      if (window && window.scrollBy) {
+        window.scrollBy(0, -this.topOffset);
+        if (window.pageYOffset < 20) {
+          // If we are very close to the top (<20px), then scroll all the way up.
+          // (This can happen if `element` is at the top of the page, but has a small top-margin.)
+          window.scrollBy(0, -window.pageYOffset);
+        }
+      }
     }
   }
 

aio/src/app/shared/select/select.component.html

@@ -0,0 +1,16 @@
+<div class="form-select-menu">
+  <button class="form-select-button" (click)="toggleOptions()">
+    <strong>{{label}}</strong><span *ngIf="showSymbol" class="symbol {{selected?.value}}"></span>{{selected?.title}}
+  </button>
+  <ul class="form-select-dropdown" *ngIf="showOptions">
+    <li *ngFor="let option of options; index as i"
+        [class.selected]="option === selected"
+        role="button"
+        tabindex="0"
+        (click)="select(option, i)"
+        (keydown.enter)="select(option, i)"
+        (keydown.space)="select(option, i); $event.preventDefault()">
+      <span *ngIf="showSymbol" class="symbol {{option.value}}"></span>{{option.title}}
+    </li>
+  </ul>
+</div>

aio/src/app/shared/select/select.component.spec.ts

@@ -0,0 +1,165 @@
+import { Component, DebugElement } from '@angular/core';
+import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { SelectComponent, Option } from './select.component';
+
+const options = [
+  { title: 'Option A', value: 'option-a' },
+  { title: 'Option B', value: 'option-b' }
+];
+
+let component: SelectComponent;
+let host: HostComponent;
+let fixture: ComponentFixture<HostComponent>;
+let element: DebugElement;
+
+describe('SelectComponent', () => {
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SelectComponent, HostComponent ],
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HostComponent);
+    host = fixture.componentInstance;
+    element = fixture.debugElement.query(By.directive(SelectComponent));
+    component = element.componentInstance;
+  });
+
+  describe('(initially)', () => {
+    it('should show the button and no options', () => {
+      expect(getButton()).toBeDefined();
+      expect(getOptionContainer()).toEqual(null);
+    });
+  });
+
+  describe('button', () => {
+    it('should display the label if provided', () => {
+      expect(getButton().textContent.trim()).toEqual('');
+      host.label = 'Label:';
+      fixture.detectChanges();
+      expect(getButton().textContent.trim()).toEqual('Label:');
+    });
+
+    it('should contain a symbol `<span>` if hasSymbol is true', () => {
+      expect(getButton().querySelector('span')).toEqual(null);
+      host.showSymbol = true;
+      fixture.detectChanges();
+      const span = getButton().querySelector('span');
+      expect(span).not.toEqual(null);
+      expect(span.className).toContain('symbol');
+    });
+
+    it('should display the selected option, if there is one', () => {
+      host.showSymbol = true;
+      host.selected = options[0];
+      fixture.detectChanges();
+      expect(getButton().textContent).toContain(options[0].title);
+      expect(getButton().querySelector('span').className).toContain(options[0].value);
+    });
+
+    it('should toggle the visibility of the options list when clicked', () => {
+      host.options = options;
+      getButton().click();
+      fixture.detectChanges();
+      expect(getOptionContainer()).not.toEqual(null);
+      getButton().click();
+      fixture.detectChanges();
+      expect(getOptionContainer()).toEqual(null);
+    });
+  });
+
+  describe('options list', () => {
+    beforeEach(() => {
+      host.options = options;
+      host.showSymbol = true;
+      getButton().click(); // ensure the the options are visible
+      fixture.detectChanges();
+    });
+
+    it('should show the corresponding title of each option', () => {
+      getOptions().forEach((li, index) => {
+        expect(li.textContent).toContain(options[index].title);
+      });
+    });
+
+    it('should select the option that is clicked', () => {
+      getOptions()[0].click();
+      fixture.detectChanges();
+      expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
+      expect(getButton().textContent).toContain(options[0].title);
+      expect(getButton().querySelector('span').className).toContain(options[0].value);
+    });
+
+    it('should select the current option when enter is pressed', () => {
+      const e = new KeyboardEvent('keydown', {bubbles: true, cancelable: true, key: 'Enter'});
+      getOptions()[0].dispatchEvent(e);
+      fixture.detectChanges();
+      expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
+      expect(getButton().textContent).toContain(options[0].title);
+      expect(getButton().querySelector('span').className).toContain(options[0].value);
+    });
+
+    it('should select the current option when space is pressed', () => {
+      const e = new KeyboardEvent('keydown', {bubbles: true, cancelable: true, key: ' '});
+      getOptions()[0].dispatchEvent(e);
+      fixture.detectChanges();
+      expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
+      expect(getButton().textContent).toContain(options[0].title);
+      expect(getButton().querySelector('span').className).toContain(options[0].value);
+    });
+
+    it('should hide when an option is clicked', () => {
+      getOptions()[0].click();
+      fixture.detectChanges();
+      expect(getOptionContainer()).toEqual(null);
+    });
+
+    it('should hide when there is a click that is not on the option list', () => {
+      fixture.nativeElement.click();
+      fixture.detectChanges();
+      expect(getOptionContainer()).toEqual(null);
+    });
+
+    it('should hide if the escape button is pressed', () => {
+      const e = new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'Escape' });
+      document.dispatchEvent(e);
+      fixture.detectChanges();
+      expect(getOptionContainer()).toEqual(null);
+    });
+  });
+});
+
+
+
+@Component({
+  template: `
+    <aio-select (change)="onChange($event)"
+              [options]="options"
+              [selected]="selected"
+              [label]="label"
+              [showSymbol]="showSymbol">
+    </aio-select>`
+})
+class HostComponent {
+  onChange = jasmine.createSpy('onChange');
+  options: Option[];
+  selected: Option;
+  label: string;
+  showSymbol: boolean;
+}
+
+function getButton(): HTMLButtonElement {
+  return element.query(By.css('button')).nativeElement;
+}
+
+function getOptionContainer(): HTMLUListElement {
+  const de = element.query(By.css('ul'));
+  return de && de.nativeElement;
+}
+
+function getOptions(): HTMLLIElement[] {
+  return element.queryAll(By.css('li')).map(de => de.nativeElement);
+}

aio/src/app/shared/select/select.component.ts

@@ -0,0 +1,62 @@
+import { Component, ElementRef, EventEmitter, HostListener, Input, Output, OnInit } from '@angular/core';
+
+export interface Option {
+  title: string;
+  value?: any;
+}
+
+@Component({
+  selector: 'aio-select',
+  templateUrl: 'select.component.html'
+})
+export class SelectComponent implements OnInit {
+  @Input()
+  selected: Option;
+
+  @Input()
+  options: Option[];
+
+  @Output()
+  change = new EventEmitter<{option: Option, index: number}>();
+
+  @Input()
+  showSymbol = false;
+
+  @Input()
+  label: string;
+
+  showOptions = false;
+
+  constructor(private hostElement: ElementRef) {}
+
+  ngOnInit() {
+    this.label = this.label || '';
+  }
+
+  toggleOptions() {
+    this.showOptions = !this.showOptions;
+  }
+
+  hideOptions() {
+    this.showOptions = false;
+  }
+
+  select(option: Option, index: number) {
+    this.selected = option;
+    this.change.emit({option, index});
+    this.hideOptions();
+  }
+
+  @HostListener('document:click', ['$event.target'])
+  onClick(eventTarget: HTMLElement) {
+    // Hide the options if we clicked outside the component
+    if (!this.hostElement.nativeElement.contains(eventTarget)) {
+      this.hideOptions();
+    }
+  }
+
+  @HostListener('document:keydown.escape')
+  onKeyDown() {
+    this.hideOptions();
+  }
+}

aio/src/app/shared/shared.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SelectComponent } from './select/select.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    SelectComponent
+  ],
+  declarations: [
+    SelectComponent
+  ]
+})
+export class SharedModule {}

aio/src/app/shared/toc.service.spec.ts

@@ -243,6 +243,11 @@ describe('TocService', () => {
       expect(tocItem.href).toEqual(`${docId}#heading-one-special-id`);
     });
 
+    it('should have level "h1" for an <h1>', () => {
+      const tocItem = lastTocList.find(item => item.title === 'Fun with TOC');
+      expect(tocItem.level).toEqual('h1');
+    });
+
     it('should have level "h2" for an <h2>', () => {
       const tocItem = lastTocList.find(item => item.title === 'Heading one');
       expect(tocItem.level).toEqual('h2');

aio/src/assets/images/icons/feature-icon.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><style>.st0{fill:#C3002F;} .st1{fill:#DD0031;} .st2{fill:#FFFFFF;}</style><path class="st0" d="M140 75c0-35.9-29.1-65-65-65-11.2 0-21.8 2.9-31 7.9l88.2 88.2c4.9-9.3 7.8-19.9 7.8-31.1z"/><path class="st1" d="M44 17.9C23.7 28.9 10 50.3 10 75c0 35.9 29.1 65 65 65 24.7 0 46.1-13.7 57.1-34L44 17.9z"/><path class="st2" d="M77.2 90.2H34c-5 0-9.1-4.1-9.1-9.1V59.2c0-5 4.1-9.1 9.1-9.1h43.2c5 0 9.1 4.1 9.1 9.1v21.9c0 5-4.1 9.1-9.1 9.1zM34 55.2c-2.2 0-4.1 1.8-4.1 4.1v21.9c0 2.2 1.8 4.1 4.1 4.1h43.2c2.2 0 4.1-1.8 4.1-4.1v-22c0-2.2-1.8-4.1-4.1-4.1H34z"/><path class="st2" d="M55.6 99.9c-1.4 0-2.5-1.1-2.5-2.5v-9.7c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5v9.7c0 1.3-1.1 2.5-2.5 2.5z"/><path class="st2" d="M69.9 99.9H41.3c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h28.5c1.4 0 2.5 1.1 2.5 2.5.1 1.3-1 2.5-2.4 2.5zM53.5 76.2l-3-5.1c-.4-.6-.2-1.4.5-1.7.6-.4 1.4-.2 1.7.5l1.2 2 4.9-5.8c.4-.5 1.2-.6 1.8-.2.5.4.6 1.2.2 1.8l-7.3 8.5zm66.1 18.9h-15.5c-3 0-5.5-2.5-5.5-5.5V60.5c0-3 2.5-5.5 5.5-5.5h15.5c3 0 5.5 2.5 5.5 5.5v29.1c0 3-2.5 5.5-5.5 5.5zm-15.5-35.9c-.7 0-1.2.6-1.2 1.2v29.1c0 .7.6 1.2 1.2 1.2h15.5c.7 0 1.2-.6 1.2-1.2v-29c0-.7-.6-1.2-1.2-1.2h-15.5z"/><path class="st2" d="M109.7 80.7l-3-5.1c-.4-.6-.2-1.4.5-1.7.6-.4 1.4-.2 1.7.5l1.2 2 4.9-5.8c.4-.5 1.2-.6 1.8-.2.5.4.6 1.2.2 1.8l-7.3 8.5zm13.3 7.8h-21.2c-.4 0-.8-.3-.8-.8s.3-.8.8-.8H123c.4 0 .8.3.8.8s-.4.8-.8.8z"/></svg>

aio/src/index.html

@@ -37,35 +37,28 @@
   <!-- End Google Analytics -->
 
   <script>
-    window.onerror = function (message, url, lineNo, colNo, error) {
-      let container = document.createElement('div');
-
-      container.style.color = 'red';
-      container.style.position = 'fixed';
-      container.style.background = '#eee';
-      container.style.padding = '2em';
-      container.style.top = '3em';
-      container.style.left = '1em';
-
-      let msg = document.createElement('pre');
-      msg.innerText = [
-        'UA: ' + window.navigator.userAgent,
-        'Message: ' + message,
-        'URL: ' + url,
-        'Line: ' + lineNo,
-        'Column: ' + colNo,
-        'Stack: ' + (error && error.stack)
-      ].join('\n');
-
-      container.appendChild(msg);
-
-      setTimeout(function() {document.body.appendChild(container)}, 0);
-    };
-
     if (window.document.documentMode) {
-      var script = document.createElement('script');
-      script.src = 'generated/ie-polyfills.min.js';
-      document.head.appendChild(script);
+      // polyfill IE11 in a blocking way
+      var s = document.createElement('script');
+      s.src = 'generated/ie-polyfills.min.js';
+      document.head.appendChild(s);
+    } else if (!Object.assign) {
+      // polyfill other non-evergreen browsers in a blocking way
+      var polyfillUrl = "https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.find&flags=gated&unknown=polyfill";
+
+      // send a blocking XHR to fetch the polyfill
+      // then append it to the document so that its eval-ed synchronously
+      // this is required because the method used for IE is not reliable with other non-evergreen browsers
+      var xhr = new XMLHttpRequest();
+      xhr.addEventListener("load", function() {
+        var s = document.createElement('script');
+        s.type = 'text/javascript';
+        var code = this.responseText;
+        s.appendChild(document.createTextNode(code));
+        document.head.appendChild(s);
+      });
+      xhr.open("GET", polyfillUrl, false);
+      xhr.send();
     }
   </script>
 </head>

aio/src/styles/0-base/_typography.scss

@@ -1,168 +1,161 @@
-// @mixin docs-site-typography() {
-//   .docs-component-viewer-tabbed-content .docs-component-view-text-content,
-//   .docs-guide-content {
+body {
+  font-family: $main-font;
+  margin: 0;
+  color: $darkgray;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
-    body {
-      font-family: $main-font;
-      margin: 0;
-      color: $darkgray;
-      font-size: 14px;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
+h1 {
+  display: inline-block;
+  font-size: 24px;
+  font-weight: 500;
+  margin: 8px 0px;
+}
 
-    h1 {
-      display:inline-block;
-      font-size: 24px;
-      font-weight: 500;
-      margin: 8px 0px;
-    }
+h1:after {
+  content: "";
+  display: block;
+  height: 1px;
+  width: 40%;
+  margin: 24px 0px 10px;
+  background: $lightgray;
+  clear: both;
+}
 
-    h1:after {
-      content: "";
-      display: block;
-      height: 1px;
-      width: 40%;
-      margin: 24px 0px 10px;
-      background: $lightgray;
-      clear: both;
-    }
+h2 {
+  font-size: 22px;
+  font-weight: 500;
+  margin: 32px 0px 24px;
+  clear: both;
+}
 
-    h2 {
-      font-size: 22px;
-      font-weight: 500;
-      margin: 32px 0px 24px;
-      clear: both;
-    }
+h3 {
+  font-size: 20px;
+  font-weight: 400;
+  margin: 24px 0px;
+  clear: both;
+}
 
-    h3 {
-      font-size: 20px;
-      font-weight: 400;
-      margin: 24px 0px;
-      clear: both;
-    }
+h4 {
+  font-size: 18px;
+  font-weight: 400;
+  margin: 8px 0px;
+  clear: both;
+}
 
-    h4 {
-      font-size: 18px;
-      font-weight: 400;
-      margin: 8px 0px;
-      clear: both;
-    }
+h5 {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 8px 0px;
+  clear: both;
+}
 
-    h5 {
-      font-size: 16px;
-      font-weight: 500;
-      margin: 8px 0px;
-      clear: both;
-    }
+h6 {
+  color: $mediumgray;
+  font-size: 16px;
+  font-weight: 500;
+  margin: 8px 0px;
+  clear: both;
+}
 
-    h6 {
-      color: $mediumgray;
-      font-size: 16px;
-      font-weight: 500;
-      margin: 8px 0px;
-      clear: both;
-    }
+h1 {
+  @media screen and (max-width: 600px) {
+    margin: 0;
+  }
+}
 
-    h1 {
-      @media screen and (max-width: 600px) {
-        margin: 0;
-      }
-    }
+h1:after, h2, h3, h4, h5, h6 {
+  @media screen and (max-width: 600px) {
+    margin: 8px 0;
+  }
+}
 
-    h1:after, h2, h3, h4, h5, h6 {
-      @media screen and (max-width: 600px) {
-        margin: 8px 0;
-      }
-    }
+.mat-tab-body-wrapper h2 {
+  margin-top: 0;
+}
 
-    .mat-tab-body-wrapper h2 {
-      margin-top: 0;
-    }
+p, ol, ul, ol, li, input, a  {
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: 0.30px;
+  font-weight: 400;
+  & > em {
+    letter-spacing: 0.30px;
+  }
+}
 
-    p, ol, ul, ol, li, input, a  {
-      font-size: 14px;
-      line-height: 24px;
-      letter-spacing: 0.30px;
-      font-weight: 400;
-      & > em {
-        letter-spacing: 0.30px;
-      }
-    }
+ol li {
+  margin: 14px 0px;
+}
 
-    ol li {
-      margin: 14px 0px;
-    }
+a {
+  text-decoration: none;
+}
 
-    a {
-      text-decoration: none;
-    }
+.mat-toolbar-row a {
+  font-size: 16px;
+  font-weight: 400;
+  color: white;
+  font-family: $main-font;
+  text-transform: uppercase;
+  padding: 21px 0;
+}
 
-    .mat-toolbar-row a {
-      font-size: 16px;
-      font-weight: 300;
-      color: white;
-      font-family: $main-font;
-      text-transform: uppercase;
-      padding: 21px 0;
-    }
+strong {
+  font-weight: 500;
+}
 
-    strong {
-      font-weight: 500;
-    }
+table {
+  border-collapse: collapse;
+  border-radius: 2px;
+  border-spacing: 0;
+  margin: 0 0 32px 0;
+}
 
-    table {
-      border-collapse: collapse;
-      border-radius: 2px;
-      border-spacing: 0;
-      margin: 0 0 32px 0;
-    }
+table tbody th {
+  max-width: 100px;
+  padding: 13px 32px;
+  text-align: left;
+}
 
-    table tbody th {
-      max-width: 100px;
-      padding: 13px 32px;
-      text-align: left;
-    }
+td {
+  font-weight: 400;
+  padding: 8px 30px;
+  letter-spacing: 0.30px;
 
-    td {
-      font-weight: 400;
-      padding: 8px 30px;
-      letter-spacing: 0.30px;
+  p {
+    margin: 0;
+  }
+}
 
-      p {
-        margin: 0;
-      }
-    }
+th {
+  font-size: 16px;
+  font-weight: 500;
+  padding: 13px 32px;
+  text-align: left;
+}
 
-    th {
-      font-size: 16px;
-      font-weight: 500;
-      padding: 13px 32px;
-      text-align: left;
-    }
+p > code, li > code, table code {
+  font-family: $code-font;
+  font-size: 85%;
+  color: $darkgray;
+  letter-spacing: 0;
+  line-height: 1;
+  padding: 2px 6px;
+  background-color: $backgroundgray;
+  border-radius: 4px;
+}
 
-    p > code, li > code, table code {
-      font-family: $code-font;
-      font-size: 85%;
-      color: $darkgray;
-      letter-spacing: 0;
-      line-height: 1;
-      padding: 2px 6px;
-      background-color: $backgroundgray;
-      border-radius: 4px;
-    }
+code {
+  font-family: $code-font;
+  font-size: 90%;
+}
 
-    code {
-      font-family: $code-font;
-      font-size: 90%;
-    }
-
-    .sidenav-content a {
-      color: $blue;
-      &:hover {
-        color: $mediumgray;
-      }
-    }
-
-//   }
-// }
+.sidenav-content a {
+  color: $blue;
+  &:hover {
+    color: $mediumgray;
+  }
+}

aio/src/styles/1-layouts/_content-layout.scss

@@ -1,20 +1,13 @@
-.progress-bar-container {
-  height: 2px;
-  overflow: hidden;
-  position: fixed;
-  top: 64px;
-  width: 100vw;
-  z-index: 5;
+aio-shell.page-docs {
+  .sidenav-content {
+    // padding: 6rem 3rem 3rem 3rem; // THIS CAUSES THE TOP NAV TOOLBAR TO JUMP BETWEEN DOCS AND OTHER PAGES
+    margin: auto;
+  }
 }
 
 .sidenav-content {
-  padding: 1rem 3rem 3rem;
-  margin: auto;
   min-height: 100vh;
-}
-
-.fill-remaining-space {
-  flex: 1 1 auto;
+  padding: 80px 3rem 1rem;
 }
 
 @media (max-width: 600px) {
@@ -22,14 +15,9 @@
     display: none;
   }
 
-  .progress-bar-container {
-    top: 56px;
-  }
-
   .sidenav-content {
     min-height: 450px;
   }
-
 }
 
 .sidenav-container {

aio/src/styles/1-layouts/_layout-global.scss

@@ -49,3 +49,7 @@ l-relative {
     top: -9999px !important;
     left: -9999px !important;
 }
+
+.text-uppercase {
+  text-transform: uppercase;
+}

aio/src/styles/1-layouts/_layouts-dir.scss

@@ -2,12 +2,12 @@
    LAYOUT STYLES
    ============================== */
 
-@import 'sidenav';
+@import 'api-page';
 @import 'content-layout';
-@import 'top-menu';
-@import 'marketing-layout';
 @import 'footer';
 @import 'layout-global';
+@import 'marketing-layout';
 @import 'not-found';
-@import 'api-page';
+@import 'sidenav';
 @import 'table-of-contents';
+@import 'top-menu';

aio/src/styles/1-layouts/_marketing-layout.scss

@@ -1,13 +1,339 @@
-#home {
-  padding: 0rem 0rem 3rem;
+.hero {
+  width: 100%;
+  min-height: 480px;
+  height: 80vh;
+  max-height: 560px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 48px 48px 32px 48px;
+  position: absolute;
+  width: 100%;
+  overflow: hidden;
+  transform: skewY(8deg);
+  transform-origin: 100%;
 
-  @media (max-width: 800px) {
-    article {
-      padding: 0 30px;
+  @media (max-width: 480px) {
+    padding-top: 40px;
+    transform: none;
+  }
+
+  h1:after {
+   content: none;
+  }
+
+  .hero-title {
+    display: inline-block;
+    font-size: 28px;
+    font-weight: 400;
+    line-height: 48px;
+    margin: 0 $unit 0 0;
+    text-transform: uppercase;
+
+    &.is-standard-case {
+      text-transform: none;
     }
   }
 }
 
+section#intro {
+  display: flex;
+  width: 900px;
+  height: 480px;
+  margin: 0 auto;
+  padding: 48px 0 0;
+  align-items: center;
+  position: relative;
+  color: white;
+
+  @media (max-width: 780px) {
+    flex-direction: column;
+    max-width: 100vw;
+    width: 100%;
+    justify-content: center;
+    padding: 64px 0 32px;
+
+    button {
+      margin: 0;
+      height: 60px;
+    }
+  }
+
+  .homepage-container {
+    margin-top: -7%;
+    padding-top: 0;
+    padding-bottom: 0;
+    max-width: 1040px;
+    width: 100%;
+    margin: 0 auto;
+
+    @media  (max-width: 780px) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      max-width: 100%;
+      padding: 0;
+    }
+  }
+
+  .hero-headline {
+    font-size: 40px;
+    line-height: 64px;
+    font-weight: 500;
+    margin: 32px 0;
+
+    &:after {
+      display: none;
+    }
+
+    @media (max-width: 780px) {
+      text-align: center;
+    }
+  }
+
+  .hero-logo {
+    width: 400px;
+    display: flex;
+
+    @media (max-width: 780px) {
+      width: 250px;
+    }
+
+    img {
+      filter: drop-shadow(0 2px 2px rgba($black, 0.24));
+      margin-bottom: 8px;
+      padding: 0;
+      width: 400px;
+      height: 400px;
+
+      @media (max-width: 780px) {
+        width: 250px;
+        height: 250px;
+      }
+    }
+  }
+}
+
+.announcement-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  padding: 16px;
+  margin: 0 auto;
+  max-width: 50vw;
+  background-color: $white;
+  border-radius: 4px;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-sizing: border-box;
+  align-items: center;
+  transition: all 0.3s ease-in;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    text-align: center;
+    min-width: 100%;
+    padding: 32px 16px;
+  }
+
+  button {
+    min-width: 160px;
+    background-color: $blue;
+    border-radius: 48px;
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    height: 40px;
+    justify-content: center;
+
+    &:hover {
+      a {
+        color: $white;
+        opacity: 0.7;
+      }
+    }
+
+    a {
+      color: $white;
+      font-size: 16px;
+    }
+  }
+
+  .material-icons {
+    right: 0;
+    position: static;
+    display: none;
+    transition: all 0.3s ease-in;
+    font-size: 16px;
+  }
+
+  p {
+    font-size: 16px;
+    margin: 8px;
+  }
+}
+
+// ANGULAR LINE
+.background-sky {
+  background-color: $blue;
+  background: $bluegradient;
+  color: $white;
+}
+
+.home-row .card {
+  @include card(70%, auto);
+  min-width: 350px;
+  width: 70%;
+  height: auto;
+  padding: 24px;
+  margin: auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-shadow: 0 6px 6px rgba(10, 16, 20, 0.15), 0 0 52px rgba(10, 16, 20, 0.12);
+  position: relative;
+
+  @media (max-width: 600px) {
+    margin: 16px auto 0;
+
+    h2 {
+      margin: 0;
+    }
+
+    img {
+      max-width: none;
+      height: 70px;
+    }
+  }
+
+  @media (max-width: 1300px) {
+    img {
+      max-width: none;
+      height: 70px;
+    }
+  }
+
+  img {
+    margin: 16px ;
+  }
+
+  .card-text-container {
+    margin: 0 16px;
+
+    p {
+      text-align: left;
+      padding: 8px 0;
+      color: $darkgray;
+      margin: 0;
+    }
+  }
+
+
+  &:hover {
+    h2 {
+      color: $blue;
+    }
+  }
+}
+
+button.hero-cta {
+  border-radius: 48px;
+  display: flex;
+  height: 40px;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  a {
+    font-size: 18px;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+}
+
+aio-shell {
+  &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute {
+    section {
+      padding: 0rem 0rem 3rem;
+    }
+  }
+
+  &.page-home {
+    section {
+      padding: 0;
+    }
+  }
+
+  &.page-home, &.page-resources, &.page-events, &.page-contribute {
+    article {
+      padding: 32px;
+
+      @media (max-width: 800px) {
+        padding: 24px;
+      }
+    }
+  }
+
+  &.page-home, &.page-resources, &.page-events, &.page-features {
+
+    .content img {
+      @media (max-width: 1300px) {
+        max-width: none;
+      }
+    }
+
+    .feature-section img {
+      max-width: 70px;
+    }
+
+    @media (max-width: 600px) {
+      md-sidenav-container.sidenav-container {
+        padding-top: 0;
+      }
+    }
+  }
+
+  .cta-bar .hero-cta {
+    color: $blue;
+  }
+}
+
+.cta-bar.announcement-bar {
+  background: none;
+  box-shadow: none;
+}
+
+.text-headline {
+  font-size: 20px;
+  margin-top: 10px;
+  text-transform: uppercase;
+  color: $blue;
+  font-weight: 500;
+}
+
+.feature-section {
+  .feature-header {
+    text-align: center;
+
+    .text-headline {
+      text-align: center;
+    }
+  }
+
+  .feature-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin: 8px 0px;
+    clear: both;
+  }
+}
+
 aio-shell:not(.view-SideNav) {
   md-sidenav-container.sidenav-container {
     max-width: none;
@@ -16,6 +342,7 @@ aio-shell:not(.view-SideNav) {
 
 div[layout=row]{
     display: flex;
+    justify-content: center;
     box-sizing: border-box;
     align-items: center;
 
@@ -29,81 +356,50 @@ div[layout=row]{
 }
 
 .home-rows {
-    margin-top: 112px;
+    overflow: hidden;
+    @media (max-width: 600px) {
+      margin: 0;
+    }
 }
 
-.home-row .promo-image-container, .home-row .text-container {
+.home-row .promo-img-container, .home-row .text-container {
     max-width: 50%;
 }
 
 .background-superhero-paper {
-    background: url('assets/images/backgrounds/super-hero-large.png') no-repeat bottom center , $bluegradient;
     background-blend-mode: multiply;
     background-size: 100%;
 }
 
-.background-sky {
-  background-color: $blue;
-  background: $bluegradient;
-  color: $white;
-}
-
 header.bckground-sky.l-relative {
     display: flex;
     flex-direction: column;
 }
 
-.home-rows {
-  // NOTE (ericjim): if a banner is placed on the homescreen, add this margin.
-  margin-top: 112px;
-}
-
 .home-row {
   max-width: 920px;
-  margin: 0 0 60px 0;
+  margin: 32px;
   margin-left: auto;
   margin-right: auto;
 
   @media (max-width: 480px) {
       display: block;
-  }
 
-  h3.text-headline {
-    font-size: 28px;
-    margin-top: 10px;
-  }
-
-  // NOTE (ericjim): remove if graphic changes.
-  .promo-3 {
-    margin-top: 15px;
-
-    @media(max-width: 599px) {
-      margin-top: 0;
-    }
-  }
-
-  // -- Utility margins for promos
-  .promo-1-desc, .promo-3-desc {
-    padding-left: 5px;
-  }
-
-  // -- Reset margins for the utility margins
-  @media(max-width: 599px) {
-    .promo-1, .promo-2, .promo-3, .promo-4 {
-      margin: 0;
-    }
+      .text-headline, .promo-img-container {
+        text-align: center;
+      }
   }
 
   .text-block {
     padding-right: 15%;
 
-    @media(max-width: 599px) {
+    @media(max-width: 600px) {
       padding: 0;
     }
   }
 
-  @media(max-width: 599px) {
-    .promo-image-container, .text-container {
+  @media(max-width: 600px) {
+    .promo-img-container, .text-container {
       max-width: 100%;
     }
 
@@ -134,6 +430,35 @@ header.bckground-sky.l-relative {
   }
 }
 
-.text-uppercase {
-  text-transform: uppercase;
+.marketing-banner {
+  background-color: lighten($blue, 10);
+  margin-top: 64px;
+  padding: 32px;
+
+  @media (max-width: 600px) {
+    margin-top: 56px;
+    padding: 18px;
+  }
+
+  .banner-headline {
+    text-transform: uppercase;
+    font-size: 24px;
+    font-weight: 300;
+    color: white;
+    margin: 0;
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0;
+
+    @media (max-width: 600px) {
+      font-size: 18px;
+      font-weight: 400;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+}
+.page-features .marketing-banner {
+  margin-bottom: 20px;
 }

aio/src/styles/1-layouts/_sidenav.scss

@@ -8,17 +8,34 @@
   }
 }
 
+aio-nav-menu {
+  display: block;
+  padding: 16px 0 0;
+  margin: 0 auto;
+  font-size: 13px;
+  ul, a {
+    padding: 0;
+    margin: 0;
+  }
+
+  aio-nav-item div a {
+    padding-left: 16px;
+  }
+}
+
 md-sidenav.mat-sidenav.sidenav {
   position: fixed;
+  top: 64px;
   bottom: 0;
   left: 0;
-  padding: 80px 0px 0px;
+  padding: 0;
   min-width: 260px;
   background-color: $offwhite;
   box-shadow: 6px 0 6px rgba(0,0,0,0.10);
+  height: calc(100vh - 64px);
 
   &.collapsed {
-    padding-top: 64px;
+    top: 56px;
   }
 }
 
@@ -28,14 +45,10 @@ md-sidenav-container.sidenav-container {
     max-width: 82%;
     margin: 0;
     transform: none;
-    padding-top: 64px;
 
     @media (max-width: 800px) {
       max-width: 100%;
     }
-    @media (max-width: 600px) {
-      padding-top: 56px;
-    }
 }
 
 md-sidenav-container div.mat-sidenav-content {
@@ -60,13 +73,11 @@ md-sidenav-container div.mat-sidenav-content {
   width: 100%;
   word-wrap: break-word;
   outline: none;
+  transition: all 0.3s ease-in-out;
 
   &:hover {
-    background-color: $lightgray;
-  }
-
-  &:focus {
-    color: $darkgray;
+    text-shadow: 0 0 5px #ffffff;
+    color: $blue;
   }
 
   //icons _within_ nav
@@ -80,10 +91,6 @@ md-sidenav-container div.mat-sidenav-content {
 
 .vertical-menu-item.selected {
   color: $blue;
-
-  &:focus {
-    color: $blue-900;
-  }
 }
 
 button.vertical-menu-item {
@@ -97,7 +104,7 @@ button.vertical-menu-item {
 }
 
 .heading {
-  color: $blue-grey-700;
+  color: $darkgray;
   cursor: pointer;
   position: relative;
   text-transform: uppercase;
@@ -122,12 +129,6 @@ button.vertical-menu-item {
   transition-timing-function: ease-out;
 }
 
-a.selected.level-1,
-.heading.selected.level-1,
-.heading-children.selected.level-1 {
-  border-left: 3px $blue solid;
-}
-
 .level-1 {
   font-family: $main-font;
   font-size: 14px;
@@ -149,6 +150,7 @@ a.selected.level-1,
   font-family: $main-font;
   font-size: 14px;
   color: $mediumgray;
+  padding-left: 8px;
 }
 
 .level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
@@ -168,19 +170,20 @@ a.selected.level-1,
 }
 
 aio-nav-menu.top-menu {
-  aio-nav-item:first-child .vertical-menu-item {
-    padding-top: 48px;
-  }
+  padding: 24px 0 0;
 
   aio-nav-item:last-child div {
-    border-bottom: 2px solid rgba($mediumgray, 0.5);
+    border-bottom: 1px solid rgba($mediumgray, 0.5);
   }
 
+  aio-nav-item:first-child div {
+    border-top: 1px solid rgba($mediumgray, 0.5);
+  }
 }
 
 // Angular Version Selector
 md-sidenav .doc-version {
-  padding: 10px;
+  padding: 8px;
   border-top: 1px solid $lightgray;
 
   select {

aio/src/styles/1-layouts/_top-menu.scss

@@ -1,18 +1,3 @@
-
-.fill-remaining-space {
-  flex: 1 1 auto;
-}
-
-aio-top-menu a.nav-link {
-  margin: 0;
-  padding: 24px 16px;
-  cursor: pointer;
-
-  &:focus {
-    outline: none;
-  }
-}
-
 .nav-link.home img {
   position: relative;
   margin-top: -21px;
@@ -21,22 +6,6 @@ aio-top-menu a.nav-link {
   height: 40px;
 }
 
-@media (max-width: 700px) {
-  .nav-link {
-    font-size: 80%;
-    margin-right: 8px;
-    margin-left: 0px;
-  }
-}
-
-@media (max-width: 600px) {
-  .nav-link {
-    font-size: 80%;
-    margin-right: 8px;
-    margin-left: 0px;
-  }
-}
-
 aio-top-menu {
   display: flex;
   flex-direction: row;
@@ -52,13 +21,12 @@ aio-top-menu {
     margin: 0px;
 
     li {
+      padding-bottom: 2px;
       list-style-type: none;
-      line-height: 64px;
-      height: 64px;
       cursor: pointer;
 
       &:hover {
-        background-color: $accentblue;
+        opacity: 0.7;
       }
 
       &:focus {
@@ -67,38 +35,102 @@ aio-top-menu {
       }
     }
   }
+
+  a.nav-link {
+    margin: 0;
+    padding: 24px 16px;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+      background: rgba($white, 0.15);
+      border-radius: 4px;
+      padding: 8px 16px;
+    }
+  }
 }
 
+// HOME PAGE OVERRIDE: TOPNAV TOOLBAR HAMBURGER MENU
+aio-shell.page-home md-toolbar.app-toolbar.mat-toolbar {
+  background-color: transparent;
+  transition: background-color .2s linear .3s;
+
+  @media (max-width: 480px) {
+    background-color: $blue;
+  }
+}
+
+// DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED
 md-toolbar.mat-toolbar {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   z-index: 10;
-  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
   padding: 0 16px 0 0;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
+
+  md-icon {
+    color: $white;
+  }
 }
 
-.search-container {
+// MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
+aio-shell.page-home md-toolbar.mat-toolbar,
+aio-shell.page-features md-toolbar.mat-toolbar,
+aio-shell.page-events md-toolbar.mat-toolbar,
+aio-shell.page-resources md-toolbar.mat-toolbar {
+  // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE
+  @media (min-width: 481px) {
+    position: absolute;
+  }
+
+  @media (min-width: 992px) {
+    padding-left: 24px;
+
+    button.hamburger {
+      display: none;
+    }
+  }
+}
+
+// REMOVE BOX SHADOW ON CERTAIN MARKETING PAGES
+aio-shell.page-home md-toolbar.mat-toolbar,
+aio-shell.page-events md-toolbar.mat-toolbar,
+aio-shell.page-resources md-toolbar.mat-toolbar {
+  box-shadow: none;
+}
+
+
+// SEARCH BOX
+aio-search-box.search-container {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 100%;
   min-width: 150px;
   height: 100%;
-}
 
-aio-search-box input {
-  color: $darkgray;
-  border: none;
-  border-radius: 5px;
-  background-color: $offwhite;
-  padding: 5px 10px;
-  margin-left: 8px;
-  width: 200px;
-  height: 40%;
-
-  @media (max-width: 480px) {
+  input {
+    color: $darkgray;
+    border: none;
+    border-radius: 100px;
+    background-color: $offwhite;
+    padding: 5px 16px;
+    margin-left: 8px;
     width: 180px;
+    max-width: 240px;
+    height: 50%;
+
+    @include bp(big) {
+      transition: width 0.4s ease-in-out;
+
+      &:focus {
+        width: 50%;
+      }
+    }
+    @media (max-width: 480px) {
+      width: 150px;
+    }
   }
 }

aio/src/styles/2-modules/_alert.scss

@@ -3,6 +3,9 @@
     margin: 24px 0px;
     font-size: 14px;
     color: $darkgray;
+    width: 100%;
+    box-sizing: border-box;
+
     &.is-critical {
         border-left: 10px solid $brightred;
         background-color: rgba($brightred, 0.05);

aio/src/styles/2-modules/_announcement-bar.scss

@@ -1,180 +0,0 @@
-/* Announcment Bar Module */
-/* A module displaying time senstive announcemnts */
-
-
-/* VARIABLES */
-
-$announcement-bar: '.announcement-bar';
-$announcement-bar-height: 104px;
-$announcement-bar-width: 784px;
-
-/* CLASS */
-
-#{$announcement-bar} {
-  height: 104px;
-  width: $announcement-bar-width;
-  position: absolute;
-  margin-left: auto;
-  top: 500px;
-  color: $darkgray;
-  background: $white;
-  border-radius: 4px;
-  overflow: hidden;
-  box-sizing: border-box;
-  box-shadow: 0 4px 4px rgba(0,0,0,0.24), 0 0 4px rgba(0,0,0,0.12);
-
-  @media (max-width: $announcement-bar-width) {
-    height: auto;
-    margin: 0;
-    position: static;
-    text-align: center;
-    width: 100%;
-  }
-}
-
-// SLIDES CONTAINER
-#{$announcement-bar}-slides {
-  position: relative;
-  overflow: hidden;
-  color: $darkgray;
-  background: $white;
-  height: $announcement-bar-height;
-  width: $announcement-bar-width;
-  box-sizing: border-box;
-  box-shadow: 0 4px 4px rgba($black, 0.24), 0 0 4px rgba($black, 0.12);
-
-  @media (max-width: 480px) {
-    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-    height: 240px;
-    margin: 0;
-    padding: 32px 48px;
-    text-align: center;
-    width: auto;
-  }
-}
-
-// INDIVIDUAL SLIDE
-#{$announcement-bar}-slide {
-  bottom: 0;
-  box-sizing: border-box;
-  height: $announcement-bar-height;
-  left: 0;
-  margin-bottom: -$announcement-bar-height;
-  opacity: 0;
-  padding: 32px;
-  position: absolute;
-  right: 0;
-  transition: all .8s;
-  width: $announcement-bar-width;
-  z-index: 1;
-
-  @media (max-width: 480px) {
-    height: auto;
-    margin: 0;
-    padding:0;
-    width: auto;
-    transition: opacity .8s;
-    visibility: hidden;
-  }
-
-  img, p {
-    float: left;
-
-    @media (max-width: 480px) {
-      display: block;
-      float: none;
-    }
-  }
-
-  img {
-    height: 40px;
-    margin: 0 0 8px;
-  }
-
-  p {
-    font-size: 18px;
-    line-height: 40px;
-    margin: 0;
-    padding: 0;
-
-    @media (max-width: 480px) {
-      line-height: 24px;
-      margin: auto;
-    }
-
-  }
-
-  .button,
-  .button.md-button {
-    margin: 0;
-    padding: 0 40px;
-    background: $mediumgray;
-    color: $white;
-    float: right;
-    font-size: 14px;
-    line-height: 40px;
-    transition: all .3s ease-in-out;
-
-    &:hover {
-      background: $blue;
-      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-      color: $white;
-    }
-
-    @media (max-width: $announcement-bar-width) {
-      float: none;
-      margin: 16px auto;
-    }
-  }
-
-  &.is-visible  {
-    margin-bottom: 0;
-    opacity: 1;
-    z-index: 2;
-
-    @media (max-width: $announcement-bar-width) {
-      position: static;
-      visibility: visible;
-      justify-content: center;
-      display: flex !important;
-      flex-direction: column;
-      padding: 8px;
-      height: auto;
-      width: 100%;
-      margin: 0;
-    }
-
-    @media (max-width: 480px) {
-      padding: 16px;
-      align-items: center;
-    }
-  }
-}
-
-// NAV BAR
-#{$announcement-bar} nav {
-  bottom: -40px;
-  color: $lightgray;
-  left: 0;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  z-index: 1;
-
-  button {
-    background: $lightgray;
-    border: none;
-    border-radius: 100px;
-    height: 12px;
-    margin: 0 4px;
-    outline: none;
-    overflow: hidden;
-    text-indent: -3000px;
-    width: 12px;
-
-    &.is-selected,
-    &.selected  {
-      background: $lightgray;
-    }
-  }
-}

aio/src/styles/2-modules/_api-list.scss

@@ -37,7 +37,7 @@ aio-api-list > div {
         margin: 16px auto;
     }
 
-    > div {
+    .form-select-menu, .form-search {
         margin: 8px;
     }
 }
@@ -115,82 +115,6 @@ $tablet-breakpoint: 800px;
   }
 }
 
-/* SELECT MENU */
-
-$form-select-width: 200px;
-
-.form-select-menu {
-  position: relative;
-}
-
-.form-select-button {
-  background: $white;
-  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-  box-sizing: border-box;
-  border: 1px solid $white;
-  color: $blue-grey-600;
-  font-size: 12px;
-  font-weight: 400;
-  height: 32px;
-  line-height: 32px;
-  outline: none;
-  padding: 0 16px;
-  text-align: left;
-  width: $form-select-width - 16px;
-
-  strong {
-    font-weight: 600;
-    margin-right: 8px;
-    text-transform: uppercase;
-  }
-
-  &.has-symbol {
-    .symbol {
-      margin-right: 8px;
-    }
-  }
-}
-
-.form-select-dropdown {
-  background: $white;
-  box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
-  border-radius: 4px;
-  left: -8px;
-  list-style-type: none;
-  margin: 0;
-  padding: 8px 0;
-  position: absolute;
-  top: -8px;
-  width: 200px;
-  z-index: $layer-2;
-
-  li {
-    cursor: pointer;
-    font-size: 14px;
-    line-height: 32px;
-    margin: 0;
-    padding: 0 16px 0 40px;
-    position: relative;
-    transition: all .2s;
-
-    &:hover {
-      background: $blue-grey-50;
-      color: $blue-500;
-    }
-
-    &.selected {
-      background-color: $blue-grey-100;
-    }
-
-    .symbol {
-      left: 16px;
-      position: absolute;
-      top: 8px;
-      z-index: $layer-5;
-    }
-  }
-}
-
 /* API SYMBOLS */
 
 /* SYMBOL CLASS */
@@ -224,8 +148,12 @@ $form-select-width: 200px;
 /* API FILTER MENU */
 
 .api-filter {
-  .form-select-menu {
-    float: left;
+  aio-select {
+    width: 200px;
+
+    .symbol {
+      margin-right: 8px;
+    }
   }
 
   .form-search {
@@ -237,21 +165,22 @@ $form-select-width: 200px;
 
 .docs-content .api-list {
   list-style: none;
-  margin: 0 0 48px 0;
+  margin: 0 0 48px -8px;
   padding: 0;
   overflow: hidden;
 
   @media screen and (max-width: 600px) {
-        margin: 0;
+        margin: 0 0 0 -8px;
     }
 
   li {
     font-size: 14px;
-    margin: 0 0 16px 0;
+    margin: 8px;
     line-height: 14px;
     padding: 0;
     float: left;
     width: 33%;
+    overflow: hidden;
     min-width: 220px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -356,11 +285,6 @@ p {
   cursor: pointer;
   text-decoration: none;
 
-  // Override highlight.js
-  .kwd {
-    color: #1E88E5 !important;
-  }
-
   &:hover {
     text-decoration: underline;
   }

aio/src/styles/2-modules/_buttons.scss

@@ -104,3 +104,7 @@ a.filter-button {
     color: white;
   }
 }
+
+[md-button], [md-raised-button], [mat-button], [mat-raised-button] {
+  text-transform: uppercase;
+}

aio/src/styles/2-modules/_card.scss

@@ -5,7 +5,7 @@
     margin: 24px 0;
 }
 
-.card {
+.docs-card {
   @include card(194px, 30%);
   max-width: 340px;
   min-width: 262px;

aio/src/styles/2-modules/_code.scss

@@ -69,40 +69,26 @@ code-tabs mat-tab-body-content .fadeIn {
 aio-code pre {
     display: flex;
     min-height: 32px;
-    margin: 16px;
+    margin: 16px 32px;
     white-space: pre-wrap;
     align-items: center;
 
-    code span, code ol li {
+    code span {
       line-height: 24px;
     }
 }
 
-code ol {
-  margin: 0;
-  font-family: $main-font;
-  color: $lightgray;
-
-  li {
-    margin: 0;
-    font-family: $code-font;
-    font-size: 90%;
-  }
-}
 
 .code-missing {
   color: $darkred;
 }
 
-.prettyprint {
-  position: relative;
-}
 
 .copy-button {
   display: inline-block;
   position: absolute;
-  top: 6px;
-  right: 8px;
+  top: -8px;
+  right: -32px;
 
   color: $blue-grey-200;
   background-color: transparent;
@@ -111,11 +97,6 @@ code ol {
   &:hover {
     color: $mediumgray;
   }
-
-  @media (max-width: 480px) {
-    top: 0;
-    right: 0;
-  }
 }
 
 .lang-sh .copy-button, .lang-bash .copy-button {
@@ -130,102 +111,6 @@ code ol {
   transform: none;
 }
 
-/* SCREEN COLORS */
-
-  .pnk,
-  .blk {
-    border-radius: 4px;
-    padding: 2px 4px;
-  }
-  .pnk {
-    background: $blue-grey-50;
-    color: $blue-grey-900;
-  }
-  .blk {
-    background: $blue-grey-900;
-  }
-  .otl {
-    outline: 1px solid rgba($blue-grey-700, .56);
-  }
-  .kwd {
-    color: $darkgray;
-  }
-  .typ,
-  .tag {
-    color: $darkred;
-  }
-  .str,
-  .atv {
-    color: $blue;
-  }
-  .atn {
-    color: $blue;
-  }
-  .com {
-    color: $mediumgray;
-  }
-  .lit {
-    color: $blue;
-  }
-  .pun {
-    color: $blue-grey-700;
-  }
-  .pln {
-    color: $green-800;
-  }
-  .dec {
-    color: $blue;
-  }
-
-/* SHELL / TERMINAL CODE BLOCKS */
-
-code-example.code-shell, code-example[language=sh], code-example[language=bash] {
-  & .pnk, .blk,.pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
-    color: $codegreen;
-  }
-}
-
-/* PRINT COLORS */
-
-
-@media print {
-  border: none;
-  box-shadow: none;
-
-  ol {
-    background: $white;
-  }
-
-  .kwd {
-    color: $darkgray;
-  }
-  .typ,
-  .tag {
-    color: $darkred;
-  }
-  .str,
-  .atv {
-    color: $blue;
-  }
-  .atn {
-    color: $blue;
-  }
-  .com {
-    color: $mediumgray;
-  }
-  .lit {
-    color: $blue;
-  }
-  .pun {
-    color: $blue-grey-700;
-  }
-  .pln {
-    color: $green-800;
-  }
-  .dec {
-    color: $blue;
-  }
-}
 
 // REMOVE RIPPLE EFFECT FROM MATERIAL TABS
 code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-body-active, code-tabs md-tab-group *.mat-tab-body-content, code-tabs md-tab-group *.mat-tab-body-content {
@@ -240,3 +125,63 @@ code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-bo
   color: inherit;
   font-size: inherit;
 }
+
+/* PRETTY PRINTING STYLES for prettify.js. */
+
+.prettyprint {
+  position: relative;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin: 0;
+  font-family: $main-font;
+  color: #B3B6B7;
+  li {
+    margin: 0;
+    font-family: $code-font;
+    font-size: 90%;
+    line-height: 24px;
+  }
+}
+
+/* The following class|color styles are derived from https://github.com/google/code-prettify/blob/master/src/prettify.css*/
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln { color: #000 }  /* plain text */
+
+@media screen {
+  .str { color: #800 }  /* string content */
+  .kwd { color: #00f }  /* a keyword */
+  .com { color: #060 }  /* a comment */
+  .typ { color: red }  /* a type name */
+  .lit { color: #08c }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #660 }
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #800 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str { color: #060 }
+  .kwd { color: #006; font-weight: bold }
+  .com { color: #600; font-style: italic }
+  .typ { color: #404; font-weight: bold }
+  .lit { color: #044 }
+  .pun, .opn, .clo { color: #440 }
+  .tag { color: #006; font-weight: bold }
+  .atn { color: #404 }
+  .atv { color: #060 }
+}
+
+/* SHELL / TERMINAL CODE BLOCKS */
+
+code-example.code-shell, code-example[language=sh], code-example[language=bash] {
+  & .pnk, .blk,.pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
+    color: $codegreen;
+  }
+}

aio/src/styles/2-modules/_contribute.scss

@@ -0,0 +1,14 @@
+.contribute-container {
+  h2 {
+    margin: 0;
+  }
+
+  .l-sub-section {
+    width: 90%;
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

aio/src/styles/2-modules/_contributor.scss

@@ -59,8 +59,8 @@ aio-contributor {
 
   .contributor-info {
     background: rgba($darkgray, 0.5);
-    height: 200px;
-    width: 200px;
+    height: 168px;
+    width: 168px;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -94,7 +94,7 @@ aio-contributor {
       }
 
       &:hover {
-        color: $blue;
+        color: $lightgray;
       }
     }
   }
@@ -112,6 +112,10 @@ aio-contributor {
       transform-style:preserve-3d;
       transition:transform ease 500ms;
 
+      h3 {
+        margin: 8px 0;
+      }
+
       .card-front, .card-back {
         width: 100%;
         height: 100%;
@@ -159,8 +163,8 @@ aio-contributor {
     justify-content: center;
     border-radius: 50%;
     align-items: center;
-    height: 200px;
-    width: 200px;
+    height: 168px;
+    width: 168px;
     background-size: cover;
     background-position: center;
     margin: 8px auto;

aio/src/styles/2-modules/_heading-anchors.scss

@@ -1,6 +1,10 @@
 .sidenav-content {
   h1, h2, h3, h4, h5, h6 {
 
+    &.no-anchor .header-link {
+      display: none;
+    }
+
     .mat-icon, .material-icons {
       visibility: hidden;
       display: inline-block;

aio/src/styles/2-modules/_hero.scss

@@ -1,113 +0,0 @@
-/*
-* Hero Module
-*
-* A hero banner located at the top of each page that displays the
-* title of the page and sometimes a decorative background.
-*
-*/
-
-
-/*
-* Class
-*/
-
-.hero {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 48px 48px 32px 48px;
-  position: relative;
-
-  @media (max-width: 480px) {
-    height: auto;
-    padding-top: 40px;
-  }
-
-  h1:after {
-   content: none;
-  }
-
-  .hero-title {
-    display: inline-block;
-    font-size: 28px;
-    font-weight: 400;
-    float: left;
-    line-height: 48px;
-    margin: 0 $unit 0 0;
-    text-transform: uppercase;
-
-    &.is-standard-case {
-      text-transform: none;
-    }
-  }
-
-  .hero-subtitle {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: $unit * 3;
-    margin: 0;
-    text-transform: uppercase;
-  }
-
-
-  // CTA BUTTONS
-  .button {
-    margin: 0px $unit;
-
-    // @include respond-to('mobile') {
-    //   margin: 16px 0;
-    //   display: block;
-    // }
-  }
-
-  button {
-    // Override md-button from angular material to align language select with hero title.
-    margin: 0 !important;
-  }
-
-
-  /*
-  * Large Banner
-  */
-
-  &.is-large {
-    padding-top: 32px;
-    text-align: center;
-
-    // @include respond-to('mobile') {
-    //   height: auto;
-    // }
-
-    // LARGE SHEILD LOGO
-    .hero-logo {
-      filter: drop-shadow(0 2px 2px rgba($black, 0.24));
-      margin-bottom: 8px;
-      opacity: 1;
-      padding: 0;
-      width: 240px;
-
-    //   @include respond-to('mobile') {
-    //     width: 192px;
-    //   }
-    }
-
-    .hero-cta,
-    .hero-cta.md-button {
-      background: rgba($white, .87);
-      border-radius: 2px;
-      color: $blue;
-      font-weight: 500;
-      padding: 0 64px;
-      margin: 40px 0;
-      transition: all .3s;
-
-      &:hover {
-        background: $white;
-        box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
-        color: $blue;
-      }
-    }
-  }
-}

aio/src/styles/2-modules/_modules-dir.scss

@@ -2,28 +2,29 @@
    MODULE STYLES
    ============================== */
 
-   @import 'hamburger';
-   @import 'features';
-   @import 'code';
-   @import 'contributor';
    @import 'alert';
+   @import 'api-info-bar';
+   @import 'api-list';
+   @import 'banner';
+   @import 'buttons';
+   @import 'callout';
+   @import 'card';
+   @import 'code';
+   @import 'contribute';
+   @import 'contributor';
+   @import 'edit-page-cta';
+   @import 'features';
    @import 'filetree';
+   @import 'hamburger';
+   @import 'heading-anchors';
+   @import 'hr';
    @import 'images';
+   @import 'progress-bar';
    @import 'table';
    @import 'presskit';
-   @import 'card';
-   @import 'subsection';
-   @import 'buttons';
-   @import 'hero';
-   @import 'announcement-bar';
-   @import 'banner';
-   @import 'search-results';
-   @import 'api-list';
-   @import 'hr';
-   @import 'scrollbar';
-   @import 'callout';
    @import 'resources';
-   @import 'edit-page-cta';
-   @import 'heading-anchors';
-   @import 'api-info-bar';
+   @import 'scrollbar';
+   @import 'search-results';
+   @import 'subsection';
    @import 'toc';
+   @import 'select-menu';

aio/src/styles/2-modules/_presskit.scss

@@ -1,4 +1,6 @@
 .presskit-container {
+  padding: 0 32px 32px 32px;
+
   h2 {
     color: #37474F;
   }
@@ -71,4 +73,12 @@
       }
     }
   }
+
+  .presskit-row:first-child {
+    margin-top: 0;
+
+    @media(max-width: 599px) {
+      margin-top: 48px;
+    }
+  }
 }

aio/src/styles/2-modules/_progress-bar.scss

@@ -0,0 +1,8 @@
+.progress-bar-container {
+  height: 2px;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 11;
+}

aio/src/styles/2-modules/_search-results.scss

@@ -10,7 +10,7 @@ aio-search-results {
     padding: 68px 32px 0;
     color: $offwhite;
     width: auto;
-    max-height: 50%;
+    max-height: 95vh;
     position: fixed;
     top: 0;
     left: 0;
@@ -18,11 +18,10 @@ aio-search-results {
     z-index: 5;
     background-color: $darkgray;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+    box-sizing: border-box;
 
     @media (max-width: 480px) {
         display: block;
-        max-height: 70%;
-        box-sizing: border-box;
         .search-area {
             display: block;
             margin: 16px 16px;
@@ -56,7 +55,7 @@ aio-search-results {
         font-size: 14px;
         color: $lightgray;
         text-decoration: none;
-        font-weight: 300;
+        font-weight: normal;
         &:hover {
             color: $white;
         }
@@ -69,11 +68,11 @@ aio-search-results {
         }
     }
 
-    .more-items {
-      content: 'more_horiz';
-      font-size: 20px;
-      color: $mediumgray;
-      padding: 0;
+    .priority-pages {
+        padding: 0.5rem 0;
+        a {
+            font-weight: bold;
+        }
     }
 
     @include bp(tiny) {

aio/src/styles/2-modules/_select-menu.scss

@@ -0,0 +1,72 @@
+/* SELECT MENU */
+
+.form-select-menu {
+  position: relative;
+}
+
+.form-select-button {
+  background: $white;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-sizing: border-box;
+  border: 1px solid $white;
+  color: $blue-grey-600;
+  font-size: 12px;
+  font-weight: 400;
+  height: 32px;
+  line-height: 32px;
+  outline: none;
+  padding: 0 16px;
+  text-align: left;
+  width: 100%;
+  cursor: pointer;
+
+  strong {
+    font-weight: 600;
+    margin-right: 8px;
+    text-transform: uppercase;
+  }
+
+  &:focus {
+    border: 1px solid $blue-400;
+    box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
+  }
+}
+
+.form-select-dropdown {
+  background: $white;
+  box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
+  border-radius: 4px;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: $layer-2;
+
+  li {
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 32px;
+    margin: 0;
+    padding: 0 16px 0 40px;
+    position: relative;
+    transition: all .2s;
+
+    &:hover {
+      background: $blue-grey-50;
+      color: $blue-500;
+    }
+
+    &.selected {
+      background-color: $blue-grey-100;
+    }
+
+    .symbol {
+      left: 16px;
+      position: absolute;
+      top: 8px;
+      z-index: $layer-5;
+    }
+  }
+}

aio/src/styles/2-modules/_subsection.scss

@@ -6,6 +6,8 @@
     margin-bottom: 8px;
     display: table;
     clear: both;
+    width: 100%;
+    box-sizing: border-box;
 
     h3 {
         margin: 8px 0 0;

aio/src/styles/2-modules/_table.scss

@@ -55,10 +55,6 @@ table {
     td {
       letter-spacing: 0.30px;
 
-      @media (max-width: 480px) {
-        display: block;
-      }
-
     tr td:first-child {
       @media (max-width: 480px) {
         background-color: $lightgray;
@@ -72,10 +68,6 @@ table {
       border-right: 1px solid $lightgray;
       font-weight: 600;
       max-width: 100px;
-
-      @media (max-width: 480px) {
-        display: none;
-      }
     }
 
     tr:last-child td {
@@ -84,7 +76,6 @@ table {
       @media (max-width: 480px) {
         border-bottom: 1px solid $lightgray;
       }
-
     }
   }
 }

aio/src/styles/2-modules/_toc.scss

@@ -17,19 +17,22 @@ aio-toc {
 }
 
 .toc-inner {
-  border-left: 4px solid #4285f4;
   font-size: 13px;
   overflow-y: visible;
   padding: 4px 0 0 10px;
 
-  .toc-heading p {
+  .toc-heading,
+  .toc-list .h1 {
+    font-size: 115%;
+  }
+
+  .toc-heading {
     font-weight: 500;
-    margin: 0;
+    margin: 0 0 16px 8px;
     padding: 0;
   }
 
   .toc-heading.secondary {
-    padding-bottom: 0;
     position: relative;
     top: -8px;
 
@@ -49,18 +52,12 @@ aio-toc {
     padding: 0;
     text-align: start;
 
-    &:focus.embedded {
+    &.embedded:focus {
       outline: none;
       background: $lightgray;
     }
   }
 
-  button.toc-heading,
-  div.toc-heading,
-  ul.toc-list li.h1 {
-    font-size: 115%;
-  }
-
   button.toc-heading {
     md-icon.rotating-icon {
       height: 18px;
@@ -75,7 +72,6 @@ aio-toc {
     }
   }
 
-
   button.toc-more-items {
     color: $mediumgray;
     top: 10px;
@@ -107,52 +103,95 @@ aio-toc {
   ul.toc-list {
     list-style-type: none;
     margin: 0;
-    padding: 0;
+    padding: 0 8px 0 0;
 
     @media (max-width: 800px) {
       width: auto;
     }
 
-  }
+    li {
+      box-sizing: border-box;
+      font-size: 12px;
+      line-height: 16px;
+      padding: 3px 0 3px 12px;
+      position: relative;
+      transition: all 0.3s ease-in-out;
 
-  ul.toc-list li {
-    font-size: 12px;
-    line-height: 16px;
-    margin: 6px 0;
-    padding: 0;
-    position: relative;
-    transition: all 0.3s ease-in-out;
-
-    a {
-      font-size: inherit;
-      color: lighten($darkgray, 10);
-      display:table-cell;
-      overflow: visible;
-
-      &:hover {
-        color: $accentblue;
+      &.h1:after {
+        content: '';
+        display: block;
+        height: 1px;
+        width: 40%;
+        margin: 7px 0 4px 0;
+        background: #DBDBDB;
+        clear: both;
+      }
+
+      &.h3 {
+        padding-left: 24px;
       }
-    }
 
-    &.active {
       a {
+        font-size: inherit;
+        color: lighten($darkgray, 10);
+        display:table-cell;
+        overflow: visible;
+        font-size: 12px;
+        display: table-cell;
+      }
+
+      &:hover a {
         color: $accentblue;
       }
+
+      &.active {
+        a {
+          color: $blue;
+          font-weight: 500;
+
+          &:before {
+            content: '';
+            border-radius: 50%;
+            left: -3px;
+            top: 12px;
+            background: $blue;
+            position: absolute;
+            width: 6px;
+            height: 6px;
+          }
+        }
+      }
     }
-  }
 
-  ul.toc-list li.h3 {
-    margin-left: 15px;
-  }
+    &:not(.embedded) li {
+      &:before {
+        border-left: 1px solid $lightgray;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        top: 0;
+      }
 
-  ul.toc-list li.h1:after {
-    content: "";
-    display: block;
-    height: 1px;
-    width: 40%;
-    margin: 24px 0px 10px;
-    background: #DBDBDB;
-    clear: both;
+      &:first-child:before {
+        top: 13px;
+      }
+
+      &:last-child:before {
+        bottom: calc(100% - 14px);
+      }
+
+      &:not(.active):hover a:before {
+        content: '';
+        border-radius: 50%;
+        left: -3px;
+        top: 12px;
+        background: $lightgray;
+        position: absolute;
+        width: 6px;
+        height: 6px;
+      }
+    }
   }
 
 }

aio/src/styles/_constants.scss

@@ -22,7 +22,7 @@ $offwhite: #FAFAFA;
 $backgroundgray: #F1F1F1;
 $lightgray: #DBDBDB;
 $mist: #ECEFF1;
-$mediumgray: #7E7E7E;
+$mediumgray: #6e6e6e;
 $darkgray: #333;
 $black: #0A1014;
 $orange: #FF9800;

aio/src/styles/_mixins.scss

@@ -58,7 +58,6 @@
     border: 0.5px solid $lightgray;
 }
 
-
 @mixin card($height, $width) {
   height: $height;
   width: $width;

aio/src/styles/main.scss

@@ -12,22 +12,3 @@
 @import './0-base/base-dir';
 @import './1-layouts/layouts-dir';
 @import './2-modules/modules-dir';
-
-// import additional scss
-
-// ********************************************************* //
-
-[md-button], [md-raised-button], [mat-button], [mat-raised-button] {
-  text-transform: uppercase;
-}
-
-.docs-primary-header {
-  padding-left: 20px;
-}
-
-h1.docs-primary-header, h1 .docs-primary-header{
-    font-size: 30px;
-    font-weight: 300;
-    margin: 0;
-    padding: 30px;
-}

aio/src/styles/ng-io-theme.scss

@@ -21,14 +21,3 @@ $ng-io-theme: mat-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 @include angular-material-theme($ng-io-theme);
-
-//TODO: define custom theme, old values from Style guide:
-// @material-header: #455A64;
-// @material-header-darker: #37474F;
-// @material-header-dark: #263238;
-// @material-200: #EEEEEE;
-// @material-700: #616161;
-// @material-800: #424242;
-// @material-900: #212121;
-// @black: #000000;
-// @white: #FFFFFF;

aio/tools/transforms/angular-base-package/index.js

@@ -55,6 +55,7 @@ module.exports = new Package('angular-base', [
 
     generateKeywordsProcessor.ignoreWordsFile = path.resolve(__dirname, 'ignore.words');
     generateKeywordsProcessor.docTypesToIgnore = ['example-region'];
+    generateKeywordsProcessor.propertiesToIgnore = ['renderedContent'];
   })
 
   // Where do we write the output files?

aio/tools/transforms/angular-base-package/post-processors/add-image-dimensions.spec.js

@@ -32,7 +32,7 @@ describe('addImageDimensions post-processor', () => {
     processor.$process(docs);
     expect(getImageDimensionsSpy).toHaveBeenCalledWith('base/path', 'a/b.jpg');
     expect(getImageDimensionsSpy).toHaveBeenCalledWith('base/path', 'c/d.png');
-    expect(docs).toEqual([{
+    expect(docs).toEqual([jasmine.objectContaining({
       docType: 'a',
       renderedContent: `
         <p>xxx</p>
@@ -41,7 +41,7 @@ describe('addImageDimensions post-processor', () => {
         <img src="c/d.png" width="30" height="40">
         <p>zzz</p>
       `
-    }]);
+    })]);
   });
 
   it('should log a warning for images with no src attribute', () => {
@@ -51,10 +51,10 @@ describe('addImageDimensions post-processor', () => {
     }];
     processor.$process(docs);
     expect(getImageDimensionsSpy).not.toHaveBeenCalled();
-    expect(docs).toEqual([{
+    expect(docs).toEqual([jasmine.objectContaining({
       docType: 'a',
       renderedContent: '<img attr="value">'
-    }]);
+    })]);
     expect(log.warn).toHaveBeenCalled();
   });
 
@@ -70,10 +70,10 @@ describe('addImageDimensions post-processor', () => {
     }];
     processor.$process(docs);
     expect(getImageDimensionsSpy).toHaveBeenCalled();
-    expect(docs).toEqual([{
+    expect(docs).toEqual([jasmine.objectContaining({
       docType: 'a',
       renderedContent: '<img src="missing">'
-    }]);
+    })]);
     expect(log.warn).toHaveBeenCalled();
   });
 
@@ -88,14 +88,14 @@ describe('addImageDimensions post-processor', () => {
     }];
     processor.$process(docs);
     expect(getImageDimensionsSpy).not.toHaveBeenCalled();
-    expect(docs).toEqual([{
+    expect(docs).toEqual([jasmine.objectContaining({
       docType: 'a',
       renderedContent: `
         <img src="a/b.jpg" width="10">
         <img src="c/d.jpg" height="10">
         <img src="e/f.jpg" width="10" height="10">
       `
-    }]);
+    })]);
   });
 
   function mockGetImageDimensions() {

aio/tools/transforms/angular-base-package/post-processors/h1-checker.js

@@ -1,6 +1,8 @@
 const visit = require('unist-util-visit');
 const is = require('hast-util-is-element');
 const source = require('unist-util-source');
+const toString = require('hast-util-to-string');
+const filter = require('unist-util-filter');
 
 module.exports = function h1CheckerPostProcessor() {
   return (ast, file) => {
@@ -8,11 +10,23 @@ module.exports = function h1CheckerPostProcessor() {
     visit(ast, node => {
       if (is(node, 'h1')) {
         h1s.push(node);
+        file.title = getText(node);
       }
     });
+
     if (h1s.length > 1) {
       const h1Src = h1s.map(node => source(node, file)).join(', ');
       file.fail(`More than one h1 found [${h1Src}]`);
     }
   };
 };
+
+function getText(h1) {
+  // Remove the aria-hidden anchor from the h1 node
+  const cleaned = filter(h1, node => !(
+    is(node, 'a') && node.properties &&
+    (node.properties.ariaHidden === 'true' || node.properties['aria-hidden'] === 'true')
+  ));
+
+  return toString(cleaned);
+}

aio/tools/transforms/angular-base-package/post-processors/h1-checker.spec.js

@@ -46,4 +46,27 @@ describe('h1Checker postprocessor', () => {
     };
     expect(() => processor.$process([doc])).not.toThrow();
   });
+
+  it('should attach the h1 text to the vFile', () => {
+    const doc = {
+      docType: 'a',
+      renderedContent: '<h1>Heading 1</h1>'
+    };
+    processor.$process([doc]);
+    expect(doc.vFile.title).toEqual('Heading 1');
+  });
+
+  it('should clean aria-hidden anchors from h1 text added to the vFile', () => {
+    const doc = {
+      docType: 'a',
+      renderedContent:
+        '<h1 class="no-toc" id="what-is-angular">' +
+          '<a title="Link to this heading" class="header-link" aria-hidden="true" href="docs#what-is-angular">' +
+            '<i class="material-icons">link</i>' +
+          '</a>What is Angular?' +
+        '</h1>'
+    };
+    processor.$process([doc]);
+    expect(doc.vFile.title).toEqual('What is Angular?');
+  });
 });

aio/tools/transforms/angular-base-package/processors/convertToJson.js

@@ -12,17 +12,13 @@ module.exports = function convertToJsonProcessor(log, createDocMessage) {
 
           let title = doc.title;
 
-          // We do allow an empty `title` but resort to `name` if it is not even defined
+          // We do allow an empty `title` but if it is `undefined` we resort to `vFile.title` and then `name`
           if (title === undefined) {
-            title = doc.name;
+            title = (doc.vFile && doc.vFile.title);
           }
 
-          // If there is no title then try to extract it from the first h1 in the renderedContent
           if (title === undefined) {
-            const match = /<h1[^>]*>(.+?)<\/h1>/.exec(contents);
-            if (match) {
-              title = match[1];
-            }
+            title = doc.name;
           }
 
           // If there is still no title then log a warning

aio/tools/transforms/angular-base-package/processors/convertToJson.spec.js

@@ -50,8 +50,12 @@ describe('convertToJson processor', () => {
     expect(log.warn).not.toHaveBeenCalled();
   });
 
-  it('should get the title from the first `h1` if no title nor name is specified', () => {
-    const docs = [{ docType: 'test-doc', renderedContent: '<div><h1 class="title">Some title</h1><article><h1>Article 1</h1></article></div>' }];
+  it('should get the title from the title extracted from the h1 in the rendered content if no title property is specified', () => {
+    const docs = [{
+      docType: 'test-doc',
+      vFile: { title: 'Some title' },
+      renderedContent: '<div><h1 class="title">Some title</h1><article><h1>Article 1</h1></article></div>'
+    }];
     processor.$process(docs);
     expect(JSON.parse(docs[0].renderedContent).contents).toEqual('<div><h1 class="title">Some title</h1><article><h1>Article 1</h1></article></div>');
     expect(JSON.parse(docs[0].renderedContent).title).toEqual('Some title');

aio/tools/transforms/angular-base-package/processors/generateKeywords.js

@@ -22,8 +22,8 @@ module.exports = function generateKeywordsProcessor(log, readFilesProcessor) {
       propertiesToIgnore: {},
       outputFolder: {presence: true}
     },
-    $runAfter: ['paths-computed'],
-    $runBefore: ['rendering-docs'],
+    $runAfter: ['postProcessHtml'],
+    $runBefore: ['writing-files'],
     $process: function(docs) {
 
       // Keywords to ignore
@@ -103,9 +103,10 @@ module.exports = function generateKeywordsProcessor(log, readFilesProcessor) {
           }
         });
 
+        doc.searchTitle = doc.searchTitle || doc.title || doc.vFile && doc.vFile.title || doc.name;
 
         doc.searchTerms = {
-          titleWords: extractTitleWords(doc.title || doc.name),
+          titleWords: extractTitleWords(doc.searchTitle),
           keywords: words.sort().join(' '),
           members: members.sort().join(' ')
         };
@@ -115,16 +116,16 @@ module.exports = function generateKeywordsProcessor(log, readFilesProcessor) {
       var searchData =
           filteredDocs.filter(function(page) { return page.searchTerms; }).map(function(page) {
             return Object.assign(
-                {path: page.path, title: page.searchTitle || page.name || page.title, type: page.docType}, page.searchTerms);
+                {path: page.path, title: page.searchTitle, type: page.docType}, page.searchTerms);
           });
 
       docs.push({
         docType: 'json-doc',
         id: 'search-data-json',
-        template: 'json-doc.template.json',
         path: this.outputFolder + '/search-data.json',
         outputPath: this.outputFolder + '/search-data.json',
-        data: searchData
+        data: searchData,
+        renderedContent: JSON.stringify(searchData)
       });
     }
   };

aio/tools/transforms/angular-base-package/processors/generateKeywords.spec.js

@@ -18,12 +18,12 @@ describe('generateKeywords processor', () => {
 
   it('should run after the correct processor', () => {
     const processor = processorFactory(mockLogger, mockReadFilesProcessor);
-    expect(processor.$runAfter).toEqual(['paths-computed']);
+    expect(processor.$runAfter).toEqual(['postProcessHtml']);
   });
 
   it('should run before the correct processor', () => {
     const processor = processorFactory(mockLogger, mockReadFilesProcessor);
-    expect(processor.$runBefore).toEqual(['rendering-docs']);
+    expect(processor.$runBefore).toEqual(['writing-files']);
   });
 
   it('should ignore internal and private exports', () => {
@@ -39,7 +39,24 @@ describe('generateKeywords processor', () => {
     ]);
   });
 
-  it('should use `doc.searchTitle` as the title if available', () => {
+  it('should compute `doc.searchTitle` from the doc properties if not already provided', () => {
+    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
+    const docs = [
+      { docType: 'class', name: 'A', searchTitle: 'searchTitle A', title: 'title A', vFile: { title: 'vFile A'} },
+      { docType: 'class', name: 'B', title: 'title B', vFile: { title: 'vFile B'} },
+      { docType: 'class', name: 'C', vFile: { title: 'vFile C'} },
+      { docType: 'class', name: 'D' },
+    ];
+    processor.$process(docs);
+    expect(docs[docs.length - 1].data).toEqual([
+      jasmine.objectContaining({ title: 'searchTitle A' }),
+      jasmine.objectContaining({ title: 'title B' }),
+      jasmine.objectContaining({ title: 'vFile C' }),
+      jasmine.objectContaining({ title: 'D' }),
+    ]);
+  });
+
+  it('should use `doc.searchTitle` as the title in the search index', () => {
     const processor = processorFactory(mockLogger, mockReadFilesProcessor);
     const docs = [
       { docType: 'class', name: 'PublicExport', searchTitle: 'class PublicExport' },
@@ -49,4 +66,15 @@ describe('generateKeywords processor', () => {
       jasmine.objectContaining({ title: 'class PublicExport', type: 'class'})
     ]);
   });
+
+  it('should generate renderedContent property', () => {
+    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
+    const docs = [
+      { docType: 'class', name: 'SomeClass', description: 'The is the documentation for the SomeClass API.' },
+    ];
+    processor.$process(docs);
+    expect(docs[docs.length - 1].renderedContent).toEqual(
+      '[{"title":"SomeClass","type":"class","titleWords":"SomeClass","keywords":"api class documentation for is someclass the","members":""}]'
+    );
+  });
 });

aio/tools/transforms/post-process-package/processors/post-process-html.js

@@ -39,6 +39,7 @@ module.exports = function postProcessHtml(log, createDocMessage) {
             vFile.messages.forEach(m => {
               log.warn(createDocMessage(m.message, doc));
             });
+            doc.vFile = vFile;
           } catch(e) {
             throw new Error(createDocMessage(e.message, doc));
           }

aio/tools/transforms/templates/api/includes/class-overview.html

@@ -1,11 +1,11 @@
 {% macro renderMember(member) %}{% if not member.internal -%}
-<a class="code-anchor" href="#{$ member.name $}">{$ member.name $}</a> {$ params.paramList(member.parameters) | indent(4, false) | trim() $}{$ params.returnType(member.returnType) $}
+<a class="code-anchor" href="#{$ member.name $}">{$ member.name $}</a>{$ params.paramList(member.parameters) | indent(4, false) | trim() $}{$ params.returnType(member.returnType) $}
 {%- endif %}{% endmacro -%}
 
 <section class="class-overview">
   <h2>Overview</h2>
   <code-example language="ts" hideCopy="true">
-  {$ doc.docType $} {$ doc.name $} {$ doc.heritage $} {
+  {$ doc.docType $} {$ doc.name $}{$ doc.heritage $} {
   {%- if doc.statics.length %}{% for member in doc.statics %}
     static {$ renderMember(member) $}{% endfor %}{% endif %}
   {%- if doc.constructorDoc %}

aio/tools/transforms/templates/api/includes/interface-overview.html

@@ -1,8 +1,10 @@
 <section class="interface-overview">
   <h2>Interface Overview</h2>
   <code-example language="ts" hideCopy="true">
-  interface {$ doc.name $} {$ doc.heritage $} { {% if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
-    <a class="code-anchor" href="#{$ member.name $}">{$ member.name | indent(6, false) | trim $}</a> {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}{% endif %}{% endfor %}{% endif %}
+  interface {$ doc.name $}{$ doc.heritage $} { {% if doc.newMember %}
+    <a class="code-anchor" href="#{$ doc.newMember.name $}">{$ doc.newMember.name | indent(6, false) | trim $}</a>{$ params.paramList(doc.newMember.parameters) | indent(8, false) | trim $}{$ params.returnType(doc.newMember.returnType) $}{% endif %}{% if doc.callMember %}
+    <a class="code-anchor" href="#{$ doc.callMember.name $}">{$ doc.callMember.name | indent(6, false) | trim $}</a>{$ params.paramList(doc.callMember.parameters) | indent(8, false) | trim $}{$ params.returnType(doc.callMember.returnType) $}{% endif %}{% if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
+    <a class="code-anchor" href="#{$ member.name $}">{$ member.name | indent(6, false) | trim $}</a>{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}{% endif %}{% endfor %}{% endif %}
   }
   </code-example>
 </section>