atomicuilibrary 0.0.1

package/dist/collection/components/anchor/anchor.js

@@ -0,0 +1,1404 @@
+import { h } from "@stencil/core";
+export class Anchor {
+    el;
+    /** Array of anchor items or JSON string. Replaces old `links` prop. */
+    items = [];
+    /** Backward-compatible JSON string prop (same as items) */
+    links = '';
+    /** Orientation / mode: Orientation */
+    mode = 'vertical';
+    /** Alias for mode */
+    orientation = 'vertical';
+    /** Position when sticky */
+    position = 'left';
+    /** Currently active item id */
+    activeItem = '';
+    /** Alias for activeItem (backward-compat) */
+    activeLink = '';
+    /** Offset from top when scrolling to section */
+    scrollOffset = 80;
+    /** Emit navigate event instead of browser navigation */
+    routerNavigate = false;
+    /** Auto-load FontAwesome icons */
+    loadIcons = true;
+    /** Stick the component using CSS position:sticky */
+    sticky = true;
+    /** CSS selector of scrollable container. Defaults to window. */
+    scrollContainer = '';
+    /** Enable smooth scrolling behavior */
+    smoothScroll = true;
+    /** Show tooltip on hover */
+    showTooltip = false;
+    /** Show active indicator line/dot */
+    showIndicator = true;
+    /** Custom IntersectionObserver rootMargin */
+    observerRootMargin = '';
+    /** Use named slot per item instead of inline rendering */
+    useSlot = false;
+    /** Show numeric/alpha/roman numbering */
+    showNumbers = false;
+    /** Style of numbers shown */
+    numberStyle = 'numeric';
+    /** Size variant */
+    size = 'md';
+    /** Theme variant */
+    theme = 'light';
+    /** Color of the active indicator */
+    activeColor = '#18ff3e';
+    /** Text alignment inside items */
+    alignment = 'left';
+    /** Update URL hash on navigation */
+    updateHash = false;
+    /** Enable affix/sticky behavior on scroll */
+    affix = false;
+    /** Scroll threshold (px) before affix kicks in */
+    affixOffset = 20;
+    /** Indicator type: 'line' or 'dot' */
+    indicator = 'line';
+    /** CSS selector of container to auto-generate links from h1-h4 */
+    autoGenContainer = '';
+    /** Show scroll progress bar */
+    showProgress = false;
+    /** Enable keyboard arrow navigation between items */
+    arrowNavigation = true;
+    /** Allow items with children to be collapsed */
+    collapsible = false;
+    /** Expand all collapsible items by default */
+    defaultExpanded = true;
+    derivedItems = [];
+    currentActive = '';
+    isAffixed = false;
+    scrollProgress = 0;
+    expandedItems = new Set();
+    indicatorStyle = {};
+    _observer = null;
+    _onWindowScroll = null;
+    _onContainerScroll = null;
+    _onHashChange = null;
+    linkElements = new Map();
+    scrollTimeout;
+    anchorClick;
+    anchorItemClick;
+    activeItemChange;
+    navigate;
+    affixChange;
+    progressChange;
+    expandChange;
+    componentWillLoad() {
+        if (this.autoGenContainer) {
+            this.generateLinksFromContainer();
+        }
+        else {
+            this.parseItems();
+        }
+        this.currentActive = this.activeItem || this.activeLink;
+        if (this.defaultExpanded) {
+            this.expandAll();
+        }
+    }
+    itemsChanged() {
+        if (!this.autoGenContainer) {
+            this.parseItems();
+        }
+    }
+    handleAutoGenContainerChange() {
+        this.generateLinksFromContainer();
+    }
+    parseItems() {
+        // Priority: items > links > slotted children
+        const rawItems = this.items;
+        if (rawItems && (typeof rawItems === 'string' ? rawItems.length > 0 : rawItems.length > 0)) {
+            if (typeof rawItems === 'string') {
+                try {
+                    this.derivedItems = JSON.parse(rawItems);
+                }
+                catch {
+                    this.derivedItems = [];
+                }
+            }
+            else {
+                this.derivedItems = [...rawItems];
+            }
+            return;
+        }
+        if (this.links && this.links.length > 0) {
+            try {
+                this.derivedItems = JSON.parse(this.links);
+            }
+            catch {
+                this.derivedItems = [];
+            }
+            return;
+        }
+        // Slot-based children fallback
+        const children = Array.from(this.el.querySelectorAll('ui-anchor-item'));
+        if (children.length > 0) {
+            this.derivedItems = children.map(el => ({
+                id: el.getAttribute('target') || el.getAttribute('id') || '',
+                label: el.getAttribute('label') || '',
+                icon: el.getAttribute('icon') ?? undefined,
+                iconLibrary: el.getAttribute('iconLibrary') || el.getAttribute('icon-library'),
+                disabled: el.hasAttribute('disabled'),
+                badge: el.getAttribute('badge') ?? undefined,
+                tooltip: el.getAttribute('tooltip') ?? undefined,
+                href: el.getAttribute('href') ?? undefined,
+                target: el.getAttribute('target') ?? undefined,
+                rel: el.getAttribute('rel') ?? undefined,
+            }));
+        }
+    }
+    generateLinksFromContainer() {
+        if (!this.autoGenContainer)
+            return;
+        const container = document.querySelector(this.autoGenContainer);
+        if (!container)
+            return;
+        const headers = container.querySelectorAll('h1, h2, h3, h4');
+        this.derivedItems = Array.from(headers).map((header, index) => {
+            if (!header.id)
+                header.id = `auto-anchor-${index}`;
+            return { id: `link-${index}`, label: header.innerText ?? header.textContent ?? '', target: header.id ?? '' };
+        });
+    }
+    componentDidLoad() {
+        this.setupScrollSpy();
+        this.setupAffix();
+        this.setupProgress();
+        if (this.updateHash)
+            this.setupHashNavigation();
+        setTimeout(() => this.updateIndicatorPosition(this.currentActive), 100);
+    }
+    disconnectedCallback() {
+        if (this._observer) {
+            try {
+                this._observer.disconnect();
+            }
+            catch (e) { }
+        }
+        if (this._onWindowScroll)
+            window.removeEventListener('scroll', this._onWindowScroll);
+        if (this._onContainerScroll && this.scrollContainer) {
+            document.querySelector(this.scrollContainer)?.removeEventListener('scroll', this._onContainerScroll);
+        }
+        if (this._onHashChange)
+            window.removeEventListener('hashchange', this._onHashChange);
+        if (this.scrollTimeout)
+            clearTimeout(this.scrollTimeout);
+    }
+    getParsedItems() {
+        return this.derivedItems;
+    }
+    flattenItems(items) {
+        return items.reduce((acc, item) => {
+            acc.push(item);
+            if (item.children)
+                acc.push(...this.flattenItems(item.children));
+            return acc;
+        }, []);
+    }
+    expandAll() {
+        const flatItems = this.flattenItems(this.getParsedItems());
+        flatItems.forEach(item => {
+            if (item.children && item.children.length > 0)
+                this.expandedItems.add(item.id);
+        });
+        this.expandedItems = new Set(this.expandedItems);
+    }
+    setupAffix() {
+        if (!this.affix)
+            return;
+        const handleScroll = () => {
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const newAffix = scrollTop > this.affixOffset;
+            if (newAffix !== this.isAffixed) {
+                this.isAffixed = newAffix;
+                this.affixChange.emit(this.isAffixed);
+            }
+        };
+        window.addEventListener('scroll', handleScroll);
+        this._onWindowScroll = handleScroll;
+        handleScroll();
+    }
+    setupProgress() {
+        if (!this.showProgress)
+            return;
+        const handleScroll = () => {
+            if (this.scrollTimeout)
+                clearTimeout(this.scrollTimeout);
+            this.scrollTimeout = setTimeout(() => {
+                const scrollArea = this.scrollContainer ? document.querySelector(this.scrollContainer) : null;
+                if (scrollArea) {
+                    const sh = scrollArea.scrollHeight - scrollArea.clientHeight;
+                    this.scrollProgress = sh > 0 ? (scrollArea.scrollTop / sh) * 100 : 0;
+                }
+                else {
+                    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+                    this.scrollProgress = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
+                }
+                this.progressChange.emit(this.scrollProgress);
+            }, 50);
+        };
+        if (this.scrollContainer) {
+            document.querySelector(this.scrollContainer)?.addEventListener('scroll', handleScroll);
+            this._onContainerScroll = handleScroll;
+        }
+        else {
+            window.addEventListener('scroll', handleScroll);
+            if (!this._onWindowScroll)
+                this._onWindowScroll = handleScroll;
+        }
+        handleScroll();
+    }
+    setupHashNavigation() {
+        this._onHashChange = () => {
+            const hash = window.location.hash.substring(1);
+            if (hash)
+                this.scrollToSection(hash);
+        };
+        window.addEventListener('hashchange', this._onHashChange);
+    }
+    setupScrollSpy() {
+        const flatItems = this.flattenItems(this.getParsedItems());
+        let scrollRoot = this.scrollContainer ? document.querySelector(this.scrollContainer) : null;
+        if (!scrollRoot && this.scrollContainer) {
+            const fromParent = this.el.parentElement?.closest('.examples-split-layout, .viewport-pane');
+            if (fromParent)
+                scrollRoot = fromParent.querySelector(this.scrollContainer);
+        }
+        const margin = this.observerRootMargin || `-${this.scrollOffset}px 0px -50% 0px`;
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    const elId = entry.target.getAttribute('id');
+                    const found = flatItems.find(it => it.target === elId || it.id === elId);
+                    if (elId && found)
+                        this.setActiveState(found.id);
+                }
+            });
+        }, { root: scrollRoot, rootMargin: margin, threshold: 0 });
+        flatItems.forEach((item) => {
+            const elId = item.target || item.id;
+            if (!elId)
+                return;
+            let element = document.getElementById(elId);
+            if (!element && scrollRoot)
+                element = scrollRoot.querySelector(`#${elId}`);
+            if (element)
+                observer.observe(element);
+        });
+        this._observer = observer;
+    }
+    setActiveState(id) {
+        if (this.currentActive === id)
+            return;
+        this.currentActive = id;
+        this.activeItem = id;
+        this.activeLink = id;
+        const item = this.flattenItems(this.getParsedItems()).find(i => i.id === id);
+        if (item)
+            this.activeItemChange.emit({ id: item.id, label: item.label ?? '' });
+        this.updateIndicatorPosition(id);
+        if (this.collapsible)
+            this.ensureVisible(id, this.getParsedItems());
+    }
+    ensureVisible(id, items, parentId = null) {
+        for (const item of items) {
+            if (item.id === id) {
+                if (parentId && !this.expandedItems.has(parentId))
+                    this.toggleExpand(parentId, true);
+                return true;
+            }
+            if (item.children) {
+                const found = this.ensureVisible(id, item.children, item.id);
+                if (found) {
+                    if (parentId && !this.expandedItems.has(parentId))
+                        this.toggleExpand(parentId, true);
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    scrollToSection(idOrTarget) {
+        const element = document.getElementById(idOrTarget) || document.querySelector(`#${idOrTarget}`);
+        if (!element)
+            return;
+        let scrollContainerEl = this.scrollContainer ? document.querySelector(this.scrollContainer) : null;
+        if (!scrollContainerEl && this.scrollContainer) {
+            const fromParent = this.el.parentElement?.closest('.examples-split-layout, .viewport-pane');
+            if (fromParent)
+                scrollContainerEl = fromParent.querySelector(this.scrollContainer);
+        }
+        if (scrollContainerEl) {
+            const containerRect = scrollContainerEl.getBoundingClientRect();
+            const elementRect = element.getBoundingClientRect();
+            const scrollTop = scrollContainerEl.scrollTop + (elementRect.top - containerRect.top) - this.scrollOffset;
+            scrollContainerEl.scrollTo({ top: scrollTop, behavior: this.smoothScroll ? 'smooth' : 'auto' });
+        }
+        else {
+            const offsetPosition = element.getBoundingClientRect().top + window.pageYOffset - this.scrollOffset;
+            window.scrollTo({ top: offsetPosition, behavior: this.smoothScroll ? 'smooth' : 'auto' });
+        }
+        if (this.updateHash)
+            history.pushState(null, '', `#${idOrTarget}`);
+    }
+    updateIndicatorPosition(id) {
+        if (!this.showIndicator || !id)
+            return;
+        requestAnimationFrame(() => {
+            const el = this.linkElements.get(id);
+            if (!el)
+                return;
+            const container = this.el.shadowRoot?.querySelector('.anchor-list');
+            if (!container)
+                return;
+            const containerRect = container.getBoundingClientRect();
+            const linkRect = el.getBoundingClientRect();
+            const curMode = this.orientation || this.mode;
+            if (curMode === 'vertical') {
+                this.indicatorStyle = {
+                    transform: `translateY(${linkRect.top - containerRect.top}px)`,
+                    height: `${linkRect.height}px`,
+                };
+            }
+            else {
+                this.indicatorStyle = {
+                    transform: `translateX(${linkRect.left - containerRect.left}px)`,
+                    width: `${linkRect.width}px`,
+                };
+            }
+        });
+    }
+    handleItemClick = (item, event) => {
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+            this.anchorItemClick.emit({ id: item.id, label: item.label ?? '' });
+            this.anchorClick.emit({ linkId: item.id, targetId: item.target || '' });
+            return;
+        }
+        if (item.disabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.anchorItemClick.emit({ id: item.id, label: item.label ?? '' });
+        this.anchorClick.emit({ linkId: item.id, targetId: item.target || '' });
+        this.setActiveState(item.id);
+        if (item.href && !item.href.startsWith('#') && this.routerNavigate) {
+            this.navigate.emit({ href: item.href, target: item.target, rel: item.rel });
+            return;
+        }
+        const target = item.href && item.href.startsWith('#')
+            ? item.href.substring(1)
+            : (item.target || item.id);
+        this.scrollToSection(target);
+    };
+    toggleExpand(id, forceState) {
+        const newSet = new Set(this.expandedItems);
+        const shouldExpand = forceState !== undefined ? forceState : !newSet.has(id);
+        shouldExpand ? newSet.add(id) : newSet.delete(id);
+        this.expandedItems = newSet;
+        this.expandChange.emit({ id, expanded: shouldExpand });
+    }
+    handleKeyDown = (item, event, flatIndex) => {
+        if (item.disabled)
+            return;
+        const key = event.key;
+        if (key === 'Enter' || key === ' ') {
+            event.preventDefault();
+            this.setActiveState(item.id);
+            const target = item.href && item.href.startsWith('#') ? item.href.substring(1) : (item.target || item.id);
+            this.scrollToSection(target);
+            return;
+        }
+        if (this.collapsible && (item.children?.length ?? 0) > 0) {
+            if (key === 'ArrowRight' && !this.expandedItems.has(item.id)) {
+                this.toggleExpand(item.id, true);
+                event.preventDefault();
+                return;
+            }
+            if (key === 'ArrowLeft' && this.expandedItems.has(item.id)) {
+                this.toggleExpand(item.id, false);
+                event.preventDefault();
+                return;
+            }
+        }
+        if (this.arrowNavigation && (key === 'ArrowDown' || key === 'ArrowUp')) {
+            event.preventDefault();
+            const listItems = this.el.shadowRoot?.querySelectorAll('.anchor-item') ?? [];
+            const next = listItems[key === 'ArrowDown' ? flatIndex + 1 : flatIndex - 1];
+            next?.focus();
+        }
+    };
+    watchActiveItem(newVal) {
+        if (newVal && newVal !== this.currentActive) {
+            this.setActiveState(newVal);
+            try {
+                this.scrollToSection(newVal);
+            }
+            catch (e) { }
+        }
+    }
+    async setActive(id) {
+        if (!id)
+            return;
+        this.setActiveState(id);
+        this.scrollToSection(id);
+    }
+    getNumberPrefix(index, level = 0, parentPrefix = '') {
+        const n = index + 1;
+        let prefix;
+        switch (this.numberStyle) {
+            case 'decimal':
+                prefix = n.toString().padStart(2, '0');
+                break;
+            case 'alpha':
+                prefix = String.fromCharCode(97 + index);
+                break;
+            case 'roman':
+                const romans = ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii', 'viii', 'ix', 'x'];
+                prefix = romans[index] || String(n);
+                break;
+            default:
+                prefix = String(n);
+                break;
+        }
+        if (level > 0 && parentPrefix) {
+            const clean = parentPrefix.endsWith('.') ? parentPrefix.slice(0, -1) : parentPrefix;
+            return `${clean}.${prefix}.`;
+        }
+        return `${prefix}.`;
+    }
+    renderItem(item, index, level = 0, parentPrefix = '', countRef) {
+        const hasChildren = item.children && item.children.length > 0;
+        const isExpanded = this.expandedItems.has(item.id);
+        const prefix = this.showNumbers ? this.getNumberPrefix(index, level, parentPrefix) : '';
+        const flatIdx = countRef.val++;
+        const isActive = this.currentActive === item.id;
+        const curMode = this.orientation || this.mode;
+        const toggleBtn = hasChildren && this.collapsible && curMode === 'vertical' ? (h("span", { class: `anchor-toggle ${isExpanded ? 'expanded' : ''}`, onClick: (e) => { e.stopPropagation(); this.toggleExpand(item.id); } }, h("ui-icon", { name: "chevron-right", library: "fontawesome", size: "12px" }))) : null;
+        const innerContent = (h("div", { style: { display: 'contents' } }, this.showNumbers && h("span", { class: "anchor-number" }, prefix), toggleBtn, item.icon && h("span", { class: "anchor-icon" }, h("ui-icon", { name: item.icon, library: item.iconLibrary || 'lucide', size: "1.2em" })), this.indicator === 'dot'
+            ? h("span", { class: "dot-marker" })
+            : h("span", { class: "anchor-label" }, item.label), item.badge && h("span", { class: "anchor-badge" }, item.badge)));
+        return (h("div", { class: "anchor-item-wrapper" }, h("li", { ref: el => {
+                if (el)
+                    this.linkElements.set(item.id, el);
+            }, class: {
+                'anchor-item': true,
+                'active': isActive,
+                'disabled': !!item.disabled,
+                'has-children': !!hasChildren,
+                [`level-${level}`]: true,
+                'dot-type': this.indicator === 'dot',
+            }, "data-id": item.id, title: this.indicator === 'dot'
+                ? (item.tooltip || item.label)
+                : (this.showTooltip ? item.tooltip : undefined), tabindex: item.disabled ? -1 : 0, role: "button", "aria-current": isActive ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', "aria-expanded": hasChildren ? String(isExpanded) : undefined, style: { paddingLeft: curMode === 'vertical' ? `${16 + level * 16}px` : undefined }, onClick: (e) => this.handleItemClick(item, e), onKeyDown: (e) => this.handleKeyDown(item, e, flatIdx) }, this.useSlot
+            ? h("slot", { name: `item-${item.id}` }, innerContent)
+            : innerContent), hasChildren && isExpanded && (h("ul", { class: "anchor-sublist" }, item.children.map((c, i) => this.renderItem(c, i, level + 1, prefix, countRef))))));
+    }
+    render() {
+        const items = this.getParsedItems();
+        const countRef = { val: 0 };
+        const curMode = this.orientation || this.mode;
+        const wrapperStyle = (this.affix && this.isAffixed)
+            ? { position: 'fixed', top: `${this.affixOffset}px`, zIndex: '1000' }
+            : {};
+        return (h("nav", { key: '85e96011d2a9daae2ca20941ee3ab496961d1e6b', class: {
+                'anchor': true,
+                [`anchor--${curMode}`]: true,
+                [`anchor--${this.position}`]: true,
+                [`anchor--${this.size}`]: true,
+                [`anchor--${this.theme}`]: true,
+                [`anchor--align-${this.alignment}`]: true,
+                [`anchor-type-${this.indicator}`]: true,
+                'anchor--sticky': this.sticky,
+                'anchor--affixed': this.affix && this.isAffixed,
+                'anchor--with-indicator': this.showIndicator,
+                'anchor--with-numbers': this.showNumbers,
+                'show-progress': this.showProgress,
+            }, style: { '--anchor-active-color': this.activeColor, ...wrapperStyle } }, this.showProgress && (h("div", { key: '02805460ccef5d7c0ffc52d00de050d91fb1bd78', class: "anchor-progress" }, h("div", { key: 'dfa97ee018532f56e8d9c078f8980b3e52dd75a9', class: "anchor-progress-bar", style: {
+                width: curMode === 'horizontal' ? `${this.scrollProgress}%` : '100%',
+                height: curMode === 'vertical' ? `${this.scrollProgress}%` : '100%',
+            } }))), h("ul", { key: 'd1ffe5c5041220ea11909ed67f52062bc5386953', class: "anchor-list", style: { position: 'relative' } }, items.map((item, index) => this.renderItem(item, index, 0, '', countRef)), this.showIndicator && (h("div", { key: '40f921ba4343544049edb8589fce02f1e2e8f64d', class: "anchor-indicator", style: this.indicatorStyle })))));
+    }
+    static get is() { return "ui-anchor"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["anchor.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["anchor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AnchorItem[] | string",
+                    "resolved": "AnchorItem[] | string",
+                    "references": {
+                        "AnchorItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/anchor/types.ts::AnchorItem",
+                            "referenceLocation": "AnchorItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of anchor items or JSON string. Replaces old `links` prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "links": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Backward-compatible JSON string prop (same as items)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "links",
+                "defaultValue": "''"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation / mode: Orientation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'vertical'"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alias for mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position when sticky"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'left'"
+            },
+            "activeItem": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently active item id"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-item",
+                "defaultValue": "''"
+            },
+            "activeLink": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alias for activeItem (backward-compat)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-link",
+                "defaultValue": "''"
+            },
+            "scrollOffset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Offset from top when scrolling to section"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-offset",
+                "defaultValue": "80"
+            },
+            "routerNavigate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emit navigate event instead of browser navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "router-navigate",
+                "defaultValue": "false"
+            },
+            "loadIcons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-load FontAwesome icons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "load-icons",
+                "defaultValue": "true"
+            },
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stick the component using CSS position:sticky"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sticky",
+                "defaultValue": "true"
+            },
+            "scrollContainer": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS selector of scrollable container. Defaults to window."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-container",
+                "defaultValue": "''"
+            },
+            "smoothScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable smooth scrolling behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "smooth-scroll",
+                "defaultValue": "true"
+            },
+            "showTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show tooltip on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-tooltip",
+                "defaultValue": "false"
+            },
+            "showIndicator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show active indicator line/dot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-indicator",
+                "defaultValue": "true"
+            },
+            "observerRootMargin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom IntersectionObserver rootMargin"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "observer-root-margin",
+                "defaultValue": "''"
+            },
+            "useSlot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use named slot per item instead of inline rendering"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-slot",
+                "defaultValue": "false"
+            },
+            "showNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show numeric/alpha/roman numbering"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-numbers",
+                "defaultValue": "false"
+            },
+            "numberStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NumberStyle",
+                    "resolved": "\"alpha\" | \"decimal\" | \"numeric\" | \"roman\"",
+                    "references": {
+                        "NumberStyle": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::NumberStyle",
+                            "referenceLocation": "NumberStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Style of numbers shown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "number-style",
+                "defaultValue": "'numeric'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BasicSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"auto\" | \"dark\" | \"default\" | \"green\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Theme",
+                            "referenceLocation": "Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'light'"
+            },
+            "activeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the active indicator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-color",
+                "defaultValue": "'#18ff3e'"
+            },
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LeftRight| 'center'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {
+                        "LeftRight": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::LeftRight",
+                            "referenceLocation": "LeftRight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text alignment inside items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alignment",
+                "defaultValue": "'left'"
+            },
+            "updateHash": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Update URL hash on navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "update-hash",
+                "defaultValue": "false"
+            },
+            "affix": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable affix/sticky behavior on scroll"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "affix",
+                "defaultValue": "false"
+            },
+            "affixOffset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scroll threshold (px) before affix kicks in"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "affix-offset",
+                "defaultValue": "20"
+            },
+            "indicator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Indicator",
+                    "resolved": "\"default\" | \"dot\" | \"icon\" | \"line\"",
+                    "references": {
+                        "Indicator": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Indicator",
+                            "referenceLocation": "Indicator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicator type: 'line' or 'dot'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicator",
+                "defaultValue": "'line'"
+            },
+            "autoGenContainer": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS selector of container to auto-generate links from h1-h4"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-gen-container",
+                "defaultValue": "''"
+            },
+            "showProgress": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show scroll progress bar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-progress",
+                "defaultValue": "false"
+            },
+            "arrowNavigation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable keyboard arrow navigation between items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow-navigation",
+                "defaultValue": "true"
+            },
+            "collapsible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow items with children to be collapsed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsible",
+                "defaultValue": "false"
+            },
+            "defaultExpanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Expand all collapsible items by default"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-expanded",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "derivedItems": {},
+            "currentActive": {},
+            "isAffixed": {},
+            "scrollProgress": {},
+            "expandedItems": {},
+            "indicatorStyle": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "anchorClick",
+                "name": "anchorClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ linkId: string; targetId: string }",
+                    "resolved": "{ linkId: string; targetId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "anchorItemClick",
+                "name": "anchorItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ id: string; label: string }",
+                    "resolved": "{ id: string; label: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "activeItemChange",
+                "name": "activeItemChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ id: string; label: string }",
+                    "resolved": "{ id: string; label: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "navigate",
+                "name": "navigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ href: string; target?: string; rel?: string }",
+                    "resolved": "{ href: string; target?: string; rel?: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "affixChange",
+                "name": "affixChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "progressChange",
+                "name": "progressChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "expandChange",
+                "name": "expandChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ id: string; expanded: boolean }",
+                    "resolved": "{ id: string; expanded: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setActive": {
+                "complexType": {
+                    "signature": "(id: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "itemsChanged"
+            }, {
+                "propName": "links",
+                "methodName": "itemsChanged"
+            }, {
+                "propName": "autoGenContainer",
+                "methodName": "handleAutoGenContainerChange"
+            }, {
+                "propName": "activeItem",
+                "methodName": "watchActiveItem"
+            }, {
+                "propName": "activeLink",
+                "methodName": "watchActiveItem"
+            }];
+    }
+}