@ng-doc/ui-kit 22.0.0-beta.2 → 22.1.0

package/fesm2022/ng-doc-ui-kit-services-overlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-services-overlay.mjs","sources":["../../../../libs/ui-kit/services/overlay/overlay.service.ts","../../../../libs/ui-kit/services/overlay/ng-doc-ui-kit-services-overlay.ts"],"sourcesContent":["import {\n  FlexibleConnectedPositionStrategy,\n  GlobalPositionStrategy,\n  Overlay,\n  OverlayRef,\n  ScrollStrategyOptions,\n} from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { ComponentRef, inject, Injectable, Injector, NgZone, StaticProvider } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { asArray } from '@ng-doc/core/helpers/as-array';\nimport { NgDocOverlayRef } from '@ng-doc/ui-kit/classes';\nimport { NgDocOverlayConfig, NgDocOverlayContainer } from '@ng-doc/ui-kit/interfaces';\nimport { NgDocContent, NgDocOverlayOrigin, NgDocOverlayPosition } from '@ng-doc/ui-kit/types';\nimport { NgDocOverlayUtils } from '@ng-doc/ui-kit/utils';\nimport { PolymorpheusComponent } from '@taiga-ui/polymorpheus';\nimport { take } from 'rxjs/operators';\n\n@Injectable({ providedIn: 'root' })\nexport class NgDocOverlayService {\n  private overlay = inject(Overlay);\n  private ngZone = inject(NgZone);\n  private injector = inject(Injector);\n  private router = inject(Router);\n\n  constructor() {}\n\n  open<R>(\n    content: NgDocContent,\n    config: NgDocOverlayConfig,\n    providers: StaticProvider[] = [],\n  ): NgDocOverlayRef<R> {\n    const overlayRef: OverlayRef = this.createOverlay(config);\n    return this.attachTooltipContainer(content, overlayRef, config, providers);\n  }\n\n  private attachTooltipContainer<R>(\n    content: NgDocContent,\n    overlay: OverlayRef,\n    config: NgDocOverlayConfig,\n    providers: StaticProvider[],\n  ): NgDocOverlayRef<R> {\n    const containerPortal: ComponentPortal<NgDocOverlayContainer> = new ComponentPortal(\n      config.overlayContainer,\n      config.viewContainerRef,\n      config.viewContainerRef?.injector,\n    );\n    const containerRef: ComponentRef<NgDocOverlayContainer> = overlay.attach(containerPortal);\n    const overlayRef: NgDocOverlayRef<R> = new NgDocOverlayRef<R>(\n      overlay,\n      config,\n      containerRef.instance,\n      this.ngZone,\n      this.router,\n    );\n\n    if (content instanceof PolymorpheusComponent) {\n      content = new PolymorpheusComponent(\n        content.component,\n        this.createInjector(overlayRef, providers, config.viewContainerRef?.injector),\n      );\n    }\n\n    containerRef.setInput('config', config);\n    containerRef.setInput('content', content);\n    containerRef.instance.markForCheck();\n\n    return overlayRef;\n  }\n\n  private createOverlay(config: NgDocOverlayConfig): OverlayRef {\n    const overlayRef: OverlayRef = this.overlay.create(config);\n    overlayRef\n      .detachments()\n      .pipe(take(1))\n      .subscribe(() => {\n        overlayRef.hasAttached() && overlayRef.detach();\n      });\n    return overlayRef;\n  }\n\n  connectedPositionStrategy(\n    origin: NgDocOverlayOrigin,\n    positions: NgDocOverlayPosition | NgDocOverlayPosition[],\n  ): FlexibleConnectedPositionStrategy {\n    return this.overlay\n      .position()\n      .flexibleConnectedTo(origin)\n      .withPositions(NgDocOverlayUtils.toConnectedPositions(asArray(positions)))\n      .withPush(true);\n  }\n\n  globalPositionStrategy(): GlobalPositionStrategy {\n    return this.overlay.position().global();\n  }\n\n  scrollStrategy(): ScrollStrategyOptions {\n    return this.overlay.scrollStrategies;\n  }\n\n  private createInjector<R>(\n    overlayRef: NgDocOverlayRef<R>,\n    providers: StaticProvider[],\n    injector?: Injector,\n  ): Injector {\n    return Injector.create({\n      providers: [\n        ...providers,\n        {\n          provide: NgDocOverlayRef,\n          useValue: overlayRef,\n        },\n      ],\n      parent: injector || this.injector,\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;MAmBa,mBAAmB,CAAA;AAM9B,IAAA,WAAA,GAAA;AALQ,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AACzB,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AACvB,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC3B,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAEhB;AAEf,IAAA,IAAI,CACF,OAAqB,EACrB,MAA0B,EAC1B,YAA8B,EAAE,EAAA;QAEhC,MAAM,UAAU,GAAe,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;AACzD,QAAA,OAAO,IAAI,CAAC,sBAAsB,CAAC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,CAAC;IAC5E;AAEQ,IAAA,sBAAsB,CAC5B,OAAqB,EACrB,OAAmB,EACnB,MAA0B,EAC1B,SAA2B,EAAA;AAE3B,QAAA,MAAM,eAAe,GAA2C,IAAI,eAAe,CACjF,MAAM,CAAC,gBAAgB,EACvB,MAAM,CAAC,gBAAgB,EACvB,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAClC;QACD,MAAM,YAAY,GAAwC,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC;QACzF,MAAM,UAAU,GAAuB,IAAI,eAAe,CACxD,OAAO,EACP,MAAM,EACN,YAAY,CAAC,QAAQ,EACrB,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,MAAM,CACZ;AAED,QAAA,IAAI,OAAO,YAAY,qBAAqB,EAAE;YAC5C,OAAO,GAAG,IAAI,qBAAqB,CACjC,OAAO,CAAC,SAAS,EACjB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAC9E;QACH;AAEA,QAAA,YAAY,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;AACvC,QAAA,YAAY,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;AACzC,QAAA,YAAY,CAAC,QAAQ,CAAC,YAAY,EAAE;AAEpC,QAAA,OAAO,UAAU;IACnB;AAEQ,IAAA,aAAa,CAAC,MAA0B,EAAA;QAC9C,MAAM,UAAU,GAAe,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;QAC1D;AACG,aAAA,WAAW;AACX,aAAA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;aACZ,SAAS,CAAC,MAAK;YACd,UAAU,CAAC,WAAW,EAAE,IAAI,UAAU,CAAC,MAAM,EAAE;AACjD,QAAA,CAAC,CAAC;AACJ,QAAA,OAAO,UAAU;IACnB;IAEA,yBAAyB,CACvB,MAA0B,EAC1B,SAAwD,EAAA;QAExD,OAAO,IAAI,CAAC;AACT,aAAA,QAAQ;aACR,mBAAmB,CAAC,MAAM;aAC1B,aAAa,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;aACxE,QAAQ,CAAC,IAAI,CAAC;IACnB;IAEA,sBAAsB,GAAA;QACpB,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE;IACzC;IAEA,cAAc,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,gBAAgB;IACtC;AAEQ,IAAA,cAAc,CACpB,UAA8B,EAC9B,SAA2B,EAC3B,QAAmB,EAAA;QAEnB,OAAO,QAAQ,CAAC,MAAM,CAAC;AACrB,YAAA,SAAS,EAAE;AACT,gBAAA,GAAG,SAAS;AACZ,gBAAA;AACE,oBAAA,OAAO,EAAE,eAAe;AACxB,oBAAA,QAAQ,EAAE,UAAU;AACrB,iBAAA;AACF,aAAA;AACD,YAAA,MAAM,EAAE,QAAQ,IAAI,IAAI,CAAC,QAAQ;AAClC,SAAA,CAAC;IACJ;8GAhGW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,cADN,MAAM,EAAA,CAAA,CAAA;;2FACnB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAD/B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;AClBlC;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-services-overlay.mjs","sources":["../../../../libs/ui-kit/services/overlay/overlay.service.ts","../../../../libs/ui-kit/services/overlay/ng-doc-ui-kit-services-overlay.ts"],"sourcesContent":["import {\n  FlexibleConnectedPositionStrategy,\n  GlobalPositionStrategy,\n  Overlay,\n  OverlayRef,\n  ScrollStrategyOptions,\n} from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { ComponentRef, inject, Injector, Service, StaticProvider } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { asArray } from '@ng-doc/core/helpers/as-array';\nimport { NgDocOverlayRef } from '@ng-doc/ui-kit/classes';\nimport { NgDocOverlayConfig, NgDocOverlayContainer } from '@ng-doc/ui-kit/interfaces';\nimport { NgDocContent, NgDocOverlayOrigin, NgDocOverlayPosition } from '@ng-doc/ui-kit/types';\nimport { NgDocOverlayUtils } from '@ng-doc/ui-kit/utils';\nimport { PolymorpheusComponent } from '@taiga-ui/polymorpheus';\nimport { take } from 'rxjs/operators';\n\n/**\n * Opens NgDoc overlays: a container component inside a CDK overlay.\n *\n * It is provided in the root injector. A component can also list it in its `providers`, so the\n * overlays it opens use that component's injector (the dropdown does).\n */\n@Service()\nexport class NgDocOverlayService {\n  private overlay = inject(Overlay);\n  private injector = inject(Injector);\n  private router = inject(Router);\n\n  /**\n   * Opens an overlay.\n   * @param content - What the container renders: a string, a template or a component.\n   * @param config - The overlay configuration, including the container component.\n   * @param providers - Extra providers for a component content; `NgDocOverlayRef` is always added.\n   * @returns The handle of the opened overlay.\n   */\n  open<R>(\n    content: NgDocContent,\n    config: NgDocOverlayConfig,\n    providers: StaticProvider[] = [],\n  ): NgDocOverlayRef<R> {\n    const overlayRef: OverlayRef = this.createOverlay(config);\n    return this.attachTooltipContainer(content, overlayRef, config, providers);\n  }\n\n  private attachTooltipContainer<R>(\n    content: NgDocContent,\n    overlay: OverlayRef,\n    config: NgDocOverlayConfig,\n    providers: StaticProvider[],\n  ): NgDocOverlayRef<R> {\n    const containerPortal: ComponentPortal<NgDocOverlayContainer> = new ComponentPortal(\n      config.overlayContainer,\n      config.viewContainerRef,\n      config.viewContainerRef?.injector,\n    );\n    const containerRef: ComponentRef<NgDocOverlayContainer> = overlay.attach(containerPortal);\n    const overlayRef: NgDocOverlayRef<R> = new NgDocOverlayRef<R>(\n      overlay,\n      config,\n      containerRef.instance,\n      this.injector,\n      this.router,\n    );\n\n    if (content instanceof PolymorpheusComponent) {\n      content = new PolymorpheusComponent(\n        content.component,\n        this.createInjector(overlayRef, providers, config.viewContainerRef?.injector),\n      );\n    }\n\n    containerRef.setInput('config', config);\n    containerRef.setInput('content', content);\n    containerRef.instance.markForCheck();\n\n    return overlayRef;\n  }\n\n  private createOverlay(config: NgDocOverlayConfig): OverlayRef {\n    const overlayRef: OverlayRef = this.overlay.create(config);\n    overlayRef\n      .detachments()\n      .pipe(take(1))\n      .subscribe(() => {\n        overlayRef.hasAttached() && overlayRef.detach();\n      });\n    return overlayRef;\n  }\n\n  connectedPositionStrategy(\n    origin: NgDocOverlayOrigin,\n    positions: NgDocOverlayPosition | NgDocOverlayPosition[],\n  ): FlexibleConnectedPositionStrategy {\n    return this.overlay\n      .position()\n      .flexibleConnectedTo(origin)\n      .withPositions(NgDocOverlayUtils.toConnectedPositions(asArray(positions)))\n      .withPush(true);\n  }\n\n  globalPositionStrategy(): GlobalPositionStrategy {\n    return this.overlay.position().global();\n  }\n\n  scrollStrategy(): ScrollStrategyOptions {\n    return this.overlay.scrollStrategies;\n  }\n\n  private createInjector<R>(\n    overlayRef: NgDocOverlayRef<R>,\n    providers: StaticProvider[],\n    injector?: Injector,\n  ): Injector {\n    return Injector.create({\n      providers: [\n        ...providers,\n        {\n          provide: NgDocOverlayRef,\n          useValue: overlayRef,\n        },\n      ],\n      parent: injector || this.injector,\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-doc-ui-kit-services-scroll.mjs

@@ -1,12 +1,13 @@
-import { ViewportRuler, BlockScrollStrategy } from '@angular/cdk/overlay';
+import { BlockScrollStrategy, ViewportRuler } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, Injectable } from '@angular/core';
+import { inject, DOCUMENT, Service } from '@angular/core';
 
+/**
+ * Blocks and unblocks the scrolling of the page, for example while a sidebar covers it.
+ */
 class NgDocScrollService {
     constructor() {
-        this.document = inject(DOCUMENT);
-        this.viewportRuler = inject(ViewportRuler);
-        this.scrollStrategy = new BlockScrollStrategy(this.viewportRuler, this.document);
+        this.scrollStrategy = new BlockScrollStrategy(inject(ViewportRuler), inject(DOCUMENT));
     }
     /**
      * Block global scroll
@@ -20,15 +21,12 @@ class NgDocScrollService {
     unblock() {
         this.scrollStrategy.disable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocScrollService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocScrollService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
+    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.2.1", ngImport: i0, type: NgDocScrollService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocScrollService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocScrollService, decorators: [{
+            type: Service
+        }] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-services-scroll.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-services-scroll.mjs","sources":["../../../../libs/ui-kit/services/scroll/scroll.service.ts","../../../../libs/ui-kit/services/scroll/ng-doc-ui-kit-services-scroll.ts"],"sourcesContent":["import { BlockScrollStrategy, ViewportRuler } from '@angular/cdk/overlay';\nimport { DOCUMENT, inject, Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class NgDocScrollService {\n  private readonly document = inject<Document>(DOCUMENT);\n  private readonly viewportRuler = inject(ViewportRuler);\n\n  private readonly scrollStrategy: BlockScrollStrategy;\n\n  /** Inserted by Angular inject() migration for backwards compatibility */\n  constructor(...args: unknown[]);\n\n  constructor() {\n    this.scrollStrategy = new BlockScrollStrategy(this.viewportRuler, this.document);\n  }\n\n  /**\n   * Block global scroll\n   */\n  block(): void {\n    this.scrollStrategy.enable();\n  }\n\n  /**\n   * Unblock global scroll\n   */\n  unblock(): void {\n    this.scrollStrategy.disable();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAMa,kBAAkB,CAAA;AAS7B,IAAA,WAAA,GAAA;AARiB,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAW,QAAQ,CAAC;AACrC,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;AAQpD,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,mBAAmB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC;IAClF;AAEA;;AAEG;IACH,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;IAC9B;AAEA;;AAEG;IACH,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;IAC/B;8GAzBW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,cAFjB,MAAM,EAAA,CAAA,CAAA;;2FAEP,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAH9B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;ACLD;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-services-scroll.mjs","sources":["../../../../libs/ui-kit/services/scroll/scroll.service.ts","../../../../libs/ui-kit/services/scroll/ng-doc-ui-kit-services-scroll.ts"],"sourcesContent":["import { BlockScrollStrategy, ViewportRuler } from '@angular/cdk/overlay';\nimport { DOCUMENT, inject, Service } from '@angular/core';\n\n/**\n * Blocks and unblocks the scrolling of the page, for example while a sidebar covers it.\n */\n@Service()\nexport class NgDocScrollService {\n  private readonly scrollStrategy: BlockScrollStrategy = new BlockScrollStrategy(\n    inject(ViewportRuler),\n    inject<Document>(DOCUMENT),\n  );\n\n  /**\n   * Block global scroll\n   */\n  block(): void {\n    this.scrollStrategy.enable();\n  }\n\n  /**\n   * Unblock global scroll\n   */\n  unblock(): void {\n    this.scrollStrategy.disable();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;AAEG;MAEU,kBAAkB,CAAA;AAD/B,IAAA,WAAA,GAAA;AAEmB,QAAA,IAAA,CAAA,cAAc,GAAwB,IAAI,mBAAmB,CAC5E,MAAM,CAAC,aAAa,CAAC,EACrB,MAAM,CAAW,QAAQ,CAAC,CAC3B;AAeF,IAAA;AAbC;;AAEG;IACH,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;IAC9B;AAEA;;AAEG;IACH,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;IAC/B;8GAlBW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,OAAA,EAAA,CAAA,CAAA;+GAAlB,kBAAkB,EAAA,CAAA,CAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAD9B;;;ACND;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-tokens.mjs

@@ -1,11 +1,37 @@
-import { InjectionToken, inject, PLATFORM_ID } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
+import { InjectionToken, inject, PLATFORM_ID, DOCUMENT } from '@angular/core';
+import { isPlatformBrowser, APP_BASE_HREF } from '@angular/common';
 
 const NG_DOC_ASSETS_PATH = new InjectionToken('NG_DOC_ASSETS_PATH');
 
+function withTrailingSeparator(value) {
+    const base = value?.trim().split(/[?#]/, 1)[0] ?? '';
+    return base ? (base.endsWith('/') ? base : `${base}/`) : '/';
+}
+function documentBasePath(document) {
+    if (!document)
+        return null;
+    const value = document.querySelector('base[href]')?.getAttribute('href');
+    if (value === null || value === undefined)
+        return null;
+    const documentUrl = new URL(document.URL);
+    const resolved = new URL(value, documentUrl);
+    const directory = new URL('.', resolved);
+    return directory.origin === documentUrl.origin
+        ? directory.pathname
+        : `${directory.origin}${directory.pathname}`;
+}
+function requestBasePath() {
+    if (isPlatformBrowser(inject(PLATFORM_ID)))
+        return '';
+    // Browser-relative asset requests follow the document base, so SSR must prefer the same source.
+    // APP_BASE_HREF remains the fallback for hosts that configure routing without a DOM base.
+    const configured = inject(APP_BASE_HREF, { optional: true });
+    const documentBase = documentBasePath(inject(DOCUMENT, { optional: true }));
+    return withTrailingSeparator(documentBase ?? configured);
+}
 const NG_REQUEST_BASE_PATH = new InjectionToken('NG_REQUEST_BASE_PATH', {
     providedIn: 'root',
-    factory: () => (isPlatformBrowser(inject(PLATFORM_ID)) ? '' : '/'),
+    factory: requestBasePath,
 });
 
 const NG_DOC_COMPONENT_CONTEXT = new InjectionToken('NG_DOC_COMPONENT_CONTEXT');

package/fesm2022/ng-doc-ui-kit-tokens.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-tokens.mjs","sources":["../../../../libs/ui-kit/tokens/assets-path.ts","../../../../libs/ui-kit/tokens/base-path.ts","../../../../libs/ui-kit/tokens/component-context.ts","../../../../libs/ui-kit/tokens/custom-icons-path.ts","../../../../libs/ui-kit/tokens/ng-doc-ui-kit-tokens.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const NG_DOC_ASSETS_PATH: InjectionToken<string> = new InjectionToken('NG_DOC_ASSETS_PATH');\n","import { isPlatformBrowser } from '@angular/common';\nimport { inject, InjectionToken, PLATFORM_ID } from '@angular/core';\n\nexport const NG_REQUEST_BASE_PATH: InjectionToken<string> = new InjectionToken(\n  'NG_REQUEST_BASE_PATH',\n  {\n    providedIn: 'root',\n    factory: () => (isPlatformBrowser(inject(PLATFORM_ID)) ? '' : '/'),\n  },\n);\n","import { InjectionToken } from '@angular/core';\n\nexport const NG_DOC_COMPONENT_CONTEXT: InjectionToken<unknown> = new InjectionToken<unknown>(\n\t'NG_DOC_COMPONENT_CONTEXT',\n);\n","import { InjectionToken } from '@angular/core';\n\nexport const NG_DOC_CUSTOM_ICONS_PATH: InjectionToken<string> = new InjectionToken<string>(\n\t'NG_DOC_CUSTOM_ICONS_PATH',\n);\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAEa,kBAAkB,GAA2B,IAAI,cAAc,CAAC,oBAAoB;;MCCpF,oBAAoB,GAA2B,IAAI,cAAc,CAC5E,sBAAsB,EACtB;AACE,IAAA,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,OAAO,iBAAiB,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC;AACnE,CAAA;;MCNU,wBAAwB,GAA4B,IAAI,cAAc,CAClF,0BAA0B;;MCDd,wBAAwB,GAA2B,IAAI,cAAc,CACjF,0BAA0B;;ACH3B;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-tokens.mjs","sources":["../../../../libs/ui-kit/tokens/assets-path.ts","../../../../libs/ui-kit/tokens/base-path.ts","../../../../libs/ui-kit/tokens/component-context.ts","../../../../libs/ui-kit/tokens/custom-icons-path.ts","../../../../libs/ui-kit/tokens/ng-doc-ui-kit-tokens.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const NG_DOC_ASSETS_PATH: InjectionToken<string> = new InjectionToken('NG_DOC_ASSETS_PATH');\n","import { APP_BASE_HREF, isPlatformBrowser } from '@angular/common';\nimport { DOCUMENT, inject, InjectionToken, PLATFORM_ID } from '@angular/core';\n\nfunction withTrailingSeparator(value: string | null | undefined): string {\n  const base = value?.trim().split(/[?#]/, 1)[0] ?? '';\n\n  return base ? (base.endsWith('/') ? base : `${base}/`) : '/';\n}\n\nfunction documentBasePath(document: Document | null): string | null {\n  if (!document) return null;\n  const value = document.querySelector('base[href]')?.getAttribute('href');\n  if (value === null || value === undefined) return null;\n\n  const documentUrl = new URL(document.URL);\n  const resolved = new URL(value, documentUrl);\n  const directory = new URL('.', resolved);\n\n  return directory.origin === documentUrl.origin\n    ? directory.pathname\n    : `${directory.origin}${directory.pathname}`;\n}\n\nfunction requestBasePath(): string {\n  if (isPlatformBrowser(inject(PLATFORM_ID))) return '';\n\n  // Browser-relative asset requests follow the document base, so SSR must prefer the same source.\n  // APP_BASE_HREF remains the fallback for hosts that configure routing without a DOM base.\n  const configured = inject(APP_BASE_HREF, { optional: true });\n  const documentBase = documentBasePath(inject(DOCUMENT, { optional: true }));\n\n  return withTrailingSeparator(documentBase ?? configured);\n}\n\nexport const NG_REQUEST_BASE_PATH: InjectionToken<string> = new InjectionToken(\n  'NG_REQUEST_BASE_PATH',\n  {\n    providedIn: 'root',\n    factory: requestBasePath,\n  },\n);\n","import { InjectionToken } from '@angular/core';\n\nexport const NG_DOC_COMPONENT_CONTEXT: InjectionToken<unknown> = new InjectionToken<unknown>(\n\t'NG_DOC_COMPONENT_CONTEXT',\n);\n","import { InjectionToken } from '@angular/core';\n\nexport const NG_DOC_CUSTOM_ICONS_PATH: InjectionToken<string> = new InjectionToken<string>(\n\t'NG_DOC_CUSTOM_ICONS_PATH',\n);\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAEa,kBAAkB,GAA2B,IAAI,cAAc,CAAC,oBAAoB;;ACCjG,SAAS,qBAAqB,CAAC,KAAgC,EAAA;AAC7D,IAAA,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;IAEpD,OAAO,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAA,EAAG,IAAI,CAAA,CAAA,CAAG,IAAI,GAAG;AAC9D;AAEA,SAAS,gBAAgB,CAAC,QAAyB,EAAA;AACjD,IAAA,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,IAAI;AAC1B,IAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC;AACxE,IAAA,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS;AAAE,QAAA,OAAO,IAAI;IAEtD,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC;IACzC,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,KAAK,EAAE,WAAW,CAAC;IAC5C,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC;AAExC,IAAA,OAAO,SAAS,CAAC,MAAM,KAAK,WAAW,CAAC;UACpC,SAAS,CAAC;UACV,CAAA,EAAG,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,QAAQ,CAAA,CAAE;AAChD;AAEA,SAAS,eAAe,GAAA;AACtB,IAAA,IAAI,iBAAiB,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;AAAE,QAAA,OAAO,EAAE;;;AAIrD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAC5D,IAAA,MAAM,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;AAE3E,IAAA,OAAO,qBAAqB,CAAC,YAAY,IAAI,UAAU,CAAC;AAC1D;MAEa,oBAAoB,GAA2B,IAAI,cAAc,CAC5E,sBAAsB,EACtB;AACE,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,eAAe;AACzB,CAAA;;MCrCU,wBAAwB,GAA4B,IAAI,cAAc,CAClF,0BAA0B;;MCDd,wBAAwB,GAA2B,IAAI,cAAc,CACjF,0BAA0B;;ACH3B;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,26 @@
 {
   "name": "@ng-doc/ui-kit",
-  "version": "22.0.0-beta.2",
+  "version": "22.1.0",
+  "description": "The UI components NgDoc sites are built from.",
+  "keywords": [
+    "angular",
+    "documentation",
+    "generator",
+    "builder",
+    "guides",
+    "api",
+    "demo",
+    "ng-doc"
+  ],
+  "homepage": "https://ng-doc.com",
+  "bugs": {
+    "url": "https://github.com/ng-doc/ng-doc/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ng-doc/ng-doc.git"
+  },
+  "license": "MIT",
   "peerDependencies": {
     "@angular/common": ">=22.0.0 < 23.0.0",
     "@angular/core": ">=22.0.0 < 23.0.0",
@@ -11,7 +31,7 @@
   },
   "dependencies": {
     "tslib": "^2.6.2",
-    "@ng-doc/core": "22.0.0-beta.2"
+    "@ng-doc/core": "22.1.0"
   },
   "publishConfig": {
     "access": "public"
@@ -226,10 +246,6 @@
       "types": "./types/ng-doc-ui-kit-constants.d.ts",
       "default": "./fesm2022/ng-doc-ui-kit-constants.mjs"
     },
-    "./decorators": {
-      "types": "./types/ng-doc-ui-kit-decorators.d.ts",
-      "default": "./fesm2022/ng-doc-ui-kit-decorators.mjs"
-    },
     "./directives": {
       "types": "./types/ng-doc-ui-kit-directives.d.ts",
       "default": "./fesm2022/ng-doc-ui-kit-directives.mjs"
@@ -266,6 +282,10 @@
       "types": "./types/ng-doc-ui-kit-directives-focusable.d.ts",
       "default": "./fesm2022/ng-doc-ui-kit-directives-focusable.mjs"
     },
+    "./directives/fullscreen": {
+      "types": "./types/ng-doc-ui-kit-directives-fullscreen.d.ts",
+      "default": "./fesm2022/ng-doc-ui-kit-directives-fullscreen.mjs"
+    },
     "./directives/hotkey": {
       "types": "./types/ng-doc-ui-kit-directives-hotkey.d.ts",
       "default": "./fesm2022/ng-doc-ui-kit-directives-hotkey.mjs"
@@ -278,10 +298,6 @@
       "types": "./types/ng-doc-ui-kit-directives-input-string.d.ts",
       "default": "./fesm2022/ng-doc-ui-kit-directives-input-string.mjs"
     },
-    "./directives/let": {
-      "types": "./types/ng-doc-ui-kit-directives-let.d.ts",
-      "default": "./fesm2022/ng-doc-ui-kit-directives-let.mjs"
-    },
     "./directives/radio-group": {
       "types": "./types/ng-doc-ui-kit-directives-radio-group.d.ts",
       "default": "./fesm2022/ng-doc-ui-kit-directives-radio-group.mjs"
@@ -377,24 +393,5 @@
   },
   "sideEffects": false,
   "type": "module",
-  "keywords": [
-    "angular",
-    "documentation",
-    "generator",
-    "builder",
-    "guides",
-    "api",
-    "demo",
-    "ng-doc"
-  ],
-  "author": "Skoropad Aleksandr <alex@skoropad.dev>",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ng-doc/ng-doc.git"
-  },
-  "bugs": {
-    "url": "https://github.com/ng-doc/ng-doc/issues"
-  },
-  "homepage": "https://ng-doc.com",
-  "license": "MIT"
+  "author": "Skoropad Aleksandr <alex@skoropad.dev>"
 }

package/styles/main.css

@@ -1,60 +1,297 @@
 @import '@angular/cdk/overlay-prebuilt.css';
+:root {
+  --ng-doc-palette-neutral-0: #ffffff;
+  --ng-doc-palette-neutral-25: #fbfcfe;
+  --ng-doc-palette-neutral-50: #f4f7fc;
+  --ng-doc-palette-neutral-100: #eef0f5;
+  --ng-doc-palette-neutral-150: #e7e9ee;
+  --ng-doc-palette-neutral-200: #dfe1e6;
+  --ng-doc-palette-neutral-300: #cfd1d6;
+  --ng-doc-palette-neutral-400: #a9abaf;
+  --ng-doc-palette-neutral-450: #96989d;
+  --ng-doc-palette-neutral-500: #84868a;
+  --ng-doc-palette-neutral-600: #67696d;
+  --ng-doc-palette-neutral-700: #515256;
+  --ng-doc-palette-neutral-750: #46484c;
+  --ng-doc-palette-neutral-800: #3b3d41;
+  --ng-doc-palette-neutral-850: #2c2e31;
+  --ng-doc-palette-neutral-875: #26282c;
+  --ng-doc-palette-neutral-900: #212326;
+  --ng-doc-palette-neutral-950: #18191d;
+  --ng-doc-palette-neutral-1000: #0d0e11;
+  --ng-doc-palette-brand-50: #f4f8fe;
+  --ng-doc-palette-brand-100: #e6effe;
+  --ng-doc-palette-brand-200: #cddffe;
+  --ng-doc-palette-brand-300: #aac8fe;
+  --ng-doc-palette-brand-400: #81adfe;
+  --ng-doc-palette-brand-500: #4c89ff;
+  --ng-doc-palette-brand-600: #1d60e2;
+  --ng-doc-palette-brand-700: #134dbe;
+  --ng-doc-palette-brand-800: #0f3d96;
+  --ng-doc-palette-brand-900: #0c2d6f;
+  --ng-doc-palette-brand-950: #081e4b;
+  --ng-doc-palette-violet-50: #f8f6fe;
+  --ng-doc-palette-violet-100: #f1ebff;
+  --ng-doc-palette-violet-200: #e3d6ff;
+  --ng-doc-palette-violet-300: #d1b9fe;
+  --ng-doc-palette-violet-400: #bc98fa;
+  --ng-doc-palette-violet-500: #a072e6;
+  --ng-doc-palette-violet-600: #7e4ac2;
+  --ng-doc-palette-violet-700: #683ba3;
+  --ng-doc-palette-violet-800: #512e80;
+  --ng-doc-palette-violet-900: #3c225f;
+  --ng-doc-palette-violet-950: #281740;
+  --ng-doc-palette-green-50: #f1faf3;
+  --ng-doc-palette-green-100: #e1f4e5;
+  --ng-doc-palette-green-200: #c3e9cc;
+  --ng-doc-palette-green-300: #9cd8ab;
+  --ng-doc-palette-green-400: #6fc488;
+  --ng-doc-palette-green-500: #39a761;
+  --ng-doc-palette-green-600: #058141;
+  --ng-doc-palette-green-700: #036a34;
+  --ng-doc-palette-green-800: #015428;
+  --ng-doc-palette-green-900: #003e1c;
+  --ng-doc-palette-green-950: #012a11;
+  --ng-doc-palette-amber-50: #fff6ec;
+  --ng-doc-palette-amber-100: #fdebd8;
+  --ng-doc-palette-amber-200: #fad7b1;
+  --ng-doc-palette-amber-300: #f1bc7f;
+  --ng-doc-palette-amber-400: #e49d41;
+  --ng-doc-palette-amber-500: #c47d04;
+  --ng-doc-palette-amber-600: #955e05;
+  --ng-doc-palette-amber-700: #7b4c01;
+  --ng-doc-palette-amber-800: #613c01;
+  --ng-doc-palette-amber-900: #492b00;
+  --ng-doc-palette-amber-950: #321c00;
+  --ng-doc-palette-red-50: #fef5f4;
+  --ng-doc-palette-red-100: #ffe8e6;
+  --ng-doc-palette-red-200: #ffd1cd;
+  --ng-doc-palette-red-300: #ffb0a9;
+  --ng-doc-palette-red-400: #ff847d;
+  --ng-doc-palette-red-500: #e85854;
+  --ng-doc-palette-red-600: #c2272d;
+  --ng-doc-palette-red-700: #a21921;
+  --ng-doc-palette-red-800: #80161a;
+  --ng-doc-palette-red-900: #5f1113;
+  --ng-doc-palette-red-950: #400c0c;
+  --ng-doc-space-1: calc(var(--ng-doc-base-gutter) * 0.5);
+  --ng-doc-space-2: var(--ng-doc-base-gutter);
+  --ng-doc-space-3: calc(var(--ng-doc-base-gutter) * 1.5);
+  --ng-doc-space-4: calc(var(--ng-doc-base-gutter) * 2);
+  --ng-doc-space-5: calc(var(--ng-doc-base-gutter) * 2.5);
+  --ng-doc-space-6: calc(var(--ng-doc-base-gutter) * 3);
+  --ng-doc-space-8: calc(var(--ng-doc-base-gutter) * 4);
+  --ng-doc-space-10: calc(var(--ng-doc-base-gutter) * 5);
+  --ng-doc-space-12: calc(var(--ng-doc-base-gutter) * 6);
+  --ng-doc-space-16: calc(var(--ng-doc-base-gutter) * 8);
+  --ng-doc-space-20: calc(var(--ng-doc-base-gutter) * 10);
+  --ng-doc-space-24: calc(var(--ng-doc-base-gutter) * 12);
+  --ng-doc-radius-xs: 4px;
+  --ng-doc-radius-sm: 6px;
+  --ng-doc-radius-md: 8px;
+  --ng-doc-radius-lg: 12px;
+  --ng-doc-radius-xl: 16px;
+  --ng-doc-radius-full: 999px;
+  --ng-doc-text-xs-size: 12px;
+  --ng-doc-text-xs-line-height: 16px;
+  --ng-doc-text-sm-size: 14px;
+  --ng-doc-text-sm-line-height: 22px;
+  --ng-doc-text-md-size: 16px;
+  --ng-doc-text-md-line-height: 26px;
+  --ng-doc-text-lg-size: 18px;
+  --ng-doc-text-lg-line-height: 28px;
+  --ng-doc-h1-font-size: 34px;
+  --ng-doc-h1-line-height: 42px;
+  --ng-doc-h2-font-size: 26px;
+  --ng-doc-h2-line-height: 34px;
+  --ng-doc-h3-font-size: 20px;
+  --ng-doc-h3-line-height: 28px;
+  --ng-doc-h4-font-size: 17px;
+  --ng-doc-h4-line-height: 26px;
+  --ng-doc-h5-font-size: 15px;
+  --ng-doc-h5-line-height: 24px;
+  --ng-doc-h6-font-size: 14px;
+  --ng-doc-h6-line-height: 22px;
+  --ng-doc-heading-letter-spacing: -0.015em;
+  --ng-doc-display-letter-spacing: -0.025em;
+  --ng-doc-easing: cubic-bezier(0.2, 0, 0, 1);
+  --ng-doc-content-max-width: 760px;
+  --ng-doc-h2-margin-top: var(--ng-doc-space-12);
+  --ng-doc-h3-margin-top: var(--ng-doc-space-8);
+  --ng-doc-heading-margin-bottom: var(--ng-doc-space-3);
+  --ng-doc-h2-border: none;
+  --ng-doc-h2-padding-top: 0px;
+}
+
+:root {
+  --ng-doc-hue-brand: var(--ng-doc-primary);
+  --ng-doc-hue-violet: var(--ng-doc-palette-violet-600);
+  --ng-doc-hue-green: var(--ng-doc-success);
+  --ng-doc-hue-amber: var(--ng-doc-warning);
+  --ng-doc-hue-red: var(--ng-doc-alert);
+  --ng-doc-hue-neutral: var(--ng-doc-base-8);
+  --ng-doc-on-hue: var(--ng-doc-white);
+  --ng-doc-mix-soft: 10%;
+  --ng-doc-mix-chip: 12%;
+  --ng-doc-mix-border: 28%;
+  --ng-doc-mix-strong: 64%;
+  --ng-doc-hue-brand-chip: color-mix(
+    in oklab,
+    var(--ng-doc-hue-brand) var(--ng-doc-mix-chip),
+    var(--ng-doc-background)
+  );
+  --ng-doc-hue-brand-strong: color-mix(
+    in oklab,
+    var(--ng-doc-hue-brand) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-hue-violet-chip: color-mix(
+    in oklab,
+    var(--ng-doc-hue-violet) var(--ng-doc-mix-chip),
+    var(--ng-doc-background)
+  );
+  --ng-doc-hue-violet-strong: color-mix(
+    in oklab,
+    var(--ng-doc-hue-violet) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-info-soft: color-mix(
+    in oklab,
+    var(--ng-doc-info) var(--ng-doc-mix-soft),
+    var(--ng-doc-background)
+  );
+  --ng-doc-info-border: color-mix(
+    in oklab,
+    var(--ng-doc-info) var(--ng-doc-mix-border),
+    var(--ng-doc-background)
+  );
+  --ng-doc-info-strong: color-mix(
+    in oklab,
+    var(--ng-doc-info) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-success-soft: color-mix(
+    in oklab,
+    var(--ng-doc-success) var(--ng-doc-mix-soft),
+    var(--ng-doc-background)
+  );
+  --ng-doc-success-border: color-mix(
+    in oklab,
+    var(--ng-doc-success) var(--ng-doc-mix-border),
+    var(--ng-doc-background)
+  );
+  --ng-doc-success-strong: color-mix(
+    in oklab,
+    var(--ng-doc-success) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-warning-soft: color-mix(
+    in oklab,
+    var(--ng-doc-warning) var(--ng-doc-mix-soft),
+    var(--ng-doc-background)
+  );
+  --ng-doc-warning-border: color-mix(
+    in oklab,
+    var(--ng-doc-warning) var(--ng-doc-mix-border),
+    var(--ng-doc-background)
+  );
+  --ng-doc-warning-strong: color-mix(
+    in oklab,
+    var(--ng-doc-warning) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-alert-soft: color-mix(
+    in oklab,
+    var(--ng-doc-alert) var(--ng-doc-mix-soft),
+    var(--ng-doc-background)
+  );
+  --ng-doc-alert-border: color-mix(
+    in oklab,
+    var(--ng-doc-alert) var(--ng-doc-mix-border),
+    var(--ng-doc-background)
+  );
+  --ng-doc-alert-strong: color-mix(
+    in oklab,
+    var(--ng-doc-alert) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-primary-soft: color-mix(
+    in oklab,
+    var(--ng-doc-primary) var(--ng-doc-mix-soft),
+    var(--ng-doc-background)
+  );
+  --ng-doc-primary-strong: color-mix(
+    in oklab,
+    var(--ng-doc-primary) var(--ng-doc-mix-strong),
+    var(--ng-doc-heading-color)
+  );
+  --ng-doc-shadow-xs: 0 1px 2px var(--ng-doc-shadow-color);
+  --ng-doc-shadow-sm: 0 1px 3px var(--ng-doc-shadow-color),
+    0 1px 2px -1px var(--ng-doc-shadow-color);
+  --ng-doc-shadow-md: 0 8px 24px -6px var(--ng-doc-shadow-color),
+    0 2px 6px -2px var(--ng-doc-shadow-color);
+  --ng-doc-shadow-lg: 0 24px 48px -12px var(--ng-doc-shadow-color),
+    0 4px 12px -4px var(--ng-doc-shadow-color);
+  --ng-doc-focus-ring-color: var(--ng-doc-palette-brand-500);
+  --ng-doc-focus-ring: 0 0 0 2px var(--ng-doc-background), 0 0 0 4px var(--ng-doc-focus-ring-color);
+}
+
 :root {
   --ng-doc-base-gutter: 8px;
-  --ng-doc-transition: 0.2s;
-  --ng-doc-text-selection: rgba(21, 88, 214, 0.15);
+  --ng-doc-transition: 0.18s;
+  --ng-doc-text-selection: color-mix(in srgb, var(--ng-doc-primary) 18%, transparent);
   --ng-doc-white: #fff;
   --ng-doc-black: #000;
-  --ng-doc-base-rgb: 0 0 0;
-  --ng-doc-base-0: var(--ng-doc-white);
-  --ng-doc-base-1: #f6f6f6;
-  --ng-doc-base-2: #ebebeb;
-  --ng-doc-base-3: #dedede;
-  --ng-doc-base-4: #d1d1d1;
-  --ng-doc-base-5: #b8b8b8;
-  --ng-doc-base-6: #ababab;
-  --ng-doc-base-7: #9e9e9e;
-  --ng-doc-base-8: #919191;
-  --ng-doc-base-9: #858585;
-  --ng-doc-base-10: #6e6e6e;
-  --ng-doc-primary: #1558d6;
+  --ng-doc-base-rgb: 13 14 17;
+  --ng-doc-base-0: var(--ng-doc-palette-neutral-0);
+  --ng-doc-base-1: var(--ng-doc-palette-neutral-50);
+  --ng-doc-base-2: var(--ng-doc-palette-neutral-100);
+  --ng-doc-base-3: var(--ng-doc-palette-neutral-200);
+  --ng-doc-base-4: var(--ng-doc-palette-neutral-300);
+  --ng-doc-base-5: var(--ng-doc-palette-neutral-400);
+  --ng-doc-base-6: var(--ng-doc-palette-neutral-450);
+  --ng-doc-base-7: var(--ng-doc-palette-neutral-500);
+  --ng-doc-base-8: var(--ng-doc-palette-neutral-600);
+  --ng-doc-base-9: var(--ng-doc-palette-neutral-700);
+  --ng-doc-base-10: var(--ng-doc-palette-neutral-800);
+  --ng-doc-primary: var(--ng-doc-palette-brand-600);
   --ng-doc-primary-text: var(--ng-doc-white);
-  --ng-doc-alert: #ff5959;
+  --ng-doc-alert: var(--ng-doc-palette-red-600);
   --ng-doc-alert-text: var(--ng-doc-white);
-  --ng-doc-warning: #ff9f1a;
+  --ng-doc-warning: var(--ng-doc-palette-amber-600);
   --ng-doc-warning-text: var(--ng-doc-white);
-  --ng-doc-info: #3f68b5;
+  --ng-doc-info: var(--ng-doc-palette-brand-600);
   --ng-doc-info-text: var(--ng-doc-white);
-  --ng-doc-success: #00b74a;
+  --ng-doc-success: var(--ng-doc-palette-green-600);
   --ng-doc-success-text: var(--ng-doc-white);
   --ng-doc-background: var(--ng-doc-base-0);
-  --ng-doc-hover-background: rgba(110, 110, 110, 0.09);
+  --ng-doc-hover-background: color-mix(in srgb, var(--ng-doc-base-10) 6%, transparent);
   --ng-doc-border-size: 1px;
   --ng-doc-border-color: var(--ng-doc-base-3);
   --ng-doc-border-hover-color: var(--ng-doc-base-5);
-  --ng-doc-shadow-color: rgba(0, 0, 0, 0.15);
+  --ng-doc-shadow-color: rgb(16 24 40 / 0.1);
   --ng-doc-font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
   --ng-doc-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     'Liberation Mono', 'Courier New', monospace;
   --ng-doc-heading-font-family: var(--ng-doc-font-system);
-  --ng-doc-heading-color: #111111;
+  --ng-doc-heading-color: var(--ng-doc-palette-neutral-950);
   --ng-doc-font-family: var(--ng-doc-font-system);
-  --ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 2);
-  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 3);
+  --ng-doc-font-size: var(--ng-doc-text-md-size);
+  --ng-doc-line-height: var(--ng-doc-text-md-line-height);
   --ng-doc-font-weight: 400;
   --ng-doc-code-font: var(--ng-doc-font-system-mono);
   --ng-doc-code-font-size: 14px;
-  --ng-doc-code-line-height: 20px;
+  --ng-doc-code-line-height: 22px;
   --ng-doc-code-font-weight: 400;
-  --ng-doc-text: rgb(78 78 78);
+  --ng-doc-text: var(--ng-doc-palette-neutral-800);
   --ng-doc-text-muted: var(--ng-doc-base-8);
-  --ng-doc-mark-background: rgba(255, 222, 0, 0.3);
+  --ng-doc-mark-background: color-mix(in srgb, #f5c542 45%, transparent);
   --ng-doc-link-color: var(--ng-doc-primary);
-  --ng-doc-inline-code-background: var(--ng-doc-base-9);
-  --ng-doc-inline-code-color: var(--ng-doc-text);
-  --ng-doc-button-background: trasparent;
+  --ng-doc-inline-code-background: var(--ng-doc-base-8);
+  --ng-doc-inline-code-color: var(--ng-doc-heading-color);
+  --ng-doc-button-background: transparent;
   --ng-doc-button-background-opacity: 0;
   --ng-doc-button-color: var(--ng-doc-text);
   --ng-doc-button-hover-background: var(--ng-doc-base-2);
@@ -64,7 +301,7 @@
   --ng-doc-floated-border-color: transparent;
   --ng-doc-floated-border: 2px solid var(--ng-doc-floated-border-color);
   --ng-doc-floated-border-shadow-color: 0 1px 2px rgba(16, 24, 40, 0.05), 0 0 0 4px transparent;
-  --ng-doc-floated-border-radius: var(--ng-doc-base-gutter);
+  --ng-doc-floated-border-radius: var(--ng-doc-radius-md);
   /* NgDocCheckboxComponent */
   --ng-doc-checkbox-color: var(--ng-doc-primary);
   --ng-doc-checkbox-color-text: var(--ng-doc-primary-text);
@@ -74,8 +311,8 @@
   --ng-doc-input-text-align: left;
   --ng-doc-input-width: 100%;
   --ng-doc-input-height: 40px;
-  --ng-doc-input-border: var(--ng-doc-border-size) solid var(--ng-doc-border-color);
-  --ng-doc-input-border-hover: var(--ng-doc-border-size) solid var(--ng-doc-border-hover-color);
+  --ng-doc-input-border: var(--ng-doc-border-size) solid var(--ng-doc-base-7);
+  --ng-doc-input-border-hover: var(--ng-doc-border-size) solid var(--ng-doc-base-8);
   --ng-doc-input-background-color: var(--ng-doc-base-0);
   --ng-doc-input-cursor: auto;
   /* NgDocTagComponent */
@@ -90,7 +327,7 @@
   /* Sidenav */
   --ng-doc-sidenav-width: 300px;
   /* TabGroup */
-  --ng-doc-tab-group-border-radius: var(--ng-doc-base-gutter);
+  --ng-doc-tab-group-border-radius: var(--ng-doc-radius-lg);
   --ng-doc-tab-group-border: 1px solid var(--ng-doc-border-color);
 }
 

package/types/ng-doc-ui-kit-cdk-combobox-host.d.ts

@@ -1,27 +1,35 @@
 import * as i0 from '@angular/core';
-import { AfterContentInit, ElementRef, NgZone } from '@angular/core';
+import { ElementRef } from '@angular/core';
 import { NgDocOverlayHost, NgDocInputHost, NgDocDisplayValueHost, NgDocListHost, NgDocBaseInput } from '@ng-doc/ui-kit/classes';
 import { NgDocDropdownComponent } from '@ng-doc/ui-kit/components/dropdown';
 import { NgDocDisplayValueFunction, NgDocOverlayPosition } from '@ng-doc/ui-kit/types';
 import { DIControl, DICompareHost, DICompareFunction } from 'di-controls';
 
-declare class NgDocComboboxHostComponent<T> extends DIControl<T> implements NgDocOverlayHost, NgDocInputHost<string>, DICompareHost<T>, NgDocDisplayValueHost<T>, NgDocListHost, AfterContentInit {
+/** Connects a text field, a dropdown and a list into a combobox. */
+declare class NgDocComboboxHostComponent<T> extends DIControl<T> implements NgDocOverlayHost, NgDocInputHost<string>, DICompareHost<T>, NgDocDisplayValueHost<T>, NgDocListHost {
+    /** Compares an option with the value. */
     compareFn: DICompareFunction<T>;
+    /** Turns the value into the text of the field. */
     displayValueFn: NgDocDisplayValueFunction<T>;
-    origin?: ElementRef<HTMLElement>;
-    dropdown?: NgDocDropdownComponent;
-    inputControl?: NgDocBaseInput<string>;
     readonly positions: NgDocOverlayPosition[];
-    protected readonly ngZone: NgZone;
+    private readonly originQuery;
+    private readonly dropdownQuery;
+    private readonly inputQuery;
     constructor();
-    ngAfterContentInit(): void;
+    /** Origin of the dropdown (`NgDocOverlayHost`). */
+    get origin(): ElementRef<HTMLElement> | undefined;
+    /** The dropdown with the options. */
+    get dropdown(): NgDocDropdownComponent | undefined;
+    /** The text field of the combobox. */
+    get inputControl(): NgDocBaseInput<string> | undefined;
     get listHostOrigin(): ElementRef<HTMLElement> | undefined;
     get searchText(): string;
     get width(): number;
     get panelClass(): string;
+    /** Opens the dropdown when the field is clicked. */
     clickEvent(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocComboboxHostComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocComboboxHostComponent<any>, "ng-doc-combobox-host", never, { "compareFn": { "alias": "compareFn"; "required": false; }; "displayValueFn": { "alias": "displayValueFn"; "required": false; }; }, {}, ["dropdown", "inputControl"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocComboboxHostComponent<any>, "ng-doc-combobox-host", never, { "compareFn": { "alias": "compareFn"; "required": false; }; "displayValueFn": { "alias": "displayValueFn"; "required": false; }; }, {}, ["dropdownQuery", "inputQuery"], ["*"], true, never>;
 }
 
 export { NgDocComboboxHostComponent };