feat(aio): buttons for TOC "Contents" label

- Use buttons for the TOC “Contents” label when embedded-and-expandable or TOC on the right to satisfy a11y.
- Add aria-pressed setting for the toggles in TOC and NavItem.
- Clicking the right panel TOC “Contents” button scrolls to top.
- When embedded use same rotating caret as sidebar
- When embedded and no secondaries, “Content” is just a label.
- Gray background for focused buttons rather than outline because can’t get carets to work with outline.

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

@@ -50,51 +50,70 @@ aio-toc > div {
     }
   }
 
-  button.toc-show-all,
+  button.toc-heading,
   button.toc-more-items {
+    cursor: pointer;
     display: inline-block;
     background: 0;
     background-color: transparent;
     border: none;
     box-shadow: none;
-    color: $mediumgray;
     padding: 0;
 
+    &:focus.embedded {
+      outline: none;
+      background: $lightgray;
+    }
+  }
+
+  button.toc-heading,
+  div.toc-heading {
+    font-size: 115%;
+  }
+
+  button.toc-heading {
+    md-icon.rotating-icon {
+      height: 18px;
+      width: 18px;
+      position: relative;
+      left: -4px;
+      top: 5px;
+    }
+
+    &:hover:not(.embedded) {
+      color: $accentblue;
+    }
+  }
+
+
+  button.toc-more-items {
+    color: $mediumgray;
+    top: 10px;
+    position: relative;
+
     &:hover {
       color: $accentblue;
     }
-    &:focus {
-      outline: none;
-    }
-  }
-
-  button.toc-show-all {
-    min-width: 34px;
-    position: absolute;
-    top: 0;
-  }
-
-  button.toc-show-all::after {
-    content: 'expand_less';
-  }
-
-  button.toc-show-all.closed::after {
-    content: 'expand_more';
-  }
-
-  button.toc-more-items {
-    top: 10px;
-    position: relative;
   }
 
   button.toc-more-items::after {
     content: 'expand_less';
   }
 
-  button.toc-more-items.closed::after {
+  button.toc-more-items.collapsed::after {
     content: 'more_horiz';
   }
 
+
+  .mat-icon.collapsed {
+    @include rotate(0deg);
+  }
+
+  .mat-icon:not(.collapsed) {
+    @include rotate(90deg);
+    // margin: 4px;
+  }
+
   ul.toc-list {
     list-style-type: none;
     margin: 0;
@@ -131,6 +150,6 @@ aio-toc > div {
   }
 }
 
-aio-toc.embedded > div.closed li.secondary {
+aio-toc.embedded > div.collapsed li.secondary {
     display: none;
 }