nativecorejs 0.1.0

package/dist/components/nc-input.js

@@ -0,0 +1,302 @@
+import { Component, defineComponent } from '../core/component.js';
+const EYE_OPEN = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M1 10s3-6 9-6 9 6 9 6-3 6-9 6-9-6-9-6z"/><circle cx="10" cy="10" r="2.5"/></svg>`;
+const EYE_CLOSED = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M2 2l16 16M7.5 7.5A3 3 0 0012.5 12.5M4.2 4.2C2.6 5.5 1 8 1 10s3 6 9 6c2 0 3.8-.5 5.3-1.3M8 4.3A8.7 8.7 0 0110 4c6 0 9 6 9 6s-.9 1.8-2.5 3.2"/></svg>`;
+const CLEAR_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="12" height="12"><path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+const SEARCH_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14"><circle cx="6.5" cy="6.5" r="4"/><path d="M11 11l3 3" stroke-linecap="round"/></svg>`;
+export class NcInput extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return [
+            'name', 'value', 'type', 'placeholder', 'disabled', 'readonly', 'required',
+            'maxlength', 'minlength', 'pattern', 'autocomplete',
+            'size', 'variant', 'icon-left', 'icon-right',
+            'clearable', 'show-password-toggle', 'error', 'hint'
+        ];
+    }
+    currentValue = '';
+    showPassword = false;
+    validationError = '';
+    handleInputEvent = (event) => {
+        const input = event.target;
+        if (!input || input.tagName !== 'INPUT')
+            return;
+        this.currentValue = input.value;
+        if (this.validationError) {
+            this.validationError = '';
+            this.render();
+        }
+        else {
+            this.syncClearButton();
+        }
+        this.dispatchEvent(new CustomEvent('input', {
+            bubbles: true,
+            composed: true,
+            detail: { value: input.value, name: this.getAttribute('name') || '' }
+        }));
+    };
+    handleChangeEvent = (event) => {
+        const input = event.target;
+        if (!input || input.tagName !== 'INPUT')
+            return;
+        this.currentValue = input.value;
+        this.validationError = '';
+        this.render();
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: { value: input.value, name: this.getAttribute('name') || '' }
+        }));
+    };
+    handleClickEvent = (event) => {
+        const button = event.target.closest('[data-action]');
+        if (!button)
+            return;
+        if (button.dataset.action === 'toggle-password') {
+            this.showPassword = !this.showPassword;
+            this.render();
+            this.$('input')?.focus();
+        }
+        if (button.dataset.action === 'clear') {
+            const input = this.$('input');
+            this.currentValue = '';
+            this.validationError = '';
+            if (input)
+                input.value = '';
+            this.render();
+            this.$('input')?.focus();
+            this.dispatchEvent(new CustomEvent('clear', {
+                bubbles: true,
+                composed: true,
+                detail: { name: this.getAttribute('name') || '' }
+            }));
+            this.dispatchEvent(new CustomEvent('input', {
+                bubbles: true,
+                composed: true,
+                detail: { value: '', name: this.getAttribute('name') || '' }
+            }));
+        }
+    };
+    get value() {
+        return this.$('input')?.value ?? this.currentValue;
+    }
+    set value(nextValue) {
+        this.currentValue = nextValue ?? '';
+        this.validationError = '';
+        if (this._mounted) {
+            this.render();
+        }
+    }
+    template() {
+        if (!this._mounted) {
+            this.currentValue = this.getAttribute('value') || '';
+        }
+        const type = this.getAttribute('type') || 'text';
+        const name = this.getAttribute('name') || '';
+        const placeholder = this.getAttribute('placeholder') || '';
+        const disabled = this.hasAttribute('disabled');
+        const readonly = this.hasAttribute('readonly');
+        const required = this.hasAttribute('required');
+        const maxlength = this.getAttribute('maxlength');
+        const minlength = this.getAttribute('minlength');
+        const pattern = this.getAttribute('pattern');
+        const autocomplete = this.getAttribute('autocomplete') || 'off';
+        const iconLeft = this.getAttribute('icon-left') || (type === 'search' ? SEARCH_ICON : '');
+        const iconRight = this.getAttribute('icon-right') || '';
+        const clearable = this.hasAttribute('clearable');
+        const showToggle = this.hasAttribute('show-password-toggle') && type === 'password';
+        const error = this.getAttribute('error') || this.validationError;
+        const hint = this.getAttribute('hint') || '';
+        const hasLeft = !!iconLeft;
+        const hasRight = !!(iconRight || (clearable && this.currentValue) || showToggle);
+        const inputType = type === 'password' && this.showPassword ? 'text' : type;
+        return `
+            <style>
+                :host { display: block; width: 100%; font-family: var(--nc-font-family); }
+                .wrap { position: relative; display: flex; align-items: center; }
+                input {
+                    width: 100%;
+                    box-sizing: border-box;
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-md);
+                    padding-left: ${hasLeft ? '2.4rem' : 'var(--nc-spacing-md)'};
+                    padding-right: ${hasRight ? '2.4rem' : 'var(--nc-spacing-md)'};
+                    background: var(--nc-bg, #ffffff);
+                    border: var(--nc-input-border, 1px solid #d1d5db);
+                    border-radius: var(--nc-input-radius, 0.5rem);
+                    color: var(--nc-text, #111827);
+                    font-size: var(--nc-font-size-base, 1rem);
+                    font-family: var(--nc-font-family);
+                    outline: none;
+                    transition: border-color var(--nc-transition-fast, 160ms ease), box-shadow var(--nc-transition-fast, 160ms ease);
+                    opacity: ${disabled ? '0.5' : '1'};
+                    cursor: ${disabled ? 'not-allowed' : 'text'};
+                }
+                :host([size="sm"]) input { font-size: var(--nc-font-size-sm, 0.875rem); padding-top: var(--nc-spacing-xs, 0.25rem); padding-bottom: var(--nc-spacing-xs, 0.25rem); }
+                :host([size="lg"]) input { font-size: var(--nc-font-size-lg, 1.125rem); padding-top: var(--nc-spacing-md, 1rem); padding-bottom: var(--nc-spacing-md, 1rem); }
+                :host([variant="filled"]) input { background: var(--nc-bg-tertiary, #f3f4f6); border-color: transparent; }
+                :host([variant="filled"]) input:focus { background: var(--nc-bg, #ffffff); }
+                input:focus { border-color: var(--nc-input-focus-border, #10b981); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
+                :host([error]) input, input.has-error { border-color: var(--nc-danger, #ef4444) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important; }
+                input::placeholder { color: var(--nc-text-muted, #6b7280); }
+                input[type="search"]::-webkit-search-cancel-button { display: none; }
+                .icon {
+                    position: absolute;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: var(--nc-text-muted, #6b7280);
+                    pointer-events: none;
+                    width: 2.2rem;
+                }
+                .icon--left { left: 0; }
+                .icon--right { right: 0; pointer-events: auto; }
+                .action-btn {
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 4px;
+                    color: var(--nc-text-muted, #6b7280);
+                    display: flex;
+                    align-items: center;
+                    transition: color var(--nc-transition-fast, 160ms ease);
+                    border-radius: var(--nc-radius-sm, 4px);
+                }
+                .action-btn:hover { color: var(--nc-text, #111827); }
+                .subtext {
+                    font-size: var(--nc-font-size-xs, 0.75rem);
+                    margin-top: 4px;
+                    display: block;
+                }
+                .subtext--hint { color: var(--nc-text-muted, #6b7280); }
+                .subtext--error { color: var(--nc-danger, #ef4444); }
+            </style>
+
+            <div class="wrap">
+                ${hasLeft ? `<span class="icon icon--left">${iconLeft}</span>` : ''}
+                <input
+                    type="${inputType}"
+                    name="${name}"
+                    value="${this.currentValue}"
+                    placeholder="${placeholder}"
+                    autocomplete="${autocomplete}"
+                    ${disabled ? 'disabled' : ''}
+                    ${readonly ? 'readonly' : ''}
+                    ${required ? 'required' : ''}
+                    ${maxlength ? `maxlength="${maxlength}"` : ''}
+                    ${minlength ? `minlength="${minlength}"` : ''}
+                    ${pattern ? `pattern="${pattern}"` : ''}
+                    ${error ? 'class="has-error"' : ''}
+                    aria-invalid="${!!error}"
+                    aria-describedby="${error ? 'subtext' : hint ? 'subtext' : ''}"
+                />
+                ${hasRight ? `
+                <span class="icon icon--right">
+                    ${showToggle ? `
+                    <button class="action-btn" type="button" data-action="toggle-password" aria-label="${this.showPassword ? 'Hide password' : 'Show password'}">
+                        ${this.showPassword ? EYE_CLOSED : EYE_OPEN}
+                    </button>` : ''}
+                    ${clearable && this.currentValue && !showToggle ? `
+                    <button class="action-btn" type="button" data-action="clear" aria-label="Clear">
+                        ${CLEAR_ICON}
+                    </button>` : ''}
+                    ${iconRight && !clearable && !showToggle ? iconRight : ''}
+                </span>` : ''}
+            </div>
+
+            ${error ? `<span class="subtext subtext--error" id="subtext" role="alert">${error}</span>` : ''}
+            ${hint && !error ? `<span class="subtext subtext--hint" id="subtext">${hint}</span>` : ''}
+        `;
+    }
+    onMount() {
+        this.shadowRoot?.addEventListener('input', this.handleInputEvent);
+        this.shadowRoot?.addEventListener('change', this.handleChangeEvent);
+        this.shadowRoot?.addEventListener('click', this.handleClickEvent);
+    }
+    onUnmount() {
+        this.shadowRoot?.removeEventListener('input', this.handleInputEvent);
+        this.shadowRoot?.removeEventListener('change', this.handleChangeEvent);
+        this.shadowRoot?.removeEventListener('click', this.handleClickEvent);
+    }
+    syncClearButton() {
+        const clearButton = this.$('[data-action="clear"]');
+        if (!clearButton)
+            return;
+        clearButton.style.display = this.currentValue ? 'flex' : 'none';
+    }
+    getInput() {
+        return this.$('input');
+    }
+    buildValidationMessage(input) {
+        const { validity } = input;
+        if (validity.valueMissing)
+            return 'This field is required.';
+        if (validity.typeMismatch) {
+            if (input.type === 'email')
+                return 'Enter a valid email address.';
+            if (input.type === 'url')
+                return 'Enter a valid URL.';
+            return 'Enter a valid value.';
+        }
+        if (validity.patternMismatch)
+            return 'Enter a value in the expected format.';
+        if (validity.tooShort) {
+            const minLength = input.getAttribute('minlength');
+            return minLength ? `Enter at least ${minLength} characters.` : 'The value is too short.';
+        }
+        if (validity.tooLong) {
+            const maxLength = input.getAttribute('maxlength');
+            return maxLength ? `Enter no more than ${maxLength} characters.` : 'The value is too long.';
+        }
+        if (validity.badInput)
+            return 'Enter a valid value.';
+        return '';
+    }
+    getValidationMessage() {
+        const explicitError = this.getAttribute('error');
+        if (explicitError)
+            return explicitError;
+        const input = this.getInput();
+        if (!input)
+            return this.validationError;
+        return this.buildValidationMessage(input);
+    }
+    checkValidity() {
+        const input = this.getInput();
+        if (!input)
+            return true;
+        return input.checkValidity();
+    }
+    validate() {
+        const isValid = this.checkValidity();
+        this.validationError = isValid ? '' : this.getValidationMessage();
+        if (this._mounted)
+            this.render();
+        return isValid;
+    }
+    reportValidity() {
+        return this.validate();
+    }
+    clearValidationError() {
+        if (!this.validationError)
+            return;
+        this.validationError = '';
+        if (this._mounted)
+            this.render();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'value' && this._mounted) {
+            this.currentValue = newValue || '';
+            this.validationError = '';
+            const input = this.$('input');
+            if (input)
+                input.value = this.currentValue;
+            this.syncClearButton();
+            return;
+        }
+        if (this._mounted) {
+            this.render();
+        }
+    }
+}
+defineComponent('nc-input', NcInput);

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

