nativecorejs 0.1.0

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

@@ -0,0 +1,41 @@
+/**
+ * NcAutocomplete Component
+ *
+ * Attributes:
+ *   - name: string
+ *   - value: string - current input value
+ *   - placeholder: string
+ *   - options: JSON string array OR comma-separated - static suggestions
+ *   - min-chars: number - chars before showing suggestions (default: 1)
+ *   - max-results: number - max visible items (default: 8)
+ *   - disabled: boolean
+ *   - size: 'sm'|'md'|'lg' (default: 'md')
+ *   - variant: 'default'|'filled' (default: 'default')
+ *
+ * Dynamic options - dispatch 'nc-autocomplete-options' on the element:
+ *   el.dispatchEvent(new CustomEvent('nc-autocomplete-options', { detail: ['a','b'] }))
+ *
+ * Events:
+ *   - input:  CustomEvent<{ value: string; name: string }>
+ *   - select: CustomEvent<{ value: string; name: string }>
+ *   - change: CustomEvent<{ value: string; name: string }>
+ */
+import { Component } from '../core/component.js';
+export declare class NcAutocomplete extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    private _inputValue;
+    private _dynamicOptions;
+    private _activeIndex;
+    private _open;
+    constructor();
+    private _getOptions;
+    private _filtered;
+    template(): string;
+    onMount(): void;
+    private _bindEvents;
+    private _selectOption;
+    private _refreshDropdown;
+    private _refreshActive;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/components/nc-autocomplete.js

