nativecorejs 0.1.0

package/dist/components/nc-menu.js

@@ -0,0 +1,360 @@
+/**
+ * NativeCore Menu Component (nc-menu)
+ *
+ * A vertical command menu. Place nc-menu-item elements inside as direct children.
+ * Supports grouped items (via nc-menu-divider or label attribute), a searchable
+ * filter box, and several visual variants.
+ *
+ * Attributes:
+ *   variant     - 'default' | 'compact' | 'inset' | 'bordered'  (default: 'default')
+ *   searchable  - Boolean. Adds a filter input at the top that hides non-matching items.
+ *   label       - Optional header label shown above the items.
+ *   width       - CSS width value, e.g. '220px'. Defaults to 'fit-content'.
+ *   auto-active - Boolean. Automatically moves the `active` attribute to whichever
+ *                  item was last selected or navigated to. For nc-a items, also
+ *                  matches the current path on mount.
+ *
+ * Slots:
+ *   default    - nc-menu-item (and nc-menu-divider) elements.
+ *
+ * Events emitted:
+ *   nc-menu-select - { item: HTMLElement, label: string } - fires when any
+ *                    nc-menu-item inside emits nc-select.
+ *
+ * Keyboard:
+ *   ArrowDown / ArrowUp - move focus between items.
+ *   Home / End          - jump to first / last item.
+ *   Escape              - blur the menu.
+ *
+ * Usage:
+ *   <nc-menu label="Actions">
+ *     <nc-menu-item icon="/icons/edit.svg">Edit</nc-menu-item>
+ *     <nc-menu-item icon="/icons/copy.svg">Duplicate</nc-menu-item>
+ *     <nc-menu-item danger icon="/icons/trash.svg">Delete</nc-menu-item>
+ *   </nc-menu>
+ *
+ *   <nc-menu searchable variant="bordered" width="260px">
+ *     <nc-menu-item>Dashboard</nc-menu-item>
+ *     <nc-menu-item active>Components</nc-menu-item>
+ *     <nc-menu-item>Settings</nc-menu-item>
+ *   </nc-menu>
+ *
+ *   <!-- Navigation sidebar: nc-a items, active managed automatically -->
+ *   <nc-menu auto-active variant="inset" width="220px">
+ *     <nc-a href="/dashboard" variant="ghost">Dashboard</nc-a>
+ *     <nc-a href="/components" variant="ghost">Components</nc-a>
+ *     <nc-a href="/settings" variant="ghost">Settings</nc-a>
+ *   </nc-menu>
+ */
+import { Component, defineComponent } from '../core/component.js';
+import { html } from '../utils/templates.js';
+export class NcMenu extends Component {
+    static useShadowDOM = true;
+    static attributeOptions = {
+        variant: ['default', 'compact', 'inset', 'bordered'],
+    };
+    static get observedAttributes() {
+        return ['variant', 'searchable', 'label', 'width', 'auto-active'];
+    }
+    _onSlotChange = null;
+    _onSelect = null;
+    _onNavigate = null;
+    _onKeydown = null;
+    _onSearchInput = null;
+    template() {
+        const label = this.getAttribute('label') || '';
+        const searchable = this.hasAttribute('searchable');
+        const width = this.getAttribute('width') || 'fit-content';
+        const labelHTML = label
+            ? `<div class="menu__label">${label}</div>`
+            : '';
+        const searchHTML = searchable
+            ? `<div class="menu__search-wrap">
+                   <svg class="menu__search-icon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                       <circle cx="8.5" cy="8.5" r="5.5" stroke="currentColor" stroke-width="1.5"/>
+                       <path d="M15 15l-3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                   </svg>
+                   <input class="menu__search" type="text" placeholder="Search..." autocomplete="off" spellcheck="false" />
+               </div>`
+            : '';
+        return html `
+            <style>
+                :host {
+                    display: inline-block;
+                    width: ${width};
+                    font-family: var(--nc-font-family);
+                    box-sizing: border-box;
+                }
+
+                .menu {
+                    background: var(--nc-bg);
+                    border-radius: var(--nc-radius-lg);
+                    padding: var(--nc-spacing-xs);
+                    min-width: 180px;
+                    box-sizing: border-box;
+                    width: 100%;
+                }
+
+                /* ── Variants ──────────────────────────────────────────────── */
+                :host([variant="default"]) .menu,
+                :host(:not([variant])) .menu {
+                    background: var(--nc-bg);
+                    padding: var(--nc-spacing-xs);
+                }
+
+                :host([variant="compact"]) .menu {
+                    padding: 2px;
+                }
+
+                :host([variant="compact"]) ::slotted(nc-menu-item) {
+                    --nc-menu-item-py: var(--nc-spacing-xs);
+                }
+
+                :host([variant="inset"]) .menu {
+                    background: var(--nc-bg-secondary);
+                    padding: var(--nc-spacing-sm);
+                    border-radius: var(--nc-radius-xl);
+                }
+
+                :host([variant="bordered"]) .menu {
+                    background: var(--nc-bg);
+                    border: 1px solid var(--nc-border);
+                    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+                    padding: var(--nc-spacing-xs);
+                }
+
+                /* ── Label ─────────────────────────────────────────────────── */
+                .menu__label {
+                    font-size: var(--nc-font-size-xs, 0.7rem);
+                    font-weight: 700;
+                    text-transform: uppercase;
+                    letter-spacing: 0.08em;
+                    color: var(--nc-text-secondary);
+                    padding: var(--nc-spacing-xs) var(--nc-spacing-md) var(--nc-spacing-xs);
+                    margin-bottom: 2px;
+                }
+
+                /* ── Search ────────────────────────────────────────────────── */
+                .menu__search-wrap {
+                    position: relative;
+                    margin-bottom: var(--nc-spacing-xs);
+                }
+
+                .menu__search-icon {
+                    position: absolute;
+                    left: 10px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    width: 14px;
+                    height: 14px;
+                    color: var(--nc-text-secondary);
+                    pointer-events: none;
+                }
+
+                .menu__search {
+                    width: 100%;
+                    box-sizing: border-box;
+                    padding: var(--nc-spacing-xs) var(--nc-spacing-sm) var(--nc-spacing-xs) 30px;
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-sm);
+                    background: var(--nc-bg-secondary);
+                    border: 1px solid var(--nc-border);
+                    border-radius: var(--nc-radius-md);
+                    color: var(--nc-text);
+                    outline: none;
+                    transition: border-color var(--nc-transition-fast);
+                }
+
+                .menu__search:focus {
+                    border-color: var(--nc-primary);
+                }
+
+                .menu__search::placeholder {
+                    color: var(--nc-text-secondary);
+                    opacity: 0.6;
+                }
+
+                /* ── Empty state ───────────────────────────────────────────── */
+                .menu__empty {
+                    display: none;
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text-secondary);
+                    padding: var(--nc-spacing-md);
+                    text-align: center;
+                    opacity: 0.6;
+                }
+
+                .menu__empty.visible {
+                    display: block;
+                }
+            </style>
+            <div class="menu" role="menu">
+                ${labelHTML}
+                ${searchHTML}
+                <slot></slot>
+                <div class="menu__empty">No results</div>
+            </div>
+        `;
+    }
+    onMount() {
+        // Delegate nc-select events from nc-menu-item children
+        this._onSelect = (e) => {
+            const item = e.target;
+            if (item.tagName.toLowerCase() !== 'nc-menu-item')
+                return;
+            const label = item.textContent?.trim() ?? '';
+            this.emitEvent('nc-menu-select', { item, label });
+            // Always track active for nc-menu-item - no opt-in required
+            this._setActive(item);
+        };
+        this.addEventListener('nc-select', this._onSelect);
+        // Delegate nc-navigate events from nc-a children
+        this._onNavigate = (e) => {
+            const item = e.target;
+            if (item.tagName.toLowerCase() !== 'nc-a')
+                return;
+            if (this.hasAttribute('auto-active'))
+                this._setActive(item);
+        };
+        this.addEventListener('nc-navigate', this._onNavigate);
+        // Arrow key navigation (supports both nc-menu-item and nc-a)
+        this._onKeydown = (e) => {
+            const ke = e;
+            if (!['ArrowDown', 'ArrowUp', 'Home', 'End', 'Escape'].includes(ke.key))
+                return;
+            ke.preventDefault();
+            const items = this._getEnabledItems();
+            if (!items.length)
+                return;
+            const focused = document.activeElement;
+            const idx = items.findIndex(el => el === focused || el.shadowRoot?.contains(focused));
+            if (ke.key === 'Escape') {
+                focused?.blur?.();
+                return;
+            }
+            if (ke.key === 'Home') {
+                this._focusItem(items[0]);
+                return;
+            }
+            if (ke.key === 'End') {
+                this._focusItem(items[items.length - 1]);
+                return;
+            }
+            const next = ke.key === 'ArrowDown'
+                ? items[Math.min(idx + 1, items.length - 1)]
+                : items[Math.max(idx - 1, 0)];
+            this._focusItem(next);
+        };
+        this.addEventListener('keydown', this._onKeydown);
+        // Auto-active: match current path for nc-a items on mount
+        if (this.hasAttribute('auto-active')) {
+            Promise.resolve().then(() => this._syncActiveFromPath());
+        }
+        // Search filtering
+        if (this.hasAttribute('searchable')) {
+            this._attachSearch();
+        }
+        // Re-sync search + path when slot contents change
+        const slot = this.$('slot');
+        if (slot) {
+            this._onSlotChange = () => {
+                if (this.hasAttribute('searchable'))
+                    this._filterItems('');
+                if (this.hasAttribute('auto-active'))
+                    this._syncActiveFromPath();
+            };
+            slot.addEventListener('slotchange', this._onSlotChange);
+        }
+    }
+    onUnmount() {
+        if (this._onSelect)
+            this.removeEventListener('nc-select', this._onSelect);
+        if (this._onNavigate)
+            this.removeEventListener('nc-navigate', this._onNavigate);
+        if (this._onKeydown)
+            this.removeEventListener('keydown', this._onKeydown);
+        const slot = this.$('slot');
+        if (slot && this._onSlotChange)
+            slot.removeEventListener('slotchange', this._onSlotChange);
+        this._onSelect = null;
+        this._onNavigate = null;
+        this._onKeydown = null;
+        this._onSlotChange = null;
+        this._onSearchInput = null;
+    }
+    attributeChangedCallback(_name, oldValue, newValue) {
+        if (this._mounted && oldValue !== newValue)
+            this.render();
+    }
+    // ─── Private ────────────────────────────────────────────────────────────────
+    _getEnabledItems() {
+        return Array.from(this.querySelectorAll('nc-menu-item:not([disabled]), nc-a:not([disabled])'));
+    }
+    _focusItem(item) {
+        const tag = item.tagName.toLowerCase();
+        const selector = tag === 'nc-a' ? 'a' : '[role="menuitem"]';
+        item.shadowRoot?.querySelector(selector)?.focus();
+    }
+    /** Moves `active` to `target`, removes it from all siblings. */
+    _setActive(target) {
+        const all = Array.from(this.querySelectorAll('nc-menu-item, nc-a'));
+        all.forEach(el => {
+            if (el === target) {
+                el.setAttribute('active', '');
+            }
+            else {
+                el.removeAttribute('active');
+            }
+        });
+    }
+    /**
+     * For nc-a items with auto-active: set active on the item whose href
+     * matches the current pathname. Handles exact and prefix matches.
+     */
+    _syncActiveFromPath() {
+        const path = window.location.pathname;
+        const links = Array.from(this.querySelectorAll('nc-a[href]'));
+        if (!links.length)
+            return;
+        // Prefer exact match, fall back to longest prefix
+        let best = null;
+        let bestLen = 0;
+        links.forEach(link => {
+            const href = link.getAttribute('href') ?? '';
+            if (href === path) {
+                best = link;
+                bestLen = Infinity;
+                return;
+            }
+            if (bestLen < Infinity && path.startsWith(href) && href.length > bestLen) {
+                best = link;
+                bestLen = href.length;
+            }
+        });
+        if (best)
+            this._setActive(best);
+    }
+    _attachSearch() {
+        const input = this.$('.menu__search');
+        if (!input)
+            return;
+        this._onSearchInput = () => this._filterItems(input.value);
+        input.addEventListener('input', this._onSearchInput);
+    }
+    _filterItems(query) {
+        const q = query.toLowerCase().trim();
+        const items = Array.from(this.querySelectorAll('nc-menu-item, nc-a'));
+        let visible = 0;
+        items.forEach(item => {
+            const text = (item.textContent ?? '').toLowerCase();
+            const show = !q || text.includes(q);
+            item.style.display = show ? '' : 'none';
+            if (show)
+                visible++;
+        });
+        const empty = this.$('.menu__empty');
+        if (empty)
+            empty.classList.toggle('visible', visible === 0);
+    }
+}
+defineComponent('nc-menu', NcMenu);

