@ng-doc/app 22.0.0-beta.2 → 22.0.0

package/styles/global.css

@@ -17,31 +17,42 @@ iframe.ngde {
 }
 
 p.ngde {
-  line-height: calc(var(--ng-doc-base-gutter) * 3);
-  margin: calc(var(--ng-doc-base-gutter) * 2) 0;
+  line-height: var(--ng-doc-line-height);
+  margin: 0 0 var(--ng-doc-space-4);
 }
 
 ul.ngde,
 ol.ngde {
-  margin: var(--ng-doc-page-block-margin);
+  margin: 0 0 var(--ng-doc-space-4);
+  padding-left: 1.25em;
 }
 
 ul li.ngde,
 ol li.ngde {
-  line-height: 1.5rem;
-  margin-bottom: calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2);
+  line-height: var(--ng-doc-line-height);
+  margin: 0 0 var(--ng-doc-space-1);
+  padding-left: 2px;
+}
+ul li.ngde::marker,
+ol li.ngde::marker {
+  color: var(--ng-doc-base-5);
 }
 
 ul ul.ngde,
 ol ul.ngde,
 ul ol.ngde,
 ol ol.ngde {
-  margin-top: calc(var(--ng-doc-base-gutter) * 2);
+  margin-top: var(--ng-doc-space-1);
   margin-bottom: 0;
 }
 
+blockquote.ngde,
+blockquote[ng-doc-blockquote] {
+  --ng-doc-line-height: 24px;
+  line-height: var(--ng-doc-line-height);
+}
+
 blockquote.ngde {
-  line-height: 1.5rem;
   margin: var(--ng-doc-page-block-margin);
 }
 
@@ -57,9 +68,9 @@ h6.ngde {
   line-height: var(--ng-doc-line-height);
   font-size: var(--ng-doc-font-size);
   font-weight: var(--ng-doc-font-weight);
-  margin: calc(var(--ng-doc-base-gutter) * 7) 0 0;
-  --ng-doc-line-height: 1.5rem;
+  margin: var(--ng-doc-space-6) 0 var(--ng-doc-space-2);
   --ng-doc-font-weight: 600;
+  letter-spacing: var(--ng-doc-heading-letter-spacing);
   overflow-wrap: anywhere;
   color: var(--ng-doc-heading-color);
 }
@@ -102,35 +113,50 @@ h6.ngde + h3.ngde,
 h6.ngde + h4.ngde,
 h6.ngde + h5.ngde,
 h6.ngde + h6.ngde {
-  margin-top: calc(var(--ng-doc-base-gutter) * 2);
+  margin-top: var(--ng-doc-space-4);
 }
 
 h1.ngde {
-  --ng-doc-font-size: 36px;
-  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 4);
+  --ng-doc-font-size: var(--ng-doc-h1-font-size);
+  --ng-doc-line-height: var(--ng-doc-h1-line-height);
+  --ng-doc-font-weight: 700;
+  letter-spacing: var(--ng-doc-display-letter-spacing);
+  margin-top: 0;
+}
+@media (max-width: 640px) {
+  h1.ngde {
+    --ng-doc-font-size: 28px;
+    --ng-doc-line-height: 36px;
+  }
 }
 
 h2.ngde {
-  --ng-doc-font-size: 26px;
-  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 4);
+  --ng-doc-font-size: var(--ng-doc-h2-font-size);
+  --ng-doc-line-height: var(--ng-doc-h2-line-height);
+  margin: var(--ng-doc-h2-margin-top) 0 var(--ng-doc-heading-margin-bottom);
+  padding-top: var(--ng-doc-h2-padding-top);
+  border-top: var(--ng-doc-h2-border);
 }
 
 h3.ngde {
-  --ng-doc-font-size: 20px;
-  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 3);
+  --ng-doc-font-size: var(--ng-doc-h3-font-size);
+  --ng-doc-line-height: var(--ng-doc-h3-line-height);
+  margin: var(--ng-doc-h3-margin-top) 0 var(--ng-doc-space-2);
 }
 
 h4.ngde {
-  --ng-doc-font-size: 18px;
-  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 2);
-  margin: calc(var(--ng-doc-base-gutter) * 2) 0;
+  --ng-doc-font-size: var(--ng-doc-h4-font-size);
+  --ng-doc-line-height: var(--ng-doc-h4-line-height);
+}
+
+h5.ngde {
+  --ng-doc-font-size: var(--ng-doc-h5-font-size);
+  --ng-doc-line-height: var(--ng-doc-h5-line-height);
 }
 
-h5.ngde,
 h6.ngde {
-  --ng-doc-font-size: 15px;
-  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 2);
-  margin: calc(var(--ng-doc-base-gutter) * 2) 0;
+  --ng-doc-font-size: var(--ng-doc-h6-font-size);
+  --ng-doc-line-height: var(--ng-doc-h6-line-height);
 }
 
 pre.shiki {
@@ -153,15 +179,13 @@ pre.shiki code span {
 }
 
 *:not(pre) > code.ngde {
-  vertical-align: bottom;
-  border-radius: calc(var(--ng-doc-base-gutter) / 2);
+  border-radius: var(--ng-doc-radius-sm);
   color: var(--ng-doc-inline-code-color);
-  padding: calc(var(--ng-doc-base-gutter) / 4) var(--ng-doc-base-gutter);
+  padding: 0.15em 0.4em;
   font-family: var(--ng-doc-code-font);
-  font-size: 14px;
+  font-size: 0.875em;
   font-weight: var(--ng-doc-code-font-weight);
-  line-height: var(--ng-doc-code-line-height, var(--ng-doc-line-height));
-  background: color-mix(in srgb, var(--ng-doc-inline-code-background) 15%, transparent);
+  background: color-mix(in srgb, var(--ng-doc-inline-code-background) 12%, transparent);
   white-space: nowrap;
 }
 
@@ -174,16 +198,14 @@ table.ngde {
   border-spacing: 0;
 }
 table.ngde thead tr th {
-  padding: calc(var(--ng-doc-base-gutter) * 1.5);
+  padding: var(--ng-doc-space-2) var(--ng-doc-space-3);
   background-color: var(--ng-doc-base-1);
   text-align: left;
 }
 table.ngde thead tr th:first-child {
   border-top-left-radius: var(--ng-doc-base-gutter);
-  padding-left: calc(var(--ng-doc-base-gutter) * 3);
 }
 table.ngde thead tr th:last-child {
-  padding-right: calc(var(--ng-doc-base-gutter) * 3);
   border-top-right-radius: var(--ng-doc-base-gutter);
 }
 table.ngde thead tr th h1.ngde,
@@ -196,17 +218,11 @@ table.ngde thead tr th h6.ngde {
   margin-bottom: 0;
 }
 table.ngde tbody tr td {
-  padding: calc(var(--ng-doc-base-gutter) * 2);
+  padding: var(--ng-doc-space-3);
   vertical-align: top;
   border-bottom: 1px solid var(--ng-doc-base-2);
   background-color: var(--ng-doc-background);
 }
-table.ngde tbody tr td:first-child {
-  padding-left: calc(var(--ng-doc-base-gutter) * 3);
-}
-table.ngde tbody tr td:last-child {
-  padding-right: calc(var(--ng-doc-base-gutter) * 3);
-}
 table.ngde tbody tr td table {
   margin: calc(var(--ng-doc-base-gutter) * 2) 0;
 }
@@ -219,11 +235,27 @@ table.ngde h6.ngde {
   margin: 0 0 var(--ng-doc-base-gutter);
 }
 
+.ng-doc-node-details *:not(pre) > code.ngde,
+table.ng-doc-api-table *:not(pre) > code.ngde,
+table.ng-doc-overload-table *:not(pre) > code.ngde,
+.ng-doc-declaration-details *:not(pre) > code.ngde {
+  font-size: 13px;
+}
+
 a.ngde {
-  text-decoration: none;
   color: var(--ng-doc-link-color);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--ng-doc-link-color) 35%, transparent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
 }
 a.ngde:hover {
+  text-decoration-color: currentColor;
+}
+a.ngde.ng-doc-code-anchor {
+  text-decoration: none;
+}
+a.ngde.ng-doc-code-anchor:hover {
   text-decoration: underline;
 }
 
@@ -232,62 +264,299 @@ mark.ng-doc-mark {
   color: var(--ng-doc-mark-color, inherit);
 }
 
