@koobiq/components 20.4.2 → 21.0.1

package/fesm2022/koobiq-components-scrollbar.mjs

@@ -1,275 +1,798 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { coerceCssPixelValue } from '@angular/cdk/coercion';
+import { MutationObserverFactory } from '@angular/cdk/observers';
+import { SharedResizeObserver } from '@angular/cdk/observers/private';
+import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
+import * as i1 from '@angular/cdk/scrolling';
+import { CdkScrollable, ScrollDispatcher, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, NgZone, input, Input, Directive, ElementRef, viewChild, EventEmitter, Injector, afterNextRender, forwardRef, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { KBQ_OVERFLOW_SHADOW_SOURCE } from '@koobiq/components/core';
-import * as i1 from '@angular/cdk/overlay';
-import { CdkScrollable } from '@angular/cdk/overlay';
-import { OverlayScrollbars } from 'overlayscrollbars';
+import { inject, NgZone, InjectionToken, ViewEncapsulation, ChangeDetectionStrategy, Component, input, booleanAttribute, Directive, ApplicationRef, EnvironmentInjector, Injector, DestroyRef, numberAttribute, effect, afterNextRender, createComponent, Injectable, Renderer2, NgModule } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { KBQ_WINDOW, kbqInjectNativeElement, kbqAnimationsDisabled } from '@koobiq/components/core';
+import { NEVER, Observable, asyncScheduler, Subject, merge, fromEvent, EMPTY, filter, map, startWith, audit, share, switchMap, takeUntil, distinctUntilChanged, concat, of, timer, observeOn, asapScheduler, take } from 'rxjs';
 
-const KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG = {
-    scrollbars: {
-        autoHide: 'leave',
-        autoHideDelay: 100
+/**
+ * The next animation frame, requested on subscription and only then, so an idle page schedules none.
+ *
+ * One frame per subscriber rather than a shared one: a frame that is already being delivered cannot be
+ * joined, so whatever asks for a frame from inside one gets the next.
+ */
+function nextAnimationFrame() {
+    const window = inject(KBQ_WINDOW);
+    const ngZone = inject(NgZone);
+    if (typeof window.requestAnimationFrame === 'undefined') {
+        return NEVER;
     }
+    return new Observable((subscriber) => 
+    // Outside Angular, so waiting for a frame does not keep NgZone unstable.
+    ngZone.runOutsideAngular(() => {
+        const frameId = window.requestAnimationFrame(() => {
+            subscriber.next();
+            subscriber.complete();
+        });
+        return () => window.cancelAnimationFrame(frameId);
+    }));
+}
+function zoneFree() {
+    const ngZone = inject(NgZone);
+    return (source) => new Observable((subscriber) => ngZone.runOutsideAngular(() => source.subscribe(subscriber)));
+}
+function zoneFreeScheduler(scheduler = asyncScheduler) {
+    const ngZone = inject(NgZone);
+    return {
+        now: () => scheduler.now(),
+        schedule(work, delay, state) {
+            let subscription;
+            ngZone.runOutsideAngular(() => {
+                subscription = scheduler.schedule(work, delay, state);
+            });
+            return subscription;
+        }
+    };
+}
+function zoneOptimized() {
+    const ngZone = inject(NgZone);
+    return (source) => new Observable((subscriber) => source.subscribe({
+        next: (value) => ngZone.run(() => subscriber.next(value)),
+        error: (error) => subscriber.error(error),
+        complete: () => subscriber.complete()
+    }));
+}
+function getElementOffset(ancestor, element) {
+    let offsetTop = 0;
+    let offsetLeft = 0;
+    let current = element;
+    while (current && current !== ancestor) {
+        offsetTop += current.offsetTop;
+        offsetLeft += current.offsetLeft;
+        current = current.offsetParent;
+    }
+    return { offsetTop, offsetLeft };
+}
+const KBQ_SCROLLBAR_DEFAULT_OPTIONS = {
+    mode: 'hover',
+    hideDelay: 1000
 };
-const KBQ_SCROLLBAR_CONFIG = new InjectionToken('KBQ_SCROLLBAR_CONFIG');
-/** Default scroll behavior */
-const KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG_PROVIDER = {
-    provide: KBQ_SCROLLBAR_CONFIG,
-    useValue: KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG
-};
-
-const createDefer = () => {
-    // For SSR compatibility
-    // eslint-disable-next-line no-restricted-globals
-    if (typeof window === 'undefined') {
-        const noop = () => { };
-        return [noop, noop];
-    }
-    let idleId;
-    let rafId;
-    // eslint-disable-next-line no-restricted-globals
-    const { requestIdleCallback, requestAnimationFrame, cancelAnimationFrame, cancelIdleCallback } = window;
-    const idleSupported = typeof requestIdleCallback === 'function';
-    const rIdle = idleSupported ? requestIdleCallback : requestAnimationFrame;
-    const cIdle = idleSupported ? cancelIdleCallback : cancelAnimationFrame;
-    const clear = () => {
-        cIdle(idleId);
-        cancelAnimationFrame(rafId);
+/** Injection token holding the current {@link KbqScrollbarOptions}. */
+const KBQ_SCROLLBAR_OPTIONS = new InjectionToken('KBQ_SCROLLBAR_OPTIONS', {
+    factory: () => KBQ_SCROLLBAR_DEFAULT_OPTIONS
+});
+/** Overrides the default scrollbar options within the given injector scope. */
+function kbqScrollbarOptionsProvider(options) {
+    return {
+        provide: KBQ_SCROLLBAR_OPTIONS,
+        useValue: { ...KBQ_SCROLLBAR_DEFAULT_OPTIONS, ...options }
     };
-    return [
-        (callback, options) => {
-            clear();
-            idleId = rIdle(idleSupported
-                ? () => {
-                    clear();
-                    // inside idle its best practice to use rAF to change DOM for best performance
-                    rafId = requestAnimationFrame(callback);
-                }
-                : callback, typeof options === 'object' ? options : { timeout: 2233 });
-        },
-        clear
-    ];
+}
+const KBQ_NATIVE_SCROLLBAR_DEFAULT_OPTIONS = {
+    descendants: false
 };
+/** Injection token holding the current {@link KbqNativeScrollbarOptions}. */
+const KBQ_NATIVE_SCROLLBAR_OPTIONS = new InjectionToken('KBQ_NATIVE_SCROLLBAR_OPTIONS', { factory: () => KBQ_NATIVE_SCROLLBAR_DEFAULT_OPTIONS });
+/** Overrides the default native scrollbar options within the given injector scope. */
+function kbqNativeScrollbarOptionsProvider(options) {
+    return {
+        provide: KBQ_NATIVE_SCROLLBAR_OPTIONS,
+        useValue: { ...KBQ_NATIVE_SCROLLBAR_DEFAULT_OPTIONS, ...options }
+    };
+}
 /**
- * A directive for adding `overlayscrollbars` to an element.
+ * Computed `overflow` values that rule out user scrolling. `visible` belongs here as much as the other
+ * two: it only computes to `auto` when the other axis scrolls, so a box left at the initial value on
+ * both axes is not a scroll container at all. Listed as the exclusions rather than as the scrollable
+ * values so an unreadable computed style leaves the scrollbar alone instead of erasing it.
  */
-class KbqScrollbarDirective {
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set options(value) {
-        this._options = value;
-        if (OverlayScrollbars.valid(this.scrollbarInstance)) {
-            this.scrollbarInstance.options(value || {}, true);
-        }
-    }
-    /** Scrollbar behavior customization object */
-    get options() {
-        return this._options;
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set events(value) {
-        this._events = value;
-        if (OverlayScrollbars.valid(this.scrollbarInstance)) {
-            this.scrollbarInstance.on(value || {}, true);
-        }
+const NON_SCROLLABLE_OVERFLOW = ['clip', 'hidden', 'visible'];
+const TRACK_TAG = 'kbq-scrollbar-track';
+/** Based on --kbq-scrollbar-thumb-min-size */
+const MIN_THUMB_SIZE = 32;
+/** Based on --kbq-scrollbar-thumb-gap */
+const THUMB_GAP = 3;
+// Include the transparent border because CSS applies the minimum to the thumb's border box.
+const MIN_THUMB_BOX_SIZE = MIN_THUMB_SIZE + THUMB_GAP * 2;
+class ScrollbarStyleLoader {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ScrollbarStyleLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: ScrollbarStyleLoader, isStandalone: true, selector: "scrollbar-style-loader", ngImport: i0, template: '', isInline: true, styles: [":where(.kbq-scrollbar-viewport,.kbq-native-scrollbar){--kbq-scrollbar-thumb-min-size: var(--kbq-size-3xl);--kbq-scrollbar-thumb-gap: 3px;--kbq-scrollbar-track-size: 14px;--kbq-scrollbar-track-z-index: 1000;--kbq-scrollbar-transition-duration: .15s;--kbq-scrollbar-track-background: transparent}@media(prefers-reduced-motion:reduce){:where(.kbq-scrollbar-viewport,.kbq-native-scrollbar){--kbq-scrollbar-transition-duration: 0s}}\n", "@supports not selector(::-webkit-scrollbar){:where(.kbq-native-scrollbar:not(.kbq-native-scrollbar_descendants) *){scrollbar-color:auto}.kbq-native-scrollbar,.kbq-native-scrollbar_descendants *{scrollbar-color:var(--kbq-scrollbar-thumb-default-background) var(--kbq-scrollbar-track-background);scrollbar-width:auto}}.kbq-native-scrollbar::-webkit-scrollbar,.kbq-native-scrollbar_descendants ::-webkit-scrollbar{width:var(--kbq-scrollbar-track-size);height:var(--kbq-scrollbar-track-size);background-color:var(--kbq-scrollbar-track-background);cursor:default}.kbq-native-scrollbar::-webkit-scrollbar-track,.kbq-native-scrollbar::-webkit-scrollbar-corner,.kbq-native-scrollbar::-webkit-resizer,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-track,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-corner,.kbq-native-scrollbar_descendants ::-webkit-resizer{background-color:var(--kbq-scrollbar-track-background)}.kbq-native-scrollbar::-webkit-scrollbar-thumb,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb{box-sizing:border-box;border:var(--kbq-scrollbar-thumb-gap) solid transparent;border-radius:var(--kbq-size-border-radius);background-color:var(--kbq-scrollbar-thumb-default-background);background-clip:content-box}.kbq-native-scrollbar::-webkit-scrollbar-thumb:vertical,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb:vertical{min-height:calc(var(--kbq-scrollbar-thumb-min-size) + var(--kbq-scrollbar-thumb-gap) * 2)}.kbq-native-scrollbar::-webkit-scrollbar-thumb:horizontal,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb:horizontal{min-width:calc(var(--kbq-scrollbar-thumb-min-size) + var(--kbq-scrollbar-thumb-gap) * 2)}.kbq-native-scrollbar::-webkit-scrollbar-thumb:hover,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb:hover{background-color:var(--kbq-scrollbar-thumb-hover-background)}.kbq-native-scrollbar::-webkit-scrollbar-thumb:active,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb:active{background-color:var(--kbq-scrollbar-thumb-active-background)}.kbq-native-scrollbar::-webkit-scrollbar-button,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-button{display:none}\n", "@charset \"UTF-8\";.kbq-scrollbar-viewport{isolation:isolate}.kbq-scrollbar-viewport_native-scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none}.kbq-scrollbar-viewport_native-scrollbar-hidden::-webkit-scrollbar,.kbq-scrollbar-viewport_native-scrollbar-hidden::-webkit-scrollbar-thumb{display:none}.kbq-scrollbar-track_hover:not(:active){transition:opacity var(--kbq-scrollbar-transition-duration) ease;opacity:0}.kbq-scrollbar-track_hover:not(:active).kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-scrollbar-track_hover:not(:active){animation:none;transition:none}}.kbq-scrollbar-viewport:hover>.kbq-scrollbar-track_hover,.kbq-scrollbar-track_hover.kbq-scrollbar-track_revealed{transition:opacity var(--kbq-scrollbar-transition-duration) ease;opacity:1}.kbq-scrollbar-viewport:hover>.kbq-scrollbar-track_hover.kbq-animations-disabled,.kbq-scrollbar-track_hover.kbq-scrollbar-track_revealed.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-scrollbar-viewport:hover>.kbq-scrollbar-track_hover,.kbq-scrollbar-track_hover.kbq-scrollbar-track_revealed{animation:none;transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ScrollbarStyleLoader, decorators: [{
+            type: Component,
+            args: [{ selector: 'scrollbar-style-loader', template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [":where(.kbq-scrollbar-viewport,.kbq-native-scrollbar){--kbq-scrollbar-thumb-min-size: var(--kbq-size-3xl);--kbq-scrollbar-thumb-gap: 3px;--kbq-scrollbar-track-size: 14px;--kbq-scrollbar-track-z-index: 1000;--kbq-scrollbar-transition-duration: .15s;--kbq-scrollbar-track-background: transparent}@media(prefers-reduced-motion:reduce){:where(.kbq-scrollbar-viewport,.kbq-native-scrollbar){--kbq-scrollbar-transition-duration: 0s}}\n", "@supports not selector(::-webkit-scrollbar){:where(.kbq-native-scrollbar:not(.kbq-native-scrollbar_descendants) *){scrollbar-color:auto}.kbq-native-scrollbar,.kbq-native-scrollbar_descendants *{scrollbar-color:var(--kbq-scrollbar-thumb-default-background) var(--kbq-scrollbar-track-background);scrollbar-width:auto}}.kbq-native-scrollbar::-webkit-scrollbar,.kbq-native-scrollbar_descendants ::-webkit-scrollbar{width:var(--kbq-scrollbar-track-size);height:var(--kbq-scrollbar-track-size);background-color:var(--kbq-scrollbar-track-background);cursor:default}.kbq-native-scrollbar::-webkit-scrollbar-track,.kbq-native-scrollbar::-webkit-scrollbar-corner,.kbq-native-scrollbar::-webkit-resizer,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-track,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-corner,.kbq-native-scrollbar_descendants ::-webkit-resizer{background-color:var(--kbq-scrollbar-track-background)}.kbq-native-scrollbar::-webkit-scrollbar-thumb,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb{box-sizing:border-box;border:var(--kbq-scrollbar-thumb-gap) solid transparent;border-radius:var(--kbq-size-border-radius);background-color:var(--kbq-scrollbar-thumb-default-background);background-clip:content-box}.kbq-native-scrollbar::-webkit-scrollbar-thumb:vertical,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb:vertical{min-height:calc(var(--kbq-scrollbar-thumb-min-size) + var(--kbq-scrollbar-thumb-gap) * 2)}.kbq-native-scrollbar::-webkit-scrollbar-thumb:horizontal,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb:horizontal{min-width:calc(var(--kbq-scrollbar-thumb-min-size) + var(--kbq-scrollbar-thumb-gap) * 2)}.kbq-native-scrollbar::-webkit-scrollbar-thumb:hover,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb:hover{background-color:var(--kbq-scrollbar-thumb-hover-background)}.kbq-native-scrollbar::-webkit-scrollbar-thumb:active,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-thumb:active{background-color:var(--kbq-scrollbar-thumb-active-background)}.kbq-native-scrollbar::-webkit-scrollbar-button,.kbq-native-scrollbar_descendants ::-webkit-scrollbar-button{display:none}\n", "@charset \"UTF-8\";.kbq-scrollbar-viewport{isolation:isolate}.kbq-scrollbar-viewport_native-scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none}.kbq-scrollbar-viewport_native-scrollbar-hidden::-webkit-scrollbar,.kbq-scrollbar-viewport_native-scrollbar-hidden::-webkit-scrollbar-thumb{display:none}.kbq-scrollbar-track_hover:not(:active){transition:opacity var(--kbq-scrollbar-transition-duration) ease;opacity:0}.kbq-scrollbar-track_hover:not(:active).kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-scrollbar-track_hover:not(:active){animation:none;transition:none}}.kbq-scrollbar-viewport:hover>.kbq-scrollbar-track_hover,.kbq-scrollbar-track_hover.kbq-scrollbar-track_revealed{transition:opacity var(--kbq-scrollbar-transition-duration) ease;opacity:1}.kbq-scrollbar-viewport:hover>.kbq-scrollbar-track_hover.kbq-animations-disabled,.kbq-scrollbar-track_hover.kbq-scrollbar-track_revealed.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-scrollbar-viewport:hover>.kbq-scrollbar-track_hover,.kbq-scrollbar-track_hover.kbq-scrollbar-track_revealed{animation:none;transition:none}}\n"] }]
+        }] });
+/** Customizes the browser-rendered scrollbar of its host without replacing native scrolling. */
+class KbqNativeScrollbar {
+    constructor() {
+        this.styleLoader = inject(_CdkPrivateStyleLoader);
+        this.options = inject(KBQ_NATIVE_SCROLLBAR_OPTIONS);
+        /**
+         * Whether browser-rendered scrollbars of descendant elements should also be customized.
+         * Defaults to {@link KBQ_NATIVE_SCROLLBAR_OPTIONS}.
+         */
+        this.descendants = input(this.options.descendants, { ...(ngDevMode ? { debugName: "descendants" } : /* istanbul ignore next */ {}), alias: 'kbqNativeScrollbarDescendants',
+            transform: booleanAttribute });
+        this.styleLoader.load(ScrollbarStyleLoader);
     }
-    get events() {
-        return this._events;
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNativeScrollbar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqNativeScrollbar, isStandalone: true, selector: "[kbqNativeScrollbar]", inputs: { descendants: { classPropertyName: "descendants", publicName: "kbqNativeScrollbarDescendants", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-native-scrollbar_descendants": "descendants()" }, classAttribute: "kbq-native-scrollbar" }, exportAs: ["kbqNativeScrollbar"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNativeScrollbar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqNativeScrollbar]',
+                    host: {
+                        class: 'kbq-native-scrollbar',
+                        '[class.kbq-native-scrollbar_descendants]': 'descendants()'
+                    },
+                    exportAs: 'kbqNativeScrollbar'
+                }]
+        }], ctorParameters: () => [], propDecorators: { descendants: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqNativeScrollbarDescendants", required: false }] }] } });
+/** Marks its host element as the custom scrollbar's scroll target, hiding its native scrollbar whenever a custom scrollbar track replaces it. */
+class KbqScrollbarViewport {
+    // Read live because a bound consumer id is unavailable during construction.
+    get id() {
+        return this.getNativeElement().id || this.generatedId;
     }
     constructor() {
-        this.ngZone = inject(NgZone);
-        this.scrollbarConfig = inject(KBQ_SCROLLBAR_CONFIG);
-        /** Whether to defer the initialization to a point in time when the browser is idle. (or to the next frame if `window.requestIdleCallback` is not supported) */
-        this.defer = input(...(ngDevMode ? [undefined, { debugName: "defer" }] : []));
-        const [requestDefer, cancelDefer] = createDefer();
-        this.requestDefer = requestDefer;
-        this.cancelDefer = cancelDefer;
-    }
-    initialize(target) {
-        this.ngZone.runOutsideAngular(() => {
-            const init = () => {
-                this.scrollbarInstance = OverlayScrollbars(target, this.options || this.scrollbarConfig || {}, this.events || {});
-            };
-            const defer = this.defer();
-            if (defer) {
-                this.requestDefer(init, defer);
+        this.styleLoader = inject(_CdkPrivateStyleLoader);
+        this.scrollable = inject(CdkScrollable);
+        this.appRef = inject(ApplicationRef);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.injector = inject(Injector);
+        this.idGenerator = inject(_IdGenerator);
+        this.options = inject(KBQ_SCROLLBAR_OPTIONS);
+        this.destroyRef = inject(DestroyRef);
+        this.scrollDispatcher = inject(ScrollDispatcher);
+        this.generatedId = this.idGenerator.getId('kbq-scrollbar-viewport-');
+        /** Visibility mode for this viewport's scrollbar. Defaults to the app-wide {@link KBQ_SCROLLBAR_OPTIONS}. */
+        this.mode = input(this.options.mode, { ...(ngDevMode ? { debugName: "mode" } : /* istanbul ignore next */ {}), alias: 'kbqScrollbarMode' });
+        /**
+         * How long the scroll-revealed `hover`-mode track stays visible after scrolling stops, in milliseconds.
+         * Defaults to the app-wide {@link KBQ_SCROLLBAR_OPTIONS}.
+         */
+        this.hideDelay = input(this.options.hideDelay, { ...(ngDevMode ? { debugName: "hideDelay" } : /* istanbul ignore next */ {}), alias: 'kbqScrollbarHideDelay',
+            transform: numberAttribute });
+        this.trackRef = null;
+        this.flashSubject = new Subject();
+        /** Emits when {@link flashScrollIndicators} is called. */
+        this.flashes = this.flashSubject.asObservable();
+        /** Emits on every native `scroll` event of the viewport. Emits outside Angular's zone — see `CdkScrollable.elementScrolled`. */
+        this.scrollChanges = this.scrollable.elementScrolled();
+        this.styleLoader.load(ScrollbarStyleLoader);
+        effect(() => {
+            const mode = this.mode();
+            const hideDelay = this.hideDelay();
+            const showTrack = mode !== 'native' && mode !== 'hidden';
+            if (!showTrack) {
+                this.destroyTrack();
+                return;
             }
-            else {
-                init();
+            if (!this.trackRef) {
+                this.trackRef = this.createTrack();
+            }
+            this.trackRef.setInput('mode', mode);
+            this.trackRef.setInput('hideDelay', hideDelay);
+        });
+        // ApplicationRef owns the track view, so the viewport must destroy it explicitly.
+        this.destroyRef.onDestroy(() => this.destroyTrack());
+        if (this.scrollable instanceof CdkVirtualScrollViewport) {
+            afterNextRender(() => this.dropDuplicateScrollableRegistration(), { injector: this.injector });
+        }
+    }
+    // Virtual scroll provides its own CdkScrollable while the host directive still registers another
+    // instance for the same element. Keep only the instance used by this directive.
+    dropDuplicateScrollableRegistration() {
+        const element = this.getNativeElement();
+        for (const scrollable of this.scrollDispatcher.getAncestorScrollContainers(element)) {
+            if (scrollable !== this.scrollable && scrollable.getElementRef().nativeElement === element) {
+                this.scrollDispatcher.deregister(scrollable);
             }
+        }
+    }
+    /** Briefly reveals an overflowing `hover`-mode scrollbar. */
+    flashScrollIndicators() {
+        this.flashSubject.next();
+    }
+    /** Scrolls to the specified offsets. RTL-normalized — see `CdkScrollable.scrollTo`. */
+    scrollTo(options) {
+        this.scrollable.scrollTo(options);
+    }
+    /** Scrolls to the start of the vertical axis. */
+    scrollToTop(behavior) {
+        this.scrollTo({ top: 0, behavior });
+    }
+    /** Scrolls to the end of the vertical axis. */
+    scrollToBottom(behavior) {
+        this.scrollTo({ top: this.getNativeElement().scrollHeight, behavior });
+    }
+    /** Scrolls to the logical start of the horizontal axis — the right edge in RTL, left in LTR. */
+    scrollStart(behavior) {
+        this.scrollTo({ start: 0, behavior });
+    }
+    /** Scrolls to the logical end of the horizontal axis — the left edge in RTL, right in LTR. */
+    scrollEnd(behavior) {
+        this.scrollTo({ end: 0, behavior });
+    }
+    /** Scrolls `target` (an element, or a selector resolved against this viewport) into view. */
+    scrollToElement(target, options) {
+        const _target = typeof target === 'string' ? this.getNativeElement().querySelector(target) : target;
+        if (!_target)
+            return;
+        const { offsetTop, offsetLeft } = getElementOffset(this.getNativeElement(), _target);
+        this.scrollTo({
+            top: offsetTop - (options?.top ?? 0),
+            left: offsetLeft - (options?.left ?? 0),
+            behavior: options?.behavior
+        });
+    }
+    /** Scrolls `target` to the center of the viewport. */
+    scrollIntoView(target, behavior) {
+        const { offsetHeight, offsetWidth } = target;
+        const { offsetTop, offsetLeft } = getElementOffset(this.getNativeElement(), target);
+        this.scrollTo({
+            top: offsetTop + offsetHeight / 2 - this.getNativeElement().clientHeight / 2,
+            left: offsetLeft + offsetWidth / 2 - this.getNativeElement().clientWidth / 2,
+            behavior
+        });
+    }
+    createTrack() {
+        // A ViewContainerRef-owned view is moved back to its anchor when virtual scroll rebuilds its DOM.
+        // ApplicationRef lets the track remain a direct child of the scrollable element.
+        const track = createComponent(KbqScrollbarTrack, {
+            environmentInjector: this.environmentInjector,
+            elementInjector: this.injector
         });
+        this.appRef.attachView(track.hostView);
+        // The field may point to a replacement by the time the render callback runs.
+        afterNextRender(() => {
+            this.getNativeElement().insertBefore(track.location.nativeElement, this.getNativeElement().firstChild);
+        }, { injector: this.injector });
+        return track;
+    }
+    destroyTrack() {
+        if (!this.trackRef) {
+            return;
+        }
+        this.appRef.detachView(this.trackRef.hostView);
+        this.trackRef.destroy();
+        this.trackRef = null;
     }
-    ngOnDestroy() {
-        this.cancelDefer();
+    /** The viewport's native scrollable element — the host this directive is applied to. */
+    getNativeElement() {
+        return this.scrollable.getElementRef().nativeElement;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqScrollbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqScrollbarDirective, isStandalone: true, selector: "[kbqScrollbar]", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: false, isRequired: false, transformFunction: null }, defer: { classPropertyName: "defer", publicName: "defer", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.CdkScrollable }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbarViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqScrollbarViewport, isStandalone: true, selector: "[kbqScrollbarViewport]", inputs: { mode: { classPropertyName: "mode", publicName: "kbqScrollbarMode", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "kbqScrollbarHideDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-scrollbar-viewport_native-scrollbar-hidden": "mode() !== \"native\"", "attr.id": "id" }, classAttribute: "kbq-scrollbar-viewport" }, hostDirectives: [{ directive: i1.CdkScrollable }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqScrollbarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbarViewport, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kbqScrollbar]',
+                    selector: '[kbqScrollbarViewport]',
+                    host: {
+                        class: 'kbq-scrollbar-viewport',
+                        '[class.kbq-scrollbar-viewport_native-scrollbar-hidden]': 'mode() !== "native"',
+                        '[attr.id]': 'id'
+                    },
                     hostDirectives: [CdkScrollable]
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{
-                type: Input
-            }], events: [{
-                type: Input
-            }], defer: [{ type: i0.Input, args: [{ isSignal: true, alias: "defer", required: false }] }] } });
-
-const filterEvents = (emits, events) => Object.keys(emits).reduce((obj, name) => {
-    const emitListener = emits[name];
-    const eventListener = events[name];
-    // merge & check listeners
-    obj[name] = [
-        emitListener,
-        ...(Array.isArray(eventListener) ? eventListener : [eventListener]).filter(Boolean)
-    ];
-    return obj;
-}, {});
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqScrollbarMode", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqScrollbarHideDelay", required: false }] }] } });
 /**
- * The component-wrapper for `overlayscrollbars` library.
+ * Emits, at most once a frame, whenever the viewport's scrollable size may have changed.
+ *
+ * Nothing fires when `scrollHeight` itself changes, and polling it would keep an otherwise idle page
+ * rendering for as long as the viewport exists. What changes that size does fire something: the viewport
+ * or a box directly inside its content resizes; the DOM inside changes — nodes, text or attributes; an
+ * image or a font loads; a transition or an animation ends.
+ *
+ * What still escapes — a style applied from outside the viewport that grows only the content of an
+ * inline element, a transform reaching past the content — is caught once the viewport is hovered or
+ * focused, and the track also re-measures whenever the viewport scrolls, which it only does once there
+ * is something to scroll.
  */
-class KbqScrollbar {
+class KbqScrollbarContentObserver {
     constructor() {
-        this.ngZone = inject(NgZone);
-        this.targetElement = inject(ElementRef);
-        /** Element that is being overflowed */
-        this.contentElement = viewChild.required('content');
-        this.kbqScrollbarDirective = viewChild.required('content', { read: KbqScrollbarDirective });
-        /** Elements scrollbar applied on */
-        this.initializationTarget = input(...(ngDevMode ? [undefined, { debugName: "initializationTarget" }] : []));
-        /** Scrollbar behavior customization object */
-        this.options = input(undefined, ...(ngDevMode ? [{ debugName: "options" }] : []));
-        this.events = input(undefined, ...(ngDevMode ? [{ debugName: "events" }] : []));
-        /** Whether to defer the initialization to a point in time when the browser is idle. (or to the next frame if `window.requestIdleCallback` is not supported) */
-        this.defer = input(...(ngDevMode ? [undefined, { debugName: "defer" }] : []));
-        this.onInitialize = new EventEmitter();
-        /** Event triggered when options or event listeners updated */
-        this.onUpdate = new EventEmitter();
-        /** Event triggered when scrollbar instance destroyed */
-        this.onDestroy = new EventEmitter();
-        this.onScroll = new EventEmitter();
-        this.injector = inject(Injector);
-    }
-    get element() {
-        return this.targetElement.nativeElement;
+        this.viewport = inject(KbqScrollbarViewport);
+        this.viewportElement = this.viewport.getNativeElement();
+        this.document = inject(DOCUMENT);
+        this.resizeObserver = inject(SharedResizeObserver);
+        this.mutationObserverFactory = inject(MutationObserverFactory);
+        this.nextFrame = nextAnimationFrame();
+        this.changes = merge(this.resizeObserver.observe(this.viewportElement), this.domChanges(), this.document.fonts ? fromEvent(this.document.fonts, 'loadingdone') : EMPTY, 
+        // `load` does not bubble, so it is caught on its way down. The other two end a change that a
+        // mutation only started: content transitioning open, an element animating in.
+        merge(...['load', 'transitionend', 'animationend'].map((type) => fromEvent(this.viewportElement, type, { capture: true }))).pipe(filter(({ target }) => !this.isInsideTrack(target))), fromEvent(this.viewportElement, 'pointerenter'), fromEvent(this.viewportElement, 'focusin'), this.viewport.flashes).pipe(
+        // Ahead of the audit, which holds the last value until the frame — and no frame comes while the tab
+        // is hidden, so a batch of removed nodes would stay reachable all that time.
+        map(() => undefined), startWith(undefined), audit(() => this.nextFrame), zoneFree(), share());
     }
-    ngAfterViewInit() {
-        afterNextRender(() => {
-            const contentElement = this.contentElement();
-            if (this.element && contentElement?.nativeElement) {
-                this.kbqScrollbarDirective()?.initialize(this.initializationTarget() || {
-                    target: this.targetElement.nativeElement,
-                    elements: {
-                        viewport: contentElement.nativeElement,
-                        content: contentElement.nativeElement
+    // Mutations inside the viewport and resizes of the boxes directly inside its content, as one stream.
+    domChanges() {
+        return new Observable((subscriber) => {
+            const notify = () => subscriber.next();
+            const boxes = new Set();
+            // An observer of its own rather than CDK's SharedResizeObserver, which filters every batch once per
+            // observed element — quadratic for a list whose rows sit directly in the viewport.
+            const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(notify);
+            const syncBoxes = () => {
+                const current = new Set(this.getContentBoxes());
+                boxes.forEach((box) => {
+                    if (!current.has(box)) {
+                        resizeObserver?.unobserve(box);
+                        boxes.delete(box);
+                    }
+                });
+                current.forEach((box) => {
+                    if (!boxes.has(box)) {
+                        // The border box, so that a padding or border change counts as the resize it is.
+                        resizeObserver?.observe(box, { box: 'border-box' });
+                        boxes.add(box);
                     }
                 });
+            };
+            // Not CDK's ContentObserver: it emits inside NgZone, and every emission would then cost the whole
+            // application a change detection pass — usually a second one, right after the render that mutated.
+            const mutationObserver = this.mutationObserverFactory.create((records) => {
+                const relevant = records.filter((record) => this.affectsContent(record));
+                if (!relevant.length) {
+                    return;
+                }
+                const root = this.getContentRoot();
+                if (relevant.some(({ type, target }) => type === 'childList' && (target === root || target === this.viewportElement))) {
+                    syncBoxes();
+                }
+                notify();
+            });
+            // Attributes too: a class, style or `hidden` toggle inside an inline element grows the content
+            // without resizing any box watched here, and it is how the viewport's own `overflow` changes.
+            mutationObserver?.observe(this.viewportElement, {
+                attributes: true,
+                childList: true,
+                characterData: true,
+                subtree: true
+            });
+            syncBoxes();
+            return () => {
+                mutationObserver?.disconnect();
+                resizeObserver?.disconnect();
+            };
+        });
+    }
+    // `kbq-scrollbar` keeps its content in a wrapper held at the viewport's full height, which never grows
+    // with what it holds, so the boxes that do are its children.
+    getContentRoot() {
+        return this.viewportElement.querySelector(':scope > .kbq-scrollbar__content') ?? this.viewportElement;
+    }
+    getContentBoxes() {
+        return Array.from(this.getContentRoot().children).filter((child) => child.localName !== TRACK_TAG);
+    }
+    // Skips what cannot change the scrollable size: tracks redrawing their bars, and Angular moving the
+    // comment anchors of `@if` and `@for` — the same comment-only records CDK's ContentObserver skips.
+    affectsContent({ type, target, addedNodes, removedNodes }) {
+        if (target.nodeType === Node.COMMENT_NODE || this.isInsideTrack(target)) {
+            return false;
+        }
+        if (type !== 'childList') {
+            return true;
+        }
+        return [...Array.from(addedNodes), ...Array.from(removedNodes)].some((node) => node.nodeType !== Node.COMMENT_NODE && !this.isInsideTrack(node));
+    }
+    // This viewport's track or a nested viewport's: tracks move their thumbs on every scroll and never
+    // change the size of the content around them. Recognised by structure, not by the element this
+    // observer happens to be provided on.
+    isInsideTrack(node) {
+        for (let current = node; current && current !== this.viewportElement; current = current.parentNode) {
+            if (current.localName === TRACK_TAG) {
+                return true;
             }
-        }, { injector: this.injector });
+        }
+        return false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbarContentObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbarContentObserver }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbarContentObserver, decorators: [{
+            type: Injectable
+        }] });
+class KbqScrollbarThumb {
+    constructor() {
+        this.viewport = inject(KbqScrollbarViewport);
+        this.directionality = inject(Directionality);
+        this.viewportElement = this.viewport.getNativeElement();
+        this.nativeElement = kbqInjectNativeElement();
+        this.style = this.nativeElement.style;
+        this.contentChanges = inject(KbqScrollbarContentObserver).changes;
+        this.orientation = input.required(...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        merge(fromEvent(this.nativeElement.parentElement, 'mousedown').pipe(filter(({ target }) => target !== this.nativeElement), map((event) => this.getScrolled(event, 0.5, 0.5, this.isRtl()))), fromEvent(this.nativeElement, 'mousedown').pipe(zoneFree(), switchMap((event) => {
+            const { ownerDocument } = this.nativeElement;
+            const { top, left, height, width } = this.nativeElement.getBoundingClientRect();
+            const vertical = (event.clientY - top) / height;
+            const horizontal = (event.clientX - left) / width;
+            const rtl = this.isRtl();
+            return fromEvent(ownerDocument, 'mousemove').pipe(map((event) => this.getScrolled(event, vertical, horizontal, rtl)), takeUntil(fromEvent(ownerDocument, 'mouseup')));
+        })))
+            .pipe(takeUntilDestroyed())
+            .subscribe(([top, left]) => {
+            this.viewportElement.style.scrollBehavior = 'auto';
+            if (this.orientation() === 'horizontal') {
+                this.viewportElement.scrollLeft = left;
+            }
+            else {
+                this.viewportElement.scrollTop = top;
+            }
+            this.viewportElement.style.scrollBehavior = '';
+        });
+        merge(this.contentChanges, this.viewport.scrollChanges)
+            .pipe(zoneFree(), map(() => this.getDimension()), takeUntilDestroyed())
+            .subscribe((dimension) => {
+            this.applyPosition(this.getPosition(dimension));
+            this.applyValueNow(this.getValueNow(dimension));
+        });
+        // Wait until Angular has applied `orientation` before calculating the initial ARIA value. Read and written in
+        // phases of their own, so that the thumbs rendered together read in one layout rather than each after another's
+        // write.
+        afterNextRender({
+            earlyRead: () => this.getDimension(),
+            write: (dimension) => {
+                this.applyPosition(this.getPosition(dimension));
+                this.applyValueNow(this.getValueNow(dimension));
+            }
+        });
     }
-    ngOnDestroy() {
-        this.kbqScrollbarDirective()?.scrollbarInstance?.destroy();
+    // The DOM fallback covers bare or dynamically updated `dir` attributes that do not update Directionality.
+    isRtl() {
+        return this.directionality.value === 'rtl' || !!this.viewportElement.closest('[dir="rtl"]');
     }
-    /** Wrapper function for native scroll */
-    scrollTo(options) {
-        this.contentElement()?.nativeElement.scroll(options);
-    }
-    /** @docs-private Implementation of `KbqOverflowShadowSource`. */
-    getScrollElement() {
-        return this.contentElement()?.nativeElement ?? null;
-    }
-    mergeEvents() {
-        const defaultListeners = {
-            initialized: (...args) => this.dispatchEventIfHasObservers(this.onInitialize, args),
-            updated: (...args) => this.dispatchEventIfHasObservers(this.onUpdate, args),
-            destroyed: (...args) => this.dispatchEventIfHasObservers(this.onDestroy, args),
-            scroll: (...args) => this.dispatchEventIfHasObservers(this.onScroll, args)
-        };
-        const events = this.events();
-        if (!events) {
-            return defaultListeners;
+    getScrolled({ clientY, clientX }, offsetY, offsetX, rtl) {
+        const { offsetHeight, offsetWidth } = this.nativeElement;
+        const { top, left, right, width, height } = this.nativeElement.parentElement.getBoundingClientRect();
+        const inline = rtl ? right : left;
+        const multiplier = rtl ? -1 : 1;
+        const maxTop = this.viewportElement.scrollHeight - height;
+        const maxLeft = this.viewportElement.scrollWidth - width;
+        const scrolledTop = (clientY - top - offsetHeight * offsetY) / (height - offsetHeight);
+        const scrolledLeft = (clientX - inline - offsetWidth * offsetX * multiplier) / (width - offsetWidth);
+        return [maxTop * scrolledTop, maxLeft * scrolledLeft];
+    }
+    applyPosition(style) {
+        Object.assign(this.style, style);
+    }
+    applyValueNow(valueNow) {
+        this.nativeElement.setAttribute('aria-valuenow', `${valueNow}`);
+    }
+    getDimension() {
+        const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = this.viewportElement;
+        return { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth };
+    }
+    getPosition(dimension) {
+        const thumb = `${this.getThumbFraction(dimension) * 100}%`;
+        const view = `${this.getViewFraction(dimension) * 100}%`;
+        return this.orientation() === 'vertical'
+            ? { top: thumb, height: view }
+            : { insetInlineStart: thumb, width: view };
+    }
+    getValueNow(dimension) {
+        const scrolledFraction = this.getScrolledFraction(dimension);
+        return Number.isNaN(scrolledFraction) ? 0 : Math.round(Math.abs(scrolledFraction) * 100);
+    }
+    getThumbFraction(dimension) {
+        const compensation = this.getCompensation(dimension) || this.getViewFraction(dimension);
+        return Math.abs(this.getScrolledFraction(dimension) * (1 - compensation));
+    }
+    getViewFraction(dimension) {
+        return this.orientation() === 'vertical'
+            ? Math.ceil((dimension.clientHeight / dimension.scrollHeight) * 100) / 100
+            : Math.ceil((dimension.clientWidth / dimension.scrollWidth) * 100) / 100;
+    }
+    getScrolledFraction({ scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth }) {
+        return this.orientation() === 'vertical'
+            ? scrollTop / (scrollHeight - clientHeight)
+            : scrollLeft / (scrollWidth - clientWidth);
+    }
+    getCompensation({ clientHeight, clientWidth, scrollWidth, scrollHeight }) {
+        if (((clientHeight * clientHeight) / scrollHeight > MIN_THUMB_BOX_SIZE && this.orientation() === 'vertical') ||
+            ((clientWidth * clientWidth) / scrollWidth > MIN_THUMB_BOX_SIZE && this.orientation() === 'horizontal')) {
+            return 0;
         }
-        // merge default listeners with custom listeners in case of Input binding
+        return this.orientation() === 'vertical' ? MIN_THUMB_BOX_SIZE / clientHeight : MIN_THUMB_BOX_SIZE / clientWidth;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbarThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqScrollbarThumb, isStandalone: true, selector: "[kbqScrollbarThumb]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "scrollbar" }, properties: { "attr.aria-orientation": "orientation()", "attr.aria-controls": "viewportElement.id", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100" } }, exportAs: ["kbqScrollbarThumb"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbarThumb, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqScrollbarThumb]',
+                    host: {
+                        role: 'scrollbar',
+                        '[attr.aria-orientation]': 'orientation()',
+                        '[attr.aria-controls]': 'viewportElement.id',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': '100'
+                    },
+                    exportAs: 'kbqScrollbarThumb'
+                }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }] } });
+class KbqScrollbarTrack {
+    constructor() {
+        this.viewport = inject(KbqScrollbarViewport);
+        this.viewportElement = this.viewport.getNativeElement();
+        this.window = inject(KBQ_WINDOW);
+        this.renderer = inject(Renderer2);
+        this.ngZone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
+        this.resizeObserver = inject(SharedResizeObserver);
+        this.nativeElement = kbqInjectNativeElement();
+        this.scheduler = zoneFreeScheduler();
+        // Scrolling re-measures too: a viewport that scrolls has something to scroll, whatever the observers
+        // missed on the way there.
+        this.visibility = toSignal(merge(inject(KbqScrollbarContentObserver).changes, this.viewport.scrollChanges).pipe(map(() => this.scrollbars), startWith([false, false]), distinctUntilChanged((a, b) => a[0] === b[0] && a[1] === b[1]), zoneOptimized()), { requireSync: true });
+        this.revealed = toSignal(merge(this.viewport.scrollChanges, this.viewport.flashes).pipe(
+        // Hoisted rather than injected inside switchMap, which runs outside an injection context.
+        // The scheduler is what keeps the hide timer out of Angular: `scrollChanges` already emits
+        // outside the zone, but `flashes` carries whatever zone its caller was in, and a caller
+        // inside Angular would otherwise leave NgZone unstable for the whole hideDelay.
+        switchMap(() => concat(of(true), timer(this.hideDelay(), this.scheduler).pipe(map(() => false)))), startWith(false), distinctUntilChanged(), zoneOptimized()), { requireSync: true });
+        /** Whether the bars, the thumbs and the hover-mode track appear and change color without motion. */
+        this.animationsDisabled = kbqAnimationsDisabled();
+        this.mode = input.required(...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.hideDelay = input.required(...(ngDevMode ? [{ debugName: "hideDelay" }] : /* istanbul ignore next */ []));
+        this.resizeObserver
+            .observe(this.viewportElement)
+            .pipe(map(() => this.getViewportMetrics()), distinctUntilChanged((a, b) => a.blockSize === b.blockSize &&
+            a.inlineSize === b.inlineSize &&
+            a.paddingBlockStart === b.paddingBlockStart &&
+            a.paddingInlineStart === b.paddingInlineStart), 
+        // Written once the observer's callback returns, still ahead of the frame: the callback hands one batch
+        // to the tracks of every viewport in it, and a write between them makes the next track's read force a
+        // layout. Outside Angular, as the write needs no change detection.
+        observeOn(zoneFreeScheduler(asapScheduler)), takeUntilDestroyed())
+            .subscribe((metrics) => this.applyGeometry(metrics));
+    }
+    // A drag released over sibling content produces a click on their common ancestor. Capture that
+    // single click after mouseup so scrollbar gestures cannot activate the host panel.
+    onBarPointerDown(event) {
+        event.preventDefault();
+        this.ngZone.runOutsideAngular(() => {
+            fromEvent(this.window, 'mouseup')
+                .pipe(take(1), switchMap(() => fromEvent(this.window, 'click', { capture: true }).pipe(take(1), 
+            // Drop the listener on the next task when the gesture produces no click.
+            takeUntil(timer(0)))), takeUntilDestroyed(this.destroyRef))
+                .subscribe((click) => click.stopPropagation());
+        });
+    }
+    get scrollbars() {
+        const { clientHeight, scrollHeight, clientWidth, scrollWidth } = this.viewportElement;
+        // An overflowing axis is not necessarily a scrollable one: `overflow: hidden` still scrolls
+        // programmatically, so the size ratio alone would paint a bar — and hand over a draggable
+        // thumb — for an axis the browser itself refuses to give a scrollbar to.
+        const { overflowX, overflowY } = this.window.getComputedStyle(this.viewportElement);
+        return [
+            !NON_SCROLLABLE_OVERFLOW.includes(overflowY) && Math.ceil((clientHeight / scrollHeight) * 100) < 100,
+            !NON_SCROLLABLE_OVERFLOW.includes(overflowX) && Math.ceil((clientWidth / scrollWidth) * 100) < 100
+        ];
+    }
+    getViewportMetrics() {
+        const element = this.viewportElement;
+        const style = this.window.getComputedStyle(element);
         return {
-            ...defaultListeners,
-            ...filterEvents(events, defaultListeners)
+            blockSize: element.clientHeight,
+            inlineSize: element.clientWidth,
+            paddingBlockStart: parseFloat(style.paddingBlockStart) || 0,
+            paddingInlineStart: parseFloat(style.paddingInlineStart) || 0
         };
     }
-    dispatchEventIfHasObservers(eventEmitter, args) {
-        // `observed` is available since RxJS@7.2 because `observers` is being deprecated.
-        if (eventEmitter.observed || eventEmitter.observers.length > 0) {
-            // This is required to re-enter the Angular zone to call the event handler in the Angular
-            // zone too. This will not re-enter the Angular zone if emitter doesn't have any observers,
-            // for instance, it's being listened: `<overlay-scrollbars (osInitialized)="..."`.
-            // Events are dispatched outside of the Angular zone because instance is created in the
-            // `<root>` zone
-            this.ngZone.run(() => eventEmitter.emit(args));
+    // Start margins and insets move the sticky track from the content box to the padded scrollport;
+    // end margins cancel its layout contribution.
+    applyGeometry({ blockSize, inlineSize, paddingBlockStart, paddingInlineStart }) {
+        const setStyle = (property, value) => this.renderer.setStyle(this.nativeElement, property, coerceCssPixelValue(value));
+        // Clamped once and reused, so the size and the end margin cancel out by construction. Passing
+        // the unclamped value would break that on a zero-sized viewport: CSSOM silently drops the
+        // negative size while it accepts the positive margin paired with it, leaving the track a pixel
+        // tall inside a scrollport that has no room for it. That pixel changes `clientHeight`, which
+        // re-runs this method through the resize observer, which takes the pixel back — forever.
+        const trackBlockSize = Math.max(0, blockSize - 1);
+        const trackInlineSize = Math.max(0, inlineSize - 1);
+        setStyle('blockSize', trackBlockSize);
+        setStyle('marginBlockStart', -paddingBlockStart);
+        setStyle('marginBlockEnd', paddingBlockStart - trackBlockSize);
+        setStyle('insetBlockStart', -paddingBlockStart);
+        setStyle('minInlineSize', trackInlineSize);
+        setStyle('maxInlineSize', trackInlineSize);
+        setStyle('marginInlineStart', -paddingInlineStart);
+        setStyle('marginInlineEnd', paddingInlineStart - trackInlineSize);
+        setStyle('insetInlineStart', -paddingInlineStart);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbarTrack, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqScrollbarTrack, isStandalone: true, selector: "kbq-scrollbar-track", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.kbq-scrollbar-track_hover": "mode() === 'hover'", "class.kbq-scrollbar-track_revealed": "revealed()", "class.kbq-animations-disabled": "animationsDisabled" }, classAttribute: "kbq-scrollbar-track" }, providers: [KbqScrollbarContentObserver], ngImport: i0, template: `
+        @if (visibility()[0]) {
+            <div
+                animate.enter="kbq-scrollbar-track__bar_enter"
+                animate.leave="kbq-scrollbar-track__bar_leave"
+                class="kbq-scrollbar-track__bar kbq-scrollbar-track__bar_vertical"
+                [class.kbq-scrollbar-track__bar_has-horizontal]="visibility()[1]"
+                [class.kbq-animations-disabled]="animationsDisabled"
+                (mousedown)="onBarPointerDown($event)"
+            >
+                <div
+                    kbqScrollbarThumb
+                    orientation="vertical"
+                    class="kbq-scrollbar-track__thumb"
+                    [class.kbq-animations-disabled]="animationsDisabled"
+                ></div>
+            </div>
+        }
+        @if (visibility()[1]) {
+            <div
+                animate.enter="kbq-scrollbar-track__bar_enter"
+                animate.leave="kbq-scrollbar-track__bar_leave"
+                class="kbq-scrollbar-track__bar kbq-scrollbar-track__bar_horizontal"
+                [class.kbq-scrollbar-track__bar_has-vertical]="visibility()[0]"
+                [class.kbq-animations-disabled]="animationsDisabled"
+                (mousedown)="onBarPointerDown($event)"
+            >
+                <div
+                    kbqScrollbarThumb
+                    orientation="horizontal"
+                    class="kbq-scrollbar-track__thumb"
+                    [class.kbq-animations-disabled]="animationsDisabled"
+                ></div>
+            </div>
         }
+    `, isInline: true, styles: ["@charset \"UTF-8\";:host{position:sticky;z-index:var(--kbq-scrollbar-track-z-index, 1000);display:block;flex-shrink:0;pointer-events:none;overflow:hidden;color:var(--kbq-scrollbar-color, currentColor)}@keyframes kbq-scrollbar-fade{0%{opacity:0}to{opacity:1}}.kbq-scrollbar-track__bar{position:absolute;inset-inline-end:0;background:var(--kbq-scrollbar-track-background, transparent);pointer-events:auto}.kbq-scrollbar-track__bar_enter,.kbq-scrollbar-track__bar_leave{animation:kbq-scrollbar-fade var(--kbq-scrollbar-transition-duration) ease-in-out}.kbq-scrollbar-track__bar_enter.kbq-animations-disabled,.kbq-scrollbar-track__bar_leave.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-scrollbar-track__bar_enter,.kbq-scrollbar-track__bar_leave{animation:none;transition:none}}.kbq-scrollbar-track__bar_leave{animation-direction:reverse}.kbq-scrollbar-track__bar_vertical{inset-block:0;inline-size:var(--kbq-scrollbar-track-size)}.kbq-scrollbar-track__bar_horizontal{inset-block-end:0;inset-inline-start:0;block-size:var(--kbq-scrollbar-track-size)}.kbq-scrollbar-track__bar_has-horizontal{inset-block-end:var(--kbq-scrollbar-track-size)}.kbq-scrollbar-track__bar_has-vertical{inset-inline-end:var(--kbq-scrollbar-track-size)}.kbq-scrollbar-track__thumb{transition:background-color var(--kbq-scrollbar-transition-duration) ease;position:absolute;border:var(--kbq-scrollbar-thumb-gap) solid transparent;border-radius:var(--kbq-size-border-radius);box-sizing:border-box;background-color:var(--kbq-scrollbar-thumb-default-background);background-clip:content-box;cursor:default;-webkit-user-select:none;user-select:none;pointer-events:auto}.kbq-scrollbar-track__thumb.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-scrollbar-track__thumb{animation:none;transition:none}}.kbq-scrollbar-track__thumb:hover{background-color:var(--kbq-scrollbar-thumb-hover-background)}.kbq-scrollbar-track__thumb:active{background-color:var(--kbq-scrollbar-thumb-active-background)}.kbq-scrollbar-track__bar_vertical .kbq-scrollbar-track__thumb{inset-inline:0;min-block-size:calc(var(--kbq-scrollbar-thumb-min-size) + var(--kbq-scrollbar-thumb-gap) * 2)}.kbq-scrollbar-track__bar_horizontal .kbq-scrollbar-track__thumb{inset-block:0;min-inline-size:calc(var(--kbq-scrollbar-thumb-min-size) + var(--kbq-scrollbar-thumb-gap) * 2)}\n"], dependencies: [{ kind: "directive", type: KbqScrollbarThumb, selector: "[kbqScrollbarThumb]", inputs: ["orientation"], exportAs: ["kbqScrollbarThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbarTrack, decorators: [{
+            type: Component,
+            args: [{ selector: TRACK_TAG, imports: [KbqScrollbarThumb], template: `
+        @if (visibility()[0]) {
+            <div
+                animate.enter="kbq-scrollbar-track__bar_enter"
+                animate.leave="kbq-scrollbar-track__bar_leave"
+                class="kbq-scrollbar-track__bar kbq-scrollbar-track__bar_vertical"
+                [class.kbq-scrollbar-track__bar_has-horizontal]="visibility()[1]"
+                [class.kbq-animations-disabled]="animationsDisabled"
+                (mousedown)="onBarPointerDown($event)"
+            >
+                <div
+                    kbqScrollbarThumb
+                    orientation="vertical"
+                    class="kbq-scrollbar-track__thumb"
+                    [class.kbq-animations-disabled]="animationsDisabled"
+                ></div>
+            </div>
+        }
+        @if (visibility()[1]) {
+            <div
+                animate.enter="kbq-scrollbar-track__bar_enter"
+                animate.leave="kbq-scrollbar-track__bar_leave"
+                class="kbq-scrollbar-track__bar kbq-scrollbar-track__bar_horizontal"
+                [class.kbq-scrollbar-track__bar_has-vertical]="visibility()[0]"
+                [class.kbq-animations-disabled]="animationsDisabled"
+                (mousedown)="onBarPointerDown($event)"
+            >
+                <div
+                    kbqScrollbarThumb
+                    orientation="horizontal"
+                    class="kbq-scrollbar-track__thumb"
+                    [class.kbq-animations-disabled]="animationsDisabled"
+                ></div>
+            </div>
+        }
+    `, providers: [KbqScrollbarContentObserver], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'kbq-scrollbar-track',
+                        '[class.kbq-scrollbar-track_hover]': "mode() === 'hover'",
+                        '[class.kbq-scrollbar-track_revealed]': 'revealed()',
+                        '[class.kbq-animations-disabled]': 'animationsDisabled'
+                    }, styles: ["@charset \"UTF-8\";:host{position:sticky;z-index:var(--kbq-scrollbar-track-z-index, 1000);display:block;flex-shrink:0;pointer-events:none;overflow:hidden;color:var(--kbq-scrollbar-color, currentColor)}@keyframes kbq-scrollbar-fade{0%{opacity:0}to{opacity:1}}.kbq-scrollbar-track__bar{position:absolute;inset-inline-end:0;background:var(--kbq-scrollbar-track-background, transparent);pointer-events:auto}.kbq-scrollbar-track__bar_enter,.kbq-scrollbar-track__bar_leave{animation:kbq-scrollbar-fade var(--kbq-scrollbar-transition-duration) ease-in-out}.kbq-scrollbar-track__bar_enter.kbq-animations-disabled,.kbq-scrollbar-track__bar_leave.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-scrollbar-track__bar_enter,.kbq-scrollbar-track__bar_leave{animation:none;transition:none}}.kbq-scrollbar-track__bar_leave{animation-direction:reverse}.kbq-scrollbar-track__bar_vertical{inset-block:0;inline-size:var(--kbq-scrollbar-track-size)}.kbq-scrollbar-track__bar_horizontal{inset-block-end:0;inset-inline-start:0;block-size:var(--kbq-scrollbar-track-size)}.kbq-scrollbar-track__bar_has-horizontal{inset-block-end:var(--kbq-scrollbar-track-size)}.kbq-scrollbar-track__bar_has-vertical{inset-inline-end:var(--kbq-scrollbar-track-size)}.kbq-scrollbar-track__thumb{transition:background-color var(--kbq-scrollbar-transition-duration) ease;position:absolute;border:var(--kbq-scrollbar-thumb-gap) solid transparent;border-radius:var(--kbq-size-border-radius);box-sizing:border-box;background-color:var(--kbq-scrollbar-thumb-default-background);background-clip:content-box;cursor:default;-webkit-user-select:none;user-select:none;pointer-events:auto}.kbq-scrollbar-track__thumb.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-scrollbar-track__thumb{animation:none;transition:none}}.kbq-scrollbar-track__thumb:hover{background-color:var(--kbq-scrollbar-thumb-hover-background)}.kbq-scrollbar-track__thumb:active{background-color:var(--kbq-scrollbar-thumb-active-background)}.kbq-scrollbar-track__bar_vertical .kbq-scrollbar-track__thumb{inset-inline:0;min-block-size:calc(var(--kbq-scrollbar-thumb-min-size) + var(--kbq-scrollbar-thumb-gap) * 2)}.kbq-scrollbar-track__bar_horizontal .kbq-scrollbar-track__thumb{inset-block:0;min-inline-size:calc(var(--kbq-scrollbar-thumb-min-size) + var(--kbq-scrollbar-thumb-gap) * 2)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: true }] }] } });
+/** Custom scrollbar wrapper: projects content and overlays a scrollbar track over it (created by its {@link KbqScrollbarViewport} host directive). */
+class KbqScrollbar {
+    constructor() {
+        this.options = inject(KBQ_SCROLLBAR_OPTIONS);
+        this.viewport = inject(KbqScrollbarViewport);
+        /** Visibility mode for the scrollbar. Defaults to the app-wide {@link KBQ_SCROLLBAR_OPTIONS}. */
+        this.mode = input(this.options.mode, { ...(ngDevMode ? { debugName: "mode" } : /* istanbul ignore next */ {}), alias: 'kbqScrollbarMode' });
+        /**
+         * How long the scroll-revealed `hover`-mode track stays visible after scrolling stops, in milliseconds.
+         * Defaults to the app-wide {@link KBQ_SCROLLBAR_OPTIONS}.
+         */
+        this.hideDelay = input(this.options.hideDelay, { ...(ngDevMode ? { debugName: "hideDelay" } : /* istanbul ignore next */ {}), alias: 'kbqScrollbarHideDelay',
+            transform: numberAttribute });
+        /** Emits on every native `scroll` event of the viewport. Emits outside Angular's zone — see `CdkScrollable.elementScrolled`. */
+        this.scrollChanges = this.viewport.scrollChanges;
+    }
+    /** The scrollbar's native scrollable element. */
+    getNativeElement() {
+        return this.viewport.getNativeElement();
+    }
+    /** Scrolls to the specified offsets. RTL-normalized — see `CdkScrollable.scrollTo`. */
+    scrollTo(options) {
+        this.viewport.scrollTo(options);
+    }
+    /** Scrolls to the start of the vertical axis. */
+    scrollToTop(behavior) {
+        this.viewport.scrollToTop(behavior);
+    }
+    /** Scrolls to the end of the vertical axis. */
+    scrollToBottom(behavior) {
+        this.viewport.scrollToBottom(behavior);
+    }
+    /** Scrolls to the logical start of the horizontal axis — the right edge in RTL, left in LTR. */
+    scrollStart(behavior) {
+        this.viewport.scrollStart(behavior);
+    }
+    /** Scrolls to the logical end of the horizontal axis — the left edge in RTL, right in LTR. */
+    scrollEnd(behavior) {
+        this.viewport.scrollEnd(behavior);
+    }
+    /** Scrolls `target` (an element, or a selector resolved against this scrollbar) into view. */
+    scrollToElement(target, options) {
+        this.viewport.scrollToElement(target, options);
+    }
+    /** Scrolls `target` to the center of the viewport. */
+    scrollIntoView(target, behavior) {
+        this.viewport.scrollIntoView(target, behavior);
+    }
+    /** Briefly reveals the scrollbar track — see {@link KbqScrollbarViewport.flashScrollIndicators}. */
+    flashScrollIndicators() {
+        this.viewport.flashScrollIndicators();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqScrollbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqScrollbar, isStandalone: true, selector: "kbq-scrollbar, [kbq-scrollbar]", inputs: { initializationTarget: { classPropertyName: "initializationTarget", publicName: "initializationTarget", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, defer: { classPropertyName: "defer", publicName: "defer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onInitialize: "onInitialize", onUpdate: "onUpdate", onDestroy: "onDestroy", onScroll: "onScroll" }, host: { attributes: { "data-overlayscrollbars-initialize": "" }, classAttribute: "kbq-scrollbar-component" }, providers: [
-            { provide: KBQ_OVERFLOW_SHADOW_SOURCE, useExisting: forwardRef((() => KbqScrollbar)) }
-        ], viewQueries: [{ propertyName: "contentElement", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "kbqScrollbarDirective", first: true, predicate: ["content"], descendants: true, read: KbqScrollbarDirective, isSignal: true }], exportAs: ["kbqScrollbar"], ngImport: i0, template: `
-        <div
-            #content
-            data-overlayscrollbars-contents=""
-            kbqScrollbar
-            [options]="options()"
-            [events]="mergeEvents()"
-            [defer]="defer()"
-        >
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KbqScrollbar, isStandalone: true, selector: "kbq-scrollbar", inputs: { mode: { classPropertyName: "mode", publicName: "kbqScrollbarMode", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "kbqScrollbarHideDelay", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["kbqScrollbar"], hostDirectives: [{ directive: KbqScrollbarViewport, inputs: ["kbqScrollbarMode", "kbqScrollbarMode", "kbqScrollbarHideDelay", "kbqScrollbarHideDelay"] }], ngImport: i0, template: `
+        <div class="kbq-scrollbar__content">
             <ng-content />
         </div>
-    `, isInline: true, styles: [".kbq-scrollbar-component .os-scrollbar-vertical{padding:var(--kbq-scrollbar-size-track-padding-vertical) var(--kbq-scrollbar-size-track-padding-horizontal);bottom:var(--kbq-scrollbar-size-track-dimension);width:var(--kbq-scrollbar-size-track-dimension)}.kbq-scrollbar-component .os-scrollbar-vertical .os-scrollbar-handle{transition:opacity .15s,background-color .15s,border-color .15s,width .15s;border:var(--kbq-scrollbar-size-track-padding-horizontal) solid;width:100%;min-height:var(--kbq-scrollbar-size-thumb-min-size)}.kbq-scrollbar-component .os-scrollbar-vertical:hover .os-scrollbar-handle,.kbq-scrollbar-component .os-scrollbar-vertical:active .os-scrollbar-handle{width:100%}.kbq-scrollbar-component .os-scrollbar-horizontal{padding:var(--kbq-scrollbar-size-track-padding-horizontal) var(--kbq-scrollbar-size-track-padding-vertical);right:var(--kbq-scrollbar-size-track-dimension);height:var(--kbq-scrollbar-size-track-dimension)}.kbq-scrollbar-component .os-scrollbar-horizontal .os-scrollbar-handle{transition:opacity .15s,background-color .15s,border-color .15s,height .15s;border:var(--kbq-scrollbar-size-track-padding-horizontal) solid;height:100%;min-width:var(--kbq-scrollbar-size-thumb-min-size)}.kbq-scrollbar-component .os-scrollbar-horizontal:hover .os-scrollbar-handle,.kbq-scrollbar-component .os-scrollbar-horizontal:active .os-scrollbar-handle{height:100%}.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle:before,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-track{box-sizing:border-box;border-radius:var(--kbq-scrollbar-size-thumb-border-radius)}.kbq-scrollbar-component .os-scrollbar .os-scrollbar-track{border-width:calc((var(--kbq-scrollbar-size-track-dimension) - var(--kbq-scrollbar-size-thumb-width)) / 4)!important;transition:opacity .15s,background-color .15s,border-color .15s}[data-overlayscrollbars-contents]:focus-visible{outline:none}.kbq-scrollbar-component.kbq-hover .os-scrollbar .os-scrollbar-handle:before,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle:hover:before{border-color:var(--kbq-scrollbar-thumb-hover-background);background-color:var(--kbq-scrollbar-thumb-hover-background)}.kbq-scrollbar-component.kbq-active .os-scrollbar .os-scrollbar-handle:before,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle:active:before{border-color:var(--kbq-scrollbar-thumb-active-background);background-color:var(--kbq-scrollbar-thumb-active-background)}.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle:before{border-color:var(--kbq-scrollbar-thumb-default-background);background-color:var(--kbq-scrollbar-thumb-default-background)}.kbq-scrollbar-component .os-scrollbar .os-scrollbar-track,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle{border-style:solid;border-color:var(--kbq-scrollbar-track-default-border)!important;background-color:var(--kbq-scrollbar-track-default-background)}.kbq-scrollbar-component .os-scrollbar .os-scrollbar-track:hover,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle:hover{border-color:var(--kbq-scrollbar-track-hover-border);background:var(--kbq-scrollbar-track-hover-background)}.kbq-scrollbar-component .os-scrollbar .os-scrollbar-track:active,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle:active{border-color:var(--kbq-scrollbar-track-active-border);background:var(--kbq-scrollbar-track-active-background)}.os-size-observer,.os-size-observer-listener{scroll-behavior:auto!important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;inset:0;transform:scale(.1)}.os-size-observer:before{content:\"\";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(10)}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty:before{content:\"\";width:100%;height:100%}.os-size-observer-listener:empty:before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{0%{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}.os-environment{scroll-behavior:auto!important;position:fixed;opacity:0;visibility:hidden;overflow:scroll;height:200px;width:200px;z-index:-1}.os-environment div{width:200%;height:200%;margin:10px 0}.os-environment.os-environment-flexbox-glue{display:flex;flex-direction:row;flex-wrap:nowrap;height:auto;width:auto;min-height:200px;min-width:200px}.os-environment.os-environment-flexbox-glue div{flex:auto;width:auto;height:auto;max-height:100%;max-width:100%;margin:0}.os-environment.os-environment-flexbox-glue-max{max-height:200px}.os-environment.os-environment-flexbox-glue-max div{overflow:visible}.os-environment.os-environment-flexbox-glue-max div:before{content:\"\";display:block;height:999px;width:999px}.os-environment,[data-overlayscrollbars-viewport]{-ms-overflow-style:scrollbar!important}[data-overlayscrollbars-initialize],[data-overlayscrollbars~=scrollbarHidden],[data-overlayscrollbars-viewport~=scrollbarHidden],.os-environment-scrollbar-hidden{scrollbar-width:none!important}[data-overlayscrollbars-initialize]::-webkit-scrollbar,[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,.os-environment-scrollbar-hidden::-webkit-scrollbar,.os-environment-scrollbar-hidden::-webkit-scrollbar-corner{-webkit-appearance:none!important;appearance:none!important;display:none!important;width:0!important;height:0!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}html[data-overlayscrollbars]{box-sizing:border-box;margin:0}html[data-overlayscrollbars~=body],html[data-overlayscrollbars~=body]>body{width:100%;height:100%}html[data-overlayscrollbars~=viewport]>body{overflow:visible}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch!important;flex-direction:row!important;flex-wrap:nowrap!important}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]:before{content:\"\";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:0;height:0}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]{box-sizing:inherit;position:relative;flex:auto!important;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0;overflow:hidden}[data-overlayscrollbars~=host],[data-overlayscrollbars~=viewport]{position:relative;overflow:hidden}[data-overlayscrollbars~=overflowVisible],[data-overlayscrollbars-padding~=overflowVisible],[data-overlayscrollbars-viewport~=overflowVisible]{overflow:visible}[data-overlayscrollbars-overflow-x=hidden]{overflow-x:hidden;overflow-y:hidden}[data-overlayscrollbars-overflow-x=scroll]{overflow-x:scroll}[data-overlayscrollbars-overflow-y=scroll]{overflow-y:scroll}[data-overlayscrollbars~=scrollbarPressed],[data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport]{scroll-behavior:auto!important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto!important;width:auto!important}.os-scrollbar{box-sizing:border-box;contain:size layout;contain:size layout style;transition:opacity .15s,visibility .15s,top .15s,right .15s,bottom .15s,left .15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none}.os-scrollbar-track{position:relative;direction:ltr!important;padding:0!important;border:none!important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none!important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important;transition:none!important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0}.os-scrollbar-vertical .os-scrollbar-handle{right:0}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}.os-scrollbar .os-scrollbar-handle:before{content:\"\";position:absolute;inset:0;display:block}[data-overlayscrollbars~=updating]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none!important}\n", ":where(.kbq-scrollbar-component){--kbq-scrollbar-size-track-dimension: var(--kbq-size-l);--kbq-scrollbar-size-track-padding-vertical: var(--kbq-size-3xs);--kbq-scrollbar-size-track-padding-horizontal: var(--kbq-size-3xs);--kbq-scrollbar-size-thumb-width: var(--kbq-size-s);--kbq-scrollbar-size-thumb-min-size: var(--kbq-size-xl);--kbq-scrollbar-size-thumb-border-radius: var(--kbq-size-s);--kbq-scrollbar-thumb-default-background: var(--kbq-semantic-contrast-a3, var(--kbq-palette-grey-50-a32));--kbq-scrollbar-thumb-hover-background: var(--kbq-semantic-contrast-a4, var(--kbq-palette-grey-50-a48));--kbq-scrollbar-thumb-active-background: var(--kbq-semantic-contrast-a5, var(--kbq-palette-grey-20-a55));--kbq-scrollbar-thumb-disabled-background: var(--kbq-states-icon-disabled);--kbq-scrollbar-track-default-border: transparent;--kbq-scrollbar-track-default-background: transparent;--kbq-scrollbar-track-hover-border: transparent;--kbq-scrollbar-track-hover-background: transparent;--kbq-scrollbar-track-active-border: transparent;--kbq-scrollbar-track-active-background: transparent}:where(.kbq-dark .kbq-scrollbar-component){--kbq-scrollbar-thumb-default-background: var(--kbq-semantic-dark-contrast-a9, var(--kbq-palette-grey-50-a48));--kbq-scrollbar-thumb-hover-background: var(--kbq-semantic-dark-contrast-a10, var(--kbq-palette-grey-50-a60));--kbq-scrollbar-thumb-active-background: var(--kbq-semantic-dark-contrast-a11, var(--kbq-palette-grey-50-a80))}\n"], dependencies: [{ kind: "directive", type: KbqScrollbarDirective, selector: "[kbqScrollbar]", inputs: ["options", "events", "defer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [":host{position:relative;display:flex;flex:1;min-inline-size:0;min-block-size:0;max-block-size:100%;isolation:isolate;overflow:auto}.kbq-scrollbar__content{isolation:isolate;flex:1;flex-basis:auto;inline-size:100%;block-size:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqScrollbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbar, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-scrollbar, [kbq-scrollbar]', imports: [KbqScrollbarDirective], template: `
-        <div
-            #content
-            data-overlayscrollbars-contents=""
-            kbqScrollbar
-            [options]="options()"
-            [events]="mergeEvents()"
-            [defer]="defer()"
-        >
+            args: [{ selector: 'kbq-scrollbar', template: `
+        <div class="kbq-scrollbar__content">
             <ng-content />
         </div>
-    `, providers: [
-                        { provide: KBQ_OVERFLOW_SHADOW_SOURCE, useExisting: forwardRef((() => KbqScrollbar)) }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        'data-overlayscrollbars-initialize': '',
-                        class: 'kbq-scrollbar-component'
-                    }, exportAs: 'kbqScrollbar', styles: [".kbq-scrollbar-component .os-scrollbar-vertical{padding:var(--kbq-scrollbar-size-track-padding-vertical) var(--kbq-scrollbar-size-track-padding-horizontal);bottom:var(--kbq-scrollbar-size-track-dimension);width:var(--kbq-scrollbar-size-track-dimension)}.kbq-scrollbar-component .os-scrollbar-vertical .os-scrollbar-handle{transition:opacity .15s,background-color .15s,border-color .15s,width .15s;border:var(--kbq-scrollbar-size-track-padding-horizontal) solid;width:100%;min-height:var(--kbq-scrollbar-size-thumb-min-size)}.kbq-scrollbar-component .os-scrollbar-vertical:hover .os-scrollbar-handle,.kbq-scrollbar-component .os-scrollbar-vertical:active .os-scrollbar-handle{width:100%}.kbq-scrollbar-component .os-scrollbar-horizontal{padding:var(--kbq-scrollbar-size-track-padding-horizontal) var(--kbq-scrollbar-size-track-padding-vertical);right:var(--kbq-scrollbar-size-track-dimension);height:var(--kbq-scrollbar-size-track-dimension)}.kbq-scrollbar-component .os-scrollbar-horizontal .os-scrollbar-handle{transition:opacity .15s,background-color .15s,border-color .15s,height .15s;border:var(--kbq-scrollbar-size-track-padding-horizontal) solid;height:100%;min-width:var(--kbq-scrollbar-size-thumb-min-size)}.kbq-scrollbar-component .os-scrollbar-horizontal:hover .os-scrollbar-handle,.kbq-scrollbar-component .os-scrollbar-horizontal:active .os-scrollbar-handle{height:100%}.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle:before,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-track{box-sizing:border-box;border-radius:var(--kbq-scrollbar-size-thumb-border-radius)}.kbq-scrollbar-component .os-scrollbar .os-scrollbar-track{border-width:calc((var(--kbq-scrollbar-size-track-dimension) - var(--kbq-scrollbar-size-thumb-width)) / 4)!important;transition:opacity .15s,background-color .15s,border-color .15s}[data-overlayscrollbars-contents]:focus-visible{outline:none}.kbq-scrollbar-component.kbq-hover .os-scrollbar .os-scrollbar-handle:before,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle:hover:before{border-color:var(--kbq-scrollbar-thumb-hover-background);background-color:var(--kbq-scrollbar-thumb-hover-background)}.kbq-scrollbar-component.kbq-active .os-scrollbar .os-scrollbar-handle:before,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle:active:before{border-color:var(--kbq-scrollbar-thumb-active-background);background-color:var(--kbq-scrollbar-thumb-active-background)}.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle:before{border-color:var(--kbq-scrollbar-thumb-default-background);background-color:var(--kbq-scrollbar-thumb-default-background)}.kbq-scrollbar-component .os-scrollbar .os-scrollbar-track,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle{border-style:solid;border-color:var(--kbq-scrollbar-track-default-border)!important;background-color:var(--kbq-scrollbar-track-default-background)}.kbq-scrollbar-component .os-scrollbar .os-scrollbar-track:hover,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle:hover{border-color:var(--kbq-scrollbar-track-hover-border);background:var(--kbq-scrollbar-track-hover-background)}.kbq-scrollbar-component .os-scrollbar .os-scrollbar-track:active,.kbq-scrollbar-component .os-scrollbar .os-scrollbar-handle:active{border-color:var(--kbq-scrollbar-track-active-border);background:var(--kbq-scrollbar-track-active-background)}.os-size-observer,.os-size-observer-listener{scroll-behavior:auto!important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;inset:0;transform:scale(.1)}.os-size-observer:before{content:\"\";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(10)}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty:before{content:\"\";width:100%;height:100%}.os-size-observer-listener:empty:before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{0%{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}.os-environment{scroll-behavior:auto!important;position:fixed;opacity:0;visibility:hidden;overflow:scroll;height:200px;width:200px;z-index:-1}.os-environment div{width:200%;height:200%;margin:10px 0}.os-environment.os-environment-flexbox-glue{display:flex;flex-direction:row;flex-wrap:nowrap;height:auto;width:auto;min-height:200px;min-width:200px}.os-environment.os-environment-flexbox-glue div{flex:auto;width:auto;height:auto;max-height:100%;max-width:100%;margin:0}.os-environment.os-environment-flexbox-glue-max{max-height:200px}.os-environment.os-environment-flexbox-glue-max div{overflow:visible}.os-environment.os-environment-flexbox-glue-max div:before{content:\"\";display:block;height:999px;width:999px}.os-environment,[data-overlayscrollbars-viewport]{-ms-overflow-style:scrollbar!important}[data-overlayscrollbars-initialize],[data-overlayscrollbars~=scrollbarHidden],[data-overlayscrollbars-viewport~=scrollbarHidden],.os-environment-scrollbar-hidden{scrollbar-width:none!important}[data-overlayscrollbars-initialize]::-webkit-scrollbar,[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,.os-environment-scrollbar-hidden::-webkit-scrollbar,.os-environment-scrollbar-hidden::-webkit-scrollbar-corner{-webkit-appearance:none!important;appearance:none!important;display:none!important;width:0!important;height:0!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}html[data-overlayscrollbars]{box-sizing:border-box;margin:0}html[data-overlayscrollbars~=body],html[data-overlayscrollbars~=body]>body{width:100%;height:100%}html[data-overlayscrollbars~=viewport]>body{overflow:visible}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch!important;flex-direction:row!important;flex-wrap:nowrap!important}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]:before{content:\"\";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:0;height:0}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]{box-sizing:inherit;position:relative;flex:auto!important;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0;overflow:hidden}[data-overlayscrollbars~=host],[data-overlayscrollbars~=viewport]{position:relative;overflow:hidden}[data-overlayscrollbars~=overflowVisible],[data-overlayscrollbars-padding~=overflowVisible],[data-overlayscrollbars-viewport~=overflowVisible]{overflow:visible}[data-overlayscrollbars-overflow-x=hidden]{overflow-x:hidden;overflow-y:hidden}[data-overlayscrollbars-overflow-x=scroll]{overflow-x:scroll}[data-overlayscrollbars-overflow-y=scroll]{overflow-y:scroll}[data-overlayscrollbars~=scrollbarPressed],[data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport]{scroll-behavior:auto!important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto!important;width:auto!important}.os-scrollbar{box-sizing:border-box;contain:size layout;contain:size layout style;transition:opacity .15s,visibility .15s,top .15s,right .15s,bottom .15s,left .15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none}.os-scrollbar-track{position:relative;direction:ltr!important;padding:0!important;border:none!important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none!important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important;transition:none!important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0}.os-scrollbar-vertical .os-scrollbar-handle{right:0}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}.os-scrollbar .os-scrollbar-handle:before{content:\"\";position:absolute;inset:0;display:block}[data-overlayscrollbars~=updating]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none!important}\n", ":where(.kbq-scrollbar-component){--kbq-scrollbar-size-track-dimension: var(--kbq-size-l);--kbq-scrollbar-size-track-padding-vertical: var(--kbq-size-3xs);--kbq-scrollbar-size-track-padding-horizontal: var(--kbq-size-3xs);--kbq-scrollbar-size-thumb-width: var(--kbq-size-s);--kbq-scrollbar-size-thumb-min-size: var(--kbq-size-xl);--kbq-scrollbar-size-thumb-border-radius: var(--kbq-size-s);--kbq-scrollbar-thumb-default-background: var(--kbq-semantic-contrast-a3, var(--kbq-palette-grey-50-a32));--kbq-scrollbar-thumb-hover-background: var(--kbq-semantic-contrast-a4, var(--kbq-palette-grey-50-a48));--kbq-scrollbar-thumb-active-background: var(--kbq-semantic-contrast-a5, var(--kbq-palette-grey-20-a55));--kbq-scrollbar-thumb-disabled-background: var(--kbq-states-icon-disabled);--kbq-scrollbar-track-default-border: transparent;--kbq-scrollbar-track-default-background: transparent;--kbq-scrollbar-track-hover-border: transparent;--kbq-scrollbar-track-hover-background: transparent;--kbq-scrollbar-track-active-border: transparent;--kbq-scrollbar-track-active-background: transparent}:where(.kbq-dark .kbq-scrollbar-component){--kbq-scrollbar-thumb-default-background: var(--kbq-semantic-dark-contrast-a9, var(--kbq-palette-grey-50-a48));--kbq-scrollbar-thumb-hover-background: var(--kbq-semantic-dark-contrast-a10, var(--kbq-palette-grey-50-a60));--kbq-scrollbar-thumb-active-background: var(--kbq-semantic-dark-contrast-a11, var(--kbq-palette-grey-50-a80))}\n"] }]
-        }], propDecorators: { contentElement: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], kbqScrollbarDirective: [{ type: i0.ViewChild, args: ['content', { ...{ read: KbqScrollbarDirective }, isSignal: true }] }], initializationTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "initializationTarget", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], defer: [{ type: i0.Input, args: [{ isSignal: true, alias: "defer", required: false }] }], onInitialize: [{
-                type: Output
-            }], onUpdate: [{
-                type: Output
-            }], onDestroy: [{
-                type: Output
-            }], onScroll: [{
-                type: Output
-            }] } });
+    `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        { directive: KbqScrollbarViewport, inputs: ['kbqScrollbarMode', 'kbqScrollbarHideDelay'] }
+                    ], exportAs: 'kbqScrollbar', styles: [":host{position:relative;display:flex;flex:1;min-inline-size:0;min-block-size:0;max-block-size:100%;isolation:isolate;overflow:auto}.kbq-scrollbar__content{isolation:isolate;flex:1;flex-basis:auto;inline-size:100%;block-size:100%}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqScrollbarMode", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqScrollbarHideDelay", required: false }] }] } });
 
 const COMPONENTS = [
+    KbqNativeScrollbar,
     KbqScrollbar,
-    KbqScrollbarDirective
+    KbqScrollbarViewport
 ];
+/** @docs-private */
 class KbqScrollbarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqScrollbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqScrollbarModule, imports: [KbqScrollbar,
-            KbqScrollbarDirective], exports: [KbqScrollbar,
-            KbqScrollbarDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqScrollbarModule, providers: [KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG_PROVIDER] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbarModule, imports: [KbqNativeScrollbar,
+            KbqScrollbar,
+            KbqScrollbarViewport], exports: [KbqNativeScrollbar,
+            KbqScrollbar,
+            KbqScrollbarViewport] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbarModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqScrollbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqScrollbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,
-                    providers: [KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG_PROVIDER],
                     exports: COMPONENTS
                 }]
         }] });
@@ -278,5 +801,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_SCROLLBAR_CONFIG, KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG, KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG_PROVIDER, KbqScrollbar, KbqScrollbarDirective, KbqScrollbarModule };
+export { KBQ_NATIVE_SCROLLBAR_OPTIONS, KBQ_SCROLLBAR_OPTIONS, KbqNativeScrollbar, KbqScrollbar, KbqScrollbarModule, KbqScrollbarViewport, kbqNativeScrollbarOptionsProvider, kbqScrollbarOptionsProvider };
 //# sourceMappingURL=koobiq-components-scrollbar.mjs.map