@acorex/cdk 22.1.8 → 22.2.0-next.1

package/fesm2022/acorex-cdk-list-navigation.mjs

@@ -100,10 +100,21 @@ class AXListNavigationDirective {
         });
         e.itemElem.nativeElement.scrollIntoView(this.scrollOption);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXListNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.8", type: AXListNavigationDirective, isStandalone: true, selector: "[axListNavigation]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onNavigationChanged: "onNavigationChanged", onKeypress: "onKeypress" }, queries: [{ propertyName: "childElem", predicate: AXListNavigationItemDirective, descendants: true, isSignal: true }], exportAs: ["axListNavigation"], ngImport: i0 }); }
+    /**
+     * Highlights a list option on pointer hover without moving focus.
+     * Use when focus must stay on an external trigger (e.g. searchable lookup input).
+     */
+    highlightItem(item) {
+        const items = this.childElem();
+        this.activeIndex.set(item.index());
+        for (const child of items) {
+            child.isActive.set(child === item);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXListNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.6", type: AXListNavigationDirective, isStandalone: true, selector: "[axListNavigation]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onNavigationChanged: "onNavigationChanged", onKeypress: "onKeypress" }, queries: [{ propertyName: "childElem", predicate: AXListNavigationItemDirective, descendants: true, isSignal: true }], exportAs: ["axListNavigation"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXListNavigationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXListNavigationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axListNavigation]',
@@ -141,10 +152,10 @@ class AXListNavigationItemDirective {
         });
     }
     #init;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXListNavigationItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: AXListNavigationItemDirective, isStandalone: true, selector: "[axListNavigationItem]", outputs: { onKeypress: "onKeypress" }, exportAs: ["axListNavigationItem"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXListNavigationItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: AXListNavigationItemDirective, isStandalone: true, selector: "[axListNavigationItem]", outputs: { onKeypress: "onKeypress" }, exportAs: ["axListNavigationItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXListNavigationItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXListNavigationItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axListNavigationItem]',
