@skyux/docs-tools 12.0.0-alpha.9 → 12.0.0-beta.1

package/css/styles.css

@@ -17,6 +17,7 @@ code.sky-docs-codespan {
     var(--sky-background-color-info-light) 25%,
     transparent
   );
+  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05);
 }
 
 a {

package/fesm2022/skyux-docs-tools.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, NgModule, inject, Injectable, Directive, booleanAttribute, ViewEncapsulation, computed, signal, Pipe, ElementRef, numberAttribute, InjectionToken, makeEnvironmentProviders, DestroyRef, ChangeDetectorRef, contentChild, effect } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, NgModule, inject, Injectable, Directive, booleanAttribute, ViewEncapsulation, computed, signal, makeEnvironmentProviders, Pipe, ElementRef, numberAttribute, InjectionToken, DestroyRef, ChangeDetectorRef, contentChild, effect } from '@angular/core';
 import * as i5 from '@skyux/core';
-import { SkyAppWindowRef, SkyIdModule, SkyTrimModule, SkyScrollableHostService, SkyMediaQueryService } from '@skyux/core';
+import { SkyAppWindowRef, SkyIdModule, SkyHelpService, SkyTrimModule, SkyScrollableHostService, SkyMediaQueryService } from '@skyux/core';
 import { SkyToastService } from '@skyux/toast';
 import { KeyValuePipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@skyux/icon';
@@ -38,14 +38,14 @@ class SkyDocsCategoryTagComponent {
         this.color = input.required();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCategoryTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", 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);box-shadow:inset 0 -1px #0000000d;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.2.1", 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"] }]
+                    }, 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);box-shadow:inset 0 -1px #0000000d;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"] }]
         }] });
 
 /**
@@ -224,7 +224,7 @@ class SkyDocsCodeSnippetToolbarComponent {
         '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 }); }
+  `, 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", "iconSize"] }, { kind: "ngmodule", type: SkyDocsToolsResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCodeSnippetToolbarComponent, decorators: [{
             type: Component,
@@ -430,7 +430,7 @@ class SkyDocsStackBlitzService {
             "outputPath": "dist/example-app",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": ["zone.js", "@skyux/packages/polyfills"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/assets"],
@@ -495,7 +495,11 @@ class SkyDocsStackBlitzService {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": ["zone.js", "zone.js/testing"],
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing",
+              "@skyux/packages/polyfills"
+            ],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
@@ -706,8 +710,8 @@ context.keys().map(context);
         }, { openFile: config.primaryFile });
     }
     async #fetchTemplateFileContents(file) {
-        const filePath = `assets/stack-blitz/${file}`;
-        const url = this.#assetsSvc?.getUrl(filePath) ?? filePath;
+        const filePath = `stack-blitz/${file}`;
+        const url = this.#assetsSvc?.getUrl(filePath) ?? `assets/${filePath}`;
         if (!this.#http) {
             return undefined;
         }
@@ -759,7 +763,7 @@ class SkyDocsCodeExampleViewerComponent {
         this.isCodeVisible.set(!isCodeVisible);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCodeExampleViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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"], exportAs: ["ngComponentOutlet"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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"], exportAs: ["ngComponentOutlet"] }, { 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", "iconSize"] }, { 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.2.1", ngImport: i0, type: SkyDocsCodeExampleViewerComponent, decorators: [{
             type: Component,
@@ -777,19 +781,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     ], 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 ExampleHelpService extends SkyHelpService {
+    openHelp(args) {
+        console.log(`Help opened with key '${args?.helpKey}'.`);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    updateHelp(args) {
+        /* */
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExampleHelpService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExampleHelpService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExampleHelpService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Provide a mock help service for the code example viewer so that examples
+ * with help keys work properly. (StackBlitz pulls in its own version of the
+ * help service; this is needed for this live demos on the docs site.)
+ */
+function provideExampleHelpService() {
+    return makeEnvironmentProviders([
+        { provide: SkyHelpService, useClass: ExampleHelpService },
+    ]);
+}
 /**
  * @internal
  */
 class SkyDocsCodeExampleViewerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCodeExampleViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCodeExampleViewerModule, imports: [SkyDocsCodeExampleViewerComponent], exports: [SkyDocsCodeExampleViewerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCodeExampleViewerModule, imports: [SkyDocsCodeExampleViewerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCodeExampleViewerModule, providers: [provideExampleHelpService()], imports: [SkyDocsCodeExampleViewerComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCodeExampleViewerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SkyDocsCodeExampleViewerComponent],
                     exports: [SkyDocsCodeExampleViewerComponent],
+                    providers: [provideExampleHelpService()],
                 }]
         }] });
 