@@ -0,0 +1,5 @@
+import { Component } from '../core/component.js';
+export declare class NcKbd extends Component {
+    static useShadowDOM: boolean;
+    template(): string;
+}

package/dist/components/nc-kbd.js

@@ -0,0 +1,34 @@
+import { Component, defineComponent } from '../core/component.js';
+export class NcKbd extends Component {
+    static useShadowDOM = true;
+    template() {
+        const size = this.getAttribute('size') || 'md';
+        const padding = size === 'sm' ? '1px 5px' : size === 'lg' ? '4px 12px' : '2px 8px';
+        const fontSize = size === 'sm' ? '11px' : size === 'lg' ? '15px' : '12px';
+        return `
+            <style>
+                :host { display: inline-block; }
+                kbd {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-family: var(--nc-font-family-mono, 'SFMono-Regular', Consolas, monospace);
+                    font-size: ${fontSize};
+                    font-weight: var(--nc-font-weight-medium, 500);
+                    line-height: 1;
+                    color: var(--nc-text, #111827);
+                    background: var(--nc-bg-secondary, #f8fafc);
+                    border: 1px solid var(--nc-border, #e5e7eb);
+                    border-bottom-width: 3px;
+                    border-radius: var(--nc-radius-sm, 0.375rem);
+                    padding: ${padding};
+                    white-space: nowrap;
+                    user-select: none;
+                    box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
+                }
+            </style>
+            <kbd><slot></slot></kbd>
+        `;
+    }
+}
+defineComponent('nc-kbd', NcKbd);

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