+:root {
+  --ng-doc-palette-neutral-0: #ffffff;
+  --ng-doc-palette-neutral-25: #fbfcfe;
+  --ng-doc-palette-neutral-50: #f4f7fc;
+  --ng-doc-palette-neutral-100: #eef0f5;
+  --ng-doc-palette-neutral-150: #e7e9ee;
+  --ng-doc-palette-neutral-200: #dfe1e6;
+  --ng-doc-palette-neutral-300: #cfd1d6;
+  --ng-doc-palette-neutral-400: #a9abaf;
+  --ng-doc-palette-neutral-450: #96989d;
+  --ng-doc-palette-neutral-500: #84868a;
+  --ng-doc-palette-neutral-600: #67696d;
+  --ng-doc-palette-neutral-700: #515256;
+  --ng-doc-palette-neutral-750: #46484c;
+  --ng-doc-palette-neutral-800: #3b3d41;
+  --ng-doc-palette-neutral-850: #2c2e31;
+  --ng-doc-palette-neutral-875: #26282c;
+  --ng-doc-palette-neutral-900: #212326;
+  --ng-doc-palette-neutral-950: #18191d;
+  --ng-doc-palette-neutral-1000: #0d0e11;
+  --ng-doc-palette-brand-50: #f4f8fe;
+  --ng-doc-palette-brand-100: #e6effe;
+  --ng-doc-palette-brand-200: #cddffe;
+  --ng-doc-palette-brand-300: #aac8fe;
+  --ng-doc-palette-brand-400: #81adfe;
+  --ng-doc-palette-brand-500: #4c89ff;
+  --ng-doc-palette-brand-600: #1d60e2;
+  --ng-doc-palette-brand-700: #134dbe;
+  --ng-doc-palette-brand-800: #0f3d96;
+  --ng-doc-palette-brand-900: #0c2d6f;
+  --ng-doc-palette-brand-950: #081e4b;
+  --ng-doc-palette-violet-50: #f8f6fe;
+  --ng-doc-palette-violet-100: #f1ebff;
+  --ng-doc-palette-violet-200: #e3d6ff;
+  --ng-doc-palette-violet-300: #d1b9fe;
+  --ng-doc-palette-violet-400: #bc98fa;
+  --ng-doc-palette-violet-500: #a072e6;
+  --ng-doc-palette-violet-600: #7e4ac2;
+  --ng-doc-palette-violet-700: #683ba3;
+  --ng-doc-palette-violet-800: #512e80;
+  --ng-doc-palette-violet-900: #3c225f;
+  --ng-doc-palette-violet-950: #281740;
+  --ng-doc-palette-green-50: #f1faf3;
+  --ng-doc-palette-green-100: #e1f4e5;
+  --ng-doc-palette-green-200: #c3e9cc;
+  --ng-doc-palette-green-300: #9cd8ab;
+  --ng-doc-palette-green-400: #6fc488;
+  --ng-doc-palette-green-500: #39a761;
+  --ng-doc-palette-green-600: #058141;
+  --ng-doc-palette-green-700: #036a34;
+  --ng-doc-palette-green-800: #015428;
+  --ng-doc-palette-green-900: #003e1c;
+  --ng-doc-palette-green-950: #012a11;
+  --ng-doc-palette-amber-50: #fff6ec;
+  --ng-doc-palette-amber-100: #fdebd8;
+  --ng-doc-palette-amber-200: #fad7b1;
+  --ng-doc-palette-amber-300: #f1bc7f;
+  --ng-doc-palette-amber-400: #e49d41;
+  --ng-doc-palette-amber-500: #c47d04;
+  --ng-doc-palette-amber-600: #955e05;
+  --ng-doc-palette-amber-700: #7b4c01;
+  --ng-doc-palette-amber-800: #613c01;
+  --ng-doc-palette-amber-900: #492b00;
+  --ng-doc-palette-amber-950: #321c00;
+  --ng-doc-palette-red-50: #fef5f4;
+  --ng-doc-palette-red-100: #ffe8e6;
+  --ng-doc-palette-red-200: #ffd1cd;
+  --ng-doc-palette-red-300: #ffb0a9;
+  --ng-doc-palette-red-400: #ff847d;
+  --ng-doc-palette-red-500: #e85854;
+  --ng-doc-palette-red-600: #c2272d;
+  --ng-doc-palette-red-700: #a21921;
+  --ng-doc-palette-red-800: #80161a;
+  --ng-doc-palette-red-900: #5f1113;
+  --ng-doc-palette-red-950: #400c0c;
+  --ng-doc-space-1: calc(var(--ng-doc-base-gutter) * 0.5);
+  --ng-doc-space-2: var(--ng-doc-base-gutter);
+  --ng-doc-space-3: calc(var(--ng-doc-base-gutter) * 1.5);
+  --ng-doc-space-4: calc(var(--ng-doc-base-gutter) * 2);
+  --ng-doc-space-5: calc(var(--ng-doc-base-gutter) * 2.5);
+  --ng-doc-space-6: calc(var(--ng-doc-base-gutter) * 3);
+  --ng-doc-space-8: calc(var(--ng-doc-base-gutter) * 4);
+  --ng-doc-space-10: calc(var(--ng-doc-base-gutter) * 5);
+  --ng-doc-space-12: calc(var(--ng-doc-base-gutter) * 6);
+  --ng-doc-space-16: calc(var(--ng-doc-base-gutter) * 8);
+  --ng-doc-space-20: calc(var(--ng-doc-base-gutter) * 10);
+  --ng-doc-space-24: calc(var(--ng-doc-base-gutter) * 12);
+  --ng-doc-radius-xs: 4px;
+  --ng-doc-radius-sm: 6px;
+  --ng-doc-radius-md: 8px;
+  --ng-doc-radius-lg: 12px;
+  --ng-doc-radius-xl: 16px;
+  --ng-doc-radius-full: 999px;
+  --ng-doc-text-xs-size: 12px;
+  --ng-doc-text-xs-line-height: 16px;
+  --ng-doc-text-sm-size: 14px;
+  --ng-doc-text-sm-line-height: 22px;
+  --ng-doc-text-md-size: 16px;
+  --ng-doc-text-md-line-height: 26px;
+  --ng-doc-text-lg-size: 18px;
+  --ng-doc-text-lg-line-height: 28px;
+  --ng-doc-h1-font-size: 34px;
+  --ng-doc-h1-line-height: 42px;
+  --ng-doc-h2-font-size: 26px;
+  --ng-doc-h2-line-height: 34px;
+  --ng-doc-h3-font-size: 20px;
+  --ng-doc-h3-line-height: 28px;
+  --ng-doc-h4-font-size: 17px;
+  --ng-doc-h4-line-height: 26px;
+  --ng-doc-h5-font-size: 15px;
+  --ng-doc-h5-line-height: 24px;
+  --ng-doc-h6-font-size: 14px;
+  --ng-doc-h6-line-height: 22px;
+  --ng-doc-heading-letter-spacing: -0.015em;
+  --ng-doc-display-letter-spacing: -0.025em;
+  --ng-doc-easing: cubic-bezier(0.2, 0, 0, 1);
+  --ng-doc-content-max-width: 760px;
+  --ng-doc-h2-margin-top: var(--ng-doc-space-12);
+  --ng-doc-h3-margin-top: var(--ng-doc-space-8);
+  --ng-doc-heading-margin-bottom: var(--ng-doc-space-3);
+  --ng-doc-h2-border: none;
+  --ng-doc-h2-padding-top: 0px;
+}
+
+:root {
+  --ng-doc-hue-brand: var(--ng-doc-primary);
+  --ng-doc-hue-violet: var(--ng-doc-palette-violet-600);
+  --ng-doc-hue-green: var(--ng-doc-success);
+  --ng-doc-hue-amber: var(--ng-doc-warning);
+  --ng-doc-hue-red: var(--ng-doc-alert);
+  --ng-doc-hue-neutral: var(--ng-doc-base-8);
+  --ng-doc-on-hue: var(--ng-doc-white);
+  --ng-doc-mix-soft: 10%;
+  --ng-doc-mix-chip: 12%;
+  --ng-doc-mix-border: 28%;
+  --ng-doc-mix-strong: 64%;
+  --ng-doc-hue-brand-chip: color-mix(
+    in oklab,
+    var(--ng-doc-hue-brand) var(--ng-doc-mix-chip),
+    var(--ng-doc-background)
+  );
+  --ng-doc-hue-brand-strong: color-mix(
+    in oklab,
+    var(--ng-doc-hue-brand) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-hue-violet-chip: color-mix(
+    in oklab,
+    var(--ng-doc-hue-violet) var(--ng-doc-mix-chip),
+    var(--ng-doc-background)
+  );
+  --ng-doc-hue-violet-strong: color-mix(
+    in oklab,
+    var(--ng-doc-hue-violet) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-info-soft: color-mix(
+    in oklab,
+    var(--ng-doc-info) var(--ng-doc-mix-soft),
+    var(--ng-doc-background)
+  );
+  --ng-doc-info-border: color-mix(
+    in oklab,
+    var(--ng-doc-info) var(--ng-doc-mix-border),
+    var(--ng-doc-background)
+  );
+  --ng-doc-info-strong: color-mix(
+    in oklab,
+    var(--ng-doc-info) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-success-soft: color-mix(
+    in oklab,
+    var(--ng-doc-success) var(--ng-doc-mix-soft),
+    var(--ng-doc-background)
+  );
+  --ng-doc-success-border: color-mix(
+    in oklab,
+    var(--ng-doc-success) var(--ng-doc-mix-border),
+    var(--ng-doc-background)
+  );
+  --ng-doc-success-strong: color-mix(
+    in oklab,
+    var(--ng-doc-success) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-warning-soft: color-mix(
+    in oklab,
+    var(--ng-doc-warning) var(--ng-doc-mix-soft),
+    var(--ng-doc-background)
+  );
+  --ng-doc-warning-border: color-mix(
+    in oklab,
+    var(--ng-doc-warning) var(--ng-doc-mix-border),
+    var(--ng-doc-background)
+  );
+  --ng-doc-warning-strong: color-mix(
+    in oklab,
+    var(--ng-doc-warning) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-alert-soft: color-mix(
+    in oklab,
+    var(--ng-doc-alert) var(--ng-doc-mix-soft),
+    var(--ng-doc-background)
+  );
+  --ng-doc-alert-border: color-mix(
+    in oklab,
+    var(--ng-doc-alert) var(--ng-doc-mix-border),
+    var(--ng-doc-background)
+  );
+  --ng-doc-alert-strong: color-mix(
+    in oklab,
+    var(--ng-doc-alert) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-primary-soft: color-mix(
+    in oklab,
+    var(--ng-doc-primary) var(--ng-doc-mix-soft),
+    var(--ng-doc-background)
+  );
+  --ng-doc-primary-strong: color-mix(
+    in oklab,
+    var(--ng-doc-primary) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-shadow-xs: 0 1px 2px var(--ng-doc-shadow-color);
+  --ng-doc-shadow-sm: 0 1px 3px var(--ng-doc-shadow-color),
+    0 1px 2px -1px var(--ng-doc-shadow-color);
+  --ng-doc-shadow-md: 0 8px 24px -6px var(--ng-doc-shadow-color),
+    0 2px 6px -2px var(--ng-doc-shadow-color);
+  --ng-doc-shadow-lg: 0 24px 48px -12px var(--ng-doc-shadow-color),
+    0 4px 12px -4px var(--ng-doc-shadow-color);
+  --ng-doc-focus-ring-color: var(--ng-doc-palette-brand-500);
+  --ng-doc-focus-ring: 0 0 0 2px var(--ng-doc-background), 0 0 0 4px var(--ng-doc-focus-ring-color);
+}
+
 :root {
   --ng-doc-base-gutter: 8px;
-  --ng-doc-transition: 0.2s;
-  --ng-doc-text-selection: rgba(21, 88, 214, 0.15);
+  --ng-doc-transition: 0.18s;
+  --ng-doc-text-selection: color-mix(in srgb, var(--ng-doc-primary) 18%, transparent);
   --ng-doc-white: #fff;
   --ng-doc-black: #000;
-  --ng-doc-base-rgb: 0 0 0;
-  --ng-doc-base-0: var(--ng-doc-white);
-  --ng-doc-base-1: #f6f6f6;
-  --ng-doc-base-2: #ebebeb;
-  --ng-doc-base-3: #dedede;
-  --ng-doc-base-4: #d1d1d1;
-  --ng-doc-base-5: #b8b8b8;
-  --ng-doc-base-6: #ababab;
-  --ng-doc-base-7: #9e9e9e;
-  --ng-doc-base-8: #919191;
-  --ng-doc-base-9: #858585;
-  --ng-doc-base-10: #6e6e6e;
-  --ng-doc-primary: #1558d6;
+  --ng-doc-base-rgb: 13 14 17;
+  --ng-doc-base-0: var(--ng-doc-palette-neutral-0);
+  --ng-doc-base-1: var(--ng-doc-palette-neutral-50);
+  --ng-doc-base-2: var(--ng-doc-palette-neutral-100);
+  --ng-doc-base-3: var(--ng-doc-palette-neutral-200);
+  --ng-doc-base-4: var(--ng-doc-palette-neutral-300);
+  --ng-doc-base-5: var(--ng-doc-palette-neutral-400);
+  --ng-doc-base-6: var(--ng-doc-palette-neutral-450);
+  --ng-doc-base-7: var(--ng-doc-palette-neutral-500);
+  --ng-doc-base-8: var(--ng-doc-palette-neutral-600);
+  --ng-doc-base-9: var(--ng-doc-palette-neutral-700);
+  --ng-doc-base-10: var(--ng-doc-palette-neutral-800);
+  --ng-doc-primary: var(--ng-doc-palette-brand-600);
   --ng-doc-primary-text: var(--ng-doc-white);
-  --ng-doc-alert: #ff5959;
+  --ng-doc-alert: var(--ng-doc-palette-red-600);
   --ng-doc-alert-text: var(--ng-doc-white);
-  --ng-doc-warning: #ff9f1a;
+  --ng-doc-warning: var(--ng-doc-palette-amber-600);
   --ng-doc-warning-text: var(--ng-doc-white);
-  --ng-doc-info: #3f68b5;
+  --ng-doc-info: var(--ng-doc-palette-brand-600);
   --ng-doc-info-text: var(--ng-doc-white);
-  --ng-doc-success: #00b74a;
+  --ng-doc-success: var(--ng-doc-palette-green-600);
   --ng-doc-success-text: var(--ng-doc-white);
   --ng-doc-background: var(--ng-doc-base-0);
-  --ng-doc-hover-background: rgba(110, 110, 110, 0.09);
+  --ng-doc-hover-background: color-mix(in srgb, var(--ng-doc-base-10) 6%, transparent);
   --ng-doc-border-size: 1px;
   --ng-doc-border-color: var(--ng-doc-base-3);
   --ng-doc-border-hover-color: var(--ng-doc-base-5);
-  --ng-doc-shadow-color: rgba(0, 0, 0, 0.15);
+  --ng-doc-shadow-color: rgb(16 24 40 / 0.1);
   --ng-doc-font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
   --ng-doc-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     'Liberation Mono', 'Courier New', monospace;
   --ng-doc-heading-font-family: var(--ng-doc-font-system);
-  --ng-doc-heading-color: #111111;
+  --ng-doc-heading-color: var(--ng-doc-palette-neutral-950);
   --ng-doc-font-family: var(--ng-doc-font-system);
-  --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-size: var(--ng-doc-text-md-size);
+  --ng-doc-line-height: var(--ng-doc-text-md-line-height);
   --ng-doc-font-weight: 400;
   --ng-doc-code-font: var(--ng-doc-font-system-mono);
   --ng-doc-code-font-size: 14px;
-  --ng-doc-code-line-height: 20px;
+  --ng-doc-code-line-height: 22px;
   --ng-doc-code-font-weight: 400;
-  --ng-doc-text: rgb(78 78 78);
+  --ng-doc-text: var(--ng-doc-palette-neutral-800);
   --ng-doc-text-muted: var(--ng-doc-base-8);
-  --ng-doc-mark-background: rgba(255, 222, 0, 0.3);
+  --ng-doc-mark-background: color-mix(in srgb, #f5c542 45%, transparent);
   --ng-doc-link-color: var(--ng-doc-primary);
-  --ng-doc-inline-code-background: var(--ng-doc-base-9);
-  --ng-doc-inline-code-color: var(--ng-doc-text);
-  --ng-doc-button-background: trasparent;
+  --ng-doc-inline-code-background: var(--ng-doc-base-8);
+  --ng-doc-inline-code-color: var(--ng-doc-heading-color);
+  --ng-doc-button-background: transparent;
   --ng-doc-button-background-opacity: 0;
   --ng-doc-button-color: var(--ng-doc-text);
   --ng-doc-button-hover-background: var(--ng-doc-base-2);
@@ -297,7 +566,7 @@ mark.ng-doc-mark {
   --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);
+  --ng-doc-floated-border-radius: var(--ng-doc-radius-md);
   /* NgDocCheckboxComponent */
   --ng-doc-checkbox-color: var(--ng-doc-primary);
   --ng-doc-checkbox-color-text: var(--ng-doc-primary-text);
@@ -307,8 +576,8 @@ mark.ng-doc-mark {
   --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-border: var(--ng-doc-border-size) solid var(--ng-doc-base-7);
+  --ng-doc-input-border-hover: var(--ng-doc-border-size) solid var(--ng-doc-base-8);
   --ng-doc-input-background-color: var(--ng-doc-base-0);
   --ng-doc-input-cursor: auto;
   /* NgDocTagComponent */
@@ -323,7 +592,7 @@ mark.ng-doc-mark {
   /* Sidenav */
   --ng-doc-sidenav-width: 300px;
   /* TabGroup */
-  --ng-doc-tab-group-border-radius: var(--ng-doc-base-gutter);
+  --ng-doc-tab-group-border-radius: var(--ng-doc-radius-lg);
   --ng-doc-tab-group-border: 1px solid var(--ng-doc-border-color);
 }
 
@@ -379,96 +648,137 @@ mark.ng-doc-mark {
 }
 
 :root {
-  --ng-doc-app-max-width: 1450px;
+  --ng-doc-app-max-width: 1440px;
   --ng-doc-app-horizontal-padding: calc(var(--ng-doc-base-gutter) * 3);
   --ng-doc-code-background: var(--ng-doc-base-1);
   --ng-doc-page-padding: calc(var(--ng-doc-base-gutter) * 3) var(--ng-doc-app-horizontal-padding);
   --ng-doc-main-padding: var(--ng-doc-navbar-height) 0 0 0;
-  --ng-doc-page-block-margin: calc(var(--ng-doc-base-gutter) * 3) 0;
+  --ng-doc-page-block-margin: var(--ng-doc-space-6) 0;
   --ng-doc-page-wrapper-tabs-height: calc(var(--ng-doc-base-gutter) * 6);
-  --ng-doc-class-color: #fff;
-  --ng-doc-class-background: #e74c3c;
-  --ng-doc-interface-color: #fff;
-  --ng-doc-interface-background: #3498db;
-  --ng-doc-enum-color: #fff;
-  --ng-doc-enum-background: #2ecc71;
-  --ng-doc-variable-color: #fff;
-  --ng-doc-variable-background: #f1c40f;
-  --ng-doc-function-color: #fff;
-  --ng-doc-function-background: #27bd09;
-  --ng-doc-type-alias-color: #fff;
-  --ng-doc-type-alias-background: #3e69c5;
-  --ng-doc-selector-color: #fff;
-  --ng-doc-selector-background: #25ac5f;
-  --ng-doc-string-color: #fff;
-  --ng-doc-string-background: #ff1150;
-  --ng-doc-number-color: #fff;
-  --ng-doc-number-background: #3498db;
-  --ng-doc-boolean-color: #fff;
-  --ng-doc-boolean-background: #2ecc71;
-  --ng-doc-null-color: #fff;
-  --ng-doc-null-background: #95a5a6;
-  --ng-doc-undefined-color: #fff;
-  --ng-doc-undefined-background: #bdc3c7;
-  --ng-doc-object-color: #fff;
-  --ng-doc-object-background: #f39c12;
-  --ng-doc-component-decorator-color: #fff;
-  --ng-doc-component-decorator-background: #1abc9c;
-  --ng-doc-directive-decorator-color: #fff;
-  --ng-doc-directive-decorator-background: #e67e22;
-  --ng-doc-injectable-decorator-color: #fff;
-  --ng-doc-injectable-decorator-background: #9b59b6;
-  --ng-doc-pipe-decorator-color: #fff;
-  --ng-doc-pipe-decorator-background: #c0392b;
-  --ng-doc-ng-module-decorator-color: #fff;
-  --ng-doc-ng-module-decorator-background: #27ae60;
-  --ng-doc-input-decorator-color: #fff;
-  --ng-doc-input-decorator-background: #13a2da;
-  --ng-doc-output-decorator-color: #fff;
-  --ng-doc-output-decorator-background: #daa213;
-  --ng-doc-abstract-background: #ff5f1a;
-  --ng-doc-abstract-color: #fff;
-  --ng-doc-async-background: #0de311;
-  --ng-doc-async-color: #fff;
-  --ng-doc-protected-background: var(--ng-doc-base-7);
-  --ng-doc-protected-color: #fff;
-  --ng-doc-static-background: #e30dbf;
-  --ng-doc-static-color: #fff;
-  --ng-doc-overriden-background: #0d78e3;
-  --ng-doc-overriden-color: #fff;
-  --ng-doc-readonly-background: #ff2020;
-  --ng-doc-readonly-color: #fff;
-  --ng-doc-get-background: #2ecc3b;
-  --ng-doc-get-color: #fff;
-  --ng-doc-set-background: #e30dbf;
-  --ng-doc-set-color: #fff;
+  --ng-doc-class-color: var(--ng-doc-on-hue);
+  --ng-doc-class-background: var(--ng-doc-hue-violet);
+  --ng-doc-interface-color: var(--ng-doc-on-hue);
+  --ng-doc-interface-background: var(--ng-doc-hue-neutral);
+  --ng-doc-enum-color: var(--ng-doc-on-hue);
+  --ng-doc-enum-background: var(--ng-doc-hue-amber);
+  --ng-doc-variable-color: var(--ng-doc-on-hue);
+  --ng-doc-variable-background: var(--ng-doc-hue-amber);
+  --ng-doc-function-color: var(--ng-doc-on-hue);
+  --ng-doc-function-background: var(--ng-doc-hue-green);
+  --ng-doc-type-alias-color: var(--ng-doc-on-hue);
+  --ng-doc-type-alias-background: var(--ng-doc-hue-neutral);
+  --ng-doc-selector-color: var(--ng-doc-on-hue);
+  --ng-doc-selector-background: var(--ng-doc-hue-brand);
+  --ng-doc-string-color: var(--ng-doc-on-hue);
+  --ng-doc-string-background: var(--ng-doc-hue-green);
+  --ng-doc-number-color: var(--ng-doc-on-hue);
+  --ng-doc-number-background: var(--ng-doc-hue-brand);
+  --ng-doc-boolean-color: var(--ng-doc-on-hue);
+  --ng-doc-boolean-background: var(--ng-doc-hue-violet);
+  --ng-doc-null-color: var(--ng-doc-on-hue);
+  --ng-doc-null-background: var(--ng-doc-hue-neutral);
+  --ng-doc-undefined-color: var(--ng-doc-on-hue);
+  --ng-doc-undefined-background: var(--ng-doc-hue-neutral);
+  --ng-doc-object-color: var(--ng-doc-on-hue);
+  --ng-doc-object-background: var(--ng-doc-hue-amber);
+  --ng-doc-component-decorator-color: var(--ng-doc-on-hue);
+  --ng-doc-component-decorator-background: var(--ng-doc-hue-brand);
+  --ng-doc-directive-decorator-color: var(--ng-doc-on-hue);
+  --ng-doc-directive-decorator-background: var(--ng-doc-hue-brand);
+  --ng-doc-injectable-decorator-color: var(--ng-doc-on-hue);
+  --ng-doc-injectable-decorator-background: var(--ng-doc-hue-violet);
+  --ng-doc-pipe-decorator-color: var(--ng-doc-on-hue);
+  --ng-doc-pipe-decorator-background: var(--ng-doc-hue-brand);
+  --ng-doc-ng-module-decorator-color: var(--ng-doc-on-hue);
+  --ng-doc-ng-module-decorator-background: var(--ng-doc-hue-brand);
+  --ng-doc-input-decorator-color: var(--ng-doc-on-hue);
+  --ng-doc-input-decorator-background: var(--ng-doc-hue-brand);
+  --ng-doc-output-decorator-color: var(--ng-doc-on-hue);
+  --ng-doc-output-decorator-background: var(--ng-doc-hue-brand);
+  --ng-doc-abstract-background: var(--ng-doc-hue-neutral);
+  --ng-doc-abstract-color: var(--ng-doc-on-hue);
+  --ng-doc-async-background: var(--ng-doc-hue-neutral);
+  --ng-doc-async-color: var(--ng-doc-on-hue);
+  --ng-doc-protected-background: var(--ng-doc-hue-neutral);
+  --ng-doc-protected-color: var(--ng-doc-on-hue);
+  --ng-doc-static-background: var(--ng-doc-hue-neutral);
+  --ng-doc-static-color: var(--ng-doc-on-hue);
+  --ng-doc-overriden-background: var(--ng-doc-hue-neutral);
+  --ng-doc-overriden-color: var(--ng-doc-on-hue);
+  --ng-doc-readonly-background: var(--ng-doc-hue-neutral);
+  --ng-doc-readonly-color: var(--ng-doc-on-hue);
+  --ng-doc-get-background: var(--ng-doc-hue-neutral);
+  --ng-doc-get-color: var(--ng-doc-on-hue);
+  --ng-doc-set-background: var(--ng-doc-hue-neutral);
+  --ng-doc-set-color: var(--ng-doc-on-hue);
   --ng-doc-navbar-background: var(--ng-doc-base-0);
-  --ng-doc-navbar-height: calc(var(--ng-doc-base-gutter) * 7);
+  --ng-doc-navbar-height: calc(var(--ng-doc-base-gutter) * 7.5);
   --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)
   );
-  --ng-doc-navbar-border: 1px solid var(--ng-doc-base-3);
-  --ng-doc-sidebar-width: 310px;
+  --ng-doc-navbar-border: 1px solid var(--ng-doc-border-color);
+  --ng-doc-sidebar-width: 288px;
   --ng-doc-sidebar-background: var(--ng-doc-base-0);
   --ng-doc-sidebar-padding: calc(var(--ng-doc-base-gutter) * 2);
-  --ng-doc-sidebar-vetical-padding: var(--ng-doc-base-gutter);
+  --ng-doc-sidebar-vetical-padding: 6px;
   --ng-doc-sidebar-horizontal-padding: var(--ng-doc-app-horizontal-padding);
   --ng-doc-demo-displayer-border: 1px solid var(--ng-doc-border-color);
-  --ng-doc-demo-displayer-border-radius: var(--ng-doc-base-gutter);
+  --ng-doc-demo-displayer-border-radius: var(--ng-doc-radius-lg);
   --ng-doc-code-max-height: 400px;
   --ng-doc-code-highlight-color: var(--ng-doc-primary);
-  --ng-doc-toc-width: 280px;
+  --ng-doc-toc-width: 240px;
   --ng-doc-toc-indent: var(--ng-doc-base-gutter);
   --ng-doc-toc-top-padding: calc(var(--ng-doc-base-gutter) * 3);
-  --ng-doc-search-result-color: #454545;
-  --ng-doc-api-tag-color: #ff1111;
-  --ng-doc-api-tag-background: rgba(255, 17, 17, 0.15);
-  --ng-doc-guide-tag-color: #0086ff;
-  --ng-doc-guide-tag-background: rgba(0, 134, 255, 0.15);
+  --ng-doc-search-result-color: var(--ng-doc-text);
+  --ng-doc-api-tag-color: var(--ng-doc-hue-violet-strong);
+  --ng-doc-api-tag-background: var(--ng-doc-hue-violet-chip);
+  --ng-doc-guide-tag-color: var(--ng-doc-hue-brand-strong);
+  --ng-doc-guide-tag-background: var(--ng-doc-hue-brand-chip);
   /* Tabs */
   --ng-doc-tabs-margin: calc(var(--ng-doc-base-gutter) * 4) 0px;
-  --ng-doc-tabs-border-radius: var(--ng-doc-base-gutter);
+  --ng-doc-tabs-border-radius: var(--ng-doc-radius-lg);
+  --ng-doc-code-line-numbers: inline-block;
+  --ng-doc-code-line-number-color: var(--ng-doc-text-muted);
+  --ng-doc-code-header-height: 40px;
+  --ng-doc-kbd-background: var(--ng-doc-background);
+  --ng-doc-kbd-border-color: var(--ng-doc-border-color);
+  --ng-doc-row-hover-background: var(--ng-doc-hover-background);
+  --ng-doc-row-selected-background: var(--ng-doc-primary-soft);
+  --ng-doc-row-selected-border: var(--ng-doc-primary);
+  --ng-doc-demo-toolbar-background: var(--ng-doc-base-1);
+  --ng-doc-playground-inspector-width: 312px;
+  --ng-doc-playground-input-border: var(--ng-doc-input-border);
+  --ng-doc-search-dialog-width: 820px;
+  --ng-doc-search-preview-width: 300px;
+  --ng-doc-mix-syntax: 80%;
+  --ng-doc-syntax-plain: var(--ng-doc-text);
+  --ng-doc-syntax-punctuation: var(--ng-doc-text);
+  --ng-doc-syntax-comment: var(--ng-doc-text-muted);
+  --ng-doc-syntax-keyword: color-mix(
+    in oklab,
+    var(--ng-doc-hue-violet) var(--ng-doc-mix-syntax),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-syntax-type: color-mix(
+    in oklab,
+    var(--ng-doc-primary) var(--ng-doc-mix-syntax),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-syntax-function: color-mix(
+    in oklab,
+    var(--ng-doc-success) var(--ng-doc-mix-syntax),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-syntax-string: color-mix(
+    in oklab,
+    var(--ng-doc-warning) var(--ng-doc-mix-syntax),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-syntax-number: var(--ng-doc-syntax-string);
+  --ng-doc-syntax-tag: var(--ng-doc-syntax-type);
+  --ng-doc-syntax-decorator: var(--ng-doc-syntax-keyword);
+  --ng-doc-api-content-max-width: 880px;
 }
 
 article header.ngde .ng-doc-page-tags {
@@ -503,26 +813,238 @@ article header.ngde .ng-doc-header-details .ng-doc-header-details-label:first-ch
   margin-left: 0;
 }
 
-.ng-doc-tags-wrapper {
+article header.ngde .ng-doc-table-wrapper:has(> table.ng-doc-api-table.no-padding) {
+  margin: var(--ng-doc-space-4) 0 var(--ng-doc-space-6);
+  padding: var(--ng-doc-space-2) 0;
+  border-block: 1px solid var(--ng-doc-border-color);
+}
+article header.ngde .ng-doc-table-wrapper:has(> table.ng-doc-api-table.no-padding) table.ng-doc-api-table.no-padding tbody tr td {
+  padding: 4px var(--ng-doc-space-4) 4px 0;
+  border-bottom: 0;
+  font-size: 14px;
   line-height: 22px;
+  background: none;
+}
+article header.ngde .ng-doc-table-wrapper:has(> table.ng-doc-api-table.no-padding) table.ng-doc-api-table.no-padding tbody tr td:first-child {
+  padding-left: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--ng-doc-text-muted);
+}
+article header.ngde .ng-doc-table-wrapper:has(> table.ng-doc-api-table.no-padding) table.ng-doc-api-table.no-padding tbody tr td:last-child code {
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
 
-.ng-doc-tag {
-  display: inline-block;
-  padding: 0 var(--ng-doc-base-gutter);
+.ng-doc-api-description {
+  margin: var(--ng-doc-space-3) 0 var(--ng-doc-space-6);
+}
+
+.ng-doc-api-declaration {
+  margin: 0 0 var(--ng-doc-space-6);
+}
+@media (max-width: 640px) {
+  .ng-doc-api-declaration pre,
+  .ng-doc-api-declaration pre code {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+}
+
+.ng-doc-api-extended {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: var(--ng-doc-space-2) var(--ng-doc-space-4);
+  margin: 0 0 var(--ng-doc-space-6);
   font-size: 14px;
-  border-radius: var(--ng-doc-base-gutter);
-  background-color: color-mix(in srgb, var(--ng-doc-css-tag-background) var(--ng-doc-css-tag-background-opacity, 15%), transparent);
+}
+.ng-doc-api-extended dt {
+  font-weight: 500;
+  line-height: 28px;
+  color: var(--ng-doc-text-muted);
+}
+.ng-doc-api-extended dd {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0;
+}
+.ng-doc-api-extended code {
+  font-size: 13px;
+  line-height: 20px;
+}
+@media (max-width: 640px) {
+  .ng-doc-api-extended {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+}
+
+.ng-doc-api-details {
+  display: grid;
+  grid-template-columns: 128px minmax(0, 1fr);
+  gap: var(--ng-doc-space-2) var(--ng-doc-space-4);
+  margin: 0 0 var(--ng-doc-space-6);
+  padding: var(--ng-doc-space-3) 0;
+  border-block: 1px solid var(--ng-doc-border-color);
+  font-size: 14px;
+  line-height: 22px;
+}
+.ng-doc-api-details dt {
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 22px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ng-doc-text-muted);
+}
+.ng-doc-api-details dd {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.ng-doc-api-details[hidden] {
+  display: none;
+}
+.ng-doc-api-details[data-ng-doc-variant=rail] {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0;
+  padding: 0 var(--ng-doc-space-2);
+  border: 0;
+  font-size: 13px;
+  line-height: 18px;
+}
+.ng-doc-api-details[data-ng-doc-variant=rail] dt {
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
+  line-height: 18px;
+}
+.ng-doc-api-details[data-ng-doc-variant=rail] dt:not(:first-child) {
+  margin-top: var(--ng-doc-space-3);
+}
+.ng-doc-api-details[data-ng-doc-variant=rail] dd {
+  margin-top: 4px;
+  gap: 4px;
+  color: var(--ng-doc-heading-color);
+}
+@media (max-width: 640px) {
+  .ng-doc-api-details {
+    grid-template-columns: 1fr;
+    gap: 2px;
+  }
+  .ng-doc-api-details dd {
+    margin-bottom: var(--ng-doc-space-2);
+  }
+}
+
+.ng-doc-tags-wrapper {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ng-doc-space-2);
+  line-height: 22px;
   vertical-align: middle;
+}
+
+.ng-doc-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 7px;
+  border-radius: var(--ng-doc-radius-sm);
+  font-family: var(--ng-doc-font-family);
+  font-size: 11.5px;
+  font-weight: 600;
+  line-height: 1;
   white-space: nowrap;
-  color: var(--ng-doc-css-tag-background);
+  vertical-align: middle;
+  color: color-mix(in oklab, var(--ng-doc-css-tag-background, var(--ng-doc-hue-neutral)) var(--ng-doc-mix-strong), var(--ng-doc-heading-color));
+  background: color-mix(in oklab, var(--ng-doc-css-tag-background, var(--ng-doc-hue-neutral)) var(--ng-doc-css-tag-background-opacity, var(--ng-doc-mix-chip)), var(--ng-doc-background));
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ng-doc-css-tag-background, var(--ng-doc-hue-neutral)) 24%, transparent);
+}
+.ng-doc-tag[data-content=protected] {
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--ng-doc-radius-xs);
+  font-family: var(--ng-doc-code-font);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--ng-doc-text-muted);
+  background: transparent;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ng-doc-protected-background) 40%, var(--ng-doc-base-4));
 }
-.ng-doc-tag + .ng-doc-tag {
-  margin-left: var(--ng-doc-base-gutter);
+.ng-doc-tag[data-content=abstract] {
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--ng-doc-radius-xs);
+  font-family: var(--ng-doc-code-font);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--ng-doc-text-muted);
+  background: transparent;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ng-doc-abstract-background) 40%, var(--ng-doc-base-4));
+}
+.ng-doc-tag[data-content=static] {
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--ng-doc-radius-xs);
+  font-family: var(--ng-doc-code-font);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--ng-doc-text-muted);
+  background: transparent;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ng-doc-static-background) 40%, var(--ng-doc-base-4));
+}
+.ng-doc-tag[data-content=async] {
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--ng-doc-radius-xs);
+  font-family: var(--ng-doc-code-font);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--ng-doc-text-muted);
+  background: transparent;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ng-doc-async-background) 40%, var(--ng-doc-base-4));
+}
+.ng-doc-tag[data-content=overriden] {
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--ng-doc-radius-xs);
+  font-family: var(--ng-doc-code-font);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--ng-doc-text-muted);
+  background: transparent;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ng-doc-overriden-background) 40%, var(--ng-doc-base-4));
+}
+.ng-doc-tag[data-content=readonly] {
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--ng-doc-radius-xs);
+  font-family: var(--ng-doc-code-font);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--ng-doc-text-muted);
+  background: transparent;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ng-doc-readonly-background) 40%, var(--ng-doc-base-4));
 }
 .ng-doc-tag[data-content=ng-doc-scope] {
+  height: auto;
   padding: 0;
+  font-size: 14px;
+  font-weight: 400;
   background-color: transparent;
+  box-shadow: none;
   color: var(--ng-doc-text);
 }
 .ng-doc-tag[data-content=Class] {
@@ -564,16 +1086,61 @@ article header.ngde .ng-doc-header-details .ng-doc-header-details-label:first-ch
 
 .ng-doc-decorators-group {
   display: flex;
-  gap: var(--ng-doc-base-gutter);
-  margin-bottom: calc(var(--ng-doc-base-gutter) / 2);
+  flex-wrap: wrap;
+  gap: var(--ng-doc-space-1);
+  margin-bottom: var(--ng-doc-space-1);
 }
-.ng-doc-decorators-group code {
+.ng-doc-decorators-group code,
+.ng-doc-decorators-group code.ngde {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--ng-doc-radius-sm);
+  font-family: var(--ng-doc-font-family);
+  font-size: 10.5px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  --_hue: var(--ng-doc-hue-brand);
+  color: color-mix(in oklab, var(--_hue) var(--ng-doc-mix-strong), var(--ng-doc-heading-color));
+  background: color-mix(in oklab, var(--_hue) var(--ng-doc-mix-chip), var(--ng-doc-background));
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--_hue) 24%, transparent);
   --ng-doc-line-height: 18px;
 }