@@ -905,19 +938,17 @@ class SkyDocsHeadingAnchorComponent {
         this.#anchorSvc?.unregister(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsHeadingAnchorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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 } }, 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  <span class=\"sky-docs-heading-anchor-position\" [attr.id]=\"anchorId()\"></span>\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:var(--sky-margin-stacked-xl);margin-top:-1em}.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:-22px}.sky-docs-heading-anchor-position{position:relative;top:calc(-1 * (var(--sky-viewport-top, 0) + var(--sky-margin-stacked-lg)))}\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", "iconSize"] }, { kind: "ngmodule", type: SkyTrimModule }, { kind: "directive", type: i5.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsHeadingAnchorComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.id]': 'anchorId()',
-                    }, imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                    ], 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  <span class=\"sky-docs-heading-anchor-position\" [attr.id]=\"anchorId()\"></span>\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:var(--sky-margin-stacked-xl);margin-top:-1em}.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:-22px}.sky-docs-heading-anchor-position{position:relative;top:calc(-1 * (var(--sky-viewport-top, 0) + var(--sky-margin-stacked-lg)))}\n"] }]
         }] });
 
 /**
@@ -1050,13 +1081,13 @@ class SkyDocsTableOfContentsPageComponent {
             : 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsTableOfContentsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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:var(--sky-viewport-top);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.2.1", 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"] }]
+                    }, 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:var(--sky-viewport-top);flex-shrink:1;max-width:40%;min-width:20%}\n"] }]
         }] });
 
 /**
@@ -1167,6 +1198,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
  */
 class SkyDocsTypeDefinitionAnchorIdsService {
     #anchorIds = new Map();
+    /**
+     * @param anchorIds A collection of anchorIds, keyed by the definition's name.
+     */
     updateAnchorIds(anchorIds) {
         this.#anchorIds = new Map(Object.entries(anchorIds));
     }
@@ -1704,20 +1738,18 @@ class SkyDocsShowcaseAreaDevelopmentComponent {
     }
     #hostSvc;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseAreaDevelopmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsShowcaseAreaDevelopmentComponent, isStandalone: true, selector: "sky-docs-showcase-area-development", 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;padding-top:var(--sky-padding-even-xl)}.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", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseAreaDevelopmentComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'sky-padding-even-xl',
-                    }, imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                    ], 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;padding-top:var(--sky-padding-even-xl)}.sky-docs-showcase-section{padding-bottom:var(--sky-padding-even-xl)}.sky-docs-showcase-section:empty{display:none}\n"] }]
         }] });
 
 /**
@@ -1749,39 +1781,40 @@ class SkyDocsShowcaseAreaExamplesComponent {
     }
     #hostSvc;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseAreaExamplesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsShowcaseAreaExamplesComponent, isStandalone: true, selector: "sky-docs-showcase-area-examples", 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;padding-top:var(--sky-padding-even-xl)}\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.2.1", ngImport: i0, type: SkyDocsShowcaseAreaExamplesComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'sky-padding-even-xl',
-                    }, imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                    ], 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;padding-top:var(--sky-padding-even-xl)}\n"] }]
         }] });
 
+var showcaseAreaExamples_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SkyDocsShowcaseAreaExamplesComponent: SkyDocsShowcaseAreaExamplesComponent
+});
+
 /**
  * Content for the "Overview" tab.
  * @internal
  */
 class SkyDocsShowcaseAreaOverviewComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseAreaOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyDocsShowcaseAreaOverviewComponent, isStandalone: true, selector: "sky-docs-showcase-area-overview", host: { classAttribute: "sky-padding-even-xl" }, providers: [SkyDocsHeadingAnchorService], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyDocsShowcaseAreaOverviewComponent, isStandalone: true, selector: "sky-docs-showcase-area-overview", 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 }); }