@@ -0,0 +1,275 @@
+/**
+ * NcAutocomplete Component
+ *
+ * Attributes:
+ *   - name: string
+ *   - value: string - current input value
+ *   - placeholder: string
+ *   - options: JSON string array OR comma-separated - static suggestions
+ *   - min-chars: number - chars before showing suggestions (default: 1)
+ *   - max-results: number - max visible items (default: 8)
+ *   - disabled: boolean
+ *   - size: 'sm'|'md'|'lg' (default: 'md')
+ *   - variant: 'default'|'filled' (default: 'default')
+ *
+ * Dynamic options - dispatch 'nc-autocomplete-options' on the element:
+ *   el.dispatchEvent(new CustomEvent('nc-autocomplete-options', { detail: ['a','b'] }))
+ *
+ * Events:
+ *   - input:  CustomEvent<{ value: string; name: string }>
+ *   - select: CustomEvent<{ value: string; name: string }>
+ *   - change: CustomEvent<{ value: string; name: string }>
+ */
+import { Component, defineComponent } from '../core/component.js';
+export class NcAutocomplete extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['name', 'value', 'placeholder', 'options', 'min-chars', 'max-results', 'disabled', 'size', 'variant'];
+    }
+    _inputValue = '';
+    _dynamicOptions = [];
+    _activeIndex = -1;
+    _open = false;
+    constructor() { super(); }
+    _getOptions() {
+        if (this._dynamicOptions.length)
+            return this._dynamicOptions;
+        const raw = this.getAttribute('options') || '';
+        if (!raw)
+            return [];
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return raw.split(',').map(s => s.trim()).filter(Boolean);
+        }
+    }
+    _filtered() {
+        const query = this._inputValue.trim().toLowerCase();
+        const minChars = Number(this.getAttribute('min-chars') ?? 1);
+        const max = Number(this.getAttribute('max-results') ?? 8);
+        if (query.length < minChars)
+            return [];
+        return this._getOptions()
+            .filter(o => o.toLowerCase().includes(query))
+            .slice(0, max);
+    }
+    template() {
+        if (!this._mounted) {
+            this._inputValue = this.getAttribute('value') || '';
+        }
+        const disabled = this.hasAttribute('disabled');
+        const placeholder = this.getAttribute('placeholder') || '';
+        const name = this.getAttribute('name') || '';
+        const results = this._open ? this._filtered() : [];
+        return `
+            <style>
+                :host { display: block; position: relative; width: 100%; font-family: var(--nc-font-family); }
+
+                .input-wrap {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                }
+
+                input {
+                    width: 100%;
+                    box-sizing: border-box;
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-md);
+                    background: var(--nc-bg);
+                    border: var(--nc-input-border);
+                    border-radius: var(--nc-input-radius);
+                    color: var(--nc-text);
+                    font-size: var(--nc-font-size-base);
+                    font-family: var(--nc-font-family);
+                    outline: none;
+                    transition: border-color var(--nc-transition-fast), box-shadow var(--nc-transition-fast);
+                    opacity: ${disabled ? '0.5' : '1'};
+                    cursor: ${disabled ? 'not-allowed' : 'auto'};
+                }
+
+                :host([size="sm"]) input { font-size: var(--nc-font-size-sm); padding: var(--nc-spacing-xs) var(--nc-spacing-sm); }
+                :host([size="lg"]) input { font-size: var(--nc-font-size-lg); padding: var(--nc-spacing-md) var(--nc-spacing-lg); }
+                :host([variant="filled"]) input { background: var(--nc-bg-tertiary); border-color: transparent; }
+
+                input:focus { border-color: var(--nc-input-focus-border); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
+                input::placeholder { color: var(--nc-text-muted); }
+
+                .dropdown {
+                    position: absolute;
+                    top: calc(100% + 4px);
+                    left: 0; right: 0;
+                    background: var(--nc-bg);
+                    border: 1px solid var(--nc-border);
+                    border-radius: var(--nc-radius-md, 8px);
+                    box-shadow: var(--nc-shadow-lg);
+                    overflow: hidden;
+                    z-index: 500;
+                    display: ${results.length ? 'block' : 'none'};
+                }
+
+                .option {
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-md);
+                    cursor: pointer;
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text);
+                    transition: background var(--nc-transition-fast);
+                }
+
+                .option:hover,
+                .option.active { background: var(--nc-bg-secondary); }
+
+                .option mark {
+                    background: none;
+                    color: var(--nc-primary);
+                    font-weight: var(--nc-font-weight-semibold);
+                }
+            </style>
+            <div class="input-wrap">
+                <input
+                    type="text"
+                    name="${name}"
+                    value="${this._inputValue}"
+                    placeholder="${placeholder}"
+                    ${disabled ? 'disabled' : ''}
+                    autocomplete="off"
+                    role="combobox"
+                    aria-expanded="${results.length > 0}"
+                    aria-autocomplete="list"
+                    aria-haspopup="listbox"
+                />
+            </div>
+            <div class="dropdown" role="listbox">
+                ${results.map((opt, i) => {
+            const hl = opt.replace(new RegExp(`(${this._inputValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi'), '<mark>$1</mark>');
+            return `<div class="option${i === this._activeIndex ? ' active' : ''}" role="option" data-value="${opt}" aria-selected="${i === this._activeIndex}">${hl}</div>`;
+        }).join('')}
+            </div>
+        `;
+    }
+    onMount() {
+        this._bindEvents();
+        // Dynamic options API
+        this.addEventListener('nc-autocomplete-options', (e) => {
+            this._dynamicOptions = e.detail || [];
+            if (this._open) {
+                this.render();
+                this._bindEvents();
+            }
+        });
+    }
+    _bindEvents() {
+        const input = this.$('input');
+        const dropdown = this.$('.dropdown');
+        input.addEventListener('input', () => {
+            this._inputValue = input.value;
+            this._activeIndex = -1;
+            this._open = true;
+            this._refreshDropdown();
+            this.dispatchEvent(new CustomEvent('input', {
+                bubbles: true, composed: true,
+                detail: { value: input.value, name: this.getAttribute('name') || '' }
+            }));
+        });
+        input.addEventListener('focus', () => {
+            this._open = true;
+            this._refreshDropdown();
+        });
+        input.addEventListener('blur', () => {
+            // Delay so click on option fires first
+            setTimeout(() => {
+                this._open = false;
+                this._refreshDropdown();
+            }, 150);
+        });
+        input.addEventListener('keydown', (e) => {
+            const results = this._filtered();
+            if (!results.length)
+                return;
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this._activeIndex = Math.min(this._activeIndex + 1, results.length - 1);
+                this._refreshActive();
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this._activeIndex = Math.max(this._activeIndex - 1, -1);
+                this._refreshActive();
+            }
+            else if (e.key === 'Enter' && this._activeIndex >= 0) {
+                e.preventDefault();
+                this._selectOption(results[this._activeIndex]);
+            }
+            else if (e.key === 'Escape') {
+                this._open = false;
+                this._refreshDropdown();
+            }
+        });
+        dropdown.addEventListener('mousedown', (e) => {
+            const opt = e.target.closest('[data-value]');
+            if (opt) {
+                e.preventDefault();
+                this._selectOption(opt.dataset.value);
+            }
+        });
+    }
+    _selectOption(value) {
+        this._inputValue = value;
+        this._open = false;
+        this._activeIndex = -1;
+        this.setAttribute('value', value);
+        const input = this.$('input');
+        if (input)
+            input.value = value;
+        this._refreshDropdown();
+        this.dispatchEvent(new CustomEvent('select', {
+            bubbles: true, composed: true,
+            detail: { value, name: this.getAttribute('name') || '' }
+        }));
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true, composed: true,
+            detail: { value, name: this.getAttribute('name') || '' }
+        }));
+    }
+    _refreshDropdown() {
+        const dropdown = this.$('.dropdown');
+        if (!dropdown)
+            return;
+        const results = this._open ? this._filtered() : [];
+        if (!results.length) {
+            dropdown.style.display = 'none';
+            return;
+        }
+        dropdown.style.display = 'block';
+        dropdown.innerHTML = results.map((opt, i) => {
+            const escaped = this._inputValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const hl = escaped ? opt.replace(new RegExp(`(${escaped})`, 'gi'), '<mark>$1</mark>') : opt;
+            return `<div class="option${i === this._activeIndex ? ' active' : ''}" role="option" data-value="${opt}" aria-selected="${i === this._activeIndex}">${hl}</div>`;
+        }).join('');
+        const input = this.$('input');
+        if (input)
+            input.setAttribute('aria-expanded', String(results.length > 0));
+    }
+    _refreshActive() {
+        this.$$('.option').forEach((opt, i) => {
+            opt.classList.toggle('active', i === this._activeIndex);
+            opt.setAttribute('aria-selected', String(i === this._activeIndex));
+        });
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'value' && this._mounted) {
+            this._inputValue = newValue || '';
+            const input = this.$('input');
+            if (input)
+                input.value = this._inputValue;
+            return;
+        }
+        if (this._mounted) {
+            this.render();
+            this._bindEvents();
+        }
+    }
+}
+defineComponent('nc-autocomplete', NcAutocomplete);

package/dist/components/nc-avatar-group.d.ts

@@ -0,0 +1,7 @@
+import { Component } from '../core/component.js';
+export declare class NcAvatarGroup extends Component {
+    static useShadowDOM: boolean;
+    template(): string;
+    onMount(): void;
+    private updateGroup;
+}

package/dist/components/nc-avatar-group.js

@@ -0,0 +1,85 @@
+import { Component, defineComponent } from '../core/component.js';
+export class NcAvatarGroup extends Component {
+    static useShadowDOM = true;
+    template() {
+        const overlap = parseInt(this.getAttribute('overlap') ?? '10', 10);
+        const size = this.getAttribute('size') ?? 'md';
+        const sizePixels = {
+            xs: 24,
+            sm: 32,
+            md: 40,
+            lg: 48,
+            xl: 56
+        };
+        const resolvedSize = sizePixels[size] ?? 40;
+        const fontSize = Math.round(resolvedSize * 0.32);
+        const borderWidth = Math.max(2, Math.round(resolvedSize * 0.06));
+        return `
+            <style>
+                :host { display: inline-block; }
+                .group {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                }
+                ::slotted(*) {
+                    margin-left: -${overlap}px;
+                    box-shadow: 0 0 0 ${borderWidth}px var(--nc-bg, #fff);
+                    border-radius: 50%;
+                    flex-shrink: 0;
+                    position: relative;
+                    transition: transform var(--nc-transition-fast, 160ms ease), z-index 0s;
+                    z-index: 0;
+                }
+                ::slotted(*:first-child) { margin-left: 0; }
+                ::slotted(*:hover) { transform: translateY(-3px); z-index: 10; }
+                .overflow {
+                    margin-left: -${overlap}px;
+                    width: ${resolvedSize}px;
+                    height: ${resolvedSize}px;
+                    border-radius: 50%;
+                    background: var(--nc-bg-tertiary, #e5e7eb);
+                    color: var(--nc-text-secondary, #4b5563);
+                    font-family: var(--nc-font-family);
+                    font-size: ${fontSize}px;
+                    font-weight: var(--nc-font-weight-semibold, 600);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    box-shadow: 0 0 0 ${borderWidth}px var(--nc-bg, #fff);
+                    flex-shrink: 0;
+                    user-select: none;
+                }
+            </style>
+            <div class="group" role="group" aria-label="Avatar group">
+                <slot></slot>
+                <div class="overflow" id="overflow" style="display:none" aria-hidden="true"></div>
+            </div>
+        `;
+    }
+    onMount() {
+        this.updateGroup();
+    }
+    updateGroup() {
+        const slot = this.shadowRoot?.querySelector('slot');
+        const overflow = this.shadowRoot?.querySelector('#overflow');
+        if (!slot || !overflow)
+            return;
+        const max = parseInt(this.getAttribute('max') ?? '4', 10);
+        const total = parseInt(this.getAttribute('total') ?? '0', 10);
+        const items = slot.assignedElements({ flatten: true });
+        const count = total > 0 ? total : items.length;
+        items.forEach((element, index) => {
+            element.style.display = index < max ? '' : 'none';
+        });
+        const extra = count - Math.min(max, items.length);
+        if (extra > 0) {
+            overflow.textContent = `+${extra}`;
+            overflow.style.display = 'flex';
+        }
+        else {
+            overflow.style.display = 'none';
+        }
+    }
+}
+defineComponent('nc-avatar-group', NcAvatarGroup);

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

@@ -0,0 +1,9 @@
+import { Component } from '../core/component.js';
+export declare class NcAvatar extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    private imageError;
+    template(): string;
+    onMount(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/components/nc-avatar.js

@@ -0,0 +1,127 @@
+import { Component, defineComponent } from '../core/component.js';
+const SIZE_MAP = {
+    xs: '24px',
+    sm: '32px',
+    md: '40px',
+    lg: '48px',
+    xl: '64px',
+    '2xl': '80px'
+};
+const STATUS_COLORS = {
+    online: '#22c55e',
+    offline: '#94a3b8',
+    away: '#f59e0b',
+    busy: '#ef4444'
+};
+function initials(name) {
+    return name.trim().split(/\s+/).map(word => word[0] ?? '').join('').toUpperCase().slice(0, 2);
+}
+export class NcAvatar extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['src', 'alt', 'size', 'shape', 'variant', 'status', 'status-position'];
+    }
+    imageError = false;
+    template() {
+        const src = this.getAttribute('src') || '';
+        const alt = this.getAttribute('alt') || '';
+        const sizeAttr = this.getAttribute('size') || 'md';
+        const shape = this.getAttribute('shape') || 'circle';
+        const variant = this.getAttribute('variant') || 'neutral';
+        const status = this.getAttribute('status') || '';
+        const statusPosition = this.getAttribute('status-position') || 'bottom-right';
+        const sizeValue = SIZE_MAP[sizeAttr] ?? sizeAttr;
+        const fontSize = `calc(${sizeValue} * 0.38)`;
+        const statusSize = `calc(${sizeValue} * 0.26)`;
+        const borderRadius = shape === 'circle' ? '50%' : shape === 'rounded' ? '25%' : '8px';
+        const letters = initials(alt);
+        const showImage = src && !this.imageError;
+        const [verticalPosition, horizontalPosition] = statusPosition.split('-');
+        const statusDotStyle = [
+            verticalPosition === 'top' ? 'top: 0;' : 'bottom: 0;',
+            horizontalPosition === 'right' ? 'right: 0;' : 'left: 0;'
+        ].join(' ');
+        const variantBackground = {
+            primary: 'var(--nc-primary, #10b981)',
+            secondary: 'var(--nc-secondary, #6366f1)',
+            success: 'var(--nc-success, #10b981)',
+            warning: 'var(--nc-warning, #f59e0b)',
+            danger: 'var(--nc-danger, #ef4444)',
+            neutral: 'var(--nc-bg-tertiary, #e5e7eb)'
+        };
+        return `
+            <style>
+                :host { display: inline-flex; position: relative; flex-shrink: 0; }
+
+                .avatar {
+                    width: ${sizeValue};
+                    height: ${sizeValue};
+                    border-radius: ${borderRadius};
+                    overflow: hidden;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background: ${variantBackground[variant] ?? variantBackground.neutral};
+                    color: ${variant === 'neutral' ? 'var(--nc-text, #111827)' : '#fff'};
+                    font-family: var(--nc-font-family);
+                    font-size: ${fontSize};
+                    font-weight: var(--nc-font-weight-semibold, 600);
+                    user-select: none;
+                    flex-shrink: 0;
+                }
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                    display: ${showImage ? 'block' : 'none'};
+                }
+
+                .initials {
+                    display: ${showImage ? 'none' : 'flex'};
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    line-height: 1;
+                }
+
+                .status-dot {
+                    position: absolute;
+                    ${statusDotStyle}
+                    width: ${statusSize};
+                    height: ${statusSize};
+                    border-radius: 50%;
+                    background: ${STATUS_COLORS[status] ?? STATUS_COLORS.offline};
+                    border: 2px solid var(--nc-bg, #ffffff);
+                    display: ${status ? 'block' : 'none'};
+                }
+            </style>
+            <div class="avatar" title="${alt}" aria-label="${alt}" role="img">
+                ${showImage ? `<img src="${src}" alt="${alt}" />` : ''}
+                <span class="initials">${letters || '?'}</span>
+            </div>
+            ${status ? `<span class="status-dot" aria-label="${status}"></span>` : ''}
+        `;
+    }
+    onMount() {
+        const image = this.$('img');
+        if (image) {
+            image.addEventListener('error', () => {
+                this.imageError = true;
+                this.render();
+            });
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            if (name === 'src')
+                this.imageError = false;
+            if (this._mounted) {
+                this.render();
+                this.onMount();
+            }
+        }
+    }
+}
+defineComponent('nc-avatar', NcAvatar);

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

@@ -0,0 +1,7 @@
+import { Component } from '../core/component.js';
+export declare class NcBadge extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    template(): string;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/components/nc-badge.js

@@ -0,0 +1,63 @@
+import { Component, defineComponent } from '../core/component.js';
+export class NcBadge extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['count', 'max', 'show-zero', 'dot', 'variant', 'position'];
+    }
+    template() {
+        const count = Number(this.getAttribute('count') || 0);
+        const max = Number(this.getAttribute('max') || 99);
+        const showZero = this.hasAttribute('show-zero');
+        const dot = this.hasAttribute('dot');
+        const variant = this.getAttribute('variant') || 'danger';
+        const position = this.getAttribute('position') || 'top-right';
+        const visible = dot || showZero || count > 0;
+        const label = dot ? '' : count > max ? `${max}+` : String(count);
+        const [verticalPosition, horizontalPosition] = position.split('-');
+        return `
+            <style>
+                :host { display: inline-flex; position: relative; vertical-align: middle; }
+
+                .badge {
+                    position: absolute;
+                    ${verticalPosition === 'top' ? 'top: -6px;' : 'bottom: -6px;'}
+                    ${horizontalPosition === 'right' ? 'right: -6px;' : 'left: -6px;'}
+                    z-index: 1;
+                    display: ${visible ? 'inline-flex' : 'none'};
+                    align-items: center;
+                    justify-content: center;
+                    font-family: var(--nc-font-family);
+                    font-size: 0.65rem;
+                    font-weight: var(--nc-font-weight-bold);
+                    line-height: 1;
+                    min-width: ${dot ? '8px' : '18px'};
+                    height: ${dot ? '8px' : '18px'};
+                    padding: ${dot ? '0' : '0 5px'};
+                    border-radius: 999px;
+                    border: 2px solid var(--nc-bg, #ffffff);
+                    white-space: nowrap;
+                    pointer-events: none;
+                    transition: transform var(--nc-transition-fast, 160ms ease);
+                    transform: scale(${visible ? '1' : '0'});
+                }
+
+                .badge--primary   { background: var(--nc-primary, #10b981); color: #fff; }
+                .badge--secondary { background: var(--nc-secondary, #6366f1); color: #fff; }
+                .badge--danger    { background: var(--nc-danger,  #ef4444); color: #fff; }
+                .badge--warning   { background: var(--nc-warning, #f59e0b); color: #fff; }
+                .badge--success   { background: var(--nc-success, #10b981); color: #fff; }
+                .badge--info      { background: var(--nc-info,    #3b82f6); color: #fff; }
+                .badge--neutral   { background: var(--nc-text-muted, #6b7280); color: #fff; }
+
+                ::slotted(*) { display: inline-flex; }
+            </style>
+            <slot></slot>
+            <span class="badge badge--${variant}" aria-label="${dot ? 'indicator' : `${label} notifications`}">${label}</span>
+        `;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted)
+            this.render();
+    }
+}
+defineComponent('nc-badge', NcBadge);

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

@@ -0,0 +1,53 @@
+/**
+ * NcBottomNav Component - mobile bottom navigation bar
+ *
+ * Container for nc-nav-bottom-item children. Handles active state management.
+ * Designed for mobile viewports but works on all sizes.
+ *
+ * Attributes:
+ *   value      - currently active tab value
+ *   variant    - 'default'|'labeled'|'icon-only' (default: 'labeled')
+ *   elevated   - boolean - add drop shadow / elevated appearance
+ *   bordered   - boolean - top border (default: true)
+ *
+ * Slots:
+ *   (default) - nc-bottom-nav-item elements
+ *
+ * Events:
+ *   change - CustomEvent<{ value: string }> - tab changed
+ *
+ * Usage:
+ *   <nc-bottom-nav value="home">
+ *     <nc-bottom-nav-item value="home"   icon="home"   label="Home"></nc-bottom-nav-item>
+ *     <nc-bottom-nav-item value="search" icon="search" label="Search"></nc-bottom-nav-item>
+ *     <nc-bottom-nav-item value="inbox"  icon="inbox"  label="Inbox" badge="3"></nc-bottom-nav-item>
+ *     <nc-bottom-nav-item value="me"     icon="users"  label="Me"></nc-bottom-nav-item>
+ *   </nc-bottom-nav>
+ */
+/**
+ * NcBottomNavItem Component - individual tab in a bottom nav bar
+ *
+ * Attributes:
+ *   value    - unique identifier for this tab
+ *   label    - tab label text
+ *   icon     - icon name (same set as nc-nav-item)
+ *   badge    - numeric badge count
+ *   disabled - boolean
+ *   active   - boolean (managed by parent nc-bottom-nav)
+ */
+import { Component } from '../core/component.js';
+export declare class NcBottomNavItem extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    template(): string;
+    onMount(): void;
+    attributeChangedCallback(n: string, o: string, v: string): void;
+}
+export declare class NcBottomNav extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    template(): string;
+    onMount(): void;
+    private _setActive;
+    attributeChangedCallback(n: string, o: string, v: string): void;
+}