+.ng-doc-decorators-group code a,
+.ng-doc-decorators-group code.ngde a {
+  color: inherit;
+  text-decoration: none;
+}
+.ng-doc-decorators-group code a:hover,
+.ng-doc-decorators-group code.ngde a:hover {
+  text-decoration: underline;
+}
+.ng-doc-decorators-group code[data-ng-doc-decorator=Component] {
+  --_hue: var(--ng-doc-component-decorator-background);
+}
+.ng-doc-decorators-group code[data-ng-doc-decorator=Directive] {
+  --_hue: var(--ng-doc-directive-decorator-background);
+}
+.ng-doc-decorators-group code[data-ng-doc-decorator=Injectable] {
+  --_hue: var(--ng-doc-injectable-decorator-background);
+}
+.ng-doc-decorators-group code[data-ng-doc-decorator=Pipe] {
+  --_hue: var(--ng-doc-pipe-decorator-background);
+}
+.ng-doc-decorators-group code[data-ng-doc-decorator=NgModule] {
+  --_hue: var(--ng-doc-ng-module-decorator-background);
+}
+.ng-doc-decorators-group code[data-ng-doc-decorator=Input] {
+  --_hue: var(--ng-doc-input-decorator-background);
+}
+.ng-doc-decorators-group code[data-ng-doc-decorator=Output] {
+  --_hue: var(--ng-doc-output-decorator-background);
+}
 .ng-doc-decorators-group.column {
   flex-direction: column;
   align-items: flex-start;
-  gap: calc(var(--ng-doc-base-gutter) / 2);
   margin-bottom: 0;
 }
 .ng-doc-decorators-group.column code {
@@ -581,41 +1148,51 @@ article header.ngde .ng-doc-header-details .ng-doc-header-details-label:first-ch
 }
 
 .ng-doc-modifiers-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ng-doc-space-1);
   line-height: 18px;
 }
 
 .ng-doc-modifier {
-  font-size: 14px;
-  color: var(--ng-doc-text);
-  font-family: var(--ng-doc-heading-font-family);
+  --_ring: var(--ng-doc-base-4);
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--ng-doc-radius-xs);
+  font-family: var(--ng-doc-code-font);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
   white-space: nowrap;
-  font-weight: 800;
+  vertical-align: middle;
+  color: var(--ng-doc-text-muted);
+  box-shadow: inset 0 0 0 1px var(--_ring);
 }
 .ng-doc-modifier[data-content=protected] {
-  color: var(--ng-doc-protected-background);
+  --_ring: color-mix(in oklab, var(--ng-doc-protected-background) 40%, var(--ng-doc-base-4));
 }
 .ng-doc-modifier[data-content=abstract] {
-  color: var(--ng-doc-abstract-background);
+  --_ring: color-mix(in oklab, var(--ng-doc-abstract-background) 40%, var(--ng-doc-base-4));
 }
 .ng-doc-modifier[data-content=static] {
-  color: var(--ng-doc-static-background);
+  --_ring: color-mix(in oklab, var(--ng-doc-static-background) 40%, var(--ng-doc-base-4));
 }
 .ng-doc-modifier[data-content=async] {
-  color: var(--ng-doc-async-background);
+  --_ring: color-mix(in oklab, var(--ng-doc-async-background) 40%, var(--ng-doc-base-4));
 }
 .ng-doc-modifier[data-content=overriden] {
-  color: var(--ng-doc-overriden-background);
+  --_ring: color-mix(in oklab, var(--ng-doc-overriden-background) 40%, var(--ng-doc-base-4));
 }
 .ng-doc-modifier[data-content=readonly] {
-  color: var(--ng-doc-readonly-background);
+  --_ring: color-mix(in oklab, var(--ng-doc-readonly-background) 40%, var(--ng-doc-base-4));
 }
 .ng-doc-modifier[data-content=get] {
-  font-size: 16px;
-  color: var(--ng-doc-get-background);
+  --_ring: color-mix(in oklab, var(--ng-doc-get-background) 40%, var(--ng-doc-base-4));
 }
 .ng-doc-modifier[data-content=set] {
-  font-size: 16px;
-  color: var(--ng-doc-set-background);
+  --_ring: color-mix(in oklab, var(--ng-doc-set-background) 40%, var(--ng-doc-base-4));
 }
 
 .ng-doc-node-details {
@@ -639,55 +1216,46 @@ article header.ngde .ng-doc-header-details .ng-doc-header-details-label:first-ch
 
 .ng-doc-badge-wrapper {
   display: inline-flex;
-  margin-right: var(--ng-doc-base-gutter);
+  flex-wrap: wrap;
+  gap: var(--ng-doc-space-1);
+  margin-right: var(--ng-doc-space-2);
   vertical-align: middle;
 }
-.ng-doc-badge-wrapper .ng-doc-badge:first-child {
-  border-top-left-radius: var(--ng-doc-base-gutter);
-  border-bottom-left-radius: var(--ng-doc-base-gutter);
-}
-.ng-doc-badge-wrapper .ng-doc-badge:last-child {
-  border-top-right-radius: var(--ng-doc-base-gutter);
-  border-bottom-right-radius: var(--ng-doc-base-gutter);
-}
 
 .ng-doc-badge {
+  --_ring: var(--ng-doc-base-4);
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: calc(var(--ng-doc-base-gutter) * 2);
-  height: calc(var(--ng-doc-base-gutter) * 2);
-  font-family: var(--ng-doc-heading-font-family);
-  font-size: 10px;
-  color: var(--ng-doc-white);
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--ng-doc-radius-xs);
+  font-family: var(--ng-doc-code-font);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
   white-space: nowrap;
-  font-weight: 900;
-  background-color: var(--ng-doc-text);
-  text-transform: capitalize;
+  text-transform: lowercase;
+  color: var(--ng-doc-text-muted);
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--_ring);
 }
 .ng-doc-badge[data-content=protected] {
-  background-color: var(--ng-doc-protected-background);
-  color: var(--ng-doc-protected-color);
+  --_ring: color-mix(in oklab, var(--ng-doc-protected-background) 40%, var(--ng-doc-base-4));
 }
 .ng-doc-badge[data-content=abstract] {
-  background-color: var(--ng-doc-abstract-background);
-  color: var(--ng-doc-abstract-color);
+  --_ring: color-mix(in oklab, var(--ng-doc-abstract-background) 40%, var(--ng-doc-base-4));
 }
 .ng-doc-badge[data-content=static] {
-  background-color: var(--ng-doc-static-background);
-  color: var(--ng-doc-static-color);
+  --_ring: color-mix(in oklab, var(--ng-doc-static-background) 40%, var(--ng-doc-base-4));
 }
 .ng-doc-badge[data-content=async] {
-  background-color: var(--ng-doc-async-background);
-  color: var(--ng-doc-async-color);
+  --_ring: color-mix(in oklab, var(--ng-doc-async-background) 40%, var(--ng-doc-base-4));
 }
 .ng-doc-badge[data-content=overriden] {
-  background-color: var(--ng-doc-overriden-background);
-  color: var(--ng-doc-overriden-color);
+  --_ring: color-mix(in oklab, var(--ng-doc-overriden-background) 40%, var(--ng-doc-base-4));
 }
 .ng-doc-badge[data-content=readonly] {
-  background-color: var(--ng-doc-readonly-background);
-  color: var(--ng-doc-readonly-color);
+  --_ring: color-mix(in oklab, var(--ng-doc-readonly-background) 40%, var(--ng-doc-base-4));
 }
 
 .ng-doc-see-also li {
@@ -748,6 +1316,360 @@ table.ng-doc-overload-table thead tr th {
   background: color-mix(in srgb, var(--ng-doc-warning) 10%, transparent);
 }
 
+.ng-doc-table-wrapper:has(> table.ng-doc-api-table:not(.no-padding)) {
+  border: 1px solid var(--ng-doc-border-color);
+  border-radius: var(--ng-doc-radius-lg);
+}
+
+table.ng-doc-api-table:not(.no-padding) {
+  font-size: 14px;
+  line-height: 22px;
+}
+table.ng-doc-api-table:not(.no-padding) thead tr th {
+  padding: var(--ng-doc-space-2) var(--ng-doc-space-3);
+  border-bottom: 1px solid var(--ng-doc-border-color);
+  border-radius: 0;
+  background: var(--ng-doc-base-1);
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ng-doc-text-muted);
+  white-space: nowrap;
+}
+table.ng-doc-api-table:not(.no-padding) thead tr th:first-child, table.ng-doc-api-table:not(.no-padding) thead tr th:last-child {
+  border-radius: 0;
+}
+table.ng-doc-api-table:not(.no-padding) tbody tr td {
+  padding: var(--ng-doc-space-3);
+}
+table.ng-doc-api-table:not(.no-padding) tbody tr:last-child td {
+  border-bottom: 0;
+}
+table.ng-doc-api-table:not(.no-padding) tbody tr:hover > td {
+  background: var(--ng-doc-row-hover-background);
+}
+table.ng-doc-api-table:not(.no-padding).first-colum-highlighted tbody tr td:first-child > span {
+  font-family: var(--ng-doc-code-font);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.ng-doc-members-bar {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--ng-doc-space-2) var(--ng-doc-space-3);
+  margin: 0 0 var(--ng-doc-space-3);
+}
+
+.ng-doc-members-tabs {
+  position: relative;
+  display: inline-flex;
+  flex: 0 1 auto;
+  min-width: 0;
+  gap: 2px;
+  max-width: 100%;
+  padding: 3px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  border-radius: var(--ng-doc-radius-md);
+  background: var(--ng-doc-base-2);
+}
+.ng-doc-members-tabs[data-fade~=end] {
+  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+}
+.ng-doc-members-tabs[data-fade~=start] {
+  mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
+}
+.ng-doc-members-tabs[data-fade~=start][data-fade~=end] {
+  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
+}
+.ng-doc-members-tabs > ng-doc-selection {
+  border-radius: var(--ng-doc-radius-sm);
+  background: var(--ng-doc-background);
+  box-shadow: var(--ng-doc-shadow-xs);
+}
+:root[data-theme=dark] .ng-doc-members-tabs > ng-doc-selection {
+  box-shadow: var(--ng-doc-shadow-xs), inset 0 0 0 1px var(--ng-doc-base-4);
+}
+@media (prefers-color-scheme: dark) {
+  :root[data-theme=auto] .ng-doc-members-tabs > ng-doc-selection {
+    box-shadow: var(--ng-doc-shadow-xs), inset 0 0 0 1px var(--ng-doc-base-4);
+  }
+}
+.ng-doc-members-tabs [role=tab] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--ng-doc-radius-sm);
+  background: none;
+  font: 500 13px/1 var(--ng-doc-font-family);
+  color: var(--ng-doc-text-muted);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.ng-doc-members-tabs [role=tab]:hover:not(:disabled) {
+  color: var(--ng-doc-heading-color);
+}
+.ng-doc-members-tabs [role=tab][aria-selected=true] {
+  color: var(--ng-doc-heading-color);
+}
+.ng-doc-members-tabs [role=tab]:disabled {
+  cursor: default;
+  color: color-mix(in oklab, var(--ng-doc-text-muted) 70%, var(--ng-doc-base-2));
+}
+.ng-doc-members-tabs:not(:has(> ng-doc-selection[data-ng-doc-placed])) [role=tab][aria-selected=true] {
+  background: var(--ng-doc-background);
+  box-shadow: var(--ng-doc-shadow-xs);
+}
+:root[data-theme=dark] .ng-doc-members-tabs:not(:has(> ng-doc-selection[data-ng-doc-placed])) [role=tab][aria-selected=true] {
+  box-shadow: var(--ng-doc-shadow-xs), inset 0 0 0 1px var(--ng-doc-base-4);
+}
+@media (prefers-color-scheme: dark) {
+  :root[data-theme=auto] .ng-doc-members-tabs:not(:has(> ng-doc-selection[data-ng-doc-placed])) [role=tab][aria-selected=true] {
+    box-shadow: var(--ng-doc-shadow-xs), inset 0 0 0 1px var(--ng-doc-base-4);
+  }
+}
+.ng-doc-members-tabs .ng-doc-members-count {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--ng-doc-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.ng-doc-members-filter {
+  display: flex;
+  align-items: center;
+  gap: var(--ng-doc-space-2);
+  flex: 0 0 200px;
+  width: 200px;
+  height: 36px;
+  margin-left: auto;
+  padding: 0 var(--ng-doc-space-2) 0 var(--ng-doc-space-3);
+  border: var(--ng-doc-input-border);
+  border-radius: var(--ng-doc-radius-md);
+  background: var(--ng-doc-input-background-color, var(--ng-doc-background));
+  color: var(--ng-doc-text-muted);
+}
+.ng-doc-members-filter:hover {
+  border: var(--ng-doc-input-border-hover);
+}
+.ng-doc-members-filter:focus-within {
+  box-shadow: var(--ng-doc-focus-ring);
+}
+.ng-doc-members-filter input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: none;
+  font: 400 14px/20px var(--ng-doc-font-family);
+  color: var(--ng-doc-heading-color);
+}
+.ng-doc-members-filter input::placeholder {
+  color: var(--ng-doc-text-muted);
+  opacity: 1;
+}
+
+.ng-doc-members-table-wrapper {
+  border: 1px solid var(--ng-doc-border-color);
+  border-radius: var(--ng-doc-radius-lg);
+  overflow: hidden;
+}
+.ng-doc-members-table-wrapper > .ng-doc-table-wrapper {
+  margin: 0;
+}
+
+table.ng-doc-members-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  line-height: 22px;
+}
+table.ng-doc-members-table tbody tr td {
+  padding: var(--ng-doc-space-3);
+  border-bottom: 0;
+  vertical-align: top;
+  background: none;
+}
+table.ng-doc-members-table .ng-doc-members-group td {
+  height: 36px;
+  padding-block: 0;
+  vertical-align: middle;
+  border-bottom: 1px solid var(--ng-doc-border-color);
+  background: var(--ng-doc-base-1);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ng-doc-text-muted);
+}
+table.ng-doc-members-table .ng-doc-members-group td .ng-doc-members-count {
+  margin-left: var(--ng-doc-space-2);
+  font-weight: 400;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+table.ng-doc-members-table .ng-doc-members-group td .ng-doc-members-group-title {
+  display: inline;
+  margin: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: inherit;
+}
+table.ng-doc-members-table .ng-doc-members-group:not(:first-child) td {
+  border-top: 1px solid var(--ng-doc-border-color);
+}
+table.ng-doc-members-table .ng-doc-member + .ng-doc-member > td,
+table.ng-doc-members-table .ng-doc-member-detail + .ng-doc-member > td {
+  border-top: 1px solid var(--ng-doc-base-2);
+}
+table.ng-doc-members-table .ng-doc-member:hover > td {
+  background: var(--ng-doc-row-hover-background);
+}
+table.ng-doc-members-table .ng-doc-member-declaration {
+  width: 54%;
+}
+table.ng-doc-members-table .ng-doc-member-declaration:has(.ng-doc-member-expand) {
+  padding-left: calc(var(--ng-doc-space-3) + 22px);
+}
+table.ng-doc-members-table .ng-doc-member-detail > td {
+  padding: 0 var(--ng-doc-space-3) var(--ng-doc-space-3) calc(var(--ng-doc-space-3) + 22px);
+}
+
+.ng-doc-member-signature {
+  font: 400 13px/22px var(--ng-doc-code-font);
+  color: var(--ng-doc-text);
+  overflow-wrap: anywhere;
+}
+.ng-doc-member-signature code,
+.ng-doc-member-signature code.ngde {
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  white-space: normal;
+}
+.ng-doc-member-signature .ng-doc-member-name {
+  font-weight: 600;
+  color: var(--ng-doc-heading-color);
+}
+
+.ng-doc-member-expand {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 4px;
+  margin-left: -22px;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  vertical-align: top;
+  cursor: pointer;
+}
+.ng-doc-member-expand svg {
+  margin-top: 5px;
+  color: var(--ng-doc-text-muted);
+  transition: transform var(--ng-doc-transition);
+}
+.ng-doc-member-expand[aria-expanded=true] svg {
+  transform: rotate(90deg);
+}
+
+.ng-doc-member-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 6px;
+  margin-top: 6px;
+}
+.ng-doc-member-tags:empty {
+  display: none;
+}
+
+.ng-doc-member-from {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--ng-doc-text-muted);
+}
+
+.ng-doc-member-label {
+  margin: var(--ng-doc-space-2) 0 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ng-doc-text-muted);
+}
+
+table.ng-doc-members-table [hidden],
+.ng-doc-members-empty[hidden] {
+  display: none !important;
+}
+
+.ng-doc-members-none {
+  color: var(--ng-doc-text-muted);
+}
+
+.ng-doc-members-empty {
+  padding: var(--ng-doc-space-5) var(--ng-doc-space-4);
+  text-align: center;
+  font-size: 14px;
+  color: var(--ng-doc-text-muted);
+}
+
+@media (max-width: 640px) {
+  .ng-doc-members-bar {
+    flex-wrap: wrap;
+  }
+  .ng-doc-members-tabs {
+    width: 100%;
+  }
+  .ng-doc-members-filter {
+    flex-basis: 100%;
+    width: 100%;
+    margin-left: 0;
+  }
+  table.ng-doc-members-table,
+  table.ng-doc-members-table tbody,
+  table.ng-doc-members-table tr,
+  table.ng-doc-members-table td {
+    display: block;
+    width: 100% !important;
+  }
+  table.ng-doc-members-table .ng-doc-members-group td {
+    height: auto;
+    padding: 8px var(--ng-doc-space-3);
+  }
+  table.ng-doc-members-table .ng-doc-member > td {
+    padding: var(--ng-doc-space-3);
+  }
+  table.ng-doc-members-table .ng-doc-member > td.ng-doc-member-description {
+    padding-top: 0;
+    border-top: 0 !important;
+  }
+  table.ng-doc-members-table .ng-doc-member-declaration:has(.ng-doc-member-expand) {
+    padding-left: calc(var(--ng-doc-space-3) + 22px);
+  }
+  table.ng-doc-members-table .ng-doc-member-detail > td {
+    padding: 0 var(--ng-doc-space-3) var(--ng-doc-space-3);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ng-doc-member-expand svg {
+    transition: none;
+  }
+}
 .ng-doc-no-content {
   color: var(--ng-doc-text-muted);
   font-style: italic;
@@ -783,6 +1705,8 @@ article .ng-doc-page-wrapper > h4:first-child,
 article .ng-doc-page-wrapper > h5:first-child,
 article .ng-doc-page-wrapper > h6:first-child {
   margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
 }
 article section.ngde {
   margin-bottom: calc(var(--ng-doc-base-gutter) * 5);