+  `, isInline: true, styles: [":host{display:block;padding-top:var(--sky-padding-even-xl)}\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.2.1", 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: `
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+  `, styles: [":host{display:block;padding-top:var(--sky-padding-even-xl)}\n"] }]
         }] });
 
 /**
@@ -1795,13 +1828,11 @@ class SkyDocsShowcaseAreaTestingComponent {
     }
     #hostSvc;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseAreaTestingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsShowcaseAreaTestingComponent, isStandalone: true, selector: "sky-docs-showcase-area-testing", 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    <p class=\"sky-margin-stacked-xl\">\n      SKY UX test harnesses are built upon Angular CDK component harnesses. For\n      more information see the\n      <a href=\"https://material.angular.io/cdk/test-harnesses/overview\"\n        >Angular CDK component harness documentation</a\n      >.\n    </p>\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;padding-top:var(--sky-padding-even-xl)}.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.2.1", 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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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    <p class=\"sky-margin-stacked-xl\">\n      SKY UX test harnesses are built upon Angular CDK component harnesses. For\n      more information see the\n      <a href=\"https://material.angular.io/cdk/test-harnesses/overview\"\n        >Angular CDK component harness documentation</a\n      >.\n    </p>\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;padding-top:var(--sky-padding-even-xl)}.sky-docs-showcase-section{padding-bottom:var(--sky-padding-even-xl)}.sky-docs-showcase-section:empty{display:none}\n"] }]
         }] });
 
 /**
@@ -1818,7 +1849,13 @@ class SkyDocsShowcaseComponent {
         this.docsGroup = computed(() => {
             const groupName = this.groupName();
             const packageName = this.packageName();
-            return getDocumentationGroup(packageName, groupName);
+            try {
+                const group = getDocumentationGroup(packageName, groupName);
+                return group;
+            }
+            catch {
+                return;
+            }
         });
         this.developmentContent = contentChild(SkyDocsShowcaseAreaDevelopmentComponent);
         this.overviewContent = contentChild(SkyDocsShowcaseAreaOverviewComponent);
@@ -1826,10 +1863,10 @@ class SkyDocsShowcaseComponent {
         effect(() => {
             const docsGroup = this.docsGroup();
             const anchorIds = {};
-            docsGroup.publicApi.forEach((def) => {
+            docsGroup?.publicApi.forEach((def) => {
                 anchorIds[def.name] = def.anchorId;
             });
-            docsGroup.testing.forEach((def) => {
+            docsGroup?.testing.forEach((def) => {
                 anchorIds[def.name] = def.anchorId;
             });
             this.#anchorIdsSvc.updateAnchorIds(anchorIds);
@@ -1840,21 +1877,21 @@ class SkyDocsShowcaseComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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 }); }
+        ], 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: "@let group = docsGroup();\n<sky-tabset permalinkId=\"docs\">\n  @if (overviewContent()) {\n    <sky-tab tabHeading=\"Design\">\n      <ng-container [ngTemplateOutlet]=\"overviewContentRef\" />\n    </sky-tab>\n  }\n  @if ((group && group.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 ((group && group.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 (group && group.codeExamples.length > 0) {\n    <sky-tab tabHeading=\"Examples\">\n      @defer (on viewport) {\n        <sky-docs-showcase-area-examples />\n      } @placeholder {\n        <p>Loading...</p>\n      }\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: 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, deferBlockDependencies: [() => [Promise.resolve().then(function () { return showcaseAreaExamples_component; }).then(m => m.SkyDocsShowcaseAreaExamplesComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", 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: () => [] });
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return showcaseAreaExamples_component; }).then(m => m.SkyDocsShowcaseAreaExamplesComponent)], resolveMetadata: SkyDocsShowcaseAreaExamplesComponent => ({ decorators: [{
+                type: Component,
+                args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                            NgTemplateOutlet,
+                            SkyDocsShowcaseAreaDevelopmentComponent,
+                            SkyDocsShowcaseAreaExamplesComponent,
+                            SkyDocsShowcaseAreaTestingComponent,
+                            SkyTabsModule,
+                        ], providers: [
+                            SkyDocsTypeDefinitionAnchorIdsService,
+                            SkyDocsShowcaseHostService,
+                        ], selector: 'sky-docs-showcase', template: "@let group = docsGroup();\n<sky-tabset permalinkId=\"docs\">\n  @if (overviewContent()) {\n    <sky-tab tabHeading=\"Design\">\n      <ng-container [ngTemplateOutlet]=\"overviewContentRef\" />\n    </sky-tab>\n  }\n  @if ((group && group.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 ((group && group.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 (group && group.codeExamples.length > 0) {\n    <sky-tab tabHeading=\"Examples\">\n      @defer (on viewport) {\n        <sky-docs-showcase-area-examples />\n      } @placeholder {\n        <p>Loading...</p>\n      }\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: () => [], propDecorators: null }) });
 
 /**
  * @internal