@skyux/docs-tools 12.0.0-alpha.7 → 12.0.0-alpha.8

package/fesm2022/skyux-docs-tools.mjs

@@ -1,62 +1,162 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, NgModule, input, viewChild, computed, Component, ChangeDetectionStrategy, ViewEncapsulation, booleanAttribute, signal } from '@angular/core';
-import { KeyValuePipe, NgComponentOutlet } from '@angular/common';
+import { input, Component, ChangeDetectionStrategy, NgModule, inject, Injectable, Directive, booleanAttribute, ViewEncapsulation, computed, signal, Pipe, ElementRef, numberAttribute, InjectionToken, makeEnvironmentProviders, DestroyRef, ChangeDetectorRef, contentChild, effect } from '@angular/core';
 import * as i5 from '@skyux/core';
-import { SkyAppWindowRef, SkyIdModule } from '@skyux/core';
-import * as i1 from '@skyux/icon';
+import { SkyAppWindowRef, SkyIdModule, SkyTrimModule, SkyScrollableHostService, SkyMediaQueryService } from '@skyux/core';
+import { SkyToastService } from '@skyux/toast';
+import { KeyValuePipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import * as i2 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
-import * as i1$1 from '@skyux/layout';
-import { SkyBoxModule } from '@skyux/layout';
+import * as i1 from '@skyux/layout';
+import { SkyBoxModule, SkyDescriptionListModule } from '@skyux/layout';
 import * as i6 from '@skyux/tabs';
-import { SkyVerticalTabsetModule } from '@skyux/tabs';
+import { SkyVerticalTabsetModule, SkyTabsModule } from '@skyux/tabs';
+import * as i3 from '@skyux/i18n';
+import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
 import { DomSanitizer } from '@angular/platform-browser';
 import highlight from 'highlight.js/lib/core';
+import hlCss from 'highlight.js/lib/languages/css';
 import hlJavaScript from 'highlight.js/lib/languages/javascript';
 import hlScss from 'highlight.js/lib/languages/scss';
 import hlTypeScript from 'highlight.js/lib/languages/typescript';
 import hlXml from 'highlight.js/lib/languages/xml';
-import { SkyToastService } from '@skyux/toast';
-import * as i2 from '@skyux/i18n';
-import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
 import { HttpClient } from '@angular/common/http';
 import { SkyAppAssetsService } from '@skyux/assets';
 import stackblitz from '@stackblitz/sdk';
-import { firstValueFrom } from 'rxjs';
+import { firstValueFrom, BehaviorSubject, fromEvent, debounceTime, map, distinctUntilChanged } from 'rxjs';
+import { RouterLink, ActivatedRoute } from '@angular/router';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { isFunctionDefinition, isPipeDefinition, isDirectiveDefinition, getDocumentationGroup } from '@skyux/manifest';
+import * as i1$1 from '@skyux/indicators';
+import { SkyStatusIndicatorModule } from '@skyux/indicators';
+import { marked } from 'marked';
 
 /**
  * @internal
  */
-const SKY_CODE_SNIPPET_LANGUAGES = ['html', 'js', 'scss', 'ts'];
+class SkyDocsCategoryTagComponent {
+    constructor() {
+        this.color = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCategoryTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: SkyDocsCategoryTagComponent, isStandalone: true, selector: "sky-docs-category-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "\"sky-docs-category-tag-color-\" + color()" }, classAttribute: "sky-rounded-corners" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:inline-flex;padding:.2em .6em;background-color:var(--sky-docs-category-tag-background-color);color:var(--sky-text-color-default);color:color-mix(in srgb,var(--sky-docs-category-tag-background-color) 20%,var(--sky-text-color-default))}:host(.sky-docs-category-tag-color-blue){--sky-docs-category-tag-background-color: var(--sky-category-color-blue)}:host(.sky-docs-category-tag-color-light-blue){--sky-docs-category-tag-background-color: var( --sky-category-color-light-blue )}:host(.sky-docs-category-tag-color-orange){--sky-docs-category-tag-background-color: var(--sky-category-color-orange)}:host(.sky-docs-category-tag-color-purple){--sky-docs-category-tag-background-color: var(--sky-category-color-purple)}:host(.sky-docs-category-tag-color-red){--sky-docs-category-tag-background-color: var(--sky-category-color-red)}:host(.sky-docs-category-tag-color-teal){--sky-docs-category-tag-background-color: var(--sky-category-color-teal)}:host(.sky-docs-category-tag-color-yellow){--sky-docs-category-tag-background-color: var(--sky-category-color-yellow)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCategoryTagComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'sky-rounded-corners',
+                        '[class]': '"sky-docs-category-tag-color-" + color()',
+                    }, selector: 'sky-docs-category-tag', template: '<ng-content />', styles: [":host{display:inline-flex;padding:.2em .6em;background-color:var(--sky-docs-category-tag-background-color);color:var(--sky-text-color-default);color:color-mix(in srgb,var(--sky-docs-category-tag-background-color) 20%,var(--sky-text-color-default))}:host(.sky-docs-category-tag-color-blue){--sky-docs-category-tag-background-color: var(--sky-category-color-blue)}:host(.sky-docs-category-tag-color-light-blue){--sky-docs-category-tag-background-color: var( --sky-category-color-light-blue )}:host(.sky-docs-category-tag-color-orange){--sky-docs-category-tag-background-color: var(--sky-category-color-orange)}:host(.sky-docs-category-tag-color-purple){--sky-docs-category-tag-background-color: var(--sky-category-color-purple)}:host(.sky-docs-category-tag-color-red){--sky-docs-category-tag-background-color: var(--sky-category-color-red)}:host(.sky-docs-category-tag-color-teal){--sky-docs-category-tag-background-color: var(--sky-category-color-teal)}:host(.sky-docs-category-tag-color-yellow){--sky-docs-category-tag-background-color: var(--sky-category-color-yellow)}\n"] }]
+        }] });
+
 /**
  * @internal
  */
-function assertCodeSnippetLanguage(value) {
-    if (!SKY_CODE_SNIPPET_LANGUAGES.includes(value)) {
-        throw new Error(`Value "${value}" is not a supported language type.`);
-    }
+class SkyDocsCategoryTagModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCategoryTagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCategoryTagModule, imports: [SkyDocsCategoryTagComponent], exports: [SkyDocsCategoryTagComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCategoryTagModule }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCategoryTagModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SkyDocsCategoryTagComponent],
+                    exports: [SkyDocsCategoryTagComponent],
+                }]
+        }] });
 
 /**
  * @internal
  */
