@ng-doc/app 15.0.0-beta.32 → 15.0.0-beta.34

package/styles/global.css

@@ -1,204 +1,126 @@
 @import '~@angular/cdk/overlay-prebuilt.css';
 @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Nunito:ital,wght@0,700;0,800;0,900;1,700;1,800;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600&display=swap");
-/*
- Original sources
- https://github.com/heygrady/scss-blend-modes/blob/master/stylesheets/_blend-modes.scss
-*/
 @import 'highlight.js/styles/atom-one-dark.css';
-:root {
-  --ng-doc-base-gutter: 8px;
-  --ng-doc-transition: 0.1s;
-  --ng-doc-base-0: var(--ng-doc-white);
-  --ng-doc-base-1: var(--ng-doc-grey-10);
-  --ng-doc-base-2: var(--ng-doc-grey-20);
-  --ng-doc-base-3: var(--ng-doc-grey-30);
-  --ng-doc-base-4: var(--ng-doc-grey-40);
-  --ng-doc-base-5: var(--ng-doc-grey-50);
-  --ng-doc-base-6: var(--ng-doc-grey-60);
-  --ng-doc-base-7: var(--ng-doc-grey-70);
-  --ng-doc-base-8: var(--ng-doc-grey-90);
-  --ng-doc-base-9: var(--ng-doc-grey-100);
-  --ng-doc-base-10: var(--ng-doc-grey-110);
-  --ng-doc-base-11: var(--ng-doc-grey-180);
-  --ng-doc-primary: var(--ng-doc-ember-120);
-  --ng-doc-primary-rgb: var(--ng-doc-ember-rgb);
-  --ng-doc-primary-text: var(--ng-doc-white);
-  --ng-doc-hover: var(--ng-doc-ember-20);
-  --ng-doc-active: var(--ng-doc-ember-40);
-  --ng-doc-background: var(--ng-doc-base-0);
-  --ng-doc-border-size: 1px;
-  --ng-doc-border-color: var(--ng-doc-base-1);
-  --ng-doc-border-hover-color: var(--ng-doc-base-3);
-  --ng-doc-shadow-color: rgba(0, 0, 0, 0.15);
-  --ng-doc-heading-font-family: "Nunito", sans-serif;
-  --ng-doc-font-family: "Nunito Sans", sans-serif;
-  --ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 2);
-  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 3);
-  --ng-doc-font-weight: 500;
-  --ng-doc-code-font: "Source Code Pro", monospace;
-  --ng-doc-code-font-size: 14px;
-  --ng-doc-code-line-height: 18px;
-  --ng-doc-code-font-weight: 600;
-  --ng-doc-text: var(--ng-doc-base-11);
-  --ng-doc-text-inversed: var(--ng-doc-base-0);
-  --ng-doc-text-muted: var(--ng-doc-base-8);
-  --ng-doc-link-color: var(--ng-doc-blue-100);
-  --ng-doc-inline-code-background: var(--ng-doc-base-2);
-  --ng-doc-inline-code-color: var(--ng-doc-text);
-  --ng-doc-button-background: trasparent;
-  --ng-doc-button-color: var(--ng-doc-text);
-  --ng-doc-button-hover-background: var(--ng-doc-base-1);
-  --ng-doc-button-hover-color: var(--ng-doc-button-color);
-  --ng-doc-button-active-background: var(--ng-doc-base-2);
-  --ng-doc-button-active-color: var(--ng-doc-button-hover-color);
-  --ng-doc-floated-border-color: transparent;
-  --ng-doc-floated-border: 2px solid var(--ng-doc-floated-border-color);
-  --ng-doc-floated-border-shadow-color: 0 1px 2px rgba(16, 24, 40, 0.05), 0 0 0 4px transparent;
-  --ng-doc-floated-border-radius: var(--ng-doc-base-gutter);
-  /* NgDocCheckboxComponent */
-  --ng-doc-checkbox-color: var(--ng-doc-primary);
-  --ng-doc-checkbox-color-text: var(--ng-doc-primary-text);
-  --ng-doc-checkbox-border: var(--ng-doc-border-size) solid var(--ng-doc-border-color);
-  --ng-doc-checkbox-border-hover: var(--ng-doc-border-size) solid var(--ng-doc-border-hover-color);
-  /* NgDocInputWrapperComponent */
-  --ng-doc-input-text-align: left;
-  --ng-doc-input-width: 100%;
-  --ng-doc-input-height: 40px;
-  --ng-doc-input-border: var(--ng-doc-border-size) solid var(--ng-doc-border-color);
-  --ng-doc-input-border-hover: var(--ng-doc-border-size) solid var(--ng-doc-border-hover-color);
-  --ng-doc-input-background-color: var(--ng-doc-base-0);
-  --ng-doc-input-padding-left: calc(var(--ng-doc-base-gutter) * 2);
-  --ng-doc-input-padding-right: calc(var(--ng-doc-base-gutter) * 2);
-  --ng-doc-input-cursor: auto;
-  /* NgDocTagComponent */
-  --ng-doc-tag-background: var(--ng-doc-primary);
-  --ng-doc-tag-color: var(--ng-doc-primary-text);
-  /* NgDocSelection */
-  --ng-doc-selection-border: 4px solid var(--ng-doc-primary);
-  --ng-doc-selection-background: transparent;
-  /* NgDocDot */
-  --ng-doc-dot-size: calc(var(--ng-doc-base-gutter) / 2);
-  --ng-doc-dot-background: var(--ng-doc-primary);
-}
-
 html {
   -webkit-font-smoothing: antialiased;
 }
 
