@syntrologie/adapt-nav 2.15.0 → 2.17.0

package/dist/NavWidgetLit.js

@@ -1,495 +0,0 @@
-/**
- * Adaptive Nav - NavWidgetLit Web Component
- *
- * Lit web component equivalent of NavWidget.tsx. Renders a collapsible
- * navigation tips accordion with per-item conditional visibility, framework-aware
- * navigation, and CSS variable theming.
- *
- * Decorator-free: uses `static override properties` (tsconfig has no
- * experimentalDecorators).
- *
- * Uses light DOM (createRenderRoot returns this) so host-page CSS variables
- * (--sc-*) are inherited without crossing a shadow boundary.
- */
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _NavWidgetLit_instances, _NavWidgetLit_contextUnsub, _NavWidgetLit_accumulatorUnsub, _NavWidgetLit_subscribeRuntime, _NavWidgetLit_unsubscribeRuntime, _NavWidgetLit_getVisibleTips, _NavWidgetLit_getResolvedTheme, _NavWidgetLit_handleToggle, _NavWidgetLit_handleNavigate, _NavWidgetLit_handleFocusAnchor, _NavWidgetLit_publishEvent, _NavWidgetLit_renderTipItem;
-import { html, LitElement, nothing } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { navigateWithFrameworkRouter } from './runtime';
-// ============================================================================
-// Design system token fallbacks (inlined to avoid bundling @syntro/design-system
-// as a hard dep for this file; values match packages/design-system/src/tokens/colors.ts)
-// ============================================================================
-const TOKEN_PURPLE_4 = '#6a59ce';
-const TOKEN_SLATE_GREY_7 = '#677384';
-const TOKEN_SLATE_GREY_8 = '#87919f';
-// ============================================================================
-// Emoji → Lucide SVG inline mapping (matches NavWidget.tsx EMOJI_SVG_MAP)
-// ============================================================================
-const EMOJI_SVG_MAP = {
-    '💵': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="12" x="2" y="6" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></svg>',
-    '🏛️': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="22" y2="22"/><line x1="6" x2="6" y1="18" y2="11"/><line x1="10" x2="10" y1="18" y2="11"/><line x1="14" x2="14" y1="18" y2="11"/><line x1="18" x2="18" y1="18" y2="11"/><polygon points="12 2 20 7 4 7"/></svg>',
-    '⏭️': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" x2="19" y1="5" y2="19"/></svg>',
-    '➡️': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>',
-    '💡': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>',
-    '💰': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="12" x="2" y="6" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></svg>',
-    '📋': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg>',
-    '✅': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>',
-    '⚠️': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
-};
-// ============================================================================
-// Sanitization helpers
-// ============================================================================
-function escapeHtml(str) {
-    return str
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
-function renderIcon(emoji) {
-    return EMOJI_SVG_MAP[emoji] ?? escapeHtml(emoji);
-}
-// ============================================================================
-// Route matching helper
-// ============================================================================
-function routeMatchesCurrent(routes) {
-    if (typeof window === 'undefined')
-        return false;
-    const current = window.location.pathname;
-    return routes.some((route) => {
-        const routePath = route.split('?')[0].split('#')[0];
-        if (routePath.endsWith('/**')) {
-            return current.startsWith(routePath.slice(0, -3));
-        }
-        return current === routePath;
-    });
-}
-// ============================================================================
-// Pulse animation helper
-// ============================================================================
-function pulseElement(el) {
-    const keyframes = [
-        { boxShadow: '0 0 0 0 rgba(13, 148, 136, 0.5)' },
-        { boxShadow: '0 0 0 8px rgba(13, 148, 136, 0)' },
-    ];
-    el.animate(keyframes, { duration: 600, iterations: 3, easing: 'ease-out' });
-}
-function resolveTheme(theme) {
-    if (theme === 'dark')
-        return 'dark';
-    if (theme === 'light')
-        return 'light';
-    // auto or undefined: detect system preference
-    if (typeof window !== 'undefined') {
-        return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    }
-    return 'light';
-}
-// ============================================================================
-// NavWidgetLit — LitElement
-// ============================================================================
-export class NavWidgetLit extends LitElement {
-    constructor() {
-        // ---------- No shadow DOM — inherit host CSS variables --------------------
-        super(...arguments);
-        _NavWidgetLit_instances.add(this);
-        // ---------- Public properties --------------------------------------------
-        this.config = { expandBehavior: 'single', theme: 'auto', actions: [] };
-        this.runtime = undefined;
-        this.instanceId = 'nav-widget';
-        // ---------- Internal state -----------------------------------------------
-        /** @internal */ this._expandedIds = new Set();
-        /** @internal */ this._renderTick = 0;
-        /** @internal */ this._hoveredId = null;
-        // ---------- Private subscriptions ----------------------------------------
-        _NavWidgetLit_contextUnsub.set(this, null);
-        _NavWidgetLit_accumulatorUnsub.set(this, null);
-    }
-    createRenderRoot() {
-        return this;
-    }
-    // ---------- Lifecycle: connectedCallback ---------------------------------
-    connectedCallback() {
-        super.connectedCallback();
-        __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_subscribeRuntime).call(this);
-    }
-    // ---------- Lifecycle: disconnectedCallback ------------------------------
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_unsubscribeRuntime).call(this);
-    }
-    // ---------- Lifecycle: updated -------------------------------------------
-    updated(changed) {
-        if (changed.has('runtime')) {
-            __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_unsubscribeRuntime).call(this);
-            __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_subscribeRuntime).call(this);
-        }
-    }
-    // ---------- Render --------------------------------------------------------
-    render() {
-        const visibleTips = __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_getVisibleTips).call(this);
-        const theme = __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_getResolvedTheme).call(this);
-        const containerStyle = styleMap({
-            fontFamily: 'var(--sc-font-family, system-ui, -apple-system, sans-serif)',
-            maxWidth: '100%',
-            overflow: 'hidden',
-            backgroundColor: 'transparent',
-            color: 'inherit',
-        });
-        const accordionStyle = styleMap({
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 'var(--sc-content-item-gap, 6px)',
-        });
-        const categoryHeaderStyle = styleMap({
-            fontSize: 'var(--sc-content-category-font-size, 12px)',
-            fontWeight: '600',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            padding: 'var(--sc-content-category-padding, 8px 4px 4px 4px)',
-            color: theme === 'dark' ? TOKEN_SLATE_GREY_8 : TOKEN_SLATE_GREY_7,
-        });
-        const emptyStateStyle = styleMap({
-            fontSize: '13px',
-            padding: '16px',
-            textAlign: 'center',
-            color: theme === 'dark' ? TOKEN_SLATE_GREY_7 : TOKEN_SLATE_GREY_8,
-        });
-        // Empty state
-        if (visibleTips.length === 0) {
-            return html `
-        <div
-          style=${containerStyle}
-          data-adaptive-id=${this.instanceId}
-          data-adaptive-type="adaptive-nav"
-        >
-          <div style=${emptyStateStyle}>
-            You're all set for now! We'll share helpful tips here when they're relevant to what
-            you're doing.
-          </div>
-        </div>
-      `;
-        }
-        // Group by category
-        const categoryGroups = new Map();
-        for (const tip of visibleTips) {
-            const cat = tip.config.category;
-            if (!categoryGroups.has(cat)) {
-                categoryGroups.set(cat, []);
-            }
-            categoryGroups.get(cat).push(tip);
-        }
-        const hasCategories = visibleTips.some((t) => t.config.category);
-        return html `
-      <div
-        style=${containerStyle}
-        data-adaptive-id=${this.instanceId}
-        data-adaptive-type="adaptive-nav"
-      >
-        <div style=${accordionStyle}>
-          ${hasCategories
-            ? Array.from(categoryGroups.entries()).map(([category, items]) => html `
-                ${category
-                ? html `<div style=${categoryHeaderStyle} data-category-header=${category}>${category}</div>`
-                : nothing}
-                ${items.map((tip, idx) => __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_renderTipItem).call(this, tip, idx, items.length))}
-              `)
-            : visibleTips.map((tip, idx) => __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_renderTipItem).call(this, tip, idx, visibleTips.length))}
-        </div>
-      </div>
-    `;
-    }
-}
-_NavWidgetLit_contextUnsub = new WeakMap(), _NavWidgetLit_accumulatorUnsub = new WeakMap(), _NavWidgetLit_instances = new WeakSet(), _NavWidgetLit_subscribeRuntime = function _NavWidgetLit_subscribeRuntime() {
-    if (!this.runtime)
-        return;
-    __classPrivateFieldSet(this, _NavWidgetLit_contextUnsub, this.runtime.context.subscribe(() => {
-        this._renderTick += 1;
-    }), "f");
-    if (this.runtime.accumulator?.subscribe) {
-        __classPrivateFieldSet(this, _NavWidgetLit_accumulatorUnsub, this.runtime.accumulator.subscribe(() => {
-            this._renderTick += 1;
-        }), "f");
-    }
-}, _NavWidgetLit_unsubscribeRuntime = function _NavWidgetLit_unsubscribeRuntime() {
-    __classPrivateFieldGet(this, _NavWidgetLit_contextUnsub, "f")?.call(this);
-    __classPrivateFieldSet(this, _NavWidgetLit_contextUnsub, null, "f");
-    __classPrivateFieldGet(this, _NavWidgetLit_accumulatorUnsub, "f")?.call(this);
-    __classPrivateFieldSet(this, _NavWidgetLit_accumulatorUnsub, null, "f");
-}, _NavWidgetLit_getVisibleTips = function _NavWidgetLit_getVisibleTips() {
-    // _renderTick is read here to ensure this re-runs when context/accumulator
-    // notify (same pattern as useMemo with renderTick dep in React version).
-    void this._renderTick;
-    if (!this.runtime)
-        return this.config.actions;
-    return this.config.actions.filter((tip) => {
-        if (!tip.triggerWhen)
-            return true;
-        try {
-            const result = this.runtime.evaluateSync(tip.triggerWhen);
-            return result.value;
-        }
-        catch {
-            // Fail-closed: hide tip when strategy evaluation throws
-            return false;
-        }
-    });
-}, _NavWidgetLit_getResolvedTheme = function _NavWidgetLit_getResolvedTheme() {
-    return resolveTheme(this.config.theme);
-}, _NavWidgetLit_handleToggle = function _NavWidgetLit_handleToggle(id) {
-    const wasExpanded = this._expandedIds.has(id);
-    let next;
-    if (this.config.expandBehavior === 'single') {
-        // Emit collapse events for previously-expanded tips (single mode)
-        for (const prevId of this._expandedIds) {
-            if (prevId !== id) {
-                __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_publishEvent).call(this, 'nav:toggled', {
-                    tipId: prevId,
-                    expanded: false,
-                });
-            }
-        }
-        next = wasExpanded ? new Set() : new Set([id]);
-    }
-    else {
-        next = new Set(this._expandedIds);
-        if (wasExpanded) {
-            next.delete(id);
-        }
-        else {
-            next.add(id);
-        }
-    }
-    __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_publishEvent).call(this, 'nav:toggled', {
-        tipId: id,
-        expanded: !wasExpanded,
-    });
-    this._expandedIds = next;
-}, _NavWidgetLit_handleNavigate = function _NavWidgetLit_handleNavigate(href, external) {
-    // Reject dangerous URIs
-    const normalized = href.trim().toLowerCase();
-    if (normalized.startsWith('javascript:') || normalized.startsWith('data:'))
-        return;
-    __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_publishEvent).call(this, 'nav:tip_clicked', { href, external });
-    // Also fire a standard custom event for host-page listeners
-    this.dispatchEvent(new CustomEvent('nav-tip-clicked', {
-        bubbles: true,
-        detail: { href, external, instanceId: this.instanceId },
-    }));
-    if (external) {
-        window.open(href, '_blank', 'noopener,noreferrer');
-    }
-    else {
-        const url = new URL(href, window.location.origin);
-        url.search = window.location.search;
-        if (!navigateWithFrameworkRouter(url.toString())) {
-            window.history.pushState(null, '', url.toString());
-            window.dispatchEvent(new PopStateEvent('popstate'));
-        }
-    }
-}, _NavWidgetLit_handleFocusAnchor = function _NavWidgetLit_handleFocusAnchor(anchor) {
-    const el = document.querySelector(anchor.selector);
-    if (!(el instanceof HTMLElement))
-        return;
-    __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_publishEvent).call(this, 'nav:tip_focused', {
-        selector: anchor.selector,
-        route: anchor.route,
-    });
-    this.dispatchEvent(new CustomEvent('nav-tip-focused', {
-        bubbles: true,
-        detail: { selector: anchor.selector, instanceId: this.instanceId },
-    }));
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    pulseElement(el);
-    setTimeout(() => el.focus(), 400);
-}, _NavWidgetLit_publishEvent = function _NavWidgetLit_publishEvent(name, props) {
-    this.runtime?.events.publish(name, {
-        instanceId: this.instanceId,
-        timestamp: Date.now(),
-        ...props,
-    });
-}, _NavWidgetLit_renderTipItem = function _NavWidgetLit_renderTipItem(tip, index, total) {
-    const { id, title, description, href, icon, external, anchor, category: _cat } = tip.config;
-    const isExpanded = this._expandedIds.has(id);
-    const isLast = index === total - 1;
-    const isHovered = this._hoveredId === id;
-    const theme = __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_getResolvedTheme).call(this);
-    // Determine the effective href from anchor or legacy href
-    const effectiveHref = anchor
-        ? Array.isArray(anchor.route)
-            ? anchor.route[0]
-            : anchor.route
-        : href;
-    // Same-page check
-    const isSamePage = anchor
-        ? routeMatchesCurrent(Array.isArray(anchor.route) ? anchor.route : [anchor.route])
-        : effectiveHref
-            ? routeMatchesCurrent([effectiveHref])
-            : false;
-    const hasSelector = anchor?.selector && anchor.selector !== '*';
-    const isFocusAction = isSamePage && hasSelector;
-    const hasAction = !!effectiveHref || isFocusAction;
-    const ctaLabel = isFocusAction ? 'Focus \u2192' : external ? 'Go \u2197' : 'Go \u2192';
-    // Item container styles
-    const itemStyle = styleMap({
-        borderRadius: 'var(--sc-content-border-radius, 8px)',
-        overflow: 'hidden',
-        transition: 'box-shadow 0.2s ease',
-        backgroundColor: 'var(--sc-content-background)',
-        border: 'var(--sc-content-border)',
-        ...(isExpanded
-            ? {
-                boxShadow: theme === 'dark'
-                    ? '0 4px 12px rgba(0, 0, 0, 0.15)'
-                    : '0 4px 12px rgba(0, 0, 0, 0.08)',
-            }
-            : {}),
-        ...(!isLast ? { borderBottom: 'var(--sc-content-item-divider, none)' } : {}),
-    });
-    // Header styles
-    const headerStyle = styleMap({
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        width: '100%',
-        padding: 'var(--sc-content-item-padding, 12px 16px)',
-        border: 'none',
-        cursor: 'pointer',
-        fontSize: 'var(--sc-content-item-font-size, 15px)',
-        fontWeight: '500',
-        fontFamily: 'inherit',
-        textAlign: 'left',
-        transition: 'background-color 0.15s ease',
-        backgroundColor: isHovered ? 'var(--sc-content-background-hover)' : 'transparent',
-        color: 'var(--sc-content-text-color)',
-    });
-    // Chevron styles
-    const chevronStyle = styleMap({
-        fontSize: '20px',
-        transition: 'transform 0.2s ease',
-        marginLeft: 'auto',
-        flexShrink: '0',
-        color: 'var(--sc-content-chevron-color, currentColor)',
-        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-    });
-    // Body styles
-    const bodyStyle = styleMap({
-        overflow: 'hidden',
-        transition: 'max-height 0.25s ease, padding-bottom 0.25s ease',
-        padding: 'var(--sc-content-body-padding, 0 16px 12px 16px)',
-        color: 'var(--sc-content-text-secondary-color)',
-        maxHeight: isExpanded ? '500px' : '0',
-        paddingBottom: isExpanded ? '16px' : '0',
-    });
-    // Description styles
-    const descriptionStyle = styleMap({
-        fontSize: 'var(--sc-content-body-font-size, 14px)',
-        lineHeight: '1.5',
-        margin: '0',
-    });
-    // CTA / link button styles
-    const linkButtonStyle = styleMap({
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '4px',
-        marginTop: '10px',
-        padding: '6px 12px',
-        borderRadius: '6px',
-        textDecoration: 'none',
-        fontSize: '13px',
-        fontWeight: '500',
-        cursor: 'pointer',
-        border: 'none',
-        transition: 'background-color 0.15s ease',
-        backgroundColor: `var(--sc-color-primary, ${TOKEN_PURPLE_4})`,
-        color: '#ffffff',
-    });
-    // Icon styles
-    const iconStyle = styleMap({
-        fontSize: '16px',
-        flexShrink: '0',
-    });
-    // Anchor click handler
-    const onLinkClick = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (isFocusAction && anchor) {
-            __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_handleFocusAnchor).call(this, anchor);
-        }
-        else if (effectiveHref) {
-            __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_handleNavigate).call(this, effectiveHref, external ?? false);
-        }
-    };
-    return html `
-      <div
-        style=${itemStyle}
-        data-nav-tip-id=${id}
-      >
-        <button
-          type="button"
-          style=${headerStyle}
-          aria-expanded=${isExpanded}
-          @click=${() => __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_handleToggle).call(this, id)}
-          @mouseenter=${() => {
-        this._hoveredId = id;
-    }}
-          @mouseleave=${() => {
-        this._hoveredId = null;
-    }}
-        >
-          ${icon ? html `<span style=${iconStyle}>${unsafeHTML(renderIcon(icon))}</span>` : nothing}
-          <span>${title}</span>
-          <span style=${chevronStyle}>${'\u203A'}</span>
-        </button>
-        <div style=${bodyStyle} aria-hidden=${!isExpanded}>
-          <p style=${descriptionStyle}>${description}</p>
-          ${hasAction
-        ? html `
-                <a
-                  href=${effectiveHref || '#'}
-                  style=${linkButtonStyle}
-                  target=${external ? '_blank' : nothing}
-                  rel=${external ? 'noopener noreferrer' : nothing}
-                  @click=${onLinkClick}
-                >${ctaLabel}</a>
-              `
-        : nothing}
-        </div>
-      </div>
-    `;
-};
-// ---------- Reactive properties (no decorators) --------------------------
-NavWidgetLit.properties = {
-    // Public inputs
-    config: { attribute: false },
-    runtime: { attribute: false },
-    instanceId: { type: String },
-    // Internal reactive state
-    _expandedIds: { state: true },
-    _renderTick: { state: true },
-    _hoveredId: { state: true },
-};
-// ============================================================================
-// Custom element registration
-// ============================================================================
-const TAG_NAME = 'syntro-nav-tips';
-export function registerNavWidgetLit() {
-    if (typeof window === 'undefined')
-        return;
-    if (!customElements.get(TAG_NAME)) {
-        customElements.define(TAG_NAME, NavWidgetLit);
-    }
-}