@@ -0,0 +1,43 @@
+/**
+ * NativeCore Menu Item Component (nc-menu-item)
+ *
+ * A single selectable row inside an nc-menu. Renders an optional icon,
+ * a label via the default slot, and an optional end slot for badges/shortcuts.
+ *
+ * Attributes:
+ *   icon      - URL to a leading icon image (optional)
+ *   alt       - Alt text for the icon (accessibility)
+ *   disabled  - Boolean. Prevents selection and dims the row.
+ *   active    - Boolean. Marks the row as currently selected. Set by nc-menu
+ *               or manually for controlled menus.
+ *   danger    - Boolean. Applies destructive/danger coloring.
+ *
+ * Slots:
+ *   default   - Item label / content.
+ *   end       - Trailing content (badge, keyboard shortcut, chevron, etc.)
+ *
+ * Events emitted:
+ *   nc-select - {} - fires when the item is clicked or activated via keyboard.
+ *               Bubbles + composed so nc-menu can delegate.
+ *
+ * Usage:
+ *   <nc-menu-item icon="/icons/edit.svg" alt="Edit">Edit</nc-menu-item>
+ *   <nc-menu-item danger>Delete</nc-menu-item>
+ *   <nc-menu-item disabled>Unavailable</nc-menu-item>
+ *   <nc-menu-item active>Selected</nc-menu-item>
+ *   <nc-menu-item>
+ *     Save
+ *     <span slot="end">Ctrl+S</span>
+ *   </nc-menu-item>
+ */
+import { Component } from '../core/component.js';
+export declare class NcMenuItem extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    private _onClick;
+    private _onKeydown;
+    template(): string;
+    onMount(): void;
+    onUnmount(): void;
+    attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+}

package/dist/components/nc-menu-item.js

@@ -0,0 +1,182 @@
+/**
+ * NativeCore Menu Item Component (nc-menu-item)
+ *
+ * A single selectable row inside an nc-menu. Renders an optional icon,
+ * a label via the default slot, and an optional end slot for badges/shortcuts.
+ *
+ * Attributes:
+ *   icon      - URL to a leading icon image (optional)
+ *   alt       - Alt text for the icon (accessibility)
+ *   disabled  - Boolean. Prevents selection and dims the row.
+ *   active    - Boolean. Marks the row as currently selected. Set by nc-menu
+ *               or manually for controlled menus.
+ *   danger    - Boolean. Applies destructive/danger coloring.
+ *
+ * Slots:
+ *   default   - Item label / content.
+ *   end       - Trailing content (badge, keyboard shortcut, chevron, etc.)
+ *
+ * Events emitted:
+ *   nc-select - {} - fires when the item is clicked or activated via keyboard.
+ *               Bubbles + composed so nc-menu can delegate.
+ *
+ * Usage:
+ *   <nc-menu-item icon="/icons/edit.svg" alt="Edit">Edit</nc-menu-item>
+ *   <nc-menu-item danger>Delete</nc-menu-item>
+ *   <nc-menu-item disabled>Unavailable</nc-menu-item>
+ *   <nc-menu-item active>Selected</nc-menu-item>
+ *   <nc-menu-item>
+ *     Save
+ *     <span slot="end">Ctrl+S</span>
+ *   </nc-menu-item>
+ */
+import { Component, defineComponent } from '../core/component.js';
+import { html } from '../utils/templates.js';
+export class NcMenuItem extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['icon', 'alt', 'disabled', 'active', 'danger'];
+    }
+    _onClick = null;
+    _onKeydown = null;
+    template() {
+        const icon = this.getAttribute('icon');
+        const alt = this.getAttribute('alt') || '';
+        const disabled = this.hasAttribute('disabled');
+        const iconHTML = icon
+            ? `<img class="item__icon" src="${icon}" alt="${alt}" />`
+            : '';
+        return html `
+            <style>
+                :host {
+                    display: block;
+                }
+
+                .item {
+                    display: flex;
+                    align-items: center;
+                    gap: var(--nc-spacing-sm);
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-md);
+                    border-radius: var(--nc-radius-md);
+                    cursor: pointer;
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-sm);
+                    font-weight: var(--nc-font-weight-medium);
+                    color: var(--nc-text);
+                    background: transparent;
+                    border: none;
+                    width: 100%;
+                    text-align: left;
+                    box-sizing: border-box;
+                    transition:
+                        background var(--nc-transition-fast),
+                        color var(--nc-transition-fast);
+                    user-select: none;
+                    outline: none;
+                }
+
+                .item:hover {
+                    background: var(--nc-bg-tertiary);
+                    color: var(--nc-text);
+                }
+
+                .item:focus-visible {
+                    outline: 2px solid var(--nc-primary);
+                    outline-offset: -2px;
+                }
+
+                /* Active / selected */
+                :host([active]) .item {
+                    background: rgba(16, 185, 129, 0.1);
+                    color: var(--nc-primary);
+                    font-weight: var(--nc-font-weight-semibold);
+                }
+
+                :host([active]) .item:hover {
+                    background: rgba(16, 185, 129, 0.15);
+                }
+
+                /* Danger */
+                :host([danger]) .item {
+                    color: var(--nc-danger);
+                }
+
+                :host([danger]) .item:hover {
+                    background: rgba(239, 68, 68, 0.08);
+                    color: var(--nc-danger);
+                }
+
+                /* Disabled */
+                :host([disabled]) .item {
+                    opacity: 0.4;
+                    cursor: not-allowed;
+                    pointer-events: none;
+                }
+
+                .item__icon {
+                    width: 16px;
+                    height: 16px;
+                    object-fit: contain;
+                    flex-shrink: 0;
+                    opacity: 0.75;
+                }
+
+                :host([active]) .item__icon,
+                :host([danger]) .item__icon {
+                    opacity: 1;
+                }
+
+                .item__label {
+                    flex: 1;
+                    min-width: 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+
+                .item__end {
+                    flex-shrink: 0;
+                    font-size: var(--nc-font-size-xs, 0.7rem);
+                    color: var(--nc-text-muted, var(--nc-text-secondary));
+                    opacity: 0.65;
+                }
+            </style>
+            <div class="item" role="menuitem" tabindex="${disabled ? -1 : 0}" aria-disabled="${disabled}">
+                ${iconHTML}
+                <span class="item__label"><slot></slot></span>
+                <span class="item__end"><slot name="end"></slot></span>
+            </div>
+        `;
+    }
+    onMount() {
+        this._onClick = (e) => {
+            if (this.hasAttribute('disabled')) {
+                e.stopPropagation();
+                return;
+            }
+            this.emitEvent('nc-select', {}, { bubbles: true, composed: true });
+        };
+        this._onKeydown = (e) => {
+            const ke = e;
+            if (ke.key === 'Enter' || ke.key === ' ') {
+                e.preventDefault();
+                this._onClick(e);
+            }
+        };
+        this.shadowRoot.addEventListener('click', this._onClick);
+        this.shadowRoot.addEventListener('keydown', this._onKeydown);
+    }
+    onUnmount() {
+        if (this._onClick)
+            this.shadowRoot?.removeEventListener('click', this._onClick);
+        if (this._onKeydown)
+            this.shadowRoot?.removeEventListener('keydown', this._onKeydown);
+        this._onClick = null;
+        this._onKeydown = null;
+    }
+    attributeChangedCallback(_name, oldValue, newValue) {
+        if (this._mounted && oldValue !== newValue)
+            this.render();
+    }
+}
+defineComponent('nc-menu-item', NcMenuItem);

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

@@ -0,0 +1,76 @@
+/**
+ * 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 } from '../core/component.js';
+export declare class NcMenu extends Component {
+    static useShadowDOM: boolean;
+    static attributeOptions: {
+        variant: string[];
+    };
+    static get observedAttributes(): string[];
+    private _onSlotChange;
+    private _onSelect;
+    private _onNavigate;
+    private _onKeydown;
+    private _onSearchInput;
+    template(): string;
+    onMount(): void;
+    onUnmount(): void;
+    attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+    private _getEnabledItems;
+    private _focusItem;
+    /** Moves `active` to `target`, removes it from all siblings. */
+    private _setActive;
+    /**
+     * For nc-a items with auto-active: set active on the item whose href
+     * matches the current pathname. Handles exact and prefix matches.
+     */
+    private _syncActiveFromPath;
+    private _attachSearch;
+    private _filterItems;
+}