-p {
-  line-height: 1.5rem;
-  margin-top: 1rem;
+p.ngde {
+  line-height: calc(var(--ng-doc-base-gutter) * 3);
+  margin-top: calc(var(--ng-doc-base-gutter) * 3);
   margin-bottom: 0;
 }
 
-ul,
-ol {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
+ul.ngde,
+ol.ngde {
+  margin: calc(var(--ng-doc-base-gutter) * 4) 0;
 }
 
-ul li,
-ol li {
+ul li.ngde,
+ol li.ngde {
   line-height: 1.5rem;
-  margin-bottom: var(--ng-doc-base-gutter);
+  margin-bottom: calc(var(--ng-doc-base-gutter) * 2);
 }
 
-ul ul,
-ol ul,
-ul ol,
-ol ol {
+ul ul.ngde,
+ol ul.ngde,
+ul ol.ngde,
+ol ol.ngde {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-blockquote {
+blockquote.ngde {
   line-height: 1.5rem;
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h1.ngde,
+h2.ngde,
+h3.ngde,
+h4.ngde,
+h5.ngde,
+h6.ngde {
   font-family: var(--ng-doc-heading-font-family);
   margin: calc(var(--ng-doc-base-gutter) * 9) 0 0;
   line-height: 1.5rem;
   font-weight: 700;
   overflow-wrap: anywhere;
 }
-h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6,
-h2 + h1,
-h2 + h2,
-h2 + h3,
-h2 + h4,
-h2 + h5,
-h2 + h6,
-h3 + h1,
-h3 + h2,
-h3 + h3,
-h3 + h4,
-h3 + h5,
-h3 + h6,
-h4 + h1,
-h4 + h2,
-h4 + h3,
-h4 + h4,
-h4 + h5,
-h4 + h6,
-h5 + h1,
-h5 + h2,
-h5 + h3,
-h5 + h4,
-h5 + h5,
-h5 + h6,
-h6 + h1,
-h6 + h2,
-h6 + h3,
-h6 + h4,
-h6 + h5,
-h6 + h6 {
+h1.ngde + h1.ngde, h1.ngde + h2.ngde, h1.ngde + h3.ngde, h1.ngde + h4.ngde, h1.ngde + h5.ngde, h1.ngde + h6.ngde,
+h2.ngde + h1.ngde,
+h2.ngde + h2.ngde,
+h2.ngde + h3.ngde,
+h2.ngde + h4.ngde,
+h2.ngde + h5.ngde,
+h2.ngde + h6.ngde,
+h3.ngde + h1.ngde,
+h3.ngde + h2.ngde,
+h3.ngde + h3.ngde,
+h3.ngde + h4.ngde,
+h3.ngde + h5.ngde,
+h3.ngde + h6.ngde,
+h4.ngde + h1.ngde,
+h4.ngde + h2.ngde,
+h4.ngde + h3.ngde,
+h4.ngde + h4.ngde,
+h4.ngde + h5.ngde,
+h4.ngde + h6.ngde,
+h5.ngde + h1.ngde,
+h5.ngde + h2.ngde,
+h5.ngde + h3.ngde,
+h5.ngde + h4.ngde,
+h5.ngde + h5.ngde,
+h5.ngde + h6.ngde,
+h6.ngde + h1.ngde,
+h6.ngde + h2.ngde,
+h6.ngde + h3.ngde,
+h6.ngde + h4.ngde,
+h6.ngde + h5.ngde,
+h6.ngde + h6.ngde {
   margin-top: calc(var(--ng-doc-base-gutter) * 5);
 }
 
-h1 {
+h1.ngde {
   font-size: calc(var(--ng-doc-base-gutter) * 5);
   line-height: calc(var(--ng-doc-base-gutter) * 6);
   font-weight: 900;
 }
 
-h2 {
+h2.ngde {
   font-size: calc(var(--ng-doc-base-gutter) * 4);
   line-height: calc(var(--ng-doc-base-gutter) * 5);
 }
 
-h3 {
+h3.ngde {
   font-size: calc(var(--ng-doc-base-gutter) * 3);
   line-height: calc(var(--ng-doc-base-gutter) * 4);
 }
 
-h4 {
+h4.ngde {
   font-size: 20px;
   line-height: calc(var(--ng-doc-base-gutter) * 4);
   margin-top: calc(var(--ng-doc-base-gutter) * 3);
 }
 
-h5,
-h6 {
+h5.ngde,
+h6.ngde {
   font-size: calc(var(--ng-doc-base-gutter) * 2);
   line-height: calc(var(--ng-doc-base-gutter) * 3);
   margin-top: calc(var(--ng-doc-base-gutter) * 2);
 }
 
-pre code {
+pre.ngde {
+  margin: var(--ng-doc-code-margin);
+}
+pre.ngde code.ngde {
   white-space: unset;
   box-shadow: inset 0px 6px 6px rgba(16, 19, 19, 0.32);
 }
 
-code {
+*:not(pre) > code.ngde {
   vertical-align: bottom;
   border-radius: calc(var(--ng-doc-base-gutter) / 2);
   background-color: var(--ng-doc-inline-code-background);
@@ -210,11 +132,11 @@ code {
   white-space: nowrap;
 }
 
-.lead {
+.lead.ngde {
   font-size: 1.414rem;
 }
 
-.hug {
+.hug.ngde {
   margin-top: 0;
 }
 
@@ -222,67 +144,149 @@ code {
   overflow-x: auto;
 }
 
-table {
+table.ngde {
   width: 100%;
   border-spacing: 0;
   margin: calc(var(--ng-doc-base-gutter) * 4) 0;
   margin-bottom: calc(var(--ng-doc-base-gutter) * 7);
 }
-table thead tr th {
+table.ngde thead tr th {
   padding: var(--ng-doc-base-gutter);
   background-color: var(--ng-doc-base-1);
   text-align: left;
 }
-table thead tr th:first-child {
+table.ngde thead tr th:first-child {
   border-top-left-radius: var(--ng-doc-base-gutter);
   border-bottom-left-radius: var(--ng-doc-base-gutter);
   padding-left: calc(var(--ng-doc-base-gutter) * 4);
 }
-table thead tr th:last-child {
+table.ngde thead tr th:last-child {
   padding-right: calc(var(--ng-doc-base-gutter) * 4);
   border-top-right-radius: var(--ng-doc-base-gutter);
   border-bottom-right-radius: var(--ng-doc-base-gutter);
 }
-table thead tr th h1,
-table thead tr th h2,
-table thead tr th h3,
-table thead tr th h4,
-table thead tr th h5,
-table thead tr th h6 {
+table.ngde thead tr th h1.ngde,
+table.ngde thead tr th h2.ngde,
+table.ngde thead tr th h3.ngde,
+table.ngde thead tr th h4.ngde,
+table.ngde thead tr th h5.ngde,
+table.ngde thead tr th h6.ngde {
   margin-top: 0;
   margin-bottom: 0;
 }
-table tbody tr td {
+table.ngde tbody tr td {
   padding: calc(var(--ng-doc-base-gutter) * 2);
   vertical-align: top;
   border-bottom: 1px solid var(--ng-doc-base-1);
 }
-table tbody tr td:first-child {
+table.ngde tbody tr td:first-child {
   padding-left: calc(var(--ng-doc-base-gutter) * 4);
 }
-table tbody tr td:last-child {
+table.ngde tbody tr td:last-child {
   padding-right: calc(var(--ng-doc-base-gutter) * 4);
 }
-table tbody tr td table {
+table.ngde tbody tr td table {
   margin: calc(var(--ng-doc-base-gutter) * 2) 0;
 }
-table h1,
-table h2,
-table h3,
-table h4,
-table h5,
-table h6 {
+table.ngde h1.ngde,
+table.ngde h2.ngde,
+table.ngde h3.ngde,
+table.ngde h4.ngde,
+table.ngde h5.ngde,
+table.ngde h6.ngde {
   margin: 0 0 calc(var(--ng-doc-base-gutter) * 2);
 }
 
-a {
+a.ngde {
   text-decoration: none;
   color: var(--ng-doc-link-color);
 }
-a:hover {
+a.ngde:hover {
   text-decoration: underline;
 }
 
+/*
+ Original sources
+ https://github.com/heygrady/scss-blend-modes/blob/master/stylesheets/_blend-modes.scss
+*/
+:root {
+  --ng-doc-base-gutter: 8px;
+  --ng-doc-transition: 0.1s;
+  --ng-doc-base-0: var(--ng-doc-white);
+  --ng-doc-base-1: var(--ng-doc-grey-10);
+  --ng-doc-base-2: var(--ng-doc-grey-20);
+  --ng-doc-base-3: var(--ng-doc-grey-30);
+  --ng-doc-base-4: var(--ng-doc-grey-40);
+  --ng-doc-base-5: var(--ng-doc-grey-50);
+  --ng-doc-base-6: var(--ng-doc-grey-60);
+  --ng-doc-base-7: var(--ng-doc-grey-70);
+  --ng-doc-base-8: var(--ng-doc-grey-90);
+  --ng-doc-base-9: var(--ng-doc-grey-100);
+  --ng-doc-base-10: var(--ng-doc-grey-110);
+  --ng-doc-base-11: var(--ng-doc-grey-180);
+  --ng-doc-primary: var(--ng-doc-ember-140);
+  --ng-doc-primary-rgb: var(--ng-doc-ember-rgb);
+  --ng-doc-primary-text: var(--ng-doc-white);
+  --ng-doc-hover: var(--ng-doc-ember-20);
+  --ng-doc-active: var(--ng-doc-ember-40);
+  --ng-doc-background: var(--ng-doc-base-0);
+  --ng-doc-border-size: 1px;
+  --ng-doc-border-color: var(--ng-doc-base-1);
+  --ng-doc-border-hover-color: var(--ng-doc-base-3);
+  --ng-doc-shadow-color: rgba(0, 0, 0, 0.15);
+  --ng-doc-heading-font-family: "Nunito", sans-serif;
+  --ng-doc-font-family: "Nunito Sans", sans-serif;
+  --ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 2);
+  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 3);
+  --ng-doc-font-weight: 500;
+  --ng-doc-code-font: "Source Code Pro", monospace;
+  --ng-doc-code-font-size: 14px;
+  --ng-doc-code-line-height: 18px;
+  --ng-doc-code-font-weight: 600;
+  --ng-doc-code-margin: calc(var(--ng-doc-base-gutter) * 5) 0px;
+  --ng-doc-text: var(--ng-doc-base-11);
+  --ng-doc-text-inversed: var(--ng-doc-base-0);
+  --ng-doc-text-muted: var(--ng-doc-base-8);
+  --ng-doc-link-color: var(--ng-doc-blue-100);
+  --ng-doc-link-color-rgb: var(--ng-doc-blue-rgb);
+  --ng-doc-inline-code-background: var(--ng-doc-base-2);
+  --ng-doc-inline-code-color: var(--ng-doc-text);
+  --ng-doc-button-background: trasparent;
+  --ng-doc-button-color: var(--ng-doc-text);
+  --ng-doc-button-hover-background: var(--ng-doc-base-1);
+  --ng-doc-button-hover-color: var(--ng-doc-button-color);
+  --ng-doc-button-active-background: var(--ng-doc-base-2);
+  --ng-doc-button-active-color: var(--ng-doc-button-hover-color);
+  --ng-doc-floated-border-color: transparent;
+  --ng-doc-floated-border: 2px solid var(--ng-doc-floated-border-color);
+  --ng-doc-floated-border-shadow-color: 0 1px 2px rgba(16, 24, 40, 0.05), 0 0 0 4px transparent;
+  --ng-doc-floated-border-radius: var(--ng-doc-base-gutter);
+  /* NgDocCheckboxComponent */
+  --ng-doc-checkbox-color: var(--ng-doc-primary);
+  --ng-doc-checkbox-color-text: var(--ng-doc-primary-text);
+  --ng-doc-checkbox-border: var(--ng-doc-border-size) solid var(--ng-doc-border-color);
+  --ng-doc-checkbox-border-hover: var(--ng-doc-border-size) solid var(--ng-doc-border-hover-color);
+  /* NgDocInputWrapperComponent */
+  --ng-doc-input-text-align: left;
+  --ng-doc-input-width: 100%;
+  --ng-doc-input-height: 40px;
+  --ng-doc-input-border: var(--ng-doc-border-size) solid var(--ng-doc-border-color);
+  --ng-doc-input-border-hover: var(--ng-doc-border-size) solid var(--ng-doc-border-hover-color);
+  --ng-doc-input-background-color: var(--ng-doc-base-0);
+  --ng-doc-input-padding-left: calc(var(--ng-doc-base-gutter) * 2);
+  --ng-doc-input-padding-right: calc(var(--ng-doc-base-gutter) * 2);
+  --ng-doc-input-cursor: auto;
+  /* NgDocTagComponent */
+  --ng-doc-tag-background: var(--ng-doc-primary);
+  --ng-doc-tag-color: var(--ng-doc-primary-text);
+  /* NgDocSelection */
+  --ng-doc-selection-border: 4px solid var(--ng-doc-primary);
+  --ng-doc-selection-background: transparent;
+  /* NgDocDot */
+  --ng-doc-dot-size: calc(var(--ng-doc-base-gutter) / 2);
+  --ng-doc-dot-background: var(--ng-doc-primary);
+}
+
 .ng-doc-tooltip {
   --ng-doc-overlay-background: var(--ng-doc-base-11);
   --ng-doc-overlay-border: var(--ng-doc-base-11);
@@ -343,6 +347,7 @@ a:hover {
   --ng-doc-red-160: rgb(217, 0, 0);
   --ng-doc-red-170: rgb(182, 0, 0);
   --ng-doc-red-180: rgb(204, 0, 0);
+  --ng-doc-red-190: rgb(198, 0, 0);
   --ng-doc-pink-rgb: 255, 0, 102;
   --ng-doc-pink-10: rgba(255, 1, 136, 0.1);
   --ng-doc-pink-20: rgba(255, 1, 133, 0.2);
@@ -362,6 +367,7 @@ a:hover {
   --ng-doc-pink-160: rgb(217, 0, 55);
   --ng-doc-pink-170: rgb(182, 0, 42);
   --ng-doc-pink-180: rgb(204, 0, 42);
+  --ng-doc-pink-190: rgb(198, 0, 36);
   --ng-doc-purple-rgb: 204, 0, 204;
   --ng-doc-purple-10: rgba(227, 1, 227, 0.1);
   --ng-doc-purple-20: rgba(225, 1, 225, 0.2);
@@ -381,6 +387,7 @@ a:hover {
   --ng-doc-purple-160: rgb(152, 0, 152);
   --ng-doc-purple-170: rgb(125, 0, 125);
   --ng-doc-purple-180: rgb(137, 0, 137);
+  --ng-doc-purple-190: rgb(129, 0, 129);
   --ng-doc-deep-purple-rgb: 153, 0, 204;
   --ng-doc-deep-purple-10: rgba(187, 1, 227, 0.1);
   --ng-doc-deep-purple-20: rgba(184, 1, 225, 0.2);
@@ -400,6 +407,7 @@ a:hover {
   --ng-doc-deep-purple-160: rgb(99, 0, 152);
   --ng-doc-deep-purple-170: rgb(79, 0, 125);
   --ng-doc-deep-purple-180: rgb(83, 0, 137);
+  --ng-doc-deep-purple-190: rgb(76, 0, 129);
   --ng-doc-indigo-rgb: 102, 0, 204;
   --ng-doc-indigo-10: rgba(136, 1, 227, 0.1);
   --ng-doc-indigo-20: rgba(133, 1, 225, 0.2);
@@ -419,6 +427,7 @@ a:hover {
   --ng-doc-indigo-160: rgb(55, 0, 152);
   --ng-doc-indigo-170: rgb(42, 0, 125);
   --ng-doc-indigo-180: rgb(42, 0, 137);
+  --ng-doc-indigo-190: rgb(36, 0, 129);
   --ng-doc-blue-rgb: 0, 102, 204;
   --ng-doc-blue-10: rgba(1, 136, 227, 0.1);
   --ng-doc-blue-20: rgba(1, 133, 225, 0.2);
@@ -438,6 +447,7 @@ a:hover {
   --ng-doc-blue-160: rgb(0, 55, 152);
   --ng-doc-blue-170: rgb(0, 42, 125);
   --ng-doc-blue-180: rgb(0, 42, 137);
+  --ng-doc-blue-190: rgb(0, 36, 129);
   --ng-doc-light-blue-rgb: 0, 153, 204;
   --ng-doc-light-blue-10: rgba(1, 187, 227, 0.1);
   --ng-doc-light-blue-20: rgba(1, 184, 225, 0.2);
@@ -457,6 +467,7 @@ a:hover {
   --ng-doc-light-blue-160: rgb(0, 99, 152);
   --ng-doc-light-blue-170: rgb(0, 79, 125);
   --ng-doc-light-blue-180: rgb(0, 83, 137);
+  --ng-doc-light-blue-190: rgb(0, 76, 129);
   --ng-doc-cian-rgb: 0, 204, 204;
   --ng-doc-cian-10: rgba(1, 227, 227, 0.1);
   --ng-doc-cian-20: rgba(1, 225, 225, 0.2);
@@ -476,6 +487,7 @@ a:hover {
   --ng-doc-cian-160: rgb(0, 152, 152);
   --ng-doc-cian-170: rgb(0, 125, 125);
   --ng-doc-cian-180: rgb(0, 137, 137);
+  --ng-doc-cian-190: rgb(0, 129, 129);
   --ng-doc-teal-rgb: 4, 191, 139;
   --ng-doc-teal-10: rgba(7, 217, 174, 0.1);
   --ng-doc-teal-20: rgba(7, 215, 171, 0.2);
@@ -495,6 +507,7 @@ a:hover {
   --ng-doc-teal-160: rgb(2, 138, 86);
   --ng-doc-teal-170: rgb(1, 112, 68);
   --ng-doc-teal-180: rgb(1, 122, 71);
+  --ng-doc-teal-190: rgb(0, 115, 64);
   --ng-doc-green-rgb: 0, 204, 0;
   --ng-doc-green-10: rgba(1, 227, 1, 0.1);
   --ng-doc-green-20: rgba(1, 225, 1, 0.2);
@@ -514,6 +527,7 @@ a:hover {
   --ng-doc-green-160: rgb(0, 152, 0);
   --ng-doc-green-170: rgb(0, 125, 0);
   --ng-doc-green-180: rgb(0, 137, 0);
+  --ng-doc-green-190: rgb(0, 129, 0);
   --ng-doc-light-green-rgb: 0, 204, 51;
   --ng-doc-light-green-10: rgba(1, 227, 74, 0.1);
   --ng-doc-light-green-20: rgba(1, 225, 72, 0.2);
@@ -533,6 +547,7 @@ a:hover {
   --ng-doc-light-green-160: rgb(0, 152, 22);
   --ng-doc-light-green-170: rgb(0, 125, 16);
   --ng-doc-light-green-180: rgb(0, 137, 14);
+  --ng-doc-light-green-190: rgb(0, 129, 11);
   --ng-doc-lime-rgb: 153, 255, 0;
   --ng-doc-lime-10: rgba(187, 255, 1, 0.1);
   --ng-doc-lime-20: rgba(184, 255, 1, 0.2);
@@ -552,6 +567,7 @@ a:hover {
   --ng-doc-lime-160: rgb(99, 217, 0);
   --ng-doc-lime-170: rgb(79, 182, 0);
   --ng-doc-lime-180: rgb(83, 204, 0);
+  --ng-doc-lime-190: rgb(76, 198, 0);
   --ng-doc-yellow-rgb: 255, 255, 0;
   --ng-doc-yellow-10: rgba(255, 255, 1, 0.1);
   --ng-doc-yellow-20: rgba(255, 255, 1, 0.2);
@@ -571,6 +587,7 @@ a:hover {
   --ng-doc-yellow-160: rgb(217, 217, 0);
   --ng-doc-yellow-170: rgb(182, 182, 0);
   --ng-doc-yellow-180: rgb(204, 204, 0);
+  --ng-doc-yellow-190: rgb(198, 198, 0);
   --ng-doc-ember-rgb: 255, 204, 0;
   --ng-doc-ember-10: rgba(255, 227, 1, 0.1);
   --ng-doc-ember-20: rgba(255, 225, 1, 0.2);
@@ -590,6 +607,7 @@ a:hover {
   --ng-doc-ember-160: rgb(217, 152, 0);
   --ng-doc-ember-170: rgb(182, 125, 0);
   --ng-doc-ember-180: rgb(204, 137, 0);
+  --ng-doc-ember-190: rgb(198, 129, 0);
   --ng-doc-orange-rgb: 255, 153, 0;
   --ng-doc-orange-10: rgba(255, 187, 1, 0.1);
   --ng-doc-orange-20: rgba(255, 184, 1, 0.2);
@@ -609,6 +627,7 @@ a:hover {
   --ng-doc-orange-160: rgb(217, 99, 0);
   --ng-doc-orange-170: rgb(182, 79, 0);
   --ng-doc-orange-180: rgb(204, 83, 0);
+  --ng-doc-orange-190: rgb(198, 76, 0);
   --ng-doc-deep-orange-rgb: 255, 102, 0;
   --ng-doc-deep-orange-10: rgba(255, 136, 1, 0.1);
   --ng-doc-deep-orange-20: rgba(255, 133, 1, 0.2);
@@ -628,6 +647,7 @@ a:hover {
   --ng-doc-deep-orange-160: rgb(217, 55, 0);
   --ng-doc-deep-orange-170: rgb(182, 42, 0);
   --ng-doc-deep-orange-180: rgb(204, 42, 0);
+  --ng-doc-deep-orange-190: rgb(198, 36, 0);
   --ng-doc-grey-rgb: 30, 30, 30;
   --ng-doc-grey-10: rgb(242, 242, 242);
   --ng-doc-grey-20: rgb(230, 230, 230);
@@ -647,6 +667,7 @@ a:hover {
   --ng-doc-grey-160: rgb(71, 71, 71);
   --ng-doc-grey-170: rgb(60, 60, 60);
   --ng-doc-grey-180: rgb(50, 50, 50);
+  --ng-doc-grey-190: rgb(40, 40, 40);
   --ng-doc-black: #000;
   --ng-doc-white: #fff;
 }
@@ -680,6 +701,7 @@ a:hover {
   --ng-doc-input-decorator-color: var(--ng-doc-light-blue-100);
   --ng-doc-output-decorator-background: var(--ng-doc-light-blue-20);
   --ng-doc-output-decorator-color: var(--ng-doc-light-blue-150);
+  --ng-doc-navbar-background: var(--ng-doc-base-0);
   --ng-doc-navbar-height: calc(var(--ng-doc-base-gutter) * 7);
   --ng-doc-navbar-horizontal-padding: var(--ng-doc-app-horizontal-padding);
   --ng-doc-navbar-left-width: calc(var(--ng-doc-sidebar-width) - var(--ng-doc-navbar-horizontal-padding));
@@ -691,7 +713,8 @@ a:hover {
   --ng-doc-demo-displayer-border: 1px solid var(--ng-doc-base-2);
   --ng-doc-demo-displayer-border-radius: var(--ng-doc-base-gutter);
   --ng-doc-code-max-height: 400px;
-  --ng-doc-page-map-width: 200px;
+  --ng-doc-toc-width: 250px;
+  --ng-doc-toc-indent: calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2);
 }
 
 article header {
@@ -831,6 +854,9 @@ article header .ng-doc-header-details .ng-doc-header-details-label:first-child {
   white-space: nowrap;
   font-weight: 800;
 }
+.ng-doc-modifier[data-content=protected] {
+  color: var(--ng-doc-base-8);
+}
 .ng-doc-modifier[data-content=abstract] {
   color: var(--ng-doc-deep-orange-100);
 }
@@ -901,6 +927,9 @@ article header .ng-doc-header-details .ng-doc-header-details-label:first-child {
   background-color: var(--ng-doc-text);
   text-transform: capitalize;
 }
+.ng-doc-badge[data-content=protected] {
+  background-color: var(--ng-doc-base-8);
+}
 .ng-doc-badge[data-content=abstract] {
   background-color: var(--ng-doc-deep-orange-100);
 }
@@ -961,16 +990,16 @@ article h1:first-child, article h2:first-child, article h3:first-child,
 article h4:first-child, article h5:first-child, article h6:first-child {
   margin-top: 0;
 }
-article section {
+article section.ngde {
   margin-bottom: calc(var(--ng-doc-base-gutter) * 5);
 }
-article header {
+article header.ngde {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   margin-bottom: calc(var(--ng-doc-base-gutter) * 3);
 }
-article header .ng-doc-page-tags {
+article header.ngde .ng-doc-page-tags {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: flex-start;
@@ -978,12 +1007,12 @@ article header .ng-doc-page-tags {
   margin-bottom: calc(var(--ng-doc-base-gutter) * 2);
   line-height: 22px;
 }
-article header h1 {
+article header.ngde h1.ngde {
   margin: 0;
   margin-right: var(--ng-doc-base-gutter);
 }
-article th p,
-article td p {
+article th p.ngde,
+article td p.ngde {
   margin: 0;
 }
 article .ng-doc-inline-header {