@@ -155,11 +166,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 const COMPONENT = [AXListNavigationDirective, AXListNavigationItemDirective];
 const MODULES = [CommonModule];
 class AXListNavigationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXListNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXListNavigationModule, imports: [CommonModule, AXListNavigationDirective, AXListNavigationItemDirective], exports: [AXListNavigationDirective, AXListNavigationItemDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXListNavigationModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXListNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXListNavigationModule, imports: [CommonModule, AXListNavigationDirective, AXListNavigationItemDirective], exports: [AXListNavigationDirective, AXListNavigationItemDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXListNavigationModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXListNavigationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXListNavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-cdk-list-navigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-cdk-list-navigation.mjs","sources":["../../../../packages/cdk/list-navigation/src/lib/list-navigation.directive.ts","../../../../packages/cdk/list-navigation/src/lib/list-navigation-item.directive.ts","../../../../packages/cdk/list-navigation/src/lib/list-navigation.module.ts","../../../../packages/cdk/list-navigation/src/acorex-cdk-list-navigation.ts"],"sourcesContent":["import { AXHtmlEvent } from '@acorex/cdk/common';\nimport {\n  afterNextRender,\n  contentChildren,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { AXListNavigationItemDirective } from './list-navigation-item.directive';\n\n@Directive({\n  selector: '[axListNavigation]',\n  exportAs: 'axListNavigation',\n})\nexport class AXListNavigationDirective {\n  private childElem = contentChildren(AXListNavigationItemDirective, { descendants: true });\n  private elementRef = inject(ElementRef);\n  activeIndex = signal(0);\n  onNavigationChanged = output<{ sender: AXListNavigationDirective }>();\n  onKeypress = output<AXHtmlEvent<KeyboardEvent>>();\n  orientation = input<'horizontal' | 'vertical'>('vertical');\n\n  private scrollOption: ScrollIntoViewOptions = {\n    behavior: 'smooth',\n    block: 'nearest',\n  };\n\n  #eff = effect(() => {\n    this.childElem().forEach((item, index) => {\n      (item.itemElem.nativeElement as HTMLElement).tabIndex = 0;\n      item.index.set(index);\n    });\n  });\n\n  #init = afterNextRender(() => {\n    (this.elementRef.nativeElement as HTMLElement).tabIndex = -1;\n\n    (this.elementRef.nativeElement as HTMLElement).onkeydown = (e: KeyboardEvent) => {\n      this.onKeypress.emit({ component: this, nativeEvent: e });\n\n      if (e.key === 'Tab') {\n        this.onNavigationChanged.emit({ sender: this });\n      }\n\n      if (this.orientation() === 'vertical') {\n        switch (e.key) {\n          case 'ArrowDown':\n            this.navigationHandler('ArrowDown');\n            break;\n          case 'ArrowUp':\n            this.navigationHandler('ArrowUp');\n            break;\n          case 'ArrowLeft':\n            this.parentNavigationHandler();\n            break;\n        }\n      } else if (this.orientation() === 'horizontal') {\n        switch (e.key) {\n          case 'ArrowRight':\n            this.navigationHandler('ArrowDown');\n            break;\n          case 'ArrowLeft':\n            this.navigationHandler('ArrowUp');\n            break;\n          case 'ArrowUp':\n            this.parentNavigationHandler();\n            break;\n        }\n      }\n    };\n  });\n\n  private navigationHandler(e: string) {\n    this.onNavigationChanged.emit({ sender: this });\n\n    if (e === 'ArrowUp' && this.activeIndex() > 0) {\n      this.activeIndex.update((prev) => prev - 1);\n      this.focusOnIndex(this.activeIndex());\n    } else if (e === 'ArrowDown' && this.activeIndex() < this.childElem().length - 1) {\n      this.activeIndex.update((prev) => prev + 1);\n      this.focusOnIndex(this.activeIndex());\n    }\n  }\n\n  private parentNavigationHandler() {\n    this.onNavigationChanged.emit({ sender: this });\n\n    const selectedItemParentKey = this.childElem()[this.activeIndex()].navigationParentItemKey();\n    if (!selectedItemParentKey) return;\n    const parentElem = this.childElem().find((item) => item.navigationItemKey === selectedItemParentKey);\n    if (!parentElem) return;\n    setTimeout(() => {\n      (parentElem.itemElem.nativeElement as HTMLAreaElement).focus();\n    });\n    (parentElem.itemElem.nativeElement as HTMLAreaElement).scrollIntoView(this.scrollOption);\n  }\n\n  focusOnIndex(index: number) {\n    const selectedItem = this.childElem()[index]?.itemElem.nativeElement as HTMLElement;\n    if (!selectedItem) return;\n    setTimeout(() => {\n      selectedItem.focus();\n    });\n    selectedItem.scrollIntoView(this.scrollOption);\n  }\n\n  navigateTo(e: AXListNavigationItemDirective) {\n    setTimeout(() => {\n      (e.itemElem.nativeElement as HTMLElement).focus();\n    });\n    (e.itemElem.nativeElement as HTMLElement).scrollIntoView(this.scrollOption);\n  }\n}\n","import { AXHtmlEvent } from '@acorex/cdk/common';\nimport { afterNextRender, Directive, ElementRef, inject, output, signal } from '@angular/core';\nimport { AXListNavigationDirective } from './list-navigation.directive';\n\n@Directive({\n  selector: '[axListNavigationItem]',\n  exportAs: 'axListNavigationItem',\n})\nexport class AXListNavigationItemDirective {\n  itemElem = inject(ElementRef);\n  isActive = signal(false);\n  index = signal(0);\n  navigationItemKey = Math.random();\n  navigationParentItemKey = signal(null);\n  onKeypress = output<AXHtmlEvent<KeyboardEvent>>();\n\n  private parent = inject(AXListNavigationDirective);\n  private injectItemInsideItem = inject(AXListNavigationItemDirective, { optional: true, skipSelf: true });\n\n  #init = afterNextRender(() => {\n    (this.itemElem.nativeElement as HTMLElement).onkeydown = (e: KeyboardEvent) => {\n      this.onKeypress.emit({ component: this, nativeEvent: e });\n    };\n\n    (this.itemElem.nativeElement as HTMLElement).onfocus = () => {\n      this.isActive.set(true);\n      this.parent.activeIndex.set(this.index());\n    };\n\n    (this.itemElem.nativeElement as HTMLElement).onblur = () => {\n      this.isActive.set(false);\n    };\n\n    if (!this.injectItemInsideItem?.navigationItemKey) return;\n    this.navigationParentItemKey.set(this.injectItemInsideItem.navigationItemKey);\n  });\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXListNavigationItemDirective } from './list-navigation-item.directive';\nimport { AXListNavigationDirective } from './list-navigation.directive';\n\nconst COMPONENT = [AXListNavigationDirective, AXListNavigationItemDirective];\n\nconst MODULES = [CommonModule];\n\n@NgModule({\n  imports: [...MODULES, ...COMPONENT],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXListNavigationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-cdk-list-navigation.mjs","sources":["../../../../packages/cdk/list-navigation/src/lib/list-navigation.directive.ts","../../../../packages/cdk/list-navigation/src/lib/list-navigation-item.directive.ts","../../../../packages/cdk/list-navigation/src/lib/list-navigation.module.ts","../../../../packages/cdk/list-navigation/src/acorex-cdk-list-navigation.ts"],"sourcesContent":["import { AXHtmlEvent } from '@acorex/cdk/common';\nimport {\n  afterNextRender,\n  contentChildren,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { AXListNavigationItemDirective } from './list-navigation-item.directive';\n\n@Directive({\n  selector: '[axListNavigation]',\n  exportAs: 'axListNavigation',\n})\nexport class AXListNavigationDirective {\n  private childElem = contentChildren(AXListNavigationItemDirective, { descendants: true });\n  private elementRef = inject(ElementRef);\n  activeIndex = signal(0);\n  onNavigationChanged = output<{ sender: AXListNavigationDirective }>();\n  onKeypress = output<AXHtmlEvent<KeyboardEvent>>();\n  orientation = input<'horizontal' | 'vertical'>('vertical');\n\n  private scrollOption: ScrollIntoViewOptions = {\n    behavior: 'smooth',\n    block: 'nearest',\n  };\n\n  #eff = effect(() => {\n    this.childElem().forEach((item, index) => {\n      (item.itemElem.nativeElement as HTMLElement).tabIndex = 0;\n      item.index.set(index);\n    });\n  });\n\n  #init = afterNextRender(() => {\n    (this.elementRef.nativeElement as HTMLElement).tabIndex = -1;\n\n    (this.elementRef.nativeElement as HTMLElement).onkeydown = (e: KeyboardEvent) => {\n      this.onKeypress.emit({ component: this, nativeEvent: e });\n\n      if (e.key === 'Tab') {\n        this.onNavigationChanged.emit({ sender: this });\n      }\n\n      if (this.orientation() === 'vertical') {\n        switch (e.key) {\n          case 'ArrowDown':\n            this.navigationHandler('ArrowDown');\n            break;\n          case 'ArrowUp':\n            this.navigationHandler('ArrowUp');\n            break;\n          case 'ArrowLeft':\n            this.parentNavigationHandler();\n            break;\n        }\n      } else if (this.orientation() === 'horizontal') {\n        switch (e.key) {\n          case 'ArrowRight':\n            this.navigationHandler('ArrowDown');\n            break;\n          case 'ArrowLeft':\n            this.navigationHandler('ArrowUp');\n            break;\n          case 'ArrowUp':\n            this.parentNavigationHandler();\n            break;\n        }\n      }\n    };\n  });\n\n  private navigationHandler(e: string) {\n    this.onNavigationChanged.emit({ sender: this });\n\n    if (e === 'ArrowUp' && this.activeIndex() > 0) {\n      this.activeIndex.update((prev) => prev - 1);\n      this.focusOnIndex(this.activeIndex());\n    } else if (e === 'ArrowDown' && this.activeIndex() < this.childElem().length - 1) {\n      this.activeIndex.update((prev) => prev + 1);\n      this.focusOnIndex(this.activeIndex());\n    }\n  }\n\n  private parentNavigationHandler() {\n    this.onNavigationChanged.emit({ sender: this });\n\n    const selectedItemParentKey = this.childElem()[this.activeIndex()].navigationParentItemKey();\n    if (!selectedItemParentKey) return;\n    const parentElem = this.childElem().find((item) => item.navigationItemKey === selectedItemParentKey);\n    if (!parentElem) return;\n    setTimeout(() => {\n      (parentElem.itemElem.nativeElement as HTMLAreaElement).focus();\n    });\n    (parentElem.itemElem.nativeElement as HTMLAreaElement).scrollIntoView(this.scrollOption);\n  }\n\n  focusOnIndex(index: number) {\n    const selectedItem = this.childElem()[index]?.itemElem.nativeElement as HTMLElement;\n    if (!selectedItem) return;\n    setTimeout(() => {\n      selectedItem.focus();\n    });\n    selectedItem.scrollIntoView(this.scrollOption);\n  }\n\n  navigateTo(e: AXListNavigationItemDirective) {\n    setTimeout(() => {\n      (e.itemElem.nativeElement as HTMLElement).focus();\n    });\n    (e.itemElem.nativeElement as HTMLElement).scrollIntoView(this.scrollOption);\n  }\n\n  /**\n   * Highlights a list option on pointer hover without moving focus.\n   * Use when focus must stay on an external trigger (e.g. searchable lookup input).\n   */\n  highlightItem(item: AXListNavigationItemDirective): void {\n    const items = this.childElem();\n    this.activeIndex.set(item.index());\n    for (const child of items) {\n      child.isActive.set(child === item);\n    }\n  }\n}\n","import { AXHtmlEvent } from '@acorex/cdk/common';\nimport { afterNextRender, Directive, ElementRef, inject, output, signal } from '@angular/core';\nimport { AXListNavigationDirective } from './list-navigation.directive';\n\n@Directive({\n  selector: '[axListNavigationItem]',\n  exportAs: 'axListNavigationItem',\n})\nexport class AXListNavigationItemDirective {\n  itemElem = inject(ElementRef);\n  isActive = signal(false);\n  index = signal(0);\n  navigationItemKey = Math.random();\n  navigationParentItemKey = signal(null);\n  onKeypress = output<AXHtmlEvent<KeyboardEvent>>();\n\n  private parent = inject(AXListNavigationDirective);\n  private injectItemInsideItem = inject(AXListNavigationItemDirective, { optional: true, skipSelf: true });\n\n  #init = afterNextRender(() => {\n    (this.itemElem.nativeElement as HTMLElement).onkeydown = (e: KeyboardEvent) => {\n      this.onKeypress.emit({ component: this, nativeEvent: e });\n    };\n\n    (this.itemElem.nativeElement as HTMLElement).onfocus = () => {\n      this.isActive.set(true);\n      this.parent.activeIndex.set(this.index());\n    };\n\n    (this.itemElem.nativeElement as HTMLElement).onblur = () => {\n      this.isActive.set(false);\n    };\n\n    if (!this.injectItemInsideItem?.navigationItemKey) return;\n    this.navigationParentItemKey.set(this.injectItemInsideItem.navigationItemKey);\n  });\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXListNavigationItemDirective } from './list-navigation-item.directive';\nimport { AXListNavigationDirective } from './list-navigation.directive';\n\nconst COMPONENT = [AXListNavigationDirective, AXListNavigationItemDirective];\n\nconst MODULES = [CommonModule];\n\n@NgModule({\n  imports: [...MODULES, ...COMPONENT],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXListNavigationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-cdk-outline.mjs

@@ -31,6 +31,8 @@ class AXOutlineContainerDirective {
         ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
         this.outlineItems = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "outlineItems" }] : /* istanbul ignore next */ []));
+        this.lastScrollSpyIndex = 0;
+        this.heldActiveIndex = null;
         this.scrollableElement = computed(() => {
             const scrollableElementId = this.scrollableElementId();
             if (scrollableElementId) {
@@ -51,12 +53,12 @@ class AXOutlineContainerDirective {
                 this.scrollableElement().style.scrollBehavior = 'smooth';
             }
             this.zone.runOutsideAngular(() => {
-                const scrollable = this.scrollableElement().tagName === 'HTML' ? window : this.scrollableElement();
+                const scrollable = this.resolveScrollEventTarget();
                 fromEvent(scrollable, 'scroll')
-                    .pipe(this.unsubscriber.takeUntilDestroy, map(() => this.scrollableElement().scrollTop))
+                    .pipe(this.unsubscriber.takeUntilDestroy, map(() => this.readScrollTop()))
                     .subscribe((scrollTop) => {
                     this.scrollTop.set(scrollTop);
-                    this.scrollChanged(scrollTop);
+                    this.zone.run(() => this.scrollChanged(scrollTop));
                 });
                 this.mutationObserver = new MutationObserver((mutationsList) => {
                     const relevantMutation = mutationsList.some((mutation) => mutation.type === 'childList' && (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0));
@@ -68,12 +70,36 @@ class AXOutlineContainerDirective {
                     childList: true,
                     subtree: true,
                 });
+                this.bindUserScrollIntent(scrollable);
             });
+            fromEvent(this.el.nativeElement, 'click', { capture: true })
+                .pipe(this.unsubscriber.takeUntilDestroy)
+                .subscribe((event) => {
+                if (event instanceof MouseEvent) {
+                    this.handleInContentOutlineLinkClick(event);
+                }
+            });
+            const view = this.document.defaultView;
+            if (view) {
+                fromEvent(view, 'hashchange')
+                    .pipe(this.unsubscriber.takeUntilDestroy)
+                    .subscribe(() => {
+                    const id = decodeURIComponent(view.location.hash?.slice(1) ?? '');
+                    if (!id || !this.outlineItems().some((item) => item.id === id)) {
+                        return;
+                    }
+                    this.heldActiveIndex = null;
+                    const index = this.outlineItems().findIndex((item) => item.id === id);
+                    this.lastScrollSpyIndex = index;
+                    this.applyActiveIndex(index);
+                });
+            }
             this.mutationSubject
                 .pipe(debounceTime(this.MUTATION_DEBOUNCE_TIME), this.unsubscriber.takeUntilDestroy)
                 .subscribe(() => {
                 this.refreshOutlineItems();
             });
+            this.zone.run(() => this.scrollChanged(this.readScrollTop()));
         });
     }
     #anr;
@@ -87,68 +113,236 @@ class AXOutlineContainerDirective {
             this.refreshOutlineItems();
         }
     }
-    scrollChanged(scrollTop) {
-        this.outlineItems.update((prevItems) => {
-            if (prevItems.length === 0)
-                return prevItems;
-            const scrollable = this.scrollableElement();
-            const maxScrollTop = Math.max(0, scrollable.scrollHeight - scrollable.clientHeight);
-            const offset = this.activationOffset();
-            const isAtBottom = maxScrollTop > 0 && scrollTop >= maxScrollTop - 1;
-            // Items whose activation threshold sits beyond maxScrollTop can never become
-            // active via normal scroll comparison. Jumping straight to the last item at
-            // the bottom (previous behavior) skipped those intermediate sections.
-            let firstUnreachableIndex = prevItems.length;
-            for (let i = 0; i < prevItems.length; i++) {
-                if (prevItems[i].scrollY - offset > maxScrollTop) {
-                    firstUnreachableIndex = i;
-                    break;
+    scrollToItem(id) {
+        this.scrollToItemFromHash(true, id);
+    }
+    resolveScrollEventTarget() {
+        const scrollable = this.scrollableElement();
+        if (scrollable === this.document.documentElement || scrollable.tagName === 'HTML') {
+            return this.document.defaultView ?? scrollable;
+        }
+        return scrollable;
+    }
+    readScrollTop() {
+        const scrollable = this.scrollableElement();
+        if (scrollable === this.document.documentElement || scrollable.tagName === 'HTML') {
+            return this.document.defaultView?.scrollY ?? scrollable.scrollTop;
+        }
+        return scrollable.scrollTop;
+    }
+    handleInContentOutlineLinkClick(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+        const anchor = target.closest('a');
+        if (!anchor || anchor.classList.contains('ax-outline-hash-link')) {
+            if (anchor?.classList.contains('ax-outline-hash-link')) {
+                const id = this.getOutlineIdFromHref(anchor.getAttribute('href'));
+                if (id) {
+                    event.preventDefault();
+                    this.scrollToItem(id);
                 }
             }
-            let activeIndex = -1;
-            if (firstUnreachableIndex === prevItems.length) {
-                for (let i = 0; i < prevItems.length; i++) {
-                    if (scrollTop >= prevItems[i].scrollY - offset) {
-                        activeIndex = i;
-                    }
-                }
-                if (isAtBottom && this.activateLastAtBottom()) {
-                    activeIndex = prevItems.length - 1;
-                }
+            return;
+        }
+        const id = this.getOutlineIdFromHref(anchor.getAttribute('href'));
+        if (!id || !this.outlineItems().some((item) => item.id === id)) {
+            return;
+        }
+        event.preventDefault();
+        this.scrollToItem(id);
+    }
+    scrollToItemFromHash(scrollToTarget, explicitId) {
+        const id = explicitId ?? decodeURIComponent(this.document.defaultView?.location.hash?.slice(1) ?? '');
+        if (!id) {
+            return;
+        }
+        const item = this.outlineItems().find((entry) => entry.id === id);
+        if (!item) {
+            return;
+        }
+        const activeIndex = this.outlineItems().findIndex((entry) => entry.id === id);
+        if (activeIndex < 0) {
+            return;
+        }
+        this.heldActiveIndex = activeIndex;
+        this.lastScrollSpyIndex = activeIndex;
+        this.applyActiveIndex(activeIndex);
+        if (!scrollToTarget) {
+            return;
+        }
+        this.syncLocationHash(id);
+        const offset = this.activationOffset();
+        const scrollable = this.scrollableElement();
+        const isWindow = scrollable === this.document.documentElement ||
+            scrollable.tagName === 'HTML' ||
+            this.resolveScrollEventTarget() === this.document.defaultView;
+        const itemRect = item.el.getBoundingClientRect();
+        if (isWindow) {
+            const top = itemRect.top + (this.document.defaultView?.scrollY ?? 0) - offset;
+            this.document.defaultView?.scrollTo({
+                top: Math.max(0, top),
+                behavior: this.smoothScroll() ? 'smooth' : 'auto',
+            });
+            return;
+        }
+        const scrollableRect = scrollable.getBoundingClientRect();
+        const top = scrollable.scrollTop + (itemRect.top - scrollableRect.top) - offset;
+        const maxScrollTop = Math.max(0, scrollable.scrollHeight - scrollable.clientHeight);
+        scrollable.scrollTo({
+            top: Math.max(0, Math.min(top, maxScrollTop)),
+            behavior: this.smoothScroll() ? 'smooth' : 'auto',
+        });
+    }
+    releaseHeldActiveIndex() {
+        if (this.heldActiveIndex === null) {
+            return;
+        }
+        this.stopOngoingSmoothScroll();
+        this.heldActiveIndex = null;
+        this.scrollChanged(this.readScrollTop());
+    }
+    stopOngoingSmoothScroll() {
+        const scrollable = this.scrollableElement();
+        const isWindow = scrollable === this.document.documentElement ||
+            scrollable.tagName === 'HTML' ||
+            this.resolveScrollEventTarget() === this.document.defaultView;
+        if (isWindow) {
+            const view = this.document.defaultView;
+            view?.scrollTo({ top: view.scrollY, behavior: 'auto' });
+            return;
+        }
+        scrollable.scrollTo({ top: scrollable.scrollTop, behavior: 'auto' });
+    }
+    getOutlineIdFromHref(href) {
+        if (!href || !href.includes('#')) {
+            return null;
+        }
+        const id = decodeURIComponent(href.split('#')[1] ?? '');
+        return id || null;
+    }
+    syncLocationHash(id) {
+        const view = this.document.defaultView;
+        if (!view || view.location.hash === `#${id}`) {
+            return;
+        }
+        view.history.pushState(null, '', `#${id}`);
+    }
+    scrollChanged(scrollTop) {
+        if (this.heldActiveIndex !== null) {
+            return;
+        }
+        const activeIndex = this.resolveActiveIndex(scrollTop);
+        if (activeIndex === this.lastScrollSpyIndex) {
+            return;
+        }
+        this.lastScrollSpyIndex = activeIndex;
+        this.applyActiveIndex(activeIndex);
+    }
+    bindUserScrollIntent(scrollable) {
+        const releaseHold = () => {
+            this.zone.run(() => this.releaseHeldActiveIndex());
+        };
+        fromEvent(scrollable, 'wheel', { passive: true }).pipe(this.unsubscriber.takeUntilDestroy).subscribe(releaseHold);
+        fromEvent(scrollable, 'touchmove', { passive: true })
+            .pipe(this.unsubscriber.takeUntilDestroy)
+            .subscribe(releaseHold);
+        fromEvent(scrollable, 'pointerdown', { passive: true })
+            .pipe(this.unsubscriber.takeUntilDestroy)
+            .subscribe(releaseHold);
+        fromEvent(scrollable, 'keydown')
+            .pipe(this.unsubscriber.takeUntilDestroy)
+            .subscribe((event) => {
+            if (!(event instanceof KeyboardEvent)) {
+                return;
             }
-            else {
-                for (let i = 0; i < firstUnreachableIndex; i++) {
-                    if (scrollTop >= prevItems[i].scrollY - offset) {
-                        activeIndex = i;
-                    }
-                }
-                const lastReachableIndex = firstUnreachableIndex - 1;
-                const zoneStart = lastReachableIndex >= 0 ? prevItems[lastReachableIndex].scrollY - offset : 0;
-                const zoneRange = maxScrollTop - zoneStart;
-                if (zoneRange <= 0) {
-                    activeIndex = this.activateLastAtBottom()
-                        ? prevItems.length - 1
-                        : Math.max(0, lastReachableIndex);
-                }
-                else if (scrollTop >= zoneStart) {
-                    // Map the remaining scroll range across the last reachable item and all
-                    // unreachable trailing items so short end sections are not skipped.
-                    const progress = Math.min(1, Math.max(0, (scrollTop - zoneStart) / zoneRange));
-                    const startIndex = Math.max(0, lastReachableIndex);
-                    const span = prevItems.length - 1 - startIndex;
-                    if (progress >= 1 || (isAtBottom && this.activateLastAtBottom())) {
-                        activeIndex = prevItems.length - 1;
-                    }
-                    else {
-                        activeIndex = startIndex + Math.floor(progress * span);
-                    }
-                }
+            const scrollKeys = ['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' '];
+            if (scrollKeys.includes(event.key)) {
+                releaseHold();
             }
-            return prevItems.map((item, index) => ({
-                ...item,
-                active: index === activeIndex,
-            }));
         });
+    }
+    resolveActiveIndex(scrollTop) {
+        const prevItems = this.outlineItems();
+        if (prevItems.length === 0) {
+            return -1;
+        }
+        if (prevItems.length === 1) {
+            return 0;
+        }
+        const scrollable = this.scrollableElement();
+        const offset = this.activationOffset();
+        const maxScrollTop = Math.max(0, scrollable.scrollHeight - scrollable.clientHeight);
+        const scrollableRect = scrollable.getBoundingClientRect();
+        const activationScrollTops = prevItems.map((item) => {
+            const itemTop = item.el.getBoundingClientRect().top;
+            return scrollTop + (itemTop - scrollableRect.top) - offset;
+        });
+        const count = prevItems.length;
+        if (this.activateLastAtBottom() && maxScrollTop > 0 && scrollTop >= maxScrollTop - 1) {
+            return count - 1;
+        }
+        let thresholdIndex = 0;
+        for (let i = 0; i < count; i++) {
+            if (activationScrollTops[i] <= scrollTop) {
+                thresholdIndex = i;
+            }
+        }
+        const slotIndex = this.resolveByScrollSlots(scrollTop, activationScrollTops, maxScrollTop);
+        if (slotIndex <= thresholdIndex) {
+            return thresholdIndex;
+        }
+        const minSlot = Math.max(1, maxScrollTop / Math.max(count * 6, 1));
+        const slotActivation = activationScrollTops[slotIndex];
+        if (scrollTop >= slotActivation - minSlot) {
+            return slotIndex;
+        }
+        return thresholdIndex;
+    }
+    /**
+     * Maps scroll position to the active outline item. Sections with little content often
+     * have overlapping activation thresholds; each section gets a minimum scroll slot so
+     * short blocks are not skipped while scrolling.
+     */
+    resolveByScrollSlots(scrollTop, activationScrollTops, maxScrollTop) {
+        const count = activationScrollTops.length;
+        if (maxScrollTop <= 0) {
+            return 0;
+        }
+        const minSlot = Math.max(1, maxScrollTop / Math.max(count * 6, 1));
+        const weights = [];
+        for (let i = 0; i < count; i++) {
+            const sectionStart = Math.max(0, Math.min(activationScrollTops[i], maxScrollTop));
+            let sectionEnd = maxScrollTop;
+            if (i < count - 1) {
+                sectionEnd = Math.max(sectionStart, Math.min(activationScrollTops[i + 1], maxScrollTop));
+            }
+            weights.push(Math.max(minSlot, sectionEnd - sectionStart));
+        }
+        const totalWeight = weights.reduce((sum, weight) => sum + weight, 0);
+        const scaledPosition = (scrollTop / maxScrollTop) * totalWeight;
+        let consumed = 0;
+        for (let i = 0; i < count; i++) {
+            consumed += weights[i];
+            if (scaledPosition <= consumed || i === count - 1) {
+                return i;
+            }
+        }
+        return count - 1;
+    }
+    applyActiveIndex(activeIndex) {
+        if (activeIndex < 0) {
+            return;
+        }
+        const current = this.outlineItems();
+        if (current.length > 0 && current.every((item, index) => item.active === (index === activeIndex))) {
+            return;
+        }
+        this.outlineItems.update((prevItems) => prevItems.map((item, index) => ({
+            ...item,
+            active: index === activeIndex,
+        })));
         this.outlineItems$.next(this.outlineItems());
     }
     setOutlineItems() {
@@ -168,7 +362,7 @@ class AXOutlineContainerDirective {
                 const htmlEl = el;
                 let fragment = htmlEl.id;
                 if (!fragment) {
-                    const textContentForId = htmlEl.textContent?.trim() ?? ''; // Read text BEFORE adding/modifying for hash
+                    const textContentForId = htmlEl.textContent?.trim() ?? '';
                     if (textContentForId) {
                         fragment = `${textContentForId.toLowerCase().replace(/\s+/g, '-')}`;
                         let counter = 1;
@@ -181,7 +375,7 @@ class AXOutlineContainerDirective {
                     else {
                         fragment = `ax-outline-${Math.random().toString(36).slice(2, 7)}`;
                     }
-                    htmlEl.id = fragment; // Set the ID on the element
+                    htmlEl.id = fragment;
                 }
                 htmlEl.style.scrollMargin = `${this.activationOffset()}px`;
                 const existingLink = htmlEl.querySelector('a.ax-outline-hash-link');
@@ -193,8 +387,7 @@ class AXOutlineContainerDirective {
                     anchor.textContent = '#';
                     anchor.href = `${window.location.pathname}${window.location.search}#${fragment}`;
                     anchor.classList.add('ax-outline-hash-link');
-                    // Styling for the hash link
-                    anchor.style.paddingInlineStart = '0.5rem'; // Adjust as needed
+                    anchor.style.paddingInlineStart = '0.5rem';
                     anchor.style.opacity = '0';
                     anchor.style.transition = 'opacity 0.2s ease-in-out';
                     anchor.style.cursor = 'pointer';
@@ -206,7 +399,10 @@ class AXOutlineContainerDirective {
                     htmlEl.addEventListener('mouseleave', leaveListener);
                     htmlEl.appendChild(anchor);
                     if (this.copyUrlOnClick()) {
-                        anchor.addEventListener('click', async () => {
+                        anchor.addEventListener('click', async (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            this.scrollToItem(fragment);
                             try {
                                 await this.clipboardService.copy(anchor.href);
                             }
@@ -217,7 +413,6 @@ class AXOutlineContainerDirective {
                     }
                 }
                 const parentId = htmlEl.getAttribute('data-parent') ?? undefined;
-                // Calculate position relative to the scrollable element
                 const scrollableElement = this.scrollableElement();
                 const scrollableRect = scrollableElement?.getBoundingClientRect() ?? { top: 0 };
                 const elementRect = htmlEl.getBoundingClientRect();
@@ -233,7 +428,15 @@ class AXOutlineContainerDirective {
             })
                 .sort((a, b) => a.scrollY - b.scrollY);
             this.outlineItems.set(outlineItems);
-            this.scrollChanged(this.scrollTop());
+            const hashId = decodeURIComponent(this.document.defaultView?.location.hash?.slice(1) ?? '');
+            if (hashId && outlineItems.some((item) => item.id === hashId)) {
+                const hashIndex = outlineItems.findIndex((item) => item.id === hashId);
+                this.lastScrollSpyIndex = hashIndex;
+                this.applyActiveIndex(hashIndex);
+            }
+            else {
+                this.scrollChanged(this.readScrollTop());
+            }
             if (this.mutationObserver) {
                 this.mutationObserver.observe(this.el.nativeElement, {
                     childList: true,
@@ -245,10 +448,10 @@ class AXOutlineContainerDirective {
     refreshOutlineItems() {
         this.setOutlineItems();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXOutlineContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: AXOutlineContainerDirective, isStandalone: true, selector: "[axOutlineContainer]", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, smoothScroll: { classPropertyName: "smoothScroll", publicName: "smoothScroll", isSignal: true, isRequired: false, transformFunction: null }, showHashItem: { classPropertyName: "showHashItem", publicName: "showHashItem", isSignal: true, isRequired: false, transformFunction: null }, activationOffset: { classPropertyName: "activationOffset", publicName: "activationOffset", isSignal: true, isRequired: false, transformFunction: null }, copyUrlOnClick: { classPropertyName: "copyUrlOnClick", publicName: "copyUrlOnClick", isSignal: true, isRequired: false, transformFunction: null }, activateLastAtBottom: { classPropertyName: "activateLastAtBottom", publicName: "activateLastAtBottom", isSignal: true, isRequired: false, transformFunction: null }, scrollableElementId: { classPropertyName: "scrollableElementId", publicName: "scrollableElementId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AXUnsubscriber, AXClipBoardService], exportAs: ["axOutlineContainer"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXOutlineContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: AXOutlineContainerDirective, isStandalone: true, selector: "[axOutlineContainer]", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, smoothScroll: { classPropertyName: "smoothScroll", publicName: "smoothScroll", isSignal: true, isRequired: false, transformFunction: null }, showHashItem: { classPropertyName: "showHashItem", publicName: "showHashItem", isSignal: true, isRequired: false, transformFunction: null }, activationOffset: { classPropertyName: "activationOffset", publicName: "activationOffset", isSignal: true, isRequired: false, transformFunction: null }, copyUrlOnClick: { classPropertyName: "copyUrlOnClick", publicName: "copyUrlOnClick", isSignal: true, isRequired: false, transformFunction: null }, activateLastAtBottom: { classPropertyName: "activateLastAtBottom", publicName: "activateLastAtBottom", isSignal: true, isRequired: false, transformFunction: null }, scrollableElementId: { classPropertyName: "scrollableElementId", publicName: "scrollableElementId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AXUnsubscriber, AXClipBoardService], exportAs: ["axOutlineContainer"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXOutlineContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXOutlineContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axOutlineContainer]',
@@ -271,7 +474,7 @@ class AXOutlineItemDirective {
             if (!this.id()) {
                 const textContent = this.el.nativeElement.textContent.trim();
                 if (textContent) {
-                    newId = `${textContent.replace(/\s+/g, '-')}`;
+                    newId = `${textContent.toLowerCase().replace(/\s+/g, '-')}`;
                 }
                 else {
                     newId = `${Math.random().toString(36).slice(2, 7)}`;
@@ -281,10 +484,10 @@ class AXOutlineItemDirective {
         });
     }
     #anr;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXOutlineItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: AXOutlineItemDirective, isStandalone: true, selector: "[axOutlineItem]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["axOutlineItem"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXOutlineItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: AXOutlineItemDirective, isStandalone: true, selector: "[axOutlineItem]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["axOutlineItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXOutlineItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXOutlineItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axOutlineItem]',