-class SkyClipboardService {
+class SkyDocsClipboardService {
     #toastSvc = inject(SkyToastService);
     #windowRef = inject(SkyAppWindowRef);
+    /**
+     * Saves an element's text content to the system clipboard.
+     * @param el The element whose text should be copied.
+     * @param successMessage The message to display after the action is successful.
+     */
     copyTextContent(el, successMessage) {
-        const text = el.nativeElement.textContent.trim();
+        const text = el.textContent?.trim() ?? '';
         this.#windowRef.nativeWindow.navigator.clipboard.writeText(text);
         this.#toastSvc.openMessage(successMessage, { autoClose: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyClipboardService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsClipboardService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyClipboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsClipboardService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
+/**
+ * @internal
+ */
+class SkyDocsClipboardButtonDirective {
+    constructor() {
+        this.#clipboardSvc = inject(SkyDocsClipboardService);
+        this.clipboardTarget = input.required();
+        this.copySuccessMessage = input.required();
+    }
+    #clipboardSvc;
+    onClick() {
+        const el = this.clipboardTarget();
+        if (el) {
+            this.#clipboardSvc.copyTextContent(el, this.copySuccessMessage());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsClipboardButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: SkyDocsClipboardButtonDirective, isStandalone: true, selector: "[skyDocsClipboardButton]", inputs: { clipboardTarget: { classPropertyName: "clipboardTarget", publicName: "clipboardTarget", isSignal: true, isRequired: true, transformFunction: null }, copySuccessMessage: { classPropertyName: "copySuccessMessage", publicName: "copySuccessMessage", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsClipboardButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '(click)': 'onClick()',
+                    },
+                    selector: '[skyDocsClipboardButton]',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsClipboardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsClipboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsClipboardModule, imports: [SkyDocsClipboardButtonDirective], exports: [SkyDocsClipboardButtonDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsClipboardModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsClipboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SkyDocsClipboardButtonDirective],
+                    exports: [SkyDocsClipboardButtonDirective],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+const SKY_DOCS_CODE_HIGHLIGHT_LANGUAGES = [
+    'html',
+    'markup',
+    'javascript',
+    'js',
+    'css',
+    'scss',
+    'typescript',
+    'ts',
+];
+/**
+ * @internal
+ */
+function assertCodeHighlightLanguage(value) {
+    if (!SKY_DOCS_CODE_HIGHLIGHT_LANGUAGES.includes(value)) {
+        throw new Error(`Value "${value}" is not a supported language type.`);
+    }
+}
+
 /* istanbul ignore file */
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
@@ -66,18 +166,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  */
 const RESOURCES = {
     'EN-US': {
-        sky_code_snippet_copy_to_clipboard_button_label: { message: 'Copy' },
-        sky_code_snippet_copy_to_clipboard_success_message: {
+        sky_docs_code_snippet_copy_to_clipboard_button_label: { message: 'Copy' },
+        sky_docs_code_snippet_copy_to_clipboard_success_message: {
             message: 'Code copied',
         },
-        sky_code_example_viewer_demo_hidden_message: {
+        sky_docs_code_example_viewer_demo_hidden_message: {
             message: 'Open this code example in StackBlitz to view the demo.',
         },
-        sky_code_example_viewer_demo_stack_blitz_button: {
+        sky_docs_code_example_viewer_demo_stack_blitz_button: {
             message: 'Edit in StackBlitz',
         },
-        sky_code_example_viewer_hide_code_button_label: { message: 'Hide code' },
-        sky_code_example_viewer_show_code_button_label: { message: 'Show code' },
+        sky_docs_code_example_viewer_hide_code_button_label: {
+            message: 'Hide code',
+        },
+        sky_docs_code_example_viewer_show_code_button_label: {
+            message: 'Show code',
+        },
     },
 };
 SkyLibResourcesService.addResources(RESOURCES);
@@ -99,55 +203,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 /**
  * @internal
  */
-class SkyCodeSnippetComponent {
-    #clipboardSvc;
-    #sanitizer;
+class SkyDocsCodeSnippetToolbarComponent {
     constructor() {
-        this.#clipboardSvc = inject(SkyClipboardService);
+        this.codeRef = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeSnippetToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: SkyDocsCodeSnippetToolbarComponent, isStandalone: true, selector: "sky-docs-code-snippet-toolbar", inputs: { codeRef: { classPropertyName: "codeRef", publicName: "codeRef", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "sky-margin-stacked-lg" }, ngImport: i0, template: `
+    <button
+      class="sky-btn sky-btn-default"
+      type="button"
+      skyDocsClipboardButton
+      [clipboardTarget]="codeRef()"
+      [copySuccessMessage]="
+        'sky_docs_code_snippet_copy_to_clipboard_success_message'
+          | skyLibResources
+      "
+    >
+      <sky-icon iconName="clipboard-multiple" />
+      {{
+        'sky_docs_code_snippet_copy_to_clipboard_button_label' | skyLibResources
+      }}
+    </button>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyDocsClipboardModule }, { kind: "directive", type: SkyDocsClipboardButtonDirective, selector: "[skyDocsClipboardButton]", inputs: ["clipboardTarget", "copySuccessMessage"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyDocsToolsResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeSnippetToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'sky-margin-stacked-lg',
+                    }, imports: [SkyDocsClipboardModule, SkyIconModule, SkyDocsToolsResourcesModule], selector: 'sky-docs-code-snippet-toolbar', template: `
+    <button
+      class="sky-btn sky-btn-default"
+      type="button"
+      skyDocsClipboardButton
+      [clipboardTarget]="codeRef()"
+      [copySuccessMessage]="
+        'sky_docs_code_snippet_copy_to_clipboard_success_message'
+          | skyLibResources
+      "
+    >
+      <sky-icon iconName="clipboard-multiple" />
+      {{
+        'sky_docs_code_snippet_copy_to_clipboard_button_label' | skyLibResources
+      }}
+    </button>
+  `, styles: [":host{display:block}\n"] }]
+        }] });
+
+/**
+ * Used to wrap a content child `code` element.
+ * @internal
+ */
+class SkyDocsCodeSnippetWrapperComponent {
+    constructor() {
+        this.bordered = input(false, { transform: booleanAttribute });
+        this.hideToolbar = input(false, { transform: booleanAttribute });
+        this.stacked = input(false, { transform: booleanAttribute });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeSnippetWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyDocsCodeSnippetWrapperComponent, isStandalone: true, selector: "sky-docs-code-snippet:not([code])", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, hideToolbar: { classPropertyName: "hideToolbar", publicName: "hideToolbar", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sky-margin-stacked-lg": "stacked()", "class.sky-elevation-0-bordered": "bordered()", "class.sky-padding-even-xl": "bordered()", "class.sky-rounded-corners": "bordered()" } }, ngImport: i0, template: `
+    @if (!hideToolbar()) {
+      <sky-docs-code-snippet-toolbar [codeRef]="codeRef" />
+    }
+    <pre #codeRef><ng-content select="code" /></pre>
+  `, isInline: true, styles: ["sky-docs-code-snippet{overflow-x:auto;display:flex;flex-direction:column;align-items:start;font-size:14px;line-height:1.5}sky-docs-code-snippet pre{margin:0}sky-docs-code-snippet::-webkit-scrollbar{-webkit-appearance:none;height:8px}sky-docs-code-snippet::-webkit-scrollbar-track{background-color:color-mix(in srgb,var(--sky-border-color-neutral-medium-dark) 5%,transparent);border-radius:var(--sky-border-radius-s)}sky-docs-code-snippet::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--sky-border-color-neutral-medium-dark) 20%,transparent);border-radius:var(--sky-border-radius-s)}\n", "sky-docs-code-snippet .hljs-keyword,sky-docs-code-snippet .hljs-doctag,sky-docs-code-snippet .hljs-variable.language_,sky-docs-code-snippet .hljs-literal,sky-docs-code-snippet .hljs-function{color:#00f}sky-docs-code-snippet .hljs-meta,sky-docs-code-snippet .hljs-title.class_,sky-docs-code-snippet .hljs-built_in,sky-docs-code-snippet .hljs-params{color:#267f99}sky-docs-code-snippet .hljs-attribute,sky-docs-code-snippet .hljs-title.function_{color:#795e26}sky-docs-code-snippet .hljs-attr{color:#001080}sky-docs-code-snippet .hljs-string{color:#a31515}sky-docs-code-snippet .hljs-comment{color:green}sky-docs-code-snippet .hljs-attr,sky-docs-code-snippet .hljs-property,sky-docs-code-snippet .hljs-variable.constant_{color:#0070c1}sky-docs-code-snippet .hljs-number{color:#098658}sky-docs-code-snippet .hljs-tag .hljs-name{color:maroon}sky-docs-code-snippet .hljs-tag .hljs-attr{color:#e50000}sky-docs-code-snippet .hljs-tag .hljs-string{color:#00f}\n"], dependencies: [{ kind: "component", type: SkyDocsCodeSnippetToolbarComponent, selector: "sky-docs-code-snippet-toolbar", inputs: ["codeRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeSnippetWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class.sky-margin-stacked-lg]': 'stacked()',
+                        '[class.sky-elevation-0-bordered]': 'bordered()',
+                        '[class.sky-padding-even-xl]': 'bordered()',
+                        '[class.sky-rounded-corners]': 'bordered()',
+                    }, imports: [SkyDocsCodeSnippetToolbarComponent], selector: 'sky-docs-code-snippet:not([code])', template: `
+    @if (!hideToolbar()) {
+      <sky-docs-code-snippet-toolbar [codeRef]="codeRef" />
+    }
+    <pre #codeRef><ng-content select="code" /></pre>
+  `, styles: ["sky-docs-code-snippet{overflow-x:auto;display:flex;flex-direction:column;align-items:start;font-size:14px;line-height:1.5}sky-docs-code-snippet pre{margin:0}sky-docs-code-snippet::-webkit-scrollbar{-webkit-appearance:none;height:8px}sky-docs-code-snippet::-webkit-scrollbar-track{background-color:color-mix(in srgb,var(--sky-border-color-neutral-medium-dark) 5%,transparent);border-radius:var(--sky-border-radius-s)}sky-docs-code-snippet::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--sky-border-color-neutral-medium-dark) 20%,transparent);border-radius:var(--sky-border-radius-s)}\n", "sky-docs-code-snippet .hljs-keyword,sky-docs-code-snippet .hljs-doctag,sky-docs-code-snippet .hljs-variable.language_,sky-docs-code-snippet .hljs-literal,sky-docs-code-snippet .hljs-function{color:#00f}sky-docs-code-snippet .hljs-meta,sky-docs-code-snippet .hljs-title.class_,sky-docs-code-snippet .hljs-built_in,sky-docs-code-snippet .hljs-params{color:#267f99}sky-docs-code-snippet .hljs-attribute,sky-docs-code-snippet .hljs-title.function_{color:#795e26}sky-docs-code-snippet .hljs-attr{color:#001080}sky-docs-code-snippet .hljs-string{color:#a31515}sky-docs-code-snippet .hljs-comment{color:green}sky-docs-code-snippet .hljs-attr,sky-docs-code-snippet .hljs-property,sky-docs-code-snippet .hljs-variable.constant_{color:#0070c1}sky-docs-code-snippet .hljs-number{color:#098658}sky-docs-code-snippet .hljs-tag .hljs-name{color:maroon}sky-docs-code-snippet .hljs-tag .hljs-attr{color:#e50000}sky-docs-code-snippet .hljs-tag .hljs-string{color:#00f}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsCodeHighlightService {
+    constructor() {
+        highlight.registerLanguage('html', hlXml);
+        highlight.registerLanguage('markup', hlXml);
+        highlight.registerLanguage('js', hlJavaScript);
+        highlight.registerLanguage('javascript', hlJavaScript);
+        highlight.registerLanguage('css', hlCss);
+        highlight.registerLanguage('scss', hlScss);
+        highlight.registerLanguage('ts', hlTypeScript);
+        highlight.registerLanguage('typescript', hlTypeScript);
+    }
+    highlight(code, language) {
+        const highlighted = highlight.highlight(code, {
+            language,
+        });
+        return highlighted.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeHighlightService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeHighlightService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Highlights the provided code.
+ * @internal
+ */
+class SkyDocsCodeSnippetComponent {
+    constructor() {
+        this.#highlightSvc = inject(SkyDocsCodeHighlightService);
         this.#sanitizer = inject(DomSanitizer);
         this.code = input.required();
         this.language = input.required();
-        this.codeRef = viewChild('codeRef');
-        this.formatted = computed(() => {
+        this.bordered = input(false, { transform: booleanAttribute });
+        this.hideToolbar = input(false, { transform: booleanAttribute });
+        this.stacked = input(false, { transform: booleanAttribute });
+        this.highlighted = computed(() => {
             const code = this.code();
             const language = this.language();
-            const formatted = highlight.highlight(code, {
-                language,
-            });
-            return this.#sanitizer.bypassSecurityTrustHtml(formatted.value);
+            const highlighted = this.#highlightSvc.highlight(code, language);
+            return this.#sanitizer.bypassSecurityTrustHtml(highlighted);
         });
-        highlight.registerLanguage('html', hlXml);
-        highlight.registerLanguage('js', hlJavaScript);
-        highlight.registerLanguage('scss', hlScss);
-        highlight.registerLanguage('ts', hlTypeScript);
     }
-    onClipboardButtonClick(copySuccessMessage) {
-        const el = this.codeRef();
-        if (el) {
-            this.#clipboardSvc.copyTextContent(el, copySuccessMessage);
-        }
+    #highlightSvc;
+    #sanitizer;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeSnippetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyDocsCodeSnippetComponent, isStandalone: true, selector: "sky-docs-code-snippet[code]", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: true, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, hideToolbar: { classPropertyName: "hideToolbar", publicName: "hideToolbar", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sky-margin-stacked-lg": "stacked()", "class.sky-elevation-0-bordered": "bordered()", "class.sky-padding-even-xl": "bordered()", "class.sky-rounded-corners": "bordered()" } }, ngImport: i0, template: `
+    @if (!hideToolbar()) {
+      <sky-docs-code-snippet-toolbar [codeRef]="codeRef" />
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeSnippetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: SkyCodeSnippetComponent, isStandalone: true, selector: "sky-code-snippet", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "codeRef", first: true, predicate: ["codeRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sky-margin-stacked-lg\">\n  @let copySuccessMessage =\n    'sky_code_snippet_copy_to_clipboard_success_message' | skyLibResources;\n  <button\n    class=\"sky-btn sky-btn-default\"\n    type=\"button\"\n    (click)=\"onClipboardButtonClick(copySuccessMessage)\"\n  >\n    <sky-icon iconName=\"clipboard-multiple\" />\n    {{ 'sky_code_snippet_copy_to_clipboard_button_label' | skyLibResources }}\n  </button>\n</div>\n<pre\n  #codeRef\n  class=\"sky-code-snippet-pre\"\n><code [innerHTML]=\"formatted()\"></code></pre>\n", styles: ["sky-code-snippet{display:block}\n", "sky-code-snippet .sky-code-snippet-pre{font-family:Roboto Mono,serif;margin:0}sky-code-snippet .hljs-attribute,sky-code-snippet .hljs-doctag,sky-code-snippet .hljs-keyword,sky-code-snippet .hljs-literal,sky-code-snippet .hljs-name,sky-code-snippet .hljs-tag .hljs-string,sky-code-snippet .hljs-type,sky-code-snippet .hljs-variable{color:#00f}sky-code-snippet .hljs-string{color:#a31515}sky-code-snippet .hljs-comment{color:green}sky-code-snippet .hljs-tag .hljs-name{color:maroon}sky-code-snippet .hljs-tag .hljs-attr{color:#e50000}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyDocsToolsResourcesModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    <pre #codeRef><code [innerHTML]="highlighted()"></code></pre>
+  `, isInline: true, styles: ["sky-docs-code-snippet{overflow-x:auto;display:flex;flex-direction:column;align-items:start;font-size:14px;line-height:1.5}sky-docs-code-snippet pre{margin:0}sky-docs-code-snippet::-webkit-scrollbar{-webkit-appearance:none;height:8px}sky-docs-code-snippet::-webkit-scrollbar-track{background-color:color-mix(in srgb,var(--sky-border-color-neutral-medium-dark) 5%,transparent);border-radius:var(--sky-border-radius-s)}sky-docs-code-snippet::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--sky-border-color-neutral-medium-dark) 20%,transparent);border-radius:var(--sky-border-radius-s)}\n", "sky-docs-code-snippet .hljs-keyword,sky-docs-code-snippet .hljs-doctag,sky-docs-code-snippet .hljs-variable.language_,sky-docs-code-snippet .hljs-literal,sky-docs-code-snippet .hljs-function{color:#00f}sky-docs-code-snippet .hljs-meta,sky-docs-code-snippet .hljs-title.class_,sky-docs-code-snippet .hljs-built_in,sky-docs-code-snippet .hljs-params{color:#267f99}sky-docs-code-snippet .hljs-attribute,sky-docs-code-snippet .hljs-title.function_{color:#795e26}sky-docs-code-snippet .hljs-attr{color:#001080}sky-docs-code-snippet .hljs-string{color:#a31515}sky-docs-code-snippet .hljs-comment{color:green}sky-docs-code-snippet .hljs-attr,sky-docs-code-snippet .hljs-property,sky-docs-code-snippet .hljs-variable.constant_{color:#0070c1}sky-docs-code-snippet .hljs-number{color:#098658}sky-docs-code-snippet .hljs-tag .hljs-name{color:maroon}sky-docs-code-snippet .hljs-tag .hljs-attr{color:#e50000}sky-docs-code-snippet .hljs-tag .hljs-string{color:#00f}\n"], dependencies: [{ kind: "component", type: SkyDocsCodeSnippetToolbarComponent, selector: "sky-docs-code-snippet-toolbar", inputs: ["codeRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeSnippetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeSnippetComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SkyIconModule, SkyDocsToolsResourcesModule], selector: 'sky-code-snippet', template: "<div class=\"sky-margin-stacked-lg\">\n  @let copySuccessMessage =\n    'sky_code_snippet_copy_to_clipboard_success_message' | skyLibResources;\n  <button\n    class=\"sky-btn sky-btn-default\"\n    type=\"button\"\n    (click)=\"onClipboardButtonClick(copySuccessMessage)\"\n  >\n    <sky-icon iconName=\"clipboard-multiple\" />\n    {{ 'sky_code_snippet_copy_to_clipboard_button_label' | skyLibResources }}\n  </button>\n</div>\n<pre\n  #codeRef\n  class=\"sky-code-snippet-pre\"\n><code [innerHTML]=\"formatted()\"></code></pre>\n", styles: ["sky-code-snippet{display:block}\n", "sky-code-snippet .sky-code-snippet-pre{font-family:Roboto Mono,serif;margin:0}sky-code-snippet .hljs-attribute,sky-code-snippet .hljs-doctag,sky-code-snippet .hljs-keyword,sky-code-snippet .hljs-literal,sky-code-snippet .hljs-name,sky-code-snippet .hljs-tag .hljs-string,sky-code-snippet .hljs-type,sky-code-snippet .hljs-variable{color:#00f}sky-code-snippet .hljs-string{color:#a31515}sky-code-snippet .hljs-comment{color:green}sky-code-snippet .hljs-tag .hljs-name{color:maroon}sky-code-snippet .hljs-tag .hljs-attr{color:#e50000}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class.sky-margin-stacked-lg]': 'stacked()',
+                        '[class.sky-elevation-0-bordered]': 'bordered()',
+                        '[class.sky-padding-even-xl]': 'bordered()',
+                        '[class.sky-rounded-corners]': 'bordered()',
+                    }, imports: [SkyDocsCodeSnippetToolbarComponent], selector: 'sky-docs-code-snippet[code]', template: `
+    @if (!hideToolbar()) {
+      <sky-docs-code-snippet-toolbar [codeRef]="codeRef" />
+    }
+    <pre #codeRef><code [innerHTML]="highlighted()"></code></pre>
+  `, styles: ["sky-docs-code-snippet{overflow-x:auto;display:flex;flex-direction:column;align-items:start;font-size:14px;line-height:1.5}sky-docs-code-snippet pre{margin:0}sky-docs-code-snippet::-webkit-scrollbar{-webkit-appearance:none;height:8px}sky-docs-code-snippet::-webkit-scrollbar-track{background-color:color-mix(in srgb,var(--sky-border-color-neutral-medium-dark) 5%,transparent);border-radius:var(--sky-border-radius-s)}sky-docs-code-snippet::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--sky-border-color-neutral-medium-dark) 20%,transparent);border-radius:var(--sky-border-radius-s)}\n", "sky-docs-code-snippet .hljs-keyword,sky-docs-code-snippet .hljs-doctag,sky-docs-code-snippet .hljs-variable.language_,sky-docs-code-snippet .hljs-literal,sky-docs-code-snippet .hljs-function{color:#00f}sky-docs-code-snippet .hljs-meta,sky-docs-code-snippet .hljs-title.class_,sky-docs-code-snippet .hljs-built_in,sky-docs-code-snippet .hljs-params{color:#267f99}sky-docs-code-snippet .hljs-attribute,sky-docs-code-snippet .hljs-title.function_{color:#795e26}sky-docs-code-snippet .hljs-attr{color:#001080}sky-docs-code-snippet .hljs-string{color:#a31515}sky-docs-code-snippet .hljs-comment{color:green}sky-docs-code-snippet .hljs-attr,sky-docs-code-snippet .hljs-property,sky-docs-code-snippet .hljs-variable.constant_{color:#0070c1}sky-docs-code-snippet .hljs-number{color:#098658}sky-docs-code-snippet .hljs-tag .hljs-name{color:maroon}sky-docs-code-snippet .hljs-tag .hljs-attr{color:#e50000}sky-docs-code-snippet .hljs-tag .hljs-string{color:#00f}\n"] }]
+        }] });
 
 /**
  * @internal
  */
-class SkyCodeSnippetModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeSnippetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeSnippetModule, imports: [SkyCodeSnippetComponent], exports: [SkyCodeSnippetComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeSnippetModule, imports: [SkyCodeSnippetComponent] }); }
+class SkyDocsCodeSnippetModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeSnippetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeSnippetModule, imports: [SkyDocsCodeSnippetComponent, SkyDocsCodeSnippetWrapperComponent], exports: [SkyDocsCodeSnippetComponent, SkyDocsCodeSnippetWrapperComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeSnippetModule, imports: [SkyDocsCodeSnippetComponent, SkyDocsCodeSnippetWrapperComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeSnippetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeSnippetModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [SkyCodeSnippetComponent],
-                    exports: [SkyCodeSnippetComponent],
+                    imports: [SkyDocsCodeSnippetComponent, SkyDocsCodeSnippetWrapperComponent],
+                    exports: [SkyDocsCodeSnippetComponent, SkyDocsCodeSnippetWrapperComponent],
                 }]
         }] });
 
@@ -158,7 +378,7 @@ const TEMPLATE_FILES = ['package.json', 'package-lock.json'];
 /**
  * @internal
  */
-class SkyStackBlitzService {
+class SkyDocsStackBlitzService {
     #http = inject(HttpClient, { optional: true });
     #assetsSvc = inject(SkyAppAssetsService, { optional: true });
     async launch(config) {
@@ -462,10 +682,10 @@ context.keys().map(context);
             return undefined;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyStackBlitzService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyStackBlitzService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsStackBlitzService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsStackBlitzService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyStackBlitzService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsStackBlitzService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -473,23 +693,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 /**
  * @internal
  */
-class SkyCodeExampleViewerComponent {
+class SkyDocsCodeExampleViewerComponent {
     constructor() {
-        this.#stackblitzSvc = inject(SkyStackBlitzService);
+        this.#stackblitzSvc = inject(SkyDocsStackBlitzService);
         this.componentName = input.required();
         this.componentSelector = input.required();
         this.componentType = input.required();
-        this.demoHidden = input(false);
         this.files = input.required();
         this.headingText = input.required();
         this.primaryFile = input.required();
+        this.demoHidden = input(false, { transform: booleanAttribute });
         this.stacked = input(false, { transform: booleanAttribute });
         this.isCodeVisible = signal(false);
     }
     #stackblitzSvc;
     getCodeLanguage(fileName) {
         const extension = fileName.split('.').pop();
-        assertCodeSnippetLanguage(extension);
+        assertCodeHighlightLanguage(extension);
         return extension;
     }
     launchStackBlitz() {
@@ -505,10 +725,10 @@ class SkyCodeExampleViewerComponent {
         const isCodeVisible = this.isCodeVisible();
         this.isCodeVisible.set(!isCodeVisible);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeExampleViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyCodeExampleViewerComponent, isStandalone: true, selector: "sky-code-example-viewer", inputs: { componentName: { classPropertyName: "componentName", publicName: "componentName", isSignal: true, isRequired: true, transformFunction: null }, componentSelector: { classPropertyName: "componentSelector", publicName: "componentSelector", isSignal: true, isRequired: true, transformFunction: null }, componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: true, transformFunction: null }, demoHidden: { classPropertyName: "demoHidden", publicName: "demoHidden", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, primaryFile: { classPropertyName: "primaryFile", publicName: "primaryFile", isSignal: true, isRequired: true, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sky-margin-stacked-xl": "stacked()" } }, ngImport: i0, template: "<sky-box headingLevel=\"3\" headingStyle=\"3\" [headingText]=\"headingText()\">\n  <sky-box-controls>\n    <button\n      class=\"sky-btn sky-btn-default\"\n      data-sky-id=\"stackblitz-btn\"\n      type=\"button\"\n      (click)=\"launchStackBlitz()\"\n    >\n      <sky-icon iconName=\"edit\" />\n      {{ 'sky_code_example_viewer_demo_stack_blitz_button' | skyLibResources }}\n    </button>\n  </sky-box-controls>\n\n  <sky-box-content>\n    <div\n      class=\"sky-code-example-viewer-demo sky-padding-even-md sky-margin-stacked-lg\"\n    >\n      @if (!demoHidden()) {\n        <ng-template [ngComponentOutlet]=\"componentType()\" />\n      } @else {\n        {{ 'sky_code_example_viewer_demo_hidden_message' | skyLibResources }}\n      }\n    </div>\n\n    <div class=\"sky-margin-stacked-sm\">\n      <button\n        class=\"sky-btn sky-btn-link\"\n        data-sky-id=\"toggle-code-visibility-btn\"\n        type=\"button\"\n        [attr.aria-controls]=\"codeRef.id\"\n        [attr.aria-expanded]=\"isCodeVisible()\"\n        (click)=\"toggleCodeVisibility()\"\n      >\n        <sky-icon\n          [iconName]=\"isCodeVisible() ? 'chevron-down' : 'chevron-right'\"\n        />\n        {{\n          isCodeVisible()\n            ? ('sky_code_example_viewer_hide_code_button_label'\n              | skyLibResources)\n            : ('sky_code_example_viewer_show_code_button_label'\n              | skyLibResources)\n        }}\n      </button>\n    </div>\n\n    <sky-vertical-tabset #codeRef=\"skyId\" skyId [hidden]=\"!isCodeVisible()\">\n      @for (obj of files() | keyvalue; track obj.key) {\n        <sky-vertical-tab\n          [active]=\"obj.key === primaryFile()\"\n          [tabHeading]=\"obj.key\"\n        >\n          <sky-code-snippet\n            [code]=\"obj.value\"\n            [language]=\"getCodeLanguage(obj.key)\"\n          />\n        </sky-vertical-tab>\n      }\n    </sky-vertical-tabset>\n  </sky-box-content>\n</sky-box>\n", styles: [":host{display:block}.sky-code-example-viewer-demo{border:1px solid var(--sky-border-color-neutral-medium)}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$1.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$1.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$1.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyCodeSnippetModule }, { kind: "component", type: SkyCodeSnippetComponent, selector: "sky-code-snippet", inputs: ["code", "language"] }, { kind: "ngmodule", type: SkyDocsToolsResourcesModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i5.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i6.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i6.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeExampleViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyDocsCodeExampleViewerComponent, isStandalone: true, selector: "sky-docs-code-example-viewer", inputs: { componentName: { classPropertyName: "componentName", publicName: "componentName", isSignal: true, isRequired: true, transformFunction: null }, componentSelector: { classPropertyName: "componentSelector", publicName: "componentSelector", isSignal: true, isRequired: true, transformFunction: null }, componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: true, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, primaryFile: { classPropertyName: "primaryFile", publicName: "primaryFile", isSignal: true, isRequired: true, transformFunction: null }, demoHidden: { classPropertyName: "demoHidden", publicName: "demoHidden", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sky-margin-stacked-xl": "stacked()" } }, ngImport: i0, template: "<sky-box headingLevel=\"3\" headingStyle=\"3\" [headingText]=\"headingText()\">\n  <sky-box-controls>\n    <button\n      class=\"sky-btn sky-btn-default\"\n      data-sky-id=\"stackblitz-btn\"\n      type=\"button\"\n      (click)=\"launchStackBlitz()\"\n    >\n      <sky-icon iconName=\"edit\" />\n      {{\n        'sky_docs_code_example_viewer_demo_stack_blitz_button' | skyLibResources\n      }}\n    </button>\n  </sky-box-controls>\n\n  <sky-box-content>\n    <div\n      class=\"sky-docs-code-example-viewer-demo sky-padding-even-md sky-margin-stacked-lg\"\n    >\n      @if (!demoHidden()) {\n        <ng-template [ngComponentOutlet]=\"componentType()\" />\n      } @else {\n        {{\n          'sky_docs_code_example_viewer_demo_hidden_message' | skyLibResources\n        }}\n      }\n    </div>\n\n    <div class=\"sky-margin-stacked-sm\">\n      <button\n        class=\"sky-btn sky-btn-link\"\n        data-sky-id=\"toggle-code-visibility-btn\"\n        type=\"button\"\n        [attr.aria-controls]=\"codeRef.id\"\n        [attr.aria-expanded]=\"isCodeVisible()\"\n        (click)=\"toggleCodeVisibility()\"\n      >\n        <sky-icon\n          [iconName]=\"isCodeVisible() ? 'chevron-down' : 'chevron-right'\"\n        />\n        {{\n          isCodeVisible()\n            ? ('sky_docs_code_example_viewer_hide_code_button_label'\n              | skyLibResources)\n            : ('sky_docs_code_example_viewer_show_code_button_label'\n              | skyLibResources)\n        }}\n      </button>\n    </div>\n\n    <sky-vertical-tabset #codeRef=\"skyId\" skyId [hidden]=\"!isCodeVisible()\">\n      @for (obj of files() | keyvalue; track obj.key) {\n        <sky-vertical-tab\n          [active]=\"obj.key === primaryFile()\"\n          [tabHeading]=\"obj.key\"\n        >\n          <sky-docs-code-snippet\n            [code]=\"obj.value\"\n            [language]=\"getCodeLanguage(obj.key)\"\n          />\n        </sky-vertical-tab>\n      }\n    </sky-vertical-tabset>\n  </sky-box-content>\n</sky-box>\n", styles: [":host{display:block}.sky-docs-code-example-viewer-demo{border:1px solid var(--sky-border-color-neutral-medium)}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1.λ43, selector: "sky-box-content" }, { kind: "component", type: i1.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDocsCodeSnippetModule }, { kind: "component", type: SkyDocsCodeSnippetComponent, selector: "sky-docs-code-snippet[code]", inputs: ["code", "language", "bordered", "hideToolbar", "stacked"] }, { kind: "ngmodule", type: SkyDocsToolsResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i5.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i6.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i6.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeExampleViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeExampleViewerComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.sky-margin-stacked-xl]': 'stacked()',
@@ -516,27 +736,1127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         KeyValuePipe,
                         NgComponentOutlet,
                         SkyBoxModule,
-                        SkyCodeSnippetModule,
+                        SkyDocsCodeSnippetModule,
                         SkyDocsToolsResourcesModule,
                         SkyIconModule,
                         SkyIdModule,
                         SkyVerticalTabsetModule,
-                    ], selector: 'sky-code-example-viewer', template: "<sky-box headingLevel=\"3\" headingStyle=\"3\" [headingText]=\"headingText()\">\n  <sky-box-controls>\n    <button\n      class=\"sky-btn sky-btn-default\"\n      data-sky-id=\"stackblitz-btn\"\n      type=\"button\"\n      (click)=\"launchStackBlitz()\"\n    >\n      <sky-icon iconName=\"edit\" />\n      {{ 'sky_code_example_viewer_demo_stack_blitz_button' | skyLibResources }}\n    </button>\n  </sky-box-controls>\n\n  <sky-box-content>\n    <div\n      class=\"sky-code-example-viewer-demo sky-padding-even-md sky-margin-stacked-lg\"\n    >\n      @if (!demoHidden()) {\n        <ng-template [ngComponentOutlet]=\"componentType()\" />\n      } @else {\n        {{ 'sky_code_example_viewer_demo_hidden_message' | skyLibResources }}\n      }\n    </div>\n\n    <div class=\"sky-margin-stacked-sm\">\n      <button\n        class=\"sky-btn sky-btn-link\"\n        data-sky-id=\"toggle-code-visibility-btn\"\n        type=\"button\"\n        [attr.aria-controls]=\"codeRef.id\"\n        [attr.aria-expanded]=\"isCodeVisible()\"\n        (click)=\"toggleCodeVisibility()\"\n      >\n        <sky-icon\n          [iconName]=\"isCodeVisible() ? 'chevron-down' : 'chevron-right'\"\n        />\n        {{\n          isCodeVisible()\n            ? ('sky_code_example_viewer_hide_code_button_label'\n              | skyLibResources)\n            : ('sky_code_example_viewer_show_code_button_label'\n              | skyLibResources)\n        }}\n      </button>\n    </div>\n\n    <sky-vertical-tabset #codeRef=\"skyId\" skyId [hidden]=\"!isCodeVisible()\">\n      @for (obj of files() | keyvalue; track obj.key) {\n        <sky-vertical-tab\n          [active]=\"obj.key === primaryFile()\"\n          [tabHeading]=\"obj.key\"\n        >\n          <sky-code-snippet\n            [code]=\"obj.value\"\n            [language]=\"getCodeLanguage(obj.key)\"\n          />\n        </sky-vertical-tab>\n      }\n    </sky-vertical-tabset>\n  </sky-box-content>\n</sky-box>\n", styles: [":host{display:block}.sky-code-example-viewer-demo{border:1px solid var(--sky-border-color-neutral-medium)}\n"] }]
+                    ], selector: 'sky-docs-code-example-viewer', template: "<sky-box headingLevel=\"3\" headingStyle=\"3\" [headingText]=\"headingText()\">\n  <sky-box-controls>\n    <button\n      class=\"sky-btn sky-btn-default\"\n      data-sky-id=\"stackblitz-btn\"\n      type=\"button\"\n      (click)=\"launchStackBlitz()\"\n    >\n      <sky-icon iconName=\"edit\" />\n      {{\n        'sky_docs_code_example_viewer_demo_stack_blitz_button' | skyLibResources\n      }}\n    </button>\n  </sky-box-controls>\n\n  <sky-box-content>\n    <div\n      class=\"sky-docs-code-example-viewer-demo sky-padding-even-md sky-margin-stacked-lg\"\n    >\n      @if (!demoHidden()) {\n        <ng-template [ngComponentOutlet]=\"componentType()\" />\n      } @else {\n        {{\n          'sky_docs_code_example_viewer_demo_hidden_message' | skyLibResources\n        }}\n      }\n    </div>\n\n    <div class=\"sky-margin-stacked-sm\">\n      <button\n        class=\"sky-btn sky-btn-link\"\n        data-sky-id=\"toggle-code-visibility-btn\"\n        type=\"button\"\n        [attr.aria-controls]=\"codeRef.id\"\n        [attr.aria-expanded]=\"isCodeVisible()\"\n        (click)=\"toggleCodeVisibility()\"\n      >\n        <sky-icon\n          [iconName]=\"isCodeVisible() ? 'chevron-down' : 'chevron-right'\"\n        />\n        {{\n          isCodeVisible()\n            ? ('sky_docs_code_example_viewer_hide_code_button_label'\n              | skyLibResources)\n            : ('sky_docs_code_example_viewer_show_code_button_label'\n              | skyLibResources)\n        }}\n      </button>\n    </div>\n\n    <sky-vertical-tabset #codeRef=\"skyId\" skyId [hidden]=\"!isCodeVisible()\">\n      @for (obj of files() | keyvalue; track obj.key) {\n        <sky-vertical-tab\n          [active]=\"obj.key === primaryFile()\"\n          [tabHeading]=\"obj.key\"\n        >\n          <sky-docs-code-snippet\n            [code]=\"obj.value\"\n            [language]=\"getCodeLanguage(obj.key)\"\n          />\n        </sky-vertical-tab>\n      }\n    </sky-vertical-tabset>\n  </sky-box-content>\n</sky-box>\n", styles: [":host{display:block}.sky-docs-code-example-viewer-demo{border:1px solid var(--sky-border-color-neutral-medium)}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsCodeExampleViewerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeExampleViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeExampleViewerModule, imports: [SkyDocsCodeExampleViewerComponent], exports: [SkyDocsCodeExampleViewerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeExampleViewerModule, imports: [SkyDocsCodeExampleViewerComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeExampleViewerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SkyDocsCodeExampleViewerComponent],
+                    exports: [SkyDocsCodeExampleViewerComponent],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsCodeHighlightPipe {
+    #highlightSvc = inject(SkyDocsCodeHighlightService);
+    transform(value, language) {
+        return this.#highlightSvc.highlight(value, language);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeHighlightPipe, isStandalone: true, name: "skyDocsCodeHighlight" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeHighlightPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsCodeHighlight',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsHeadingAnchorService {
+    constructor() {
+        this.#anchors = [];
+        this.#anchorsChange = new BehaviorSubject([]);
+        this.anchorsChange = this.#anchorsChange.asObservable();
+    }
+    #anchors;
+    #anchorsChange;
+    ngOnDestroy() {
+        this.#anchors = [];
+        this.#anchorsChange.complete();
+    }
+    register(anchor) {
+        if (!this.#anchors.includes(anchor)) {
+            this.#anchors.push(anchor);
+            this.#anchorsChange.next(this.#getLinks());
+        }
+    }
+    unregister(anchor) {
+        if (this.#anchors.includes(anchor)) {
+            this.#anchors.splice(this.#anchors.indexOf(anchor));
+            this.#anchorsChange.next(this.#getLinks());
+        }
+    }
+    #getLinks() {
+        const els = document.querySelectorAll('sky-docs-heading-anchor');
+        const anchorsSorted = [];
+        // Since heading anchors can be registered at any point in the lifecycle
+        // of the app, we need to sort the links by their location in the DOM,
+        // rather than the order at which they were registered.
+        for (const el of els) {
+            this.#anchors.forEach((anchor) => {
+                if (anchor.equals(el)) {
+                    anchorsSorted.push(anchor);
+                }
+            });
+        }
+        return anchorsSorted.map((a) => {
+            return {
+                anchorId: a.anchorId(),
+                categoryColor: a.categoryColor(),
+                categoryTemplate: a.categoryTemplate(),
+                categoryText: a.categoryText(),
+                text: a.headingText(),
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsHeadingAnchorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsHeadingAnchorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsHeadingAnchorService, decorators: [{
+            type: Injectable
+        }] });
+
+const DEFAULT_HEADING_LEVEL = 2;
+/**
+ * @internal
+ */
+class SkyDocsHeadingAnchorComponent {
+    constructor() {
+        this.#elementRef = inject(ElementRef);
+        this.#anchorSvc = inject(SkyDocsHeadingAnchorService, { optional: true });
+        this.anchorId = input.required();
+        this.headingText = input.required();
+        this.headingTextFormat = input('normal');
+        this.categoryColor = input();
+        this.categoryTemplate = input();
+        this.categoryText = input();
+        this.headingLevel = input(DEFAULT_HEADING_LEVEL, {
+            transform: (value) => {
+                const numValue = numberAttribute(value);
+                if (numValue > 0 && numValue < 7) {
+                    return numValue;
+                }
+                return DEFAULT_HEADING_LEVEL;
+            },
+        });
+        this.strikethrough = input(false, { transform: booleanAttribute });
+    }
+    #elementRef;
+    #anchorSvc;
+    equals(el) {
+        return this.#elementRef.nativeElement === el;
+    }
+    ngAfterViewInit() {
+        this.#anchorSvc?.register(this);
+    }
+    ngOnDestroy() {
+        this.#anchorSvc?.unregister(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsHeadingAnchorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyDocsHeadingAnchorComponent, isStandalone: true, selector: "sky-docs-heading-anchor", inputs: { anchorId: { classPropertyName: "anchorId", publicName: "anchorId", isSignal: true, isRequired: true, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, headingTextFormat: { classPropertyName: "headingTextFormat", publicName: "headingTextFormat", isSignal: true, isRequired: false, transformFunction: null }, categoryColor: { classPropertyName: "categoryColor", publicName: "categoryColor", isSignal: true, isRequired: false, transformFunction: null }, categoryTemplate: { classPropertyName: "categoryTemplate", publicName: "categoryTemplate", isSignal: true, isRequired: false, transformFunction: null }, categoryText: { classPropertyName: "categoryText", publicName: "categoryText", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, strikethrough: { classPropertyName: "strikethrough", publicName: "strikethrough", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "anchorId()" } }, ngImport: i0, template: "@switch (headingLevel()) {\n  @case (1) {\n    <h1 class=\"sky-docs-heading-anchor-heading\">\n      <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n    </h1>\n  }\n  @case (2) {\n    <h2 class=\"sky-docs-heading-anchor-heading\">\n      <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n    </h2>\n  }\n  @case (3) {\n    <h3 class=\"sky-docs-heading-anchor-heading\">\n      <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n    </h3>\n  }\n  @case (4) {\n    <h4 class=\"sky-docs-heading-anchor-heading\">\n      <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n    </h4>\n  }\n  @case (5) {\n    <h5 class=\"sky-docs-heading-anchor-heading\">\n      <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n    </h5>\n  }\n  @case (6) {\n    <h6 class=\"sky-docs-heading-anchor-heading\">\n      <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n    </h6>\n  }\n}\n\n@if (categoryColor(); as categoryColor) {\n  <sky-docs-category-tag [color]=\"categoryColor\">\n    @if (categoryTemplate(); as categoryTemplate) {\n      <ng-container [ngTemplateOutlet]=\"categoryTemplate\" />\n    } @else {\n      {{ categoryText() }}\n    }\n  </sky-docs-category-tag>\n}\n\n<ng-content />\n\n<ng-template #headingTextRef>\n  <a\n    class=\"sky-docs-heading-anchor-link\"\n    queryParamsHandling=\"merge\"\n    [fragment]=\"anchorId()\"\n    [routerLink]=\"[]\"\n  >\n    <sky-icon iconName=\"link\" />\n    <span class=\"sky-screen-reader-only\"\n      >Link for section titled {{ headingText() }}</span\n    >\n  </a>\n  <span skyTrim [class.sky-docs-text-strikethrough]=\"strikethrough()\">\n    @if (headingTextFormat() === 'code') {\n      <code>{{ headingText() }}</code>\n    } @else {\n      {{ headingText() }}\n    }\n  </span>\n</ng-template>\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:10px}:host([id]){padding-top:15px;margin-top:-15px}.sky-docs-heading-anchor-heading{word-break:break-all;position:relative;margin:0}.sky-docs-heading-anchor-heading:hover .sky-docs-heading-anchor-link{opacity:1}.sky-docs-heading-anchor-link{opacity:0;position:absolute;transition:opacity .25s;display:inline-block;left:calc(-1em - 1px);top:-2px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SkyDocsCategoryTagModule }, { kind: "component", type: SkyDocsCategoryTagComponent, selector: "sky-docs-category-tag", inputs: ["color"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyTrimModule }, { kind: "directive", type: i5.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsHeadingAnchorComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.id]': 'anchorId()',
+                    }, imports: [
+                        NgTemplateOutlet,
+                        RouterLink,
+                        SkyDocsCategoryTagModule,
+                        SkyIconModule,
+                        SkyTrimModule,
+                    ], selector: 'sky-docs-heading-anchor', template: "@switch (headingLevel()) {\n  @case (1) {\n    <h1 class=\"sky-docs-heading-anchor-heading\">\n      <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n    </h1>\n  }\n  @case (2) {\n    <h2 class=\"sky-docs-heading-anchor-heading\">\n      <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n    </h2>\n  }\n  @case (3) {\n    <h3 class=\"sky-docs-heading-anchor-heading\">\n      <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n    </h3>\n  }\n  @case (4) {\n    <h4 class=\"sky-docs-heading-anchor-heading\">\n      <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n    </h4>\n  }\n  @case (5) {\n    <h5 class=\"sky-docs-heading-anchor-heading\">\n      <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n    </h5>\n  }\n  @case (6) {\n    <h6 class=\"sky-docs-heading-anchor-heading\">\n      <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n    </h6>\n  }\n}\n\n@if (categoryColor(); as categoryColor) {\n  <sky-docs-category-tag [color]=\"categoryColor\">\n    @if (categoryTemplate(); as categoryTemplate) {\n      <ng-container [ngTemplateOutlet]=\"categoryTemplate\" />\n    } @else {\n      {{ categoryText() }}\n    }\n  </sky-docs-category-tag>\n}\n\n<ng-content />\n\n<ng-template #headingTextRef>\n  <a\n    class=\"sky-docs-heading-anchor-link\"\n    queryParamsHandling=\"merge\"\n    [fragment]=\"anchorId()\"\n    [routerLink]=\"[]\"\n  >\n    <sky-icon iconName=\"link\" />\n    <span class=\"sky-screen-reader-only\"\n      >Link for section titled {{ headingText() }}</span\n    >\n  </a>\n  <span skyTrim [class.sky-docs-text-strikethrough]=\"strikethrough()\">\n    @if (headingTextFormat() === 'code') {\n      <code>{{ headingText() }}</code>\n    } @else {\n      {{ headingText() }}\n    }\n  </span>\n</ng-template>\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:10px}:host([id]){padding-top:15px;margin-top:-15px}.sky-docs-heading-anchor-heading{word-break:break-all;position:relative;margin:0}.sky-docs-heading-anchor-heading:hover .sky-docs-heading-anchor-link{opacity:1}.sky-docs-heading-anchor-link{opacity:0;position:absolute;transition:opacity .25s;display:inline-block;left:calc(-1em - 1px);top:-2px}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsHeadingAnchorModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsHeadingAnchorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsHeadingAnchorModule, imports: [SkyDocsHeadingAnchorComponent], exports: [SkyDocsHeadingAnchorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsHeadingAnchorModule, imports: [SkyDocsHeadingAnchorComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsHeadingAnchorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SkyDocsHeadingAnchorComponent],
+                    exports: [SkyDocsHeadingAnchorComponent],
+                }]
         }] });
 
 /**
  * @internal
  */
-class SkyCodeExampleViewerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeExampleViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeExampleViewerModule, imports: [SkyCodeExampleViewerComponent], exports: [SkyCodeExampleViewerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeExampleViewerModule, imports: [SkyCodeExampleViewerComponent] }); }
+const SKY_DOCS_CODE_EXAMPLE_COMPONENT_TYPES = new InjectionToken('SKY_DOCS_CODE_EXAMPLE_COMPONENT_TYPES');
+
+/**
+ * Provides code example declarations (e.g., Type<unknown>) to be used by the
+ * code example viewer to dynamically create each code example component.
+ * @example
+ * ```
+ * import * as examples from '@skyux/code-examples';
+ *
+ * provideSkyDocsCodeExampleTypes(examples);
+ * ```
+ * @internal
+ */
+function provideSkyDocsCodeExampleTypes(examples) {
+    return makeEnvironmentProviders([
+        {
+            provide: SKY_DOCS_CODE_EXAMPLE_COMPONENT_TYPES,
+            useValue: examples,
+        },
+    ]);
+}
+
+/**
+ * @internal
+ */
+class SkyDocsTableOfContentsComponent {
+    constructor() {
+        this.headingText = input.required();
+        this.links = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTableOfContentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyDocsTableOfContentsComponent, isStandalone: true, selector: "sky-docs-toc", inputs: { headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<h3 class=\"sky-docs-toc-heading\">{{ headingText() }}</h3>\n<nav [attr.aria-label]=\"'Table of contents for ' + headingText()\">\n  @for (link of links(); track link.anchorId) {\n    <a\n      class=\"sky-docs-toc-link sky-margin-stacked-sm\"\n      queryParamsHandling=\"merge\"\n      [class.sky-docs-toc-link-active]=\"link.active\"\n      [fragment]=\"link.anchorId\"\n      [routerLink]=\"[]\"\n    >\n      <span class=\"sky-docs-toc-link-text\">{{ link.text }}</span>\n      @if (link.categoryColor) {\n        <sky-docs-category-tag\n          class=\"sky-docs-toc-link-category sky-font-body-sm\"\n          [color]=\"link.categoryColor\"\n        >\n          @if (link.categoryTemplate) {\n            <ng-container [ngTemplateOutlet]=\"link.categoryTemplate\" />\n          } @else {\n            {{ link.categoryText }}\n          }\n        </sky-docs-category-tag>\n      }\n    </a>\n  }\n</nav>\n", styles: [":host{--sky-docs-toc-active-border-size: 4px;display:block}.sky-docs-toc-heading{padding:0 0 0 var(--sky-padding-even-md)}a.sky-docs-toc-link{display:flex;align-items:center;gap:var(--sky-margin-inline-xs);height:22px;padding:0 0 0 calc(var(--sky-padding-even-md) - var(--sky-docs-toc-active-border-size));border-left:var(--sky-docs-toc-active-border-size) solid transparent}a.sky-docs-toc-link:focus-visible,a.sky-docs-toc-link.sky-docs-toc-link-active{border-color:var(--sky-text-color-action-primary)}a.sky-docs-toc-link:hover{text-decoration:none}a.sky-docs-toc-link:hover .sky-docs-toc-link-text{text-decoration:underline}a.sky-docs-toc-link .sky-docs-toc-link-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}a.sky-docs-toc-link .sky-docs-toc-link-category{flex-shrink:1;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SkyDocsCategoryTagModule }, { kind: "component", type: SkyDocsCategoryTagComponent, selector: "sky-docs-category-tag", inputs: ["color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTableOfContentsComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, RouterLink, SkyDocsCategoryTagModule], selector: 'sky-docs-toc', template: "<h3 class=\"sky-docs-toc-heading\">{{ headingText() }}</h3>\n<nav [attr.aria-label]=\"'Table of contents for ' + headingText()\">\n  @for (link of links(); track link.anchorId) {\n    <a\n      class=\"sky-docs-toc-link sky-margin-stacked-sm\"\n      queryParamsHandling=\"merge\"\n      [class.sky-docs-toc-link-active]=\"link.active\"\n      [fragment]=\"link.anchorId\"\n      [routerLink]=\"[]\"\n    >\n      <span class=\"sky-docs-toc-link-text\">{{ link.text }}</span>\n      @if (link.categoryColor) {\n        <sky-docs-category-tag\n          class=\"sky-docs-toc-link-category sky-font-body-sm\"\n          [color]=\"link.categoryColor\"\n        >\n          @if (link.categoryTemplate) {\n            <ng-container [ngTemplateOutlet]=\"link.categoryTemplate\" />\n          } @else {\n            {{ link.categoryText }}\n          }\n        </sky-docs-category-tag>\n      }\n    </a>\n  }\n</nav>\n", styles: [":host{--sky-docs-toc-active-border-size: 4px;display:block}.sky-docs-toc-heading{padding:0 0 0 var(--sky-padding-even-md)}a.sky-docs-toc-link{display:flex;align-items:center;gap:var(--sky-margin-inline-xs);height:22px;padding:0 0 0 calc(var(--sky-padding-even-md) - var(--sky-docs-toc-active-border-size));border-left:var(--sky-docs-toc-active-border-size) solid transparent}a.sky-docs-toc-link:focus-visible,a.sky-docs-toc-link.sky-docs-toc-link-active{border-color:var(--sky-text-color-action-primary)}a.sky-docs-toc-link:hover{text-decoration:none}a.sky-docs-toc-link:hover .sky-docs-toc-link-text{text-decoration:underline}a.sky-docs-toc-link .sky-docs-toc-link-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}a.sky-docs-toc-link .sky-docs-toc-link-category{flex-shrink:1;white-space:nowrap}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsTableOfContentsPageComponent {
+    constructor() {
+        this.#anchors = toSignal(inject(SkyDocsHeadingAnchorService).anchorsChange);
+        this.#destroyRef = inject(DestroyRef);
+        this.#elementRef = inject(ElementRef);
+        this.#scrollableHostSvc = inject(SkyScrollableHostService);
+        this.menuHeadingText = input.required();
+        this.#activeAnchorIdOnScroll = signal(undefined);
+        this.#scrollOffset = 0;
+        this.breakpoint = toSignal(inject(SkyMediaQueryService).breakpointChange);
+        this.links = computed(() => {
+            if (this.breakpoint() === 'xs') {
+                return [];
+            }
+            const anchors = this.#anchors();
+            const activeAnchorId = this.#activeAnchorIdOnScroll();
+            return (anchors?.map((anchor) => {
+                const link = anchor;
+                link.active = link.anchorId === activeAnchorId;
+                return link;
+            }) ?? []);
+        });
+    }
+    #anchors;
+    #destroyRef;
+    #elementRef;
+    #scrollableHostSvc;
+    #activeAnchorIdOnScroll;
+    #scrollOffset;
+    ngAfterViewInit() {
+        const scrollEl = this.#scrollableHostSvc.getScrollableHost(this.#elementRef);
+        this.#scrollOffset = this.#getScrollOffset(scrollEl);
+        fromEvent(scrollEl, 'scroll')
+            .pipe(debounceTime(10), map(() => this.#getActiveLink()), distinctUntilChanged(), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((activeLink) => {
+            this.#activeAnchorIdOnScroll.set(activeLink);
+        });
+    }
+    /**
+     * A link is considered active if the page is scrolled past the anchor without
+     * also being scrolled passed the next link.
+     */
+    #getActiveLink() {
+        const anchors = this.#anchors();
+        if (anchors) {
+            for (let i = 0; i < anchors.length; i++) {
+                const anchor = anchors[i];
+                const nextAnchor = anchors[i + 1];
+                const rect = document
+                    .getElementById(anchor.anchorId)
+                    ?.getBoundingClientRect();
+                const nextRect = document
+                    .getElementById(nextAnchor?.anchorId)
+                    ?.getBoundingClientRect();
+                if (rect &&
+                    Math.round(rect.top - this.#scrollOffset) <= 0 &&
+                    (nextRect === undefined ||
+                        Math.round(nextRect.top - this.#scrollOffset) > 0)) {
+                    return anchor.anchorId;
+                }
+            }
+        }
+        return undefined;
+    }
+    #getScrollOffset(scrollEl) {
+        return scrollEl instanceof HTMLElement
+            ? scrollEl.getBoundingClientRect().top
+            : 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTableOfContentsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyDocsTableOfContentsPageComponent, isStandalone: true, selector: "sky-docs-toc-page", inputs: { menuHeadingText: { classPropertyName: "menuHeadingText", publicName: "menuHeadingText", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.sky-docs-toc-page-with-links": "links().length > 0" } }, ngImport: i0, template: "@if (links().length > 0) {\n  <div class=\"sky-docs-toc-menu\">\n    <sky-docs-toc [headingText]=\"menuHeadingText()\" [links]=\"links()\" />\n  </div>\n}\n<div class=\"sky-docs-toc-body\">\n  <ng-content />\n</div>\n", styles: [":host{display:flex;align-items:flex-start;flex-direction:row-reverse;gap:40px}:host(:not(.sky-docs-toc-page-with-links)) .sky-docs-toc-body{width:100%}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-body{min-width:50%;flex:1}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-menu{position:sticky;top:0;flex-shrink:1;max-width:40%;min-width:20%}\n"], dependencies: [{ kind: "component", type: SkyDocsTableOfContentsComponent, selector: "sky-docs-toc", inputs: ["headingText", "links"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTableOfContentsPageComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.sky-docs-toc-page-with-links]': 'links().length > 0',
+                    }, imports: [SkyDocsTableOfContentsComponent], selector: 'sky-docs-toc-page', template: "@if (links().length > 0) {\n  <div class=\"sky-docs-toc-menu\">\n    <sky-docs-toc [headingText]=\"menuHeadingText()\" [links]=\"links()\" />\n  </div>\n}\n<div class=\"sky-docs-toc-body\">\n  <ng-content />\n</div>\n", styles: [":host{display:flex;align-items:flex-start;flex-direction:row-reverse;gap:40px}:host(:not(.sky-docs-toc-page-with-links)) .sky-docs-toc-body{width:100%}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-body{min-width:50%;flex:1}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-menu{position:sticky;top:0;flex-shrink:1;max-width:40%;min-width:20%}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsTableOfContentsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTableOfContentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTableOfContentsModule, imports: [SkyDocsTableOfContentsComponent,
+            SkyDocsTableOfContentsPageComponent], exports: [SkyDocsTableOfContentsPageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTableOfContentsModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTableOfContentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SkyDocsTableOfContentsComponent,
+                        SkyDocsTableOfContentsPageComponent,
+                    ],
+                    exports: [SkyDocsTableOfContentsPageComponent],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsTypeDefinitionBoxComponent {
+    constructor() {
+        this.headingText = input.required();
+        this.deprecated = input(false, { transform: booleanAttribute });
+        this.required = input(false, { transform: booleanAttribute });
+        this.stacked = input(false, { transform: booleanAttribute });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyDocsTypeDefinitionBoxComponent, isStandalone: true, selector: "sky-docs-type-definition-box", inputs: { headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, deprecated: { classPropertyName: "deprecated", publicName: "deprecated", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sky-margin-stacked-xl": "stacked()" }, classAttribute: "sky-elevation-0-bordered sky-rounded-corners" }, ngImport: i0, template: `
+    <div
+      class="sky-docs-type-definition-box-header sky-border-bottom-dark sky-padding-even-xl"
+    >
+      <h4 class="sky-docs-type-definition-box-heading">
+        <code
+          [class.sky-docs-text-strikethrough]="deprecated()"
+          [innerHTML]="headingText()"
+        ></code>
+      </h4>
+      @if (required()) {
+        <sky-docs-category-tag color="red">Required</sky-docs-category-tag>
+      }
+    </div>
+    <div class="sky-docs-type-definition-box-body sky-padding-even-xl">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:block;overflow:hidden}.sky-docs-type-definition-box-header{background-color:var(--sky-background-color-info-light);display:flex;align-items:center;gap:10px}.sky-docs-type-definition-box-heading{margin:0;font-weight:400;word-break:break-all}\n"], dependencies: [{ kind: "ngmodule", type: SkyDocsCategoryTagModule }, { kind: "component", type: SkyDocsCategoryTagComponent, selector: "sky-docs-category-tag", inputs: ["color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionBoxComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'sky-elevation-0-bordered sky-rounded-corners',
+                        '[class.sky-margin-stacked-xl]': 'stacked()',
+                    }, imports: [SkyDocsCategoryTagModule], selector: 'sky-docs-type-definition-box', template: `
+    <div
+      class="sky-docs-type-definition-box-header sky-border-bottom-dark sky-padding-even-xl"
+    >
+      <h4 class="sky-docs-type-definition-box-heading">
+        <code
+          [class.sky-docs-text-strikethrough]="deprecated()"
+          [innerHTML]="headingText()"
+        ></code>
+      </h4>
+      @if (required()) {
+        <sky-docs-category-tag color="red">Required</sky-docs-category-tag>
+      }
+    </div>
+    <div class="sky-docs-type-definition-box-body sky-padding-even-xl">
+      <ng-content />
+    </div>
+  `, styles: [":host{display:block;overflow:hidden}.sky-docs-type-definition-box-header{background-color:var(--sky-background-color-info-light);display:flex;align-items:center;gap:10px}.sky-docs-type-definition-box-heading{margin:0;font-weight:400;word-break:break-all}\n"] }]
+        }] });
+
+const renderer = {
+    codespan(token) {
+        return `<code class="sky-docs-codespan">${token.text}</code>`;
+    },
+};
+marked.use({
+    renderer,
+});
+/**
+ * @internal
+ */
+class SkyDocsMarkdownPipe {
+    transform(value, parserStyle = 'inline') {
+        return parserStyle === 'inline'
+            ? marked.parseInline(value)
+            : marked.parse(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsMarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsMarkdownPipe, isStandalone: true, name: "skyDocsMarkdown" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsMarkdownPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsMarkdown',
+                }]
+        }] });
+
+/**
+ * Registers known type symbols with their corresponding anchor IDs.
+ * @internal
+ */
+class SkyDocsTypeDefinitionAnchorIdsService {
+    #anchorIds = new Map();
+    updateAnchorIds(anchorIds) {
+        this.#anchorIds = new Map(Object.entries(anchorIds));
+    }
+    getAnchorId(typeName) {
+        return this.#anchorIds.get(typeName);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionAnchorIdsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionAnchorIdsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionAnchorIdsService, decorators: [{
+            type: Injectable
+        }] });
+
+const NOT_WORD_REGEXP = /\w+/g;
+/**
+ * For the given string, finds known tokens and wraps them in an anchor linking to the respective element ID.
+ * @internal
+ */
+class SkyTypeAnchorLinksPipe {
+    #activatedRoute = inject(ActivatedRoute);
+    #anchorSvc = inject(SkyDocsTypeDefinitionAnchorIdsService);
+    #changeDetector = inject(ChangeDetectorRef);
+    #destroyRef = inject(DestroyRef);
+    #cache = {};
+    #currentRoute = this.#activatedRoute.snapshot.url.toString();
+    transform(value, options) {
+        const typeWrappedWithAnchor = value?.replace(NOT_WORD_REGEXP, (maybeType) => {
+            if (options?.ignore.includes(maybeType)) {
+                return maybeType;
+            }
+            const anchorId = this.#anchorSvc.getAnchorId(maybeType);
+            if (anchorId) {
+                if (!(value in this.#cache)) {
+                    this.#activatedRoute.queryParams
+                        .pipe(takeUntilDestroyed(this.#destroyRef))
+                        .subscribe((queryParams) => {
+                        const href = this.#getHref(anchorId, queryParams);
+                        this.#cache[value] =
+                            `<a class="sky-docs-codespan-anchor" href="${href}">${maybeType}</a>`;
+                        this.#changeDetector.markForCheck();
+                    });
+                }
+                return this.#cache[value];
+            }
+            return maybeType;
+        });
+        if (typeWrappedWithAnchor !== value) {
+            return typeWrappedWithAnchor;
+        }
+        return value;
+    }
+    #getHref(anchorId, queryParams) {
+        const params = Object.entries(queryParams)
+            .map(([k, v]) => `${k}=${v}`)
+            .join('&');
+        return `${this.#currentRoute}${params.length > 0 ? `?${params}` : ''}#${anchorId}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyTypeAnchorLinksPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyTypeAnchorLinksPipe, isStandalone: true, name: "skyTypeAnchorLinks", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyTypeAnchorLinksPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyTypeAnchorLinks',
+                    pure: false,
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsDeprecationReasonComponent {
+    constructor() {
+        this.message = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsDeprecationReasonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: SkyDocsDeprecationReasonComponent, isStandalone: true, selector: "sky-docs-deprecation-reason", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <p>
+      <sky-status-indicator descriptionType="warning" indicatorType="warning">
+        <strong class="sky-font-emphasized">Deprecated. </strong
+        ><span
+          [innerHTML]="message() | skyDocsMarkdown | skyTypeAnchorLinks"
+        ></span>
+      </sky-status-indicator>
+    </p>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1$1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "pipe", type: SkyTypeAnchorLinksPipe, name: "skyTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsDeprecationReasonComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        SkyDocsMarkdownPipe,
+                        SkyStatusIndicatorModule,
+                        SkyTypeAnchorLinksPipe,
+                    ], selector: 'sky-docs-deprecation-reason', template: `
+    <p>
+      <sky-status-indicator descriptionType="warning" indicatorType="warning">
+        <strong class="sky-font-emphasized">Deprecated. </strong
+        ><span
+          [innerHTML]="message() | skyDocsMarkdown | skyTypeAnchorLinks"
+        ></span>
+      </sky-status-indicator>
+    </p>
+  `, styles: [":host{display:block}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsEscapeHtmlPipe {
+    transform(value) {
+        return value.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsEscapeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsEscapeHtmlPipe, isStandalone: true, name: "skyDocsEscapeHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsEscapeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsEscapeHtml',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsTypeDefinitionDescriptionComponent {
+    constructor() {
+        this.definitionName = input.required();
+        this.description = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: SkyDocsTypeDefinitionDescriptionComponent, isStandalone: true, selector: "sky-docs-type-definition-description", inputs: { definitionName: { classPropertyName: "definitionName", publicName: "definitionName", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      [innerHTML]="
+        description()
+          | skyDocsEscapeHtml
+          | skyDocsMarkdown: 'block'
+          | skyTypeAnchorLinks: { ignore: [definitionName()] }
+      "
+    ></div>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: SkyDocsEscapeHtmlPipe, name: "skyDocsEscapeHtml" }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "pipe", type: SkyTypeAnchorLinksPipe, name: "skyTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionDescriptionComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        SkyDocsEscapeHtmlPipe,
+                        SkyDocsMarkdownPipe,
+                        SkyStatusIndicatorModule,
+                        SkyTypeAnchorLinksPipe,
+                    ], selector: 'sky-docs-type-definition-description', template: `
+    <div
+      [innerHTML]="
+        description()
+          | skyDocsEscapeHtml
+          | skyDocsMarkdown: 'block'
+          | skyTypeAnchorLinks: { ignore: [definitionName()] }
+      "
+    ></div>
+  `, styles: [":host{display:block}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsPropertyTypeDefinitionDefaultValuePipe {
+    transform(prop) {
+        return prop?.defaultValue;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsPropertyTypeDefinitionDefaultValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsPropertyTypeDefinitionDefaultValuePipe, isStandalone: true, name: "skyDocsPropertyDefaultValue" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsPropertyTypeDefinitionDefaultValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsPropertyDefaultValue',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsEnumerationSignaturePipe {
+    transform(definition) {
+        const def = definition;
+        return `enum ${def.name} {
+  ${def.children?.map((c) => `${c.name} = ${c.type},`).join('\n  ')}
+}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsEnumerationSignaturePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsEnumerationSignaturePipe, isStandalone: true, name: "skyDocsEnumerationSignature" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsEnumerationSignaturePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsEnumerationSignature',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsParameterNamePipe {
+    transform(parameter) {
+        return `${parameter.name}${parameter.defaultValue ? ` = ${parameter.defaultValue}` : `${parameter.isOptional ? '?' : ''}: ${parameter.type}`}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsParameterNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsParameterNamePipe, isStandalone: true, name: "skyDocsParameterName" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsParameterNamePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsParameterName',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsFunctionSignaturePipe {
+    #paramPipe = inject(SkyDocsParameterNamePipe);
+    transform(definition) {
+        const def = definition;
+        return (`${def.type.startsWith('Promise') ? 'async ' : ''}function ${def.name}(` +
+            (def.parameters?.map((p) => this.#paramPipe.transform(p)).join(', ') ??
+                '') +
+            `): ${def.type}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsFunctionSignaturePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsFunctionSignaturePipe, isStandalone: true, name: "skyDocsFunctionSignature" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsFunctionSignaturePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsFunctionSignature',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsInterfaceSignaturePipe {
+    transform(definition) {
+        const def = definition;
+        if (def.children) {
+            return `interface ${def.name} {
+  ${def.children
+                ?.map((c) => {
+                return `${c.name}${c.isOptional ? '?' : ''}: ${c.type};`;
+            })
+                .join('\n  ')}
+}`;
+        }
+        return `interface ${def.name} {}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsInterfaceSignaturePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsInterfaceSignaturePipe, isStandalone: true, name: "skyDocsInterfaceSignature" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsInterfaceSignaturePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsInterfaceSignature',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsMethodNamePipe {
+    #paramPipe = inject(SkyDocsParameterNamePipe);
+    transform(method, parent) {
+        let name = '';
+        if (method.isStatic) {
+            name = `${parent.name}.${method.name}`;
+        }
+        else {
+            name = `${method.name}`;
+        }
+        return (name +
+            '(' +
+            (method.parameters?.map((p) => this.#paramPipe.transform(p)).join(', ') ??
+                '') +
+            `): ${method.type}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsMethodNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsMethodNamePipe, isStandalone: true, name: "skyDocsMethodName" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsMethodNamePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsMethodName',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsPropertyNamePipe {
+    transform(property, parent) {
+        switch (property.kind) {
+            case 'enum-member': {
+                return `${parent.name}.${property.name}`;
+            }
+            case 'interface-property': {
+                return `${property.name}?: ${property.type}`;
+            }
+            default: {
+                return `${property.name}: ${property.type}`;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsPropertyNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsPropertyNamePipe, isStandalone: true, name: "skyDocsPropertyName" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsPropertyNamePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsPropertyName',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsTypeAliasSignaturePipe {
+    transform(definition) {
+        const def = definition;
+        return `type ${def.name} = ${def.type}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeAliasSignaturePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeAliasSignaturePipe, isStandalone: true, name: "skyDocsTypeAliasSignature" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeAliasSignaturePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsTypeAliasSignature',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsTypeDefinitionKindToCategoryColorPipe {
+    transform(value) {
+        switch (value) {
+            case 'module':
+                return 'purple';
+            case 'component':
+                return 'orange';
+            case 'directive':
+                return 'yellow';
+            case 'service':
+                return 'teal';
+            case 'pipe':
+            case 'class':
+            case 'function':
+                return 'blue';
+            default:
+                return 'light-blue';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionKindToCategoryColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionKindToCategoryColorPipe, isStandalone: true, name: "skyDocsDefinitionKindToCategoryColor" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionKindToCategoryColorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsDefinitionKindToCategoryColor',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsTypeDefinitionKindToLabelPipe {
+    transform(kind) {
+        switch (kind) {
+            case 'type-alias':
+                return 'Type alias';
+            default:
+                return kind.charAt(0).toLocaleUpperCase() + kind.slice(1);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionKindToLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionKindToLabelPipe, isStandalone: true, name: "skyTypeDefinitionKindToLabel" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionKindToLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyTypeDefinitionKindToLabel',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsTypeDefinitionComponent {
+    constructor() {
+        this.definition = input.required();
+        this.stacked = input(false, { transform: booleanAttribute });
+        this.inputs = computed(() => {
+            const def = this.definition();
+            const inputs = def.children?.filter((c) => c.kind === 'directive-input');
+            return inputs && inputs.length > 0
+                ? inputs
+                    // Sort alphabetically by name.
+                    .sort((a, b) => {
+                    if (a.name < b.name) {
+                        return -1;
+                    }
+                    if (a.name > b.name) {
+                        return 1;
+                    }
+                    return 0;
+                })
+                    // List "required" inputs first.
+                    .sort((a, b) => {
+                    if (a.isRequired && !b.isRequired) {
+                        return -1;
+                    }
+                    if (!a.isRequired && b.isRequired) {
+                        return 1;
+                    }
+                    return 0;
+                })
+                : undefined;
+        });
+        this.methods = computed(() => {
+            const def = this.definition();
+            return def.children?.filter((c) => c.kind === 'class-method');
+        });
+        this.outputs = computed(() => {
+            const def = this.definition();
+            const outputs = def.children?.filter((c) => c.kind === 'directive-output');
+            return outputs && outputs.length > 0 ? outputs : undefined;
+        });
+        this.parameters = computed(() => {
+            const def = this.definition();
+            return isFunctionDefinition(def) ? def.parameters : undefined;
+        });
+        this.pipeName = computed(() => {
+            const def = this.definition();
+            return isPipeDefinition(def) ? def.templateBindingName : undefined;
+        });
+        this.properties = computed(() => {
+            const def = this.definition();
+            const ignore = [
+                'class-method',
+                'directive-input',
+                'directive-output',
+            ];
+            const properties = def.children?.filter((c) => !ignore.includes(c.kind));
+            return properties && properties.length > 0 ? properties : undefined;
+        });
+        this.selector = computed(() => {
+            const def = this.definition();
+            return isDirectiveDefinition(def) ? def.selector : undefined;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyDocsTypeDefinitionComponent, isStandalone: true, selector: "sky-docs-type-definition", inputs: { definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sky-margin-stacked-xxl": "stacked()" } }, providers: [SkyDocsParameterNamePipe], ngImport: i0, template: "@if (definition(); as def) {\n  <sky-docs-heading-anchor\n    class=\"sky-margin-stacked-lg\"\n    headingLevel=\"2\"\n    [anchorId]=\"def.anchorId\"\n    [categoryColor]=\"def.kind | skyDocsDefinitionKindToCategoryColor\"\n    [categoryTemplate]=\"categoryTemplate\"\n    [headingText]=\"def.name\"\n    [strikethrough]=\"def.isDeprecated\"\n  >\n    <ng-template #categoryTemplate>\n      <span class=\"sky-screen-reader-only\">Type: </span>\n      {{ def.kind | skyTypeDefinitionKindToLabel }}\n    </ng-template>\n    @if (def.isPreview) {\n      <sky-docs-category-tag color=\"teal\"> Preview </sky-docs-category-tag>\n    }\n  </sky-docs-heading-anchor>\n  @if (def.kind === 'module' || def.name.endsWith('Harness')) {\n    <p>\n      <code class=\"sky-docs-codespan\"\n        >import {{ '{' }} {{ def.name }} {{ '}' }} from '{{\n          def.packageName\n        }}';</code\n      >\n    </p>\n  }\n  @if (selector(); as selector) {\n    <p>\n      Selector: <code class=\"sky-docs-codespan\">{{ selector }}</code>\n    </p>\n  }\n  @if (pipeName(); as pipeName) {\n    <p>\n      Pipe name: <code class=\"sky-docs-codespan\">{{ pipeName }}</code>\n    </p>\n  }\n  @if (def.deprecationReason) {\n    <sky-docs-deprecation-reason [message]=\"def.deprecationReason\" />\n  }\n  @if (def.description) {\n    <sky-docs-type-definition-description\n      [definitionName]=\"def.name\"\n      [description]=\"def.description\"\n    />\n  }\n  @if (def.codeExample) {\n    <h3>Example</h3>\n    <sky-docs-code-snippet\n      bordered\n      class=\"sky-margin-stacked-lg\"\n      hideToolbar\n      [code]=\"def.codeExample\"\n      [language]=\"def.codeExampleLanguage ?? 'html'\"\n    />\n  }\n  @switch (def.kind) {\n    @case ('function') {\n      <sky-docs-code-snippet\n        bordered\n        class=\"sky-margin-stacked-lg\"\n        hideToolbar\n        language=\"ts\"\n        [code]=\"\n          def\n            | skyDocsFunctionSignature\n            | skyTypeAnchorLinks: { ignore: [def.name] }\n        \"\n      />\n      @let parametersValue = parameters();\n      @if (parametersValue && parametersValue.length > 0) {\n        <h3>Parameters</h3>\n        @for (parameter of parametersValue; track parameter.name) {\n          <h4 class=\"sky-font-body-default\">\n            <code\n              class=\"sky-docs-codespan\"\n              [innerHTML]=\"\n                parameter\n                  | skyDocsParameterName\n                  | skyDocsEscapeHtml\n                  | skyTypeAnchorLinks\n              \"\n            ></code>\n          </h4>\n          @if (parameter.description) {\n            <sky-docs-type-definition-description\n              [definitionName]=\"parameter.name\"\n              [description]=\"parameter.description\"\n            />\n          }\n        }\n      }\n    }\n    @case ('type-alias') {\n      <sky-docs-code-snippet bordered hideToolbar stacked>\n        <code\n          [innerHTML]=\"\n            def\n              | skyDocsTypeAliasSignature\n              | skyDocsCodeHighlight: 'typescript'\n              | skyTypeAnchorLinks: { ignore: [def.name] }\n          \"\n        ></code>\n      </sky-docs-code-snippet>\n    }\n    @default {\n      @if (def.kind === 'interface') {\n        <sky-docs-code-snippet\n          bordered\n          hideToolbar\n          language=\"ts\"\n          stacked\n          [code]=\"def | skyDocsInterfaceSignature\"\n        />\n      }\n      @if (def.kind === 'enumeration') {\n        <sky-docs-code-snippet\n          bordered\n          hideToolbar\n          language=\"ts\"\n          stacked\n          [code]=\"def | skyDocsEnumerationSignature\"\n        />\n      }\n      @if (inputs(); as inputs) {\n        <h3>Inputs</h3>\n        @for (input of inputs; track input.name; let last = $last) {\n          <sky-docs-type-definition-box\n            [stacked]=\"!last\"\n            [deprecated]=\"input.isDeprecated\"\n            [required]=\"input.isRequired\"\n            [headingText]=\"\n              input\n                | skyDocsPropertyName: def\n                | skyDocsEscapeHtml\n                | skyTypeAnchorLinks: { ignore: [def.name] }\n            \"\n          >\n            @if (input.deprecationReason) {\n              <sky-docs-deprecation-reason\n                class=\"sky-margin-stacked-sm\"\n                [message]=\"input.deprecationReason\"\n              />\n            }\n            @if (input.description) {\n              <sky-docs-type-definition-description\n                [definitionName]=\"input.name\"\n                [description]=\"input.description\"\n              />\n            }\n            @let defaultValue = input | skyDocsPropertyDefaultValue;\n            @if (defaultValue) {\n              <p>\n                Default:\n                <code\n                  class=\"sky-docs-codespan\"\n                  [innerHTML]=\"\n                    defaultValue | skyDocsEscapeHtml | skyTypeAnchorLinks\n                  \"\n                ></code>\n              </p>\n            }\n          </sky-docs-type-definition-box>\n        }\n      }\n      @if (outputs(); as outputs) {\n        <h3>Outputs</h3>\n        @for (output of outputs; track output.name; let last = $last) {\n          <sky-docs-type-definition-box\n            [stacked]=\"!last\"\n            [deprecated]=\"output.isDeprecated\"\n            [headingText]=\"\n              output\n                | skyDocsPropertyName: def\n                | skyDocsEscapeHtml\n                | skyTypeAnchorLinks: { ignore: [def.name] }\n            \"\n          >\n            @if (output.deprecationReason) {\n              <sky-docs-deprecation-reason\n                class=\"sky-margin-stacked-sm\"\n                [message]=\"output.deprecationReason\"\n              />\n            }\n            @if (output.description) {\n              <sky-docs-type-definition-description\n                [definitionName]=\"output.name\"\n                [description]=\"output.description\"\n              />\n            }\n          </sky-docs-type-definition-box>\n        }\n      }\n      @if (properties(); as properties) {\n        <h3>Properties</h3>\n        @for (property of properties; track property.name; let last = $last) {\n          <sky-docs-type-definition-box\n            [stacked]=\"!last\"\n            [deprecated]=\"property.isDeprecated\"\n            [headingText]=\"\n              property\n                | skyDocsPropertyName: def\n                | skyDocsEscapeHtml\n                | skyTypeAnchorLinks: { ignore: [def.name] }\n            \"\n          >\n            @if (property.deprecationReason) {\n              <sky-docs-deprecation-reason\n                class=\"sky-margin-stacked-sm\"\n                [message]=\"property.deprecationReason\"\n              />\n            }\n            @if (property.description) {\n              <sky-docs-type-definition-description\n                [definitionName]=\"property.name\"\n                [description]=\"property.description\"\n              />\n            }\n            @let defaultValue = property | skyDocsPropertyDefaultValue;\n            @if (defaultValue) {\n              <p>\n                Default:\n                <code\n                  class=\"sky-docs-codespan\"\n                  [innerHTML]=\"\n                    defaultValue | skyDocsEscapeHtml | skyTypeAnchorLinks\n                  \"\n                ></code>\n              </p>\n            }\n          </sky-docs-type-definition-box>\n        }\n      }\n      @let methodsValue = methods();\n      @if (methodsValue && methodsValue.length > 0) {\n        <h3>Methods</h3>\n        @for (method of methodsValue; track method.name; let last = $last) {\n          <sky-docs-type-definition-box\n            [stacked]=\"!last\"\n            [deprecated]=\"method.isDeprecated\"\n            [headingText]=\"\n              method\n                | skyDocsMethodName: def\n                | skyDocsEscapeHtml\n                | skyTypeAnchorLinks: { ignore: [def.name] }\n            \"\n          >\n            @if (method.deprecationReason) {\n              <sky-docs-deprecation-reason\n                class=\"sky-margin-stacked-sm\"\n                [message]=\"method.deprecationReason\"\n              />\n            }\n            @if (method.description) {\n              <sky-docs-type-definition-description\n                [definitionName]=\"method.name\"\n                [description]=\"method.description\"\n              />\n            }\n            @if (method.parameters) {\n              <h4>Parameters</h4>\n              @for (param of method.parameters; track param.name) {\n                <h5 class=\"sky-font-body-default\">\n                  <code\n                    class=\"sky-docs-codespan\"\n                    [innerHTML]=\"\n                      param\n                        | skyDocsParameterName\n                        | skyDocsEscapeHtml\n                        | skyTypeAnchorLinks\n                    \"\n                  ></code>\n                </h5>\n                @if (param.description) {\n                  <sky-docs-type-definition-description\n                    [definitionName]=\"param.name\"\n                    [description]=\"param.description\"\n                  />\n                }\n              }\n            }\n            <h4>Returns</h4>\n            <p>\n              <code\n                class=\"sky-docs-codespan\"\n                [innerHTML]=\"\n                  method.type | skyDocsEscapeHtml | skyTypeAnchorLinks\n                \"\n              ></code>\n            </p>\n          </sky-docs-type-definition-box>\n        }\n      }\n    }\n  }\n}\n", styles: ["sky-docs-type-definition{display:block}sky-docs-type-definition .sky-docs-type-definition-box-body :first-child{margin-top:0}sky-docs-type-definition .sky-docs-type-definition-box-body :last-child{margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: SkyDocsCategoryTagModule }, { kind: "component", type: SkyDocsCategoryTagComponent, selector: "sky-docs-category-tag", inputs: ["color"] }, { kind: "pipe", type: SkyDocsCodeHighlightPipe, name: "skyDocsCodeHighlight" }, { kind: "ngmodule", type: SkyDocsCodeSnippetModule }, { kind: "component", type: SkyDocsCodeSnippetComponent, selector: "sky-docs-code-snippet[code]", inputs: ["code", "language", "bordered", "hideToolbar", "stacked"] }, { kind: "component", type: SkyDocsCodeSnippetWrapperComponent, selector: "sky-docs-code-snippet:not([code])", inputs: ["bordered", "hideToolbar", "stacked"] }, { kind: "component", type: SkyDocsDeprecationReasonComponent, selector: "sky-docs-deprecation-reason", inputs: ["message"] }, { kind: "pipe", type: SkyDocsEnumerationSignaturePipe, name: "skyDocsEnumerationSignature" }, { kind: "ngmodule", type: SkyDocsHeadingAnchorModule }, { kind: "component", type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingText", "headingTextFormat", "categoryColor", "categoryTemplate", "categoryText", "headingLevel", "strikethrough"] }, { kind: "pipe", type: SkyDocsFunctionSignaturePipe, name: "skyDocsFunctionSignature" }, { kind: "pipe", type: SkyDocsInterfaceSignaturePipe, name: "skyDocsInterfaceSignature" }, { kind: "pipe", type: SkyDocsMethodNamePipe, name: "skyDocsMethodName" }, { kind: "pipe", type: SkyDocsParameterNamePipe, name: "skyDocsParameterName" }, { kind: "pipe", type: SkyDocsPropertyNamePipe, name: "skyDocsPropertyName" }, { kind: "pipe", type: SkyDocsPropertyTypeDefinitionDefaultValuePipe, name: "skyDocsPropertyDefaultValue" }, { kind: "pipe", type: SkyDocsTypeAliasSignaturePipe, name: "skyDocsTypeAliasSignature" }, { kind: "component", type: SkyDocsTypeDefinitionBoxComponent, selector: "sky-docs-type-definition-box", inputs: ["headingText", "deprecated", "required", "stacked"] }, { kind: "component", type: SkyDocsTypeDefinitionDescriptionComponent, selector: "sky-docs-type-definition-description", inputs: ["definitionName", "description"] }, { kind: "pipe", type: SkyDocsTypeDefinitionKindToCategoryColorPipe, name: "skyDocsDefinitionKindToCategoryColor" }, { kind: "pipe", type: SkyDocsTypeDefinitionKindToLabelPipe, name: "skyTypeDefinitionKindToLabel" }, { kind: "pipe", type: SkyDocsEscapeHtmlPipe, name: "skyDocsEscapeHtml" }, { kind: "pipe", type: SkyTypeAnchorLinksPipe, name: "skyTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class.sky-margin-stacked-xxl]': 'stacked()',
+                    }, imports: [
+                        SkyDocsCategoryTagModule,
+                        SkyDocsCodeHighlightPipe,
+                        SkyDocsCodeSnippetModule,
+                        SkyDocsDeprecationReasonComponent,
+                        SkyDocsEnumerationSignaturePipe,
+                        SkyDocsHeadingAnchorModule,
+                        SkyDocsFunctionSignaturePipe,
+                        SkyDocsInterfaceSignaturePipe,
+                        SkyDocsMethodNamePipe,
+                        SkyDocsParameterNamePipe,
+                        SkyDocsPropertyNamePipe,
+                        SkyDocsPropertyTypeDefinitionDefaultValuePipe,
+                        SkyDocsTypeAliasSignaturePipe,
+                        SkyDocsTypeDefinitionBoxComponent,
+                        SkyDocsTypeDefinitionDescriptionComponent,
+                        SkyDocsTypeDefinitionKindToCategoryColorPipe,
+                        SkyDocsTypeDefinitionKindToLabelPipe,
+                        SkyDocsEscapeHtmlPipe,
+                        SkyTypeAnchorLinksPipe,
+                    ], providers: [SkyDocsParameterNamePipe], selector: 'sky-docs-type-definition', template: "@if (definition(); as def) {\n  <sky-docs-heading-anchor\n    class=\"sky-margin-stacked-lg\"\n    headingLevel=\"2\"\n    [anchorId]=\"def.anchorId\"\n    [categoryColor]=\"def.kind | skyDocsDefinitionKindToCategoryColor\"\n    [categoryTemplate]=\"categoryTemplate\"\n    [headingText]=\"def.name\"\n    [strikethrough]=\"def.isDeprecated\"\n  >\n    <ng-template #categoryTemplate>\n      <span class=\"sky-screen-reader-only\">Type: </span>\n      {{ def.kind | skyTypeDefinitionKindToLabel }}\n    </ng-template>\n    @if (def.isPreview) {\n      <sky-docs-category-tag color=\"teal\"> Preview </sky-docs-category-tag>\n    }\n  </sky-docs-heading-anchor>\n  @if (def.kind === 'module' || def.name.endsWith('Harness')) {\n    <p>\n      <code class=\"sky-docs-codespan\"\n        >import {{ '{' }} {{ def.name }} {{ '}' }} from '{{\n          def.packageName\n        }}';</code\n      >\n    </p>\n  }\n  @if (selector(); as selector) {\n    <p>\n      Selector: <code class=\"sky-docs-codespan\">{{ selector }}</code>\n    </p>\n  }\n  @if (pipeName(); as pipeName) {\n    <p>\n      Pipe name: <code class=\"sky-docs-codespan\">{{ pipeName }}</code>\n    </p>\n  }\n  @if (def.deprecationReason) {\n    <sky-docs-deprecation-reason [message]=\"def.deprecationReason\" />\n  }\n  @if (def.description) {\n    <sky-docs-type-definition-description\n      [definitionName]=\"def.name\"\n      [description]=\"def.description\"\n    />\n  }\n  @if (def.codeExample) {\n    <h3>Example</h3>\n    <sky-docs-code-snippet\n      bordered\n      class=\"sky-margin-stacked-lg\"\n      hideToolbar\n      [code]=\"def.codeExample\"\n      [language]=\"def.codeExampleLanguage ?? 'html'\"\n    />\n  }\n  @switch (def.kind) {\n    @case ('function') {\n      <sky-docs-code-snippet\n        bordered\n        class=\"sky-margin-stacked-lg\"\n        hideToolbar\n        language=\"ts\"\n        [code]=\"\n          def\n            | skyDocsFunctionSignature\n            | skyTypeAnchorLinks: { ignore: [def.name] }\n        \"\n      />\n      @let parametersValue = parameters();\n      @if (parametersValue && parametersValue.length > 0) {\n        <h3>Parameters</h3>\n        @for (parameter of parametersValue; track parameter.name) {\n          <h4 class=\"sky-font-body-default\">\n            <code\n              class=\"sky-docs-codespan\"\n              [innerHTML]=\"\n                parameter\n                  | skyDocsParameterName\n                  | skyDocsEscapeHtml\n                  | skyTypeAnchorLinks\n              \"\n            ></code>\n          </h4>\n          @if (parameter.description) {\n            <sky-docs-type-definition-description\n              [definitionName]=\"parameter.name\"\n              [description]=\"parameter.description\"\n            />\n          }\n        }\n      }\n    }\n    @case ('type-alias') {\n      <sky-docs-code-snippet bordered hideToolbar stacked>\n        <code\n          [innerHTML]=\"\n            def\n              | skyDocsTypeAliasSignature\n              | skyDocsCodeHighlight: 'typescript'\n              | skyTypeAnchorLinks: { ignore: [def.name] }\n          \"\n        ></code>\n      </sky-docs-code-snippet>\n    }\n    @default {\n      @if (def.kind === 'interface') {\n        <sky-docs-code-snippet\n          bordered\n          hideToolbar\n          language=\"ts\"\n          stacked\n          [code]=\"def | skyDocsInterfaceSignature\"\n        />\n      }\n      @if (def.kind === 'enumeration') {\n        <sky-docs-code-snippet\n          bordered\n          hideToolbar\n          language=\"ts\"\n          stacked\n          [code]=\"def | skyDocsEnumerationSignature\"\n        />\n      }\n      @if (inputs(); as inputs) {\n        <h3>Inputs</h3>\n        @for (input of inputs; track input.name; let last = $last) {\n          <sky-docs-type-definition-box\n            [stacked]=\"!last\"\n            [deprecated]=\"input.isDeprecated\"\n            [required]=\"input.isRequired\"\n            [headingText]=\"\n              input\n                | skyDocsPropertyName: def\n                | skyDocsEscapeHtml\n                | skyTypeAnchorLinks: { ignore: [def.name] }\n            \"\n          >\n            @if (input.deprecationReason) {\n              <sky-docs-deprecation-reason\n                class=\"sky-margin-stacked-sm\"\n                [message]=\"input.deprecationReason\"\n              />\n            }\n            @if (input.description) {\n              <sky-docs-type-definition-description\n                [definitionName]=\"input.name\"\n                [description]=\"input.description\"\n              />\n            }\n            @let defaultValue = input | skyDocsPropertyDefaultValue;\n            @if (defaultValue) {\n              <p>\n                Default:\n                <code\n                  class=\"sky-docs-codespan\"\n                  [innerHTML]=\"\n                    defaultValue | skyDocsEscapeHtml | skyTypeAnchorLinks\n                  \"\n                ></code>\n              </p>\n            }\n          </sky-docs-type-definition-box>\n        }\n      }\n      @if (outputs(); as outputs) {\n        <h3>Outputs</h3>\n        @for (output of outputs; track output.name; let last = $last) {\n          <sky-docs-type-definition-box\n            [stacked]=\"!last\"\n            [deprecated]=\"output.isDeprecated\"\n            [headingText]=\"\n              output\n                | skyDocsPropertyName: def\n                | skyDocsEscapeHtml\n                | skyTypeAnchorLinks: { ignore: [def.name] }\n            \"\n          >\n            @if (output.deprecationReason) {\n              <sky-docs-deprecation-reason\n                class=\"sky-margin-stacked-sm\"\n                [message]=\"output.deprecationReason\"\n              />\n            }\n            @if (output.description) {\n              <sky-docs-type-definition-description\n                [definitionName]=\"output.name\"\n                [description]=\"output.description\"\n              />\n            }\n          </sky-docs-type-definition-box>\n        }\n      }\n      @if (properties(); as properties) {\n        <h3>Properties</h3>\n        @for (property of properties; track property.name; let last = $last) {\n          <sky-docs-type-definition-box\n            [stacked]=\"!last\"\n            [deprecated]=\"property.isDeprecated\"\n            [headingText]=\"\n              property\n                | skyDocsPropertyName: def\n                | skyDocsEscapeHtml\n                | skyTypeAnchorLinks: { ignore: [def.name] }\n            \"\n          >\n            @if (property.deprecationReason) {\n              <sky-docs-deprecation-reason\n                class=\"sky-margin-stacked-sm\"\n                [message]=\"property.deprecationReason\"\n              />\n            }\n            @if (property.description) {\n              <sky-docs-type-definition-description\n                [definitionName]=\"property.name\"\n                [description]=\"property.description\"\n              />\n            }\n            @let defaultValue = property | skyDocsPropertyDefaultValue;\n            @if (defaultValue) {\n              <p>\n                Default:\n                <code\n                  class=\"sky-docs-codespan\"\n                  [innerHTML]=\"\n                    defaultValue | skyDocsEscapeHtml | skyTypeAnchorLinks\n                  \"\n                ></code>\n              </p>\n            }\n          </sky-docs-type-definition-box>\n        }\n      }\n      @let methodsValue = methods();\n      @if (methodsValue && methodsValue.length > 0) {\n        <h3>Methods</h3>\n        @for (method of methodsValue; track method.name; let last = $last) {\n          <sky-docs-type-definition-box\n            [stacked]=\"!last\"\n            [deprecated]=\"method.isDeprecated\"\n            [headingText]=\"\n              method\n                | skyDocsMethodName: def\n                | skyDocsEscapeHtml\n                | skyTypeAnchorLinks: { ignore: [def.name] }\n            \"\n          >\n            @if (method.deprecationReason) {\n              <sky-docs-deprecation-reason\n                class=\"sky-margin-stacked-sm\"\n                [message]=\"method.deprecationReason\"\n              />\n            }\n            @if (method.description) {\n              <sky-docs-type-definition-description\n                [definitionName]=\"method.name\"\n                [description]=\"method.description\"\n              />\n            }\n            @if (method.parameters) {\n              <h4>Parameters</h4>\n              @for (param of method.parameters; track param.name) {\n                <h5 class=\"sky-font-body-default\">\n                  <code\n                    class=\"sky-docs-codespan\"\n                    [innerHTML]=\"\n                      param\n                        | skyDocsParameterName\n                        | skyDocsEscapeHtml\n                        | skyTypeAnchorLinks\n                    \"\n                  ></code>\n                </h5>\n                @if (param.description) {\n                  <sky-docs-type-definition-description\n                    [definitionName]=\"param.name\"\n                    [description]=\"param.description\"\n                  />\n                }\n              }\n            }\n            <h4>Returns</h4>\n            <p>\n              <code\n                class=\"sky-docs-codespan\"\n                [innerHTML]=\"\n                  method.type | skyDocsEscapeHtml | skyTypeAnchorLinks\n                \"\n              ></code>\n            </p>\n          </sky-docs-type-definition-box>\n        }\n      }\n    }\n  }\n}\n", styles: ["sky-docs-type-definition{display:block}sky-docs-type-definition .sky-docs-type-definition-box-body :first-child{margin-top:0}sky-docs-type-definition .sky-docs-type-definition-box-body :last-child{margin-bottom:0}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsTypeDefinitionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionModule, imports: [SkyDocsTypeDefinitionComponent], exports: [SkyDocsTypeDefinitionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionModule, imports: [SkyDocsTypeDefinitionComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsTypeDefinitionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SkyDocsTypeDefinitionComponent],
+                    exports: [SkyDocsTypeDefinitionComponent],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsShowcaseHostService {
+    get documentationGroup() {
+        return this.#documentationGroupObs;
+    }
+    #documentationGroup = new BehaviorSubject(undefined);
+    #documentationGroupObs = this.#documentationGroup.asObservable();
+    ngOnDestroy() {
+        this.#documentationGroup.complete();
+    }
+    updateGroup(group) {
+        this.#documentationGroup.next(group);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseHostService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseHostService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Content for the "Development" tab.
+ * @internal
+ */
+class SkyDocsShowcaseAreaDevelopmentComponent {
+    constructor() {
+        this.#hostSvc = inject(SkyDocsShowcaseHostService);
+        this.documentationGroup = toSignal(this.#hostSvc.documentationGroup);
+    }
+    #hostSvc;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseAreaDevelopmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyDocsShowcaseAreaDevelopmentComponent, isStandalone: true, selector: "sky-docs-showcase-area-development", host: { classAttribute: "sky-padding-even-xl" }, providers: [SkyDocsHeadingAnchorService], ngImport: i0, template: "<sky-docs-toc-page menuHeadingText=\"Development\">\n  @if (documentationGroup()?.packageInfo; as packageInfo) {\n    <div\n      class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n    >\n      <sky-docs-heading-anchor\n        anchorId=\"installation\"\n        class=\"sky-margin-stacked-lg\"\n        headingText=\"Installation\"\n      />\n      <sky-description-list>\n        <sky-description-list-content>\n          <sky-description-list-term> NPM package </sky-description-list-term>\n          <sky-description-list-description>\n            <code class=\"sky-docs-codespan sky-margin-inline-sm\">{{\n              packageInfo.packageName\n            }}</code>\n            <a [attr.href]=\"packageInfo.registryUrl\">View in NPM</a\n            ><span> | </span\n            ><a [attr.href]=\"packageInfo.repoUrl\">View in GitHub</a>\n          </sky-description-list-description>\n        </sky-description-list-content>\n        <sky-description-list-content\n          helpPopoverContent=\"To use this module, you must install peer dependencies along with its package. Also, after you install the package, you must add the module as an export in your SPA's main module to make exports available to your SPA.\"\n        >\n          <sky-description-list-term>\n            Install with NPM\n          </sky-description-list-term>\n          <sky-description-list-description>\n            <code\n              #installationRef\n              class=\"sky-docs-codespan sky-margin-inline-sm sky-margin-stacked-sm\"\n            >\n              npm install --save-exact {{ packageInfo.packageName }}\n            </code>\n            <button\n              class=\"sky-btn sky-btn-default\"\n              type=\"button\"\n              skyDocsClipboardButton\n              copySuccessMessage=\"Command copied\"\n              [clipboardTarget]=\"installationRef\"\n            >\n              <sky-icon iconName=\"clipboard-multiple\" />\n              Copy\n            </button>\n          </sky-description-list-description>\n        </sky-description-list-content>\n      </sky-description-list>\n    </div>\n  }\n  <div\n    class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n  >\n    <ng-content />\n  </div>\n  @if (documentationGroup()?.publicApi; as definitions) {\n    @for (\n      definition of definitions;\n      track definition.docsId;\n      let last = $last\n    ) {\n      <sky-docs-type-definition [definition]=\"definition\" [stacked]=\"!last\" />\n    }\n  }\n</sky-docs-toc-page>\n", styles: [":host{display:block}.sky-docs-showcase-section{padding-bottom:var(--sky-padding-even-xl)}.sky-docs-showcase-section:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyDocsClipboardModule }, { kind: "directive", type: SkyDocsClipboardButtonDirective, selector: "[skyDocsClipboardButton]", inputs: ["clipboardTarget", "copySuccessMessage"] }, { kind: "ngmodule", type: SkyDocsHeadingAnchorModule }, { kind: "component", type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingText", "headingTextFormat", "categoryColor", "categoryTemplate", "categoryText", "headingLevel", "strikethrough"] }, { kind: "ngmodule", type: SkyDocsTableOfContentsModule }, { kind: "component", type: SkyDocsTableOfContentsPageComponent, selector: "sky-docs-toc-page", inputs: ["menuHeadingText"] }, { kind: "ngmodule", type: SkyDocsTypeDefinitionModule }, { kind: "component", type: SkyDocsTypeDefinitionComponent, selector: "sky-docs-type-definition", inputs: ["definition", "stacked"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseAreaDevelopmentComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'sky-padding-even-xl',
+                    }, imports: [
+                        SkyDescriptionListModule,
+                        SkyDocsClipboardModule,
+                        SkyDocsHeadingAnchorModule,
+                        SkyDocsTableOfContentsModule,
+                        SkyDocsTypeDefinitionModule,
+                        SkyIconModule,
+                    ], providers: [SkyDocsHeadingAnchorService], selector: 'sky-docs-showcase-area-development', template: "<sky-docs-toc-page menuHeadingText=\"Development\">\n  @if (documentationGroup()?.packageInfo; as packageInfo) {\n    <div\n      class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n    >\n      <sky-docs-heading-anchor\n        anchorId=\"installation\"\n        class=\"sky-margin-stacked-lg\"\n        headingText=\"Installation\"\n      />\n      <sky-description-list>\n        <sky-description-list-content>\n          <sky-description-list-term> NPM package </sky-description-list-term>\n          <sky-description-list-description>\n            <code class=\"sky-docs-codespan sky-margin-inline-sm\">{{\n              packageInfo.packageName\n            }}</code>\n            <a [attr.href]=\"packageInfo.registryUrl\">View in NPM</a\n            ><span> | </span\n            ><a [attr.href]=\"packageInfo.repoUrl\">View in GitHub</a>\n          </sky-description-list-description>\n        </sky-description-list-content>\n        <sky-description-list-content\n          helpPopoverContent=\"To use this module, you must install peer dependencies along with its package. Also, after you install the package, you must add the module as an export in your SPA's main module to make exports available to your SPA.\"\n        >\n          <sky-description-list-term>\n            Install with NPM\n          </sky-description-list-term>\n          <sky-description-list-description>\n            <code\n              #installationRef\n              class=\"sky-docs-codespan sky-margin-inline-sm sky-margin-stacked-sm\"\n            >\n              npm install --save-exact {{ packageInfo.packageName }}\n            </code>\n            <button\n              class=\"sky-btn sky-btn-default\"\n              type=\"button\"\n              skyDocsClipboardButton\n              copySuccessMessage=\"Command copied\"\n              [clipboardTarget]=\"installationRef\"\n            >\n              <sky-icon iconName=\"clipboard-multiple\" />\n              Copy\n            </button>\n          </sky-description-list-description>\n        </sky-description-list-content>\n      </sky-description-list>\n    </div>\n  }\n  <div\n    class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n  >\n    <ng-content />\n  </div>\n  @if (documentationGroup()?.publicApi; as definitions) {\n    @for (\n      definition of definitions;\n      track definition.docsId;\n      let last = $last\n    ) {\n      <sky-docs-type-definition [definition]=\"definition\" [stacked]=\"!last\" />\n    }\n  }\n</sky-docs-toc-page>\n", styles: [":host{display:block}.sky-docs-showcase-section{padding-bottom:var(--sky-padding-even-xl)}.sky-docs-showcase-section:empty{display:none}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsCodeExampleNameToComponentTypePipe {
+    #examples = inject(SKY_DOCS_CODE_EXAMPLE_COMPONENT_TYPES);
+    transform(componentName) {
+        return this.#examples[componentName];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeExampleNameToComponentTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeExampleNameToComponentTypePipe, isStandalone: true, name: "skyDocsCodeExampleNameToComponentType" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsCodeExampleNameToComponentTypePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsCodeExampleNameToComponentType',
+                }]
+        }] });
+
+/**
+ * Content for the "Examples" tab.
+ * @internal
+ */
+class SkyDocsShowcaseAreaExamplesComponent {
+    constructor() {
+        this.#hostSvc = inject(SkyDocsShowcaseHostService);
+        this.documentationGroup = toSignal(this.#hostSvc.documentationGroup);
+    }
+    #hostSvc;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseAreaExamplesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyDocsShowcaseAreaExamplesComponent, isStandalone: true, selector: "sky-docs-showcase-area-examples", host: { classAttribute: "sky-padding-even-xl" }, providers: [SkyDocsHeadingAnchorService], ngImport: i0, template: "@if (documentationGroup()?.codeExamples; as codeExamples) {\n  @for (\n    example of codeExamples;\n    track example.componentName;\n    let last = $last\n  ) {\n    <sky-docs-code-example-viewer\n      [componentName]=\"example.componentName\"\n      [componentSelector]=\"example.selector\"\n      [componentType]=\"\n        example.componentName | skyDocsCodeExampleNameToComponentType\n      \"\n      [demoHidden]=\"!!example.demoHidden\"\n      [files]=\"example.files\"\n      [headingText]=\"example.title || 'Example'\"\n      [primaryFile]=\"example.primaryFile\"\n      [stacked]=\"!last\"\n    />\n  }\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: SkyDocsCodeExampleNameToComponentTypePipe, name: "skyDocsCodeExampleNameToComponentType" }, { kind: "ngmodule", type: SkyDocsCodeExampleViewerModule }, { kind: "component", type: SkyDocsCodeExampleViewerComponent, selector: "sky-docs-code-example-viewer", inputs: ["componentName", "componentSelector", "componentType", "files", "headingText", "primaryFile", "demoHidden", "stacked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseAreaExamplesComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'sky-padding-even-xl',
+                    }, imports: [
+                        SkyDocsCodeExampleNameToComponentTypePipe,
+                        SkyDocsCodeExampleViewerModule,
+                    ], providers: [SkyDocsHeadingAnchorService], selector: 'sky-docs-showcase-area-examples', template: "@if (documentationGroup()?.codeExamples; as codeExamples) {\n  @for (\n    example of codeExamples;\n    track example.componentName;\n    let last = $last\n  ) {\n    <sky-docs-code-example-viewer\n      [componentName]=\"example.componentName\"\n      [componentSelector]=\"example.selector\"\n      [componentType]=\"\n        example.componentName | skyDocsCodeExampleNameToComponentType\n      \"\n      [demoHidden]=\"!!example.demoHidden\"\n      [files]=\"example.files\"\n      [headingText]=\"example.title || 'Example'\"\n      [primaryFile]=\"example.primaryFile\"\n      [stacked]=\"!last\"\n    />\n  }\n}\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+/**
+ * Content for the "Overview" tab.
+ * @internal
+ */
+class SkyDocsShowcaseAreaOverviewComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseAreaOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyDocsShowcaseAreaOverviewComponent, isStandalone: true, selector: "sky-docs-showcase-area-overview", host: { classAttribute: "sky-padding-even-xl" }, providers: [SkyDocsHeadingAnchorService], ngImport: i0, template: `
+    <sky-docs-toc-page menuHeadingText="Overview">
+      <ng-content />
+    </sky-docs-toc-page>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyDocsTableOfContentsModule }, { kind: "component", type: SkyDocsTableOfContentsPageComponent, selector: "sky-docs-toc-page", inputs: ["menuHeadingText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseAreaOverviewComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'sky-padding-even-xl',
+                    }, imports: [SkyDocsTableOfContentsModule], providers: [SkyDocsHeadingAnchorService], selector: 'sky-docs-showcase-area-overview', template: `
+    <sky-docs-toc-page menuHeadingText="Overview">
+      <ng-content />
+    </sky-docs-toc-page>
+  `, styles: [":host{display:block}\n"] }]
+        }] });
+
+/**
+ * Content for the "Testing" tab.
+ * @internal
+ */
+class SkyDocsShowcaseAreaTestingComponent {
+    constructor() {
+        this.#hostSvc = inject(SkyDocsShowcaseHostService);
+        this.documentationGroup = toSignal(this.#hostSvc.documentationGroup);
+    }
+    #hostSvc;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseAreaTestingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyDocsShowcaseAreaTestingComponent, isStandalone: true, selector: "sky-docs-showcase-area-testing", host: { classAttribute: "sky-padding-even-xl" }, providers: [SkyDocsHeadingAnchorService], ngImport: i0, template: "<sky-docs-toc-page menuHeadingText=\"Testing\">\n  <div\n    class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n  >\n    <ng-content />\n  </div>\n  @if (documentationGroup()?.testing; as definitions) {\n    @for (\n      definition of definitions;\n      track definition.docsId;\n      let last = $last\n    ) {\n      <sky-docs-type-definition [definition]=\"definition\" [stacked]=\"!last\" />\n    }\n  }\n</sky-docs-toc-page>\n", styles: [":host{display:block}.sky-docs-showcase-section{padding-bottom:var(--sky-padding-even-xl)}.sky-docs-showcase-section:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: SkyDocsTableOfContentsModule }, { kind: "component", type: SkyDocsTableOfContentsPageComponent, selector: "sky-docs-toc-page", inputs: ["menuHeadingText"] }, { kind: "ngmodule", type: SkyDocsTypeDefinitionModule }, { kind: "component", type: SkyDocsTypeDefinitionComponent, selector: "sky-docs-type-definition", inputs: ["definition", "stacked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseAreaTestingComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'sky-padding-even-xl',
+                    }, imports: [SkyDocsTableOfContentsModule, SkyDocsTypeDefinitionModule], providers: [SkyDocsHeadingAnchorService], selector: 'sky-docs-showcase-area-testing', template: "<sky-docs-toc-page menuHeadingText=\"Testing\">\n  <div\n    class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n  >\n    <ng-content />\n  </div>\n  @if (documentationGroup()?.testing; as definitions) {\n    @for (\n      definition of definitions;\n      track definition.docsId;\n      let last = $last\n    ) {\n      <sky-docs-type-definition [definition]=\"definition\" [stacked]=\"!last\" />\n    }\n  }\n</sky-docs-toc-page>\n", styles: [":host{display:block}.sky-docs-showcase-section{padding-bottom:var(--sky-padding-even-xl)}.sky-docs-showcase-section:empty{display:none}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsShowcaseComponent {
+    #anchorIdsSvc;
+    #showcaseHostSvc;
+    constructor() {
+        this.#anchorIdsSvc = inject(SkyDocsTypeDefinitionAnchorIdsService);
+        this.#showcaseHostSvc = inject(SkyDocsShowcaseHostService);
+        this.groupName = input.required();
+        this.packageName = input.required();
+        this.docsGroup = computed(() => {
+            const groupName = this.groupName();
+            const packageName = this.packageName();
+            return getDocumentationGroup(packageName, groupName);
+        });
+        this.developmentContent = contentChild(SkyDocsShowcaseAreaDevelopmentComponent);
+        this.overviewContent = contentChild(SkyDocsShowcaseAreaOverviewComponent);
+        this.testingContent = contentChild(SkyDocsShowcaseAreaTestingComponent);
+        effect(() => {
+            const docsGroup = this.docsGroup();
+            const anchorIds = {};
+            docsGroup.publicApi.forEach((def) => {
+                anchorIds[def.name] = def.anchorId;
+            });
+            docsGroup.testing.forEach((def) => {
+                anchorIds[def.name] = def.anchorId;
+            });
+            this.#anchorIdsSvc.updateAnchorIds(anchorIds);
+            this.#showcaseHostSvc.updateGroup(docsGroup);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyDocsShowcaseComponent, isStandalone: true, selector: "sky-docs-showcase", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: true, transformFunction: null }, packageName: { classPropertyName: "packageName", publicName: "packageName", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            SkyDocsTypeDefinitionAnchorIdsService,
+            SkyDocsShowcaseHostService,
+        ], queries: [{ propertyName: "developmentContent", first: true, predicate: SkyDocsShowcaseAreaDevelopmentComponent, descendants: true, isSignal: true }, { propertyName: "overviewContent", first: true, predicate: SkyDocsShowcaseAreaOverviewComponent, descendants: true, isSignal: true }, { propertyName: "testingContent", first: true, predicate: SkyDocsShowcaseAreaTestingComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<sky-tabset permalinkId=\"docs\">\n  @if (overviewContent()) {\n    <sky-tab tabHeading=\"Design\">\n      <ng-container [ngTemplateOutlet]=\"overviewContentRef\" />\n    </sky-tab>\n  }\n  @if (docsGroup().publicApi.length > 0 || developmentContent()) {\n    <sky-tab tabHeading=\"Development\">\n      @if (developmentContent()) {\n        <ng-container [ngTemplateOutlet]=\"developmentContentRef\" />\n      } @else {\n        <sky-docs-showcase-area-development />\n      }\n    </sky-tab>\n  }\n  @if (docsGroup().testing.length > 0 || testingContent()) {\n    <sky-tab tabHeading=\"Testing\">\n      @if (testingContent()) {\n        <ng-container [ngTemplateOutlet]=\"testingContentRef\" />\n      } @else {\n        <sky-docs-showcase-area-testing />\n      }\n    </sky-tab>\n  }\n  @if (docsGroup().codeExamples.length > 0) {\n    <sky-tab tabHeading=\"Examples\">\n      <sky-docs-showcase-area-examples />\n    </sky-tab>\n  }\n</sky-tabset>\n<ng-template #overviewContentRef>\n  <ng-content select=\"sky-docs-showcase-area-overview\" />\n</ng-template>\n<ng-template #developmentContentRef>\n  <ng-content select=\"sky-docs-showcase-area-development\" />\n</ng-template>\n<ng-template #testingContentRef>\n  <ng-content select=\"sky-docs-showcase-area-testing\" />\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyDocsShowcaseAreaDevelopmentComponent, selector: "sky-docs-showcase-area-development" }, { kind: "component", type: SkyDocsShowcaseAreaExamplesComponent, selector: "sky-docs-showcase-area-examples" }, { kind: "component", type: SkyDocsShowcaseAreaTestingComponent, selector: "sky-docs-showcase-area-testing" }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i6.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i6.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        SkyDocsShowcaseAreaDevelopmentComponent,
+                        SkyDocsShowcaseAreaExamplesComponent,
+                        SkyDocsShowcaseAreaTestingComponent,
+                        SkyTabsModule,
+                    ], providers: [
+                        SkyDocsTypeDefinitionAnchorIdsService,
+                        SkyDocsShowcaseHostService,
+                    ], selector: 'sky-docs-showcase', template: "<sky-tabset permalinkId=\"docs\">\n  @if (overviewContent()) {\n    <sky-tab tabHeading=\"Design\">\n      <ng-container [ngTemplateOutlet]=\"overviewContentRef\" />\n    </sky-tab>\n  }\n  @if (docsGroup().publicApi.length > 0 || developmentContent()) {\n    <sky-tab tabHeading=\"Development\">\n      @if (developmentContent()) {\n        <ng-container [ngTemplateOutlet]=\"developmentContentRef\" />\n      } @else {\n        <sky-docs-showcase-area-development />\n      }\n    </sky-tab>\n  }\n  @if (docsGroup().testing.length > 0 || testingContent()) {\n    <sky-tab tabHeading=\"Testing\">\n      @if (testingContent()) {\n        <ng-container [ngTemplateOutlet]=\"testingContentRef\" />\n      } @else {\n        <sky-docs-showcase-area-testing />\n      }\n    </sky-tab>\n  }\n  @if (docsGroup().codeExamples.length > 0) {\n    <sky-tab tabHeading=\"Examples\">\n      <sky-docs-showcase-area-examples />\n    </sky-tab>\n  }\n</sky-tabset>\n<ng-template #overviewContentRef>\n  <ng-content select=\"sky-docs-showcase-area-overview\" />\n</ng-template>\n<ng-template #developmentContentRef>\n  <ng-content select=\"sky-docs-showcase-area-development\" />\n</ng-template>\n<ng-template #testingContentRef>\n  <ng-content select=\"sky-docs-showcase-area-testing\" />\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @internal
+ */
+class SkyDocsShowcaseModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseModule, imports: [SkyDocsShowcaseComponent,
+            SkyDocsShowcaseAreaDevelopmentComponent,
+            SkyDocsShowcaseAreaExamplesComponent,
+            SkyDocsShowcaseAreaOverviewComponent,
+            SkyDocsShowcaseAreaTestingComponent], exports: [SkyDocsShowcaseComponent,
+            SkyDocsShowcaseAreaDevelopmentComponent,
+            SkyDocsShowcaseAreaOverviewComponent,
+            SkyDocsShowcaseAreaTestingComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseModule, imports: [SkyDocsShowcaseComponent,
+            SkyDocsShowcaseAreaDevelopmentComponent,
+            SkyDocsShowcaseAreaExamplesComponent,
+            SkyDocsShowcaseAreaTestingComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeExampleViewerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsShowcaseModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [SkyCodeExampleViewerComponent],
-                    exports: [SkyCodeExampleViewerComponent],
+                    imports: [
+                        SkyDocsShowcaseComponent,
+                        SkyDocsShowcaseAreaDevelopmentComponent,
+                        SkyDocsShowcaseAreaExamplesComponent,
+                        SkyDocsShowcaseAreaOverviewComponent,
+                        SkyDocsShowcaseAreaTestingComponent,
+                    ],
+                    exports: [
+                        SkyDocsShowcaseComponent,
+                        SkyDocsShowcaseAreaDevelopmentComponent,
+                        SkyDocsShowcaseAreaOverviewComponent,
+                        SkyDocsShowcaseAreaTestingComponent,
+                    ],
                 }]
         }] });
 
@@ -544,5 +1864,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SKY_CODE_SNIPPET_LANGUAGES, SkyCodeExampleViewerModule, SkyCodeSnippetModule, SkyCodeSnippetComponent as λ1, SkyCodeExampleViewerComponent as λ2 };
+export { SKY_DOCS_CODE_HIGHLIGHT_LANGUAGES, SkyDocsCategoryTagModule, SkyDocsClipboardModule, SkyDocsClipboardService, SkyDocsCodeExampleViewerModule, SkyDocsCodeHighlightPipe, SkyDocsCodeHighlightService, SkyDocsCodeSnippetModule, SkyDocsHeadingAnchorModule, SkyDocsHeadingAnchorService, SkyDocsShowcaseModule, SkyDocsTableOfContentsModule, SkyDocsTypeDefinitionAnchorIdsService, SkyDocsTypeDefinitionModule, provideSkyDocsCodeExampleTypes, SkyDocsCodeSnippetComponent as λ1, SkyDocsShowcaseAreaOverviewComponent as λ10, SkyDocsShowcaseAreaTestingComponent as λ11, SkyDocsShowcaseComponent as λ12, SkyDocsCodeExampleViewerComponent as λ2, SkyDocsClipboardButtonDirective as λ3, SkyDocsCategoryTagComponent as λ4, SkyDocsHeadingAnchorComponent as λ5, SkyDocsTableOfContentsPageComponent as λ6, SkyDocsCodeSnippetWrapperComponent as λ7, SkyDocsTypeDefinitionComponent as λ8, SkyDocsShowcaseAreaDevelopmentComponent as λ9 };
 //# sourceMappingURL=skyux-docs-tools.mjs.map