@koobiq/components 19.5.0 → 19.7.0

package/inline-edit/inline-edit.d.ts

@@ -1,10 +1,12 @@
-import { CdkConnectedOverlay, CdkOverlayOrigin, ScrollStrategy } from '@angular/cdk/overlay';
-import { TemplateRef } from '@angular/core';
+import { CdkConnectedOverlay, ScrollStrategy } from '@angular/cdk/overlay';
+import { ElementRef, TemplateRef } from '@angular/core';
 import { KbqComponentColors, PopUpPlacements } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqFormField, KbqLabel } from '@koobiq/components/form-field';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/a11y";
+export type KbqInlineEditMode = 'view' | 'edit';
 /** @docs-private */
 export declare class KbqFocusRegionItem {
     readonly tabOut: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
@@ -35,11 +37,10 @@ export declare class KbqInlineEditMenu {
  * Edit mode opens in a positioned overlay that matches the view mode width or can be customized.
  */
 export declare class KbqInlineEdit {
-    private readonly elementRef;
-    private readonly focusMonitor;
     private readonly overlay;
     private readonly document;
     private readonly resizeObserver;
+    protected readonly elementRef: ElementRef<HTMLElement>;
     /**
      * Whether to show save/cancel action buttons in edit mode.
      * @default false
@@ -65,16 +66,22 @@ export declare class KbqInlineEdit {
     readonly getValueHandler: import("@angular/core").InputSignal<(() => unknown) | undefined>;
     /** Handler function to update the value */
     readonly setValueHandler: import("@angular/core").InputSignal<((value: any) => void) | undefined>;
+    /** Customizable function that checks if saving on enter available. */
+    readonly canSaveOnEnter: import("@angular/core").InputSignal<(event: KeyboardEvent) => boolean>;
     /**
-     * Customizable function that checks if saving on enter available.
+     * CSS selectors for elements in view mode that should handle clicks instead of opening edit mode.
+     * Override to replace or extend the default list.
+     *
+     * @example
+     * `<kbq-inline-edit [interactiveSelectors]="['a', 'kbq-tag', 'button']">`
      */
-    readonly canSaveOnEnter: import("@angular/core").InputSignal<(event: KeyboardEvent) => boolean>;
+    readonly interactiveSelectors: import("@angular/core").InputSignal<string[]>;
     /** Emitted when the inline edit is saved successfully. */
     protected readonly saved: import("@angular/core").OutputEmitterRef<void>;
     /** Emitted when the inline edit is canceled and changes are discarded. */
     protected readonly canceled: import("@angular/core").OutputEmitterRef<void>;
     /** Emitted when mode switched to edit/view */
-    protected readonly modeChange: import("@angular/core").OutputEmitterRef<"view" | "edit">;
+    protected readonly modeChange: import("@angular/core").OutputEmitterRef<KbqInlineEditMode>;
     /** @docs-private */
     protected readonly menu: import("@angular/core").Signal<KbqInlineEditMenu | undefined>;
     /** @docs-private */
@@ -82,21 +89,25 @@ export declare class KbqInlineEdit {
     /** @docs-private */
     protected readonly formFieldRef: import("@angular/core").Signal<KbqFormField | undefined>;
     /** @docs-private */
-    protected readonly overlayOrigin: import("@angular/core").Signal<CdkOverlayOrigin>;
+    protected readonly formFieldRefList: import("@angular/core").Signal<readonly KbqFormField[]>;
+    /** @docs-private */
+    protected overlayOrigin: HTMLElement;
     /** @docs-private */
     protected readonly tooltipTrigger: import("@angular/core").Signal<KbqTooltipTrigger | undefined>;
     /** @docs-private */
+    protected readonly viewContainer: import("@angular/core").Signal<ElementRef<HTMLElement>>;
+    /** @docs-private */
     protected readonly overlayDir: import("@angular/core").Signal<CdkConnectedOverlay | undefined>;
     /** @docs-private */
     protected readonly regionItems: import("@angular/core").Signal<readonly KbqFocusRegionItem[]>;
     /** @docs-private */
-    protected readonly mode: import("@angular/core").WritableSignal<"view" | "edit">;
+    protected readonly mode: import("@angular/core").WritableSignal<KbqInlineEditMode>;
     /** @docs-private */
     protected readonly overlayWidth: import("@angular/core").WritableSignal<string | number>;
     /** @docs-private */
     protected readonly scrollStrategy: import("@angular/core").WritableSignal<ScrollStrategy>;
     /** @docs-private */
-    readonly modeAsReadonly: import("@angular/core").Signal<"view" | "edit">;
+    readonly modeAsReadonly: import("@angular/core").Signal<KbqInlineEditMode>;
     /** @docs-private */
     protected readonly className: import("@angular/core").Signal<string>;
     /** @docs-private */
@@ -121,6 +132,13 @@ export declare class KbqInlineEdit {
     protected cancel(): void;
     /** @docs-private */
     protected onOverlayKeydown(event: KeyboardEvent): void;
+    /**
+     * Block propagation of overlay outside click.
+     * Used to prevent reopening when target is inline edit itself.
+     * @docs-private
+     */
+    protected onOverlayOutsideClick($event: Event): void;
+    private isInteractiveElement;
     /**
      * Sets up Tab key listeners on region items.
      * Single item: Tab moves to next edit.
@@ -135,6 +153,7 @@ export declare class KbqInlineEdit {
     private setOverlayWidth;
     private openPanel;
     private getInputNativeElement;
+    private markAllAsTouched;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqInlineEdit, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRef"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
 }

package/inline-edit/inline-edit.scss

@@ -29,7 +29,8 @@
 
         .kbq-mask__fade {
             background: var(--kbq-mask-background, transparent);
-            mask-image: linear-gradient(90deg, transparent, var(--kbq-black-default));
+            // @TODO remove fallback (#DS-3002)
+            mask-image: linear-gradient(90deg, transparent, var(--kbq-plt-black, var(--kbq-black-default)));
         }
 
         .kbq-mask__container {
@@ -39,6 +40,17 @@
 }
 
 @mixin _inline-edit-theme {
+    background: var(--kbq-inline-edit-background);
+
+    &:focus-visible {
+        outline: none;
+    }
+
+    &.cdk-keyboard-focused {
+        box-shadow: inset 0 0 0.1px 1px var(--kbq-states-line-focus-theme);
+        border-color: var(--kbq-states-line-focus-theme);
+    }
+
     &.kbq-inline-edit_view {
         &:not(.kbq-inline-edit_disabled) {
             &:hover {
@@ -68,18 +80,8 @@
     }
 
     .kbq-inline-edit__focus_container {
-        background: var(--kbq-inline-edit-background);
-        border-color: var(--kbq-inline-edit-background);
-
-        &:focus-visible {
-            outline: none;
-        }
-
-        &.cdk-keyboard-focused {
-            $focused-color: var(--kbq-states-line-focus-theme);
-            outline: 1px solid $focused-color;
-            border-color: $focused-color;
-        }
+        display: flex;
+        flex-direction: column;
     }
 }
 
@@ -91,16 +93,18 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    box-sizing: border-box;
+
+    border: var(--kbq-size-border-width) solid transparent;
     border-radius: var(--kbq-size-border-radius);
     padding: var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);
     min-height: var(--kbq-inline-edit-height);
-    box-sizing: border-box;
 
     @include _inline-edit-theme();
     @include _inline-edit-typography();
 
     &:not(.kbq-inline-edit_with-label) {
-        --kbq-inline-edit-padding-horizontal: var(--kbq-size-m);
+        --kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-m) - var(--kbq-size-border-width));
     }
 
     &.kbq-inline-edit_with-label {
@@ -120,6 +124,12 @@
 
     &.kbq-inline-edit_view {
         .kbq-inline-edit__view-container {
+            display: flex;
+            text-overflow: ellipsis;
+        }
+
+        .kbq-inline-edit__view-content {
+            display: inline-block;
             text-overflow: ellipsis;
         }
     }
@@ -137,14 +147,14 @@
 
     @include _mask(
         (
-            'top': 0,
-            'right': 0
+            'top': calc(var(--kbq-size-border-width) * -1),
+            'right': calc(var(--kbq-size-border-width) * -1)
         )
     );
 
     .kbq-inline-edit__menu-mask {
         opacity: 0;
-        height: 100%;
+        height: calc(100% + 2 * var(--kbq-size-border-width));
         justify-content: flex-end;
         border-top-right-radius: var(--kbq-size-border-radius);
         border-bottom-right-radius: var(--kbq-size-border-radius);
@@ -171,18 +181,6 @@
             z-index: 2;
         }
     }
-
-    .kbq-inline-edit__focus_container {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: calc(100% - 2 * var(--kbq-size-border-width));
-        height: calc(100% - 2 * var(--kbq-size-border-width));
-        border: var(--kbq-size-border-width) solid transparent;
-        border-radius: var(--kbq-size-border-radius);
-        // set z-index to hide mask borders
-        z-index: 1;
-    }
 }
 
 .kbq-inline-edit__panel {

package/link/_link-theme.scss

@@ -171,7 +171,9 @@
         }
 
         &.cdk-keyboard-focused {
-            outline: var(--kbq-link-state-focused-outline) solid;
+            outline-style: solid;
+            outline-width: var(--kbq-link-size-state-focused-outline-width);
+            outline-color: var(--kbq-link-state-focused-outline);
         }
 
         &.kbq-disabled {

package/link/link-tokens.scss

@@ -8,17 +8,18 @@
     --kbq-link-underline-width: 1px;
     /* THEME TOKENS */
     --kbq-link-text: var(--kbq-foreground-theme);
-    --kbq-link-border-bottom: var(--kbq-line-theme-less);
+    --kbq-link-border-bottom: var(--kbq-line-theme-fade);
     --kbq-link-state-visited-text: var(--kbq-foreground-visited);
-    --kbq-link-state-visited-border-bottom: var(--kbq-line-visited);
+    /* @TODO (#DS-3002) */
+    --kbq-link-state-visited-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
     --kbq-link-state-visited-hover-text: var(--kbq-states-foreground-visited-hover);
-    --kbq-link-state-visited-hover-border-bottom: var(--kbq-line-visited);
+    --kbq-link-state-visited-hover-border-bottomm: var(--kbq-line-visited-fade, var(--kbq-line-visited));
     --kbq-link-state-visited-active-text: var(--kbq-states-foreground-visited-active);
-    --kbq-link-state-visited-active-border-bottom: var(--kbq-line-visited);
+    --kbq-link-state-visited-active-border-bottomm: var(--kbq-line-visited-fade, var(--kbq-line-visited));
     --kbq-link-state-hover-text: var(--kbq-states-foreground-theme-hover);
-    --kbq-link-state-hover-border-bottom: var(--kbq-line-theme-less);
+    --kbq-link-state-hover-border-bottom: var(--kbq-line-theme-fade);
     --kbq-link-state-active-text: var(--kbq-states-foreground-theme-active);
-    --kbq-link-state-active-border-bottom: var(--kbq-line-theme-less);
+    --kbq-link-state-active-border-bottom: var(--kbq-line-theme-fade);
     --kbq-link-state-focused-outline: var(--kbq-states-line-focus-theme);
     --kbq-link-state-disabled-text: var(--kbq-states-foreground-disabled);
     --kbq-link-state-disabled-border-bottom: var(--kbq-states-line-disabled);

package/link/link.component.d.ts

@@ -1,12 +1,11 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DestroyRef, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
+import { AfterContentInit, AfterViewInit, DestroyRef, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 export declare const baseURLRegex: RegExp;
 export declare class KbqLink implements AfterContentInit, AfterViewInit, OnDestroy {
     private elementRef;
     private focusMonitor;
-    private changeDetector;
     protected readonly renderer: Renderer2;
     protected readonly destroyRef: DestroyRef;
     protected readonly nativeElement: HTMLElement;
@@ -14,7 +13,8 @@ export declare class KbqLink implements AfterContentInit, AfterViewInit, OnDestr
     /** Whether the link is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
-    private _disabled;
+    /** @docs-private */
+    readonly disabledSignal: import("@angular/core").WritableSignal<boolean>;
     get tabIndex(): number;
     set tabIndex(value: number);
     private _tabIndex;
@@ -30,8 +30,9 @@ export declare class KbqLink implements AfterContentInit, AfterViewInit, OnDestr
     private _print;
     printMode: boolean;
     printUrl: string;
+    private _disabled;
     icon: KbqIcon;
-    constructor(elementRef: ElementRef<HTMLAnchorElement>, focusMonitor: FocusMonitor, changeDetector: ChangeDetectorRef);
+    constructor(elementRef: ElementRef<HTMLAnchorElement>, focusMonitor: FocusMonitor);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     focus(): void;

package/loader-overlay/_loader-overlay-theme.scss

@@ -29,6 +29,18 @@
             color: var(--kbq-loader-overlay-transparent-caption-color);
         }
     }
+
+    .kbq-loader-overlay_card {
+        &.kbq-loader-overlay_filled,
+        &.kbq-loader-overlay_transparent {
+            background: color-mix(
+                in srgb,
+                var(--kbq-loader-overlay-card-overlay-background) /* color-mix only allows percentage value */
+                    calc(var(--kbq-opacity-overlay) * 100%),
+                transparent
+            );
+        }
+    }
 }
 
 @mixin kbq-loader-overlay-typography() {

package/loader-overlay/loader-overlay-tokens.scss

@@ -15,4 +15,5 @@
     --kbq-loader-overlay-filled-overlay-background: var(--kbq-background-bg);
     --kbq-loader-overlay-filled-text-color: var(--kbq-foreground-contrast);
     --kbq-loader-overlay-filled-caption-color: var(--kbq-foreground-contrast-secondary);
+    --kbq-loader-overlay-card-overlay-background: var(--kbq-background-card);
 }

package/loader-overlay/loader-overlay.component.d.ts

@@ -20,6 +20,11 @@ export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
     caption: string;
     size: KbqDefaultSizes;
     transparent: boolean;
+    /**
+     * Uses a semi-transparent background to blend
+     * with the underlying card or modal surface. When enabled, overrides `transparent`.
+     */
+    card: boolean;
     private parent;
     get isExternalIndicator(): boolean;
     get isExternalText(): boolean;
@@ -37,5 +42,6 @@ export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlay, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqLoaderOverlay, "kbq-loader-overlay", never, { "text": { "alias": "text"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "size": { "alias": "size"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqLoaderOverlay, "kbq-loader-overlay", never, { "text": { "alias": "text"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "size": { "alias": "size"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; "card": { "alias": "card"; "required": false; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], true, never>;
+    static ngAcceptInputType_card: unknown;
 }

package/markdown/_markdown-theme.scss

@@ -30,7 +30,7 @@
         }
 
         .kbq-markdown__pre,
-        .kbq-markdown__code:not(.kbq-markdown__a .kbq-markdown__code) {
+        .kbq-markdown__code:not(.kbq-markdown__pre > .kbq-markdown__code, .kbq-markdown__a .kbq-markdown__code) {
             color: var(--kbq-markdown-code-text);
             background-color: var(--kbq-markdown-code-background);
         }
@@ -39,36 +39,8 @@
             background-color: var(--kbq-markdown-code-background);
         }
 
-        .kbq-markdown__a {
-            color: var(--kbq-markdown-link-text, var(--kbq-foreground-theme));
-            border-bottom-color: var(--kbq-markdown-link-border-bottom, var(--kbq-line-theme-less));
-
-            &:has(.kbq-markdown__code) {
-                display: inline;
-                border-bottom: none;
-            }
-
-            &:visited {
-                color: var(--kbq-markdown-link-state-visited-text, var(--kbq-foreground-visited));
-                border-bottom-color: var(--kbq-markdown-link-state-visited-border-bottom, var(--kbq-line-visited));
-            }
-
-            &:hover {
-                color: var(--kbq-markdown-link-state-hover-text, var(--kbq-states-foreground-theme-hover));
-                transition: color 0ms;
-                border-bottom-color: var(--kbq-markdown-link-state-hover-border-bottom, var(--kbq-line-theme-less));
-            }
-
-            &:active {
-                color: var(--kbq-markdown-link-state-active, var(--kbq-states-foreground-theme-active));
-            }
-
-            &:focus {
-                outline: var(--kbq-markdown-link-state-focused-outline, var(--kbq-link-state-focused-outline)) solid
-                    var(--kbq-markdown-link-size-state-focused-outline-width, var(--kbq-size-3xs));
-
-                outline-offset: var(--kbq-markdown-link-size-state-focused-outline-offset, 0);
-            }
+        .kbq-markdown__a:has(.kbq-markdown__code) {
+            text-decoration-line: none;
         }
 
         .kbq-markdown__img + em {

package/markdown/markdown-tokens.scss

@@ -41,9 +41,6 @@
     --kbq-markdown-code-size-multiline-padding: var(--kbq-size-m) var(--kbq-size-l);
     --kbq-markdown-code-size-border-radius: var(--kbq-size-border-radius);
     --kbq-markdown-code-size-border-width: var(--kbq-size-border-width);
-    --kbq-markdown-link-size-icon-margin: var(--kbq-link-size-normal-content-padding, var(--kbq-size-xxs));
-    --kbq-markdown-link-size-state-focused-outline-offset: var(--kbq-link-size-state-focused-outline-offset);
-    --kbq-markdown-link-size-state-focused-outline-width: var(--kbq-link-size-state-focused-outline-width);
     --kbq-markdown-image-size-max-width: var(--kbq-markdown-size-max-width);
     --kbq-markdown-image-size-margin-top: var(--kbq-size-m);
     --kbq-markdown-image-size-margin-bottom: var(--kbq-size-m);
@@ -71,14 +68,6 @@
     --kbq-markdown-code-text: var(--kbq-foreground-contrast);
     --kbq-markdown-code-background: var(--kbq-background-contrast-fade);
     --kbq-markdown-code-border: var(--kbq-line-contrast-less);
-    --kbq-markdown-link-text: var(--kbq-link-text);
-    --kbq-markdown-link-border-bottom: var(--kbq-link-border-bottom);
-    --kbq-markdown-link-state-visited-text: var(--kbq-link-state-visited-text);
-    --kbq-markdown-link-state-visited-border-bottom: var(--kbq-link-state-visited-border-bottom);
-    --kbq-markdown-link-state-hover-text: var(--kbq-link-state-hover-text);
-    --kbq-markdown-link-state-hover-border-bottom: var(--kbq-link-state-hover-border-bottom);
-    --kbq-markdown-link-state-active: var(--kbq-link-state-active-text);
-    --kbq-markdown-link-state-focused-outline: var(--kbq-link-state-focused-outline);
     --kbq-markdown-image-caption-text: var(--kbq-foreground-contrast-secondary);
     --kbq-markdown-hr-color: var(--kbq-line-contrast-less);
     --kbq-markdown-table-header: var(--kbq-foreground-contrast-secondary);

package/markdown/markdown.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, InjectionToken, Provider } from '@angular/core';
+import { InjectionToken, OnDestroy, Provider } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { MarkedOptions } from 'marked';
 import { KbqMarkdownService } from './markdown.service';
@@ -8,19 +8,24 @@ export declare const KBQ_MARKDOWN_MARKED_OPTIONS: InjectionToken<MarkedOptions<s
 /** Utility provider for `KBQ_MARKDOWN_MARKED_OPTIONS`. */
 export declare const kbqMarkdownMarkedOptionsProvider: (options: MarkedOptions) => Provider;
 /** Component which allows to convert `Markdown` into `HTML` */
-export declare class KbqMarkdown {
+export declare class KbqMarkdown implements OnDestroy {
     private readonly markdownService;
-    private readonly cdr;
     private sanitizer;
     private readonly markedOptions?;
     private readonly contentWrapper;
+    private readonly outputWrapper;
+    protected resultHtml: import("@angular/core").WritableSignal<SafeHtml | null>;
     /** `Markdown` text. */
     get markdownText(): string | null;
     set markdownText(value: string | null);
     private _markdownText;
-    protected resultHtml: SafeHtml;
-    constructor(markdownService: KbqMarkdownService, cdr: ChangeDetectorRef, sanitizer: DomSanitizer, markedOptions?: MarkedOptions | undefined);
+    private readonly focusMonitor;
+    private readonly links;
+    constructor(markdownService: KbqMarkdownService, sanitizer: DomSanitizer, markedOptions?: MarkedOptions | undefined);
+    ngOnDestroy(): void;
     private getResultHTML;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMarkdown, [null, null, null, { optional: true; }]>;
+    private startMonitoringLinks;
+    private stopMonitoringLinks;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMarkdown, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqMarkdown, "kbq-markdown", never, { "markdownText": { "alias": "markdownText"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/markdown/markdown.scss

@@ -33,17 +33,6 @@
         }
     }
 
-    .kbq-markdown__a {
-        display: inline;
-
-        text-decoration: none;
-        cursor: pointer;
-
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-        transition: color ease-out 300ms;
-    }
-
     .kbq-markdown__p {
         margin-top: var(--kbq-markdown-p-size-margin-top);
         margin-bottom: var(--kbq-markdown-p-size-margin-bottom);

package/navbar/navbar.scss

@@ -1,8 +1,11 @@
 @use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/overlay';
 
 @use './navbar-theme' as *;
 
 .kbq-navbar {
+    z-index: overlay.$overlay-z-index;
+
     display: flex;
     flex-direction: row;
     justify-content: space-between;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "19.5.0",
+    "version": "19.7.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -25,12 +25,11 @@
         "@angular/cdk": "^19.0.0",
         "@angular/core": "^19.0.0",
         "@angular/forms": "^19.0.0",
-        "@koobiq/cdk": "19.5.0",
-        "@koobiq/angular-moment-adapter": "19.5.0",
-        "@koobiq/angular-luxon-adapter": "19.5.0",
+        "@koobiq/cdk": "19.7.0",
+        "@koobiq/angular-moment-adapter": "19.7.0",
+        "@koobiq/angular-luxon-adapter": "19.7.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
-        "@koobiq/tokens-builder": "3.11.0",
         "@koobiq/design-tokens": "3.14.0"
     },
     "dependencies": {

package/popover/popover.component.d.ts

@@ -39,7 +39,11 @@ export declare const KBQ_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 /** Creates an error to be thrown if the user supplied an invalid popover position. */
 export declare function getKbqPopoverInvalidPositionError(position: string): Error;
 export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit, OnInit {
+    private overlayContainer;
+    private renderer;
     protected scrollStrategy: () => ScrollStrategy;
+    /** Controls whether the component should be hidden when it is not visible in the viewport. */
+    readonly hideIfNotInViewPort: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /** prevents closure by any event */
     preventClose: boolean;
     /** disables default padding for all popover elements (header, content and footer) */
@@ -105,8 +109,15 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     readonly visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
     protected get overlayConfig(): OverlayConfig;
+    private classAddedToOverlayContainer;
     ngOnInit(): void;
     ngAfterContentInit(): void;
+    /**
+     * Overrides the base `show` method to display the overlay component with the
+     * specified entry delay and apply default positioning offsets.
+     */
+    show(delay?: number): void;
+    hide(delay?: number): void;
     updateData(): void;
     /** Updates the position of the current popover. */
     updatePosition(reapplyPosition?: boolean): void;
@@ -115,9 +126,11 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
     defaultClosingActions(): import("rxjs").Observable<MouseEvent>[];
     closingActions(): import("rxjs").Observable<void | CdkScrollable | MouseEvent>;
-    private hideIfNotInViewPort;
+    private hideIfScrolledOutOfView;
+    private addClassToOverlayContainer;
+    private removeClassFromOverlayContainer;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "preventClose": { "alias": "kbqPopoverPreventClose"; "required": false; }; "defaultPaddings": { "alias": "defaultPaddings"; "required": false; }; "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "stickToWindow": { "alias": "kbqPopoverStickToWindow"; "required": false; }; "container": { "alias": "container"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "context": { "alias": "kbqPopoverContext"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "hideIfNotInViewPort": { "alias": "hideIfNotInViewPort"; "required": false; "isSignal": true; }; "preventClose": { "alias": "kbqPopoverPreventClose"; "required": false; }; "defaultPaddings": { "alias": "defaultPaddings"; "required": false; }; "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "stickToWindow": { "alias": "kbqPopoverStickToWindow"; "required": false; }; "container": { "alias": "container"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "context": { "alias": "kbqPopoverContext"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, true, never>;
     static ngAcceptInputType_preventClose: unknown;
     static ngAcceptInputType_defaultPaddings: unknown;
     static ngAcceptInputType_arrow: unknown;