package/dist/components/nc-modal.d.ts

@@ -0,0 +1,51 @@
+/**
+ * NcModal Component
+ *
+ * Attributes:
+ *   - open: boolean - visible state
+ *   - size: 'sm'|'md'|'lg'|'xl'|'full' (default: 'md')
+ *   - no-close-btn: boolean - hide header × button
+ *   - close-on-overlay: boolean - click backdrop to close (default: true)
+ *   - no-overlay: boolean - skip backdrop rendering
+ *   - sticky-header: boolean - header doesn't scroll with body
+ *   - sticky-footer: boolean - footer stays at bottom
+ *
+ * Slots:
+ *   - header - modal title / header area
+ *   - (default) - modal body
+ *   - footer - action buttons area
+ *
+ * Events:
+ *   - open:  CustomEvent - after modal opens
+ *   - close: CustomEvent - after modal closes
+ *
+ * Static API:
+ *   NcModal.open(id)  - open a modal by id
+ *   NcModal.close(id) - close a modal by id
+ *
+ * Usage:
+ *   <nc-modal id="confirm-modal">
+ *     <span slot="header">Confirm Delete</span>
+ *     <p>Are you sure?</p>
+ *     <div slot="footer">
+ *       <nc-button variant="ghost" id="cancel-btn">Cancel</nc-button>
+ *       <nc-button variant="danger" id="confirm-btn">Delete</nc-button>
+ *     </div>
+ *   </nc-modal>
+ *
+ *   NcModal.open('confirm-modal');
+ */
+import { Component } from '../core/component.js';
+export declare class NcModal extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    static open(id: string): void;
+    static close(id: string): void;
+    private _onKeydown;
+    template(): string;
+    onMount(): void;
+    private _bindEvents;
+    private _close;
+    onUnmount(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/components/nc-modal.js

@@ -0,0 +1,231 @@
+/**
+ * NcModal Component
+ *
+ * Attributes:
+ *   - open: boolean - visible state
+ *   - size: 'sm'|'md'|'lg'|'xl'|'full' (default: 'md')
+ *   - no-close-btn: boolean - hide header × button
+ *   - close-on-overlay: boolean - click backdrop to close (default: true)
+ *   - no-overlay: boolean - skip backdrop rendering
+ *   - sticky-header: boolean - header doesn't scroll with body
+ *   - sticky-footer: boolean - footer stays at bottom
+ *
+ * Slots:
+ *   - header - modal title / header area
+ *   - (default) - modal body
+ *   - footer - action buttons area
+ *
+ * Events:
+ *   - open:  CustomEvent - after modal opens
+ *   - close: CustomEvent - after modal closes
+ *
+ * Static API:
+ *   NcModal.open(id)  - open a modal by id
+ *   NcModal.close(id) - close a modal by id
+ *
+ * Usage:
+ *   <nc-modal id="confirm-modal">
+ *     <span slot="header">Confirm Delete</span>
+ *     <p>Are you sure?</p>
+ *     <div slot="footer">
+ *       <nc-button variant="ghost" id="cancel-btn">Cancel</nc-button>
+ *       <nc-button variant="danger" id="confirm-btn">Delete</nc-button>
+ *     </div>
+ *   </nc-modal>
+ *
+ *   NcModal.open('confirm-modal');
+ */
+import { Component, defineComponent } from '../core/component.js';
+import { dom } from '../utils/dom.js';
+export class NcModal extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['open', 'size', 'no-close-btn', 'close-on-overlay', 'no-overlay', 'sticky-header', 'sticky-footer'];
+    }
+    static open(id) { dom.query(`#${id}`)?.setAttribute('open', ''); }
+    static close(id) { dom.query(`#${id}`)?.removeAttribute('open'); }
+    _onKeydown = null;
+    template() {
+        const open = this.hasAttribute('open');
+        const size = this.getAttribute('size') || 'md';
+        const noOverlay = this.hasAttribute('no-overlay');
+        const noCloseBtn = this.hasAttribute('no-close-btn');
+        const widths = {
+            sm: '420px', md: '560px', lg: '720px', xl: '960px', full: '100vw'
+        };
+        const maxWidth = widths[size] ?? widths.md;
+        return `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    inset: 0;
+                    z-index: 1000;
+                    pointer-events: none;
+                }
+
+                .overlay {
+                    position: absolute;
+                    inset: 0;
+                    background: rgba(0,0,0,.5);
+                    z-index: 1000;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: var(--nc-spacing-lg);
+                    opacity: ${open ? '1' : '0'};
+                    pointer-events: ${open ? 'auto' : 'none'};
+                    transition: opacity var(--nc-transition-base);
+                    ${noOverlay ? 'background: transparent;' : ''}
+                }
+
+                .dialog {
+                    background: var(--nc-bg);
+                    border-radius: var(--nc-radius-lg, 12px);
+                    box-shadow: var(--nc-shadow-xl, 0 25px 60px rgba(0,0,0,.35));
+                    width: 100%;
+                    max-width: ${maxWidth};
+                    max-height: calc(100vh - 2 * var(--nc-spacing-lg));
+                    display: flex;
+                    flex-direction: column;
+                    transform: ${open ? 'translateY(0) scale(1)' : 'translateY(12px) scale(0.97)'};
+                    transition: transform var(--nc-transition-base);
+                    overflow: hidden;
+                    ${size === 'full' ? 'height: calc(100vh - 2 * var(--nc-spacing-lg));' : ''}
+                }
+
+                .dialog__header {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: var(--nc-spacing-md) var(--nc-spacing-lg);
+                    border-bottom: 1px solid var(--nc-border);
+                    flex-shrink: 0;
+                    font-family: var(--nc-font-family);
+                    font-weight: var(--nc-font-weight-semibold);
+                    font-size: var(--nc-font-size-lg);
+                    color: var(--nc-text);
+                }
+
+                .dialog__body {
+                    flex: 1;
+                    overflow-y: auto;
+                    padding: var(--nc-spacing-lg);
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-base);
+                    color: var(--nc-text);
+                    line-height: var(--nc-line-height-relaxed, 1.7);
+                }
+
+                .dialog__footer {
+                    padding: var(--nc-spacing-md) var(--nc-spacing-lg);
+                    border-top: 1px solid var(--nc-border);
+                    flex-shrink: 0;
+                    display: flex;
+                    justify-content: flex-end;
+                    gap: var(--nc-spacing-sm);
+                }
+                .dialog__footer:empty { display: none; }
+
+                .close-btn {
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 4px;
+                    color: var(--nc-text-muted);
+                    border-radius: var(--nc-radius-sm, 4px);
+                    display: flex;
+                    transition: color var(--nc-transition-fast), background var(--nc-transition-fast);
+                    flex-shrink: 0;
+                }
+                .close-btn:hover { color: var(--nc-text); background: var(--nc-bg-secondary); }
+            </style>
+
+            <div
+                class="overlay"
+                role="dialog"
+                aria-modal="true"
+                aria-hidden="${!open}"
+                tabindex="-1"
+            >
+                <div class="dialog">
+                    <div class="dialog__header">
+                        <slot name="header"></slot>
+                        ${!noCloseBtn ? `
+                        <button class="close-btn" type="button" aria-label="Close modal">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="18" height="18">
+                                <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                            </svg>
+                        </button>` : ''}
+                    </div>
+                    <div class="dialog__body">
+                        <slot></slot>
+                    </div>
+                    <div class="dialog__footer">
+                        <slot name="footer"></slot>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    onMount() {
+        this._bindEvents();
+    }
+    _bindEvents() {
+        const overlay = this.$('.overlay');
+        const dialog = this.$('.dialog');
+        const closeBtn = this.$('.close-btn');
+        if (closeBtn)
+            closeBtn.addEventListener('click', () => this._close());
+        overlay.addEventListener('click', (e) => {
+            if (this.getAttribute('close-on-overlay') === 'false')
+                return;
+            if (!dialog.contains(e.target))
+                this._close();
+        });
+        this._onKeydown = (e) => {
+            if (e.key === 'Escape' && this.hasAttribute('open'))
+                this._close();
+        };
+        document.addEventListener('keydown', this._onKeydown);
+    }
+    _close() {
+        this.removeAttribute('open');
+    }
+    onUnmount() {
+        if (this._onKeydown)
+            document.removeEventListener('keydown', this._onKeydown);
+        document.body.style.overflow = '';
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'open' && this._mounted) {
+            const open = this.hasAttribute('open');
+            const overlay = this.$('.overlay');
+            const dialog = this.$('.dialog');
+            if (overlay) {
+                overlay.style.opacity = open ? '1' : '0';
+                overlay.style.pointerEvents = open ? 'auto' : 'none';
+                overlay.setAttribute('aria-hidden', String(!open));
+            }
+            if (dialog) {
+                dialog.style.transform = open
+                    ? 'translateY(0) scale(1)'
+                    : 'translateY(12px) scale(0.97)';
+                if (open)
+                    dialog.focus();
+            }
+            document.body.style.overflow = open ? 'hidden' : '';
+            this.dispatchEvent(new CustomEvent(open ? 'open' : 'close', {
+                bubbles: true, composed: true
+            }));
+            return;
+        }
+        if (this._mounted) {
+            this.render();
+            this._bindEvents();
+        }
+    }
+}
+defineComponent('nc-modal', NcModal);

package/dist/components/nc-nav-item.d.ts

@@ -0,0 +1,35 @@
+/**
+ * NcNavItem Component - sidebar / navigation link with icon, label, badge, active state
+ *
+ * Attributes:
+ *   href       - link URL; if omitted renders as a <button>
+ *   label      - visible text (can also use default slot)
+ *   icon       - preset icon name OR raw SVG string (see below)
+ *   active     - boolean - mark as active
+ *   disabled   - boolean
+ *   badge      - badge count (number string); shown as a pill on the right
+ *   badge-variant - 'primary'(default)|'success'|'danger'|'warning'
+ *   indent     - indentation level for nested nav (default: 0)
+ *   target     - anchor target (default: '_self')
+ *   exact      - boolean - only activate on exact URL match (router integration)
+ *
+ * Slots:
+ *   icon   - custom icon (overrides icon attribute)
+ *   (default) - label text (overrides label attribute)
+ *   badge  - custom badge content
+ *
+ * Events:
+ *   nav-click - CustomEvent<{ href: string | null }> - bubbles from both <a> and <button>
+ *
+ * Usage:
+ *   <nc-nav-item href="/dashboard" label="Dashboard" icon="home" active></nc-nav-item>
+ *   <nc-nav-item href="/users" label="Users" icon="users" badge="14"></nc-nav-item>
+ */
+import { Component } from '../core/component.js';
+export declare class NcNavItem extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    template(): string;
+    onMount(): void;
+    attributeChangedCallback(n: string, o: string, v: string): void;
+}