nativecorejs 0.1.0

package/dist/components/nc-scroll-top.js

@@ -0,0 +1,103 @@
+/**
+ * NcScrollTop Component - floating "back to top" button
+ *
+ * Appends itself to document.body so it always sits over all content.
+ * Becomes visible after the user scrolls past `threshold` px.
+ *
+ * Attributes:
+ *   threshold  - scroll distance in px before appearing (default: 300)
+ *   position   - 'bottom-right'(default)|'bottom-left'|'bottom-center'
+ *   smooth     - boolean - use smooth scrolling (default: true)
+ *   label      - accessible aria-label (default: 'Back to top')
+ *   offset     - distance from screen edge in px (default: 24)
+ *   target     - optional CSS selector for the scroll container (default: window)
+ *
+ * Usage:
+ *   <nc-scroll-top></nc-scroll-top>
+ */
+import { Component, defineComponent } from '../core/component.js';
+import { addPassiveListener } from '../core/gpu-animation.js';
+import { dom } from '../utils/dom.js';
+export class NcScrollTop extends Component {
+    static useShadowDOM = true;
+    _visible = false;
+    _removeScroll = null;
+    _scrollTarget = window;
+    template() {
+        const pos = this.getAttribute('position') ?? 'bottom-right';
+        const offset = parseInt(this.getAttribute('offset') ?? '24', 10);
+        const label = this.getAttribute('label') ?? 'Back to top';
+        const v = this._visible;
+        const posStyle = pos === 'bottom-left' ? `left:${offset}px;right:auto;` :
+            pos === 'bottom-center' ? `left:50%;transform:translateX(-50%);` :
+                `right:${offset}px;left:auto;`;
+        return `
+            <style>
+                :host { display: contents; }
+                button {
+                    position: fixed;
+                    bottom: ${offset}px;
+                    ${posStyle}
+                    z-index: 900;
+                    width: 44px;
+                    height: 44px;
+                    border-radius: 50%;
+                    background: var(--nc-primary);
+                    color: var(--nc-white);
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    box-shadow: var(--nc-shadow-md);
+                    opacity: ${v ? '1' : '0'};
+                    visibility: ${v ? 'visible' : 'hidden'};
+                    transform: ${v ? 'translateY(0) scale(1)' : 'translateY(12px) scale(0.9)'};
+                    pointer-events: ${v ? 'auto' : 'none'};
+                    transition:
+                        opacity var(--nc-transition-base),
+                        transform var(--nc-transition-base);
+                    outline: none;
+                }
+                button:hover  { opacity: 0.85; }
+                button:active { transform: scale(0.94); }
+                button:focus-visible { outline: 2px solid var(--nc-primary); outline-offset: 3px; }
+            </style>
+            <button type="button" aria-label="${label}" tabindex="${v ? '0' : '-1'}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                     fill="none" stroke="currentColor" stroke-width="2.5"
+                     stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="18 15 12 9 6 15"/>
+                </svg>
+            </button>
+        `;
+    }
+    onMount() {
+        const threshold = parseInt(this.getAttribute('threshold') ?? '300', 10);
+        const targetSelector = this.getAttribute('target');
+        this._scrollTarget = targetSelector
+            ? dom.query(targetSelector) ?? window
+            : window;
+        const updateVisibility = () => {
+            const currentScroll = this._scrollTarget instanceof Window
+                ? this._scrollTarget.scrollY
+                : this._scrollTarget.scrollTop;
+            const shouldShow = currentScroll > threshold;
+            if (shouldShow !== this._visible) {
+                this._visible = shouldShow;
+                this.render();
+            }
+        };
+        this._removeScroll = addPassiveListener(this._scrollTarget, 'scroll', updateVisibility);
+        updateVisibility();
+        this.shadowRoot.addEventListener('click', () => this._scrollTop());
+    }
+    _scrollTop() {
+        const smooth = this.getAttribute('smooth') !== 'false';
+        this._scrollTarget.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
+    }
+    onUnmount() {
+        this._removeScroll?.();
+    }
+}
+defineComponent('nc-scroll-top', NcScrollTop);

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

@@ -0,0 +1,51 @@
+/**
+ * NcSelect Component
+ *
+ * NativeCore Framework Core Component
+ *
+ * Options are provided as a JSON array via the `options` attribute or by
+ * populating child `<option>` elements before the component mounts.
+ *
+ * Attributes:
+ *   - options: JSON string - array of { value, label, disabled? }
+ *   - value: string - currently selected value
+ *   - placeholder: string - shown when no value selected (default: 'Select...')
+ *   - name: string - form field name
+ *   - disabled: boolean - disabled state
+ *   - size: 'sm' | 'md' | 'lg' (default: 'md')
+ *   - variant: 'default' | 'filled' (default: 'default')
+ *   - searchable: boolean - adds a live filter input inside the dropdown
+ *
+ * Events:
+ *   - change: CustomEvent<{ value: string; label: string; name: string }>
+ *
+ * Usage:
+ *   <nc-select
+ *     name="country"
+ *     placeholder="Pick a country"
+ *     options='[{"value":"us","label":"United States"},{"value":"ca","label":"Canada"}]'>
+ *   </nc-select>
+ */
+import { Component } from '../core/component.js';
+export declare class NcSelect extends Component {
+    static useShadowDOM: boolean;
+    static attributeOptions: {
+        variant: string[];
+        size: string[];
+    };
+    static get observedAttributes(): string[];
+    private _open;
+    private _filterText;
+    constructor();
+    private _getOptions;
+    private _getSelectedLabel;
+    template(): string;
+    onMount(): void;
+    private _onOutsideClick;
+    private _setOpen;
+    private _rerenderDropdown;
+    private _select;
+    private _navigateOptions;
+    onUnmount(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/components/nc-select.js

@@ -0,0 +1,425 @@
+/**
+ * NcSelect Component
+ *
+ * NativeCore Framework Core Component
+ *
+ * Options are provided as a JSON array via the `options` attribute or by
+ * populating child `<option>` elements before the component mounts.
+ *
+ * Attributes:
+ *   - options: JSON string - array of { value, label, disabled? }
+ *   - value: string - currently selected value
+ *   - placeholder: string - shown when no value selected (default: 'Select...')
+ *   - name: string - form field name
+ *   - disabled: boolean - disabled state
+ *   - size: 'sm' | 'md' | 'lg' (default: 'md')
+ *   - variant: 'default' | 'filled' (default: 'default')
+ *   - searchable: boolean - adds a live filter input inside the dropdown
+ *
+ * Events:
+ *   - change: CustomEvent<{ value: string; label: string; name: string }>
+ *
+ * Usage:
+ *   <nc-select
+ *     name="country"
+ *     placeholder="Pick a country"
+ *     options='[{"value":"us","label":"United States"},{"value":"ca","label":"Canada"}]'>
+ *   </nc-select>
+ */
+import { Component, defineComponent } from '../core/component.js';
+export class NcSelect extends Component {
+    static useShadowDOM = true;
+    static attributeOptions = {
+        variant: ['default', 'filled'],
+        size: ['sm', 'md', 'lg']
+    };
+    static get observedAttributes() {
+        return ['options', 'value', 'placeholder', 'name', 'disabled', 'size', 'variant', 'searchable'];
+    }
+    _open = false;
+    _filterText = '';
+    constructor() {
+        super();
+    }
+    _getOptions() {
+        try {
+            const raw = this.getAttribute('options');
+            if (raw)
+                return JSON.parse(raw);
+        }
+        catch {
+            // fall through
+        }
+        return [];
+    }
+    _getSelectedLabel() {
+        const value = this.getAttribute('value') || '';
+        if (!value)
+            return '';
+        const opt = this._getOptions().find(o => o.value === value);
+        return opt?.label ?? value;
+    }
+    template() {
+        const value = this.getAttribute('value') || '';
+        const placeholder = this.getAttribute('placeholder') || 'Select...';
+        const disabled = this.hasAttribute('disabled');
+        const searchable = this.hasAttribute('searchable');
+        const selectedLabel = this._getSelectedLabel() || placeholder;
+        const hasValue = !!value;
+        const options = this._getOptions();
+        const filtered = this._filterText
+            ? options.filter(o => o.label.toLowerCase().includes(this._filterText.toLowerCase()))
+            : options;
+        const optionItems = filtered.map(o => `
+            <div class="option${o.value === value ? ' option--selected' : ''}${o.disabled ? ' option--disabled' : ''}"
+                 data-value="${o.value}"
+                 role="option"
+                 aria-selected="${o.value === value}"
+                 aria-disabled="${o.disabled ? 'true' : 'false'}">
+                ${o.label}
+                ${o.value === value ? `
+                <svg class="option__check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                    <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>` : ''}
+            </div>
+        `).join('');
+        return `
+            <style>
+                :host {
+                    display: inline-block;
+                    position: relative;
+                    font-family: var(--nc-font-family);
+                    width: 100%;
+                }
+
+                .select-trigger {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    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);
+                    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+                    color: ${hasValue ? 'var(--nc-text)' : 'var(--nc-text-muted)'};
+                    font-size: var(--nc-font-size-base);
+                    transition: border-color var(--nc-transition-fast), box-shadow var(--nc-transition-fast);
+                    opacity: ${disabled ? '0.5' : '1'};
+                    user-select: none;
+                    gap: var(--nc-spacing-sm);
+                    min-height: 40px;
+                }
+
+                /* Size variants */
+                :host([size="sm"]) .select-trigger {
+                    padding: var(--nc-spacing-xs) var(--nc-spacing-sm);
+                    font-size: var(--nc-font-size-sm);
+                    min-height: 32px;
+                }
+
+                :host([size="lg"]) .select-trigger {
+                    padding: var(--nc-spacing-md) var(--nc-spacing-lg);
+                    font-size: var(--nc-font-size-lg);
+                    min-height: 48px;
+                }
+
+                /* Filled variant */
+                :host([variant="filled"]) .select-trigger {
+                    background: var(--nc-bg-tertiary);
+                    border-color: transparent;
+                }
+
+                :host([variant="filled"]) .select-trigger:hover:not([disabled]) {
+                    background: var(--nc-bg-secondary);
+                }
+
+                .select-trigger:hover {
+                    border-color: var(--nc-input-focus-border);
+                }
+
+                .select-trigger.open {
+                    border-color: var(--nc-input-focus-border);
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+
+                .trigger-label {
+                    flex: 1;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                .chevron {
+                    flex-shrink: 0;
+                    transition: transform var(--nc-transition-fast);
+                    color: var(--nc-text-muted);
+                }
+
+                .chevron.open {
+                    transform: rotate(180deg);
+                }
+
+                /* Dropdown */
+                .dropdown {
+                    display: none;
+                    position: absolute;
+                    top: calc(100% + 4px);
+                    left: 0;
+                    right: 0;
+                    background: var(--nc-bg);
+                    border: var(--nc-input-border);
+                    border-radius: var(--nc-radius-md);
+                    box-shadow: var(--nc-shadow-lg);
+                    z-index: var(--nc-z-dropdown);
+                    overflow: hidden;
+                    max-height: 240px;
+                    flex-direction: column;
+                }
+
+                .dropdown.open {
+                    display: flex;
+                }
+
+                .search-wrap {
+                    padding: var(--nc-spacing-xs) var(--nc-spacing-sm);
+                    border-bottom: 1px solid var(--nc-border);
+                }
+
+                .search-input {
+                    width: 100%;
+                    box-sizing: border-box;
+                    border: var(--nc-input-border);
+                    border-radius: var(--nc-radius-sm);
+                    padding: var(--nc-spacing-xs) var(--nc-spacing-sm);
+                    font-size: var(--nc-font-size-sm);
+                    font-family: var(--nc-font-family);
+                    color: var(--nc-text);
+                    background: var(--nc-bg-secondary);
+                    outline: none;
+                }
+
+                .search-input:focus {
+                    border-color: var(--nc-input-focus-border);
+                }
+
+                .options-list {
+                    overflow-y: auto;
+                    flex: 1;
+                }
+
+                .option {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-md);
+                    cursor: pointer;
+                    font-size: var(--nc-font-size-base);
+                    color: var(--nc-text);
+                    transition: background var(--nc-transition-fast);
+                    gap: var(--nc-spacing-sm);
+                }
+
+                .option:hover:not(.option--disabled) {
+                    background: var(--nc-bg-secondary);
+                }
+
+                .option--selected {
+                    color: var(--nc-primary);
+                    font-weight: var(--nc-font-weight-medium);
+                }
+
+                .option--disabled {
+                    opacity: 0.4;
+                    cursor: not-allowed;
+                }
+
+                .option__check {
+                    flex-shrink: 0;
+                }
+
+                .empty {
+                    padding: var(--nc-spacing-md);
+                    text-align: center;
+                    color: var(--nc-text-muted);
+                    font-size: var(--nc-font-size-sm);
+                }
+            </style>
+
+            <input type="hidden"
+                name="${this.getAttribute('name') || ''}"
+                value="${value}"
+            />
+
+            <div class="select-trigger${this._open ? ' open' : ''}" role="combobox" aria-expanded="${this._open}" aria-haspopup="listbox">
+                <span class="trigger-label">${selectedLabel}</span>
+                <svg class="chevron${this._open ? ' open' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="16" height="16">
+                    <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </div>
+
+            <div class="dropdown${this._open ? ' open' : ''}" role="listbox">
+                ${searchable ? `
+                <div class="search-wrap">
+                    <input class="search-input" type="text" placeholder="Search..." value="${this._filterText}" autocomplete="off" />
+                </div>` : ''}
+                <div class="options-list">
+                    ${optionItems || `<div class="empty">No options</div>`}
+                </div>
+            </div>
+        `;
+    }
+    onMount() {
+        if (!this.hasAttribute('tabindex')) {
+            this.setAttribute('tabindex', '0');
+        }
+        const sr = this.shadowRoot;
+        // Single click listener - never re-added
+        sr.addEventListener('click', (e) => {
+            if (this.hasAttribute('disabled'))
+                return;
+            const target = e.target;
+            const option = target.closest('.option');
+            if (option) {
+                if (option.classList.contains('option--disabled'))
+                    return;
+                this._select(option.dataset.value ?? '');
+                return;
+            }
+            if (target.closest('.select-trigger')) {
+                this._setOpen(!this._open);
+            }
+        });
+        // Search filter
+        sr.addEventListener('input', (e) => {
+            const input = e.target;
+            if (input.classList.contains('search-input')) {
+                this._filterText = input.value;
+                this._rerenderDropdown();
+            }
+        });
+        // Outside click - registered once, cleaned up in onUnmount
+        document.addEventListener('click', this._onOutsideClick);
+        // Keyboard
+        this.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                this._setOpen(false);
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this._setOpen(!this._open);
+            }
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                this._navigateOptions(e.key === 'ArrowDown' ? 1 : -1);
+            }
+        });
+    }
+    _onOutsideClick = (e) => {
+        if (!this.contains(e.target) && !this.shadowRoot.contains(e.target)) {
+            this._setOpen(false);
+        }
+    };
+    _setOpen(open) {
+        this._open = open;
+        if (!open)
+            this._filterText = '';
+        const sr = this.shadowRoot;
+        const trigger = sr.querySelector('.select-trigger');
+        const chevron = sr.querySelector('.chevron');
+        const dropdown = sr.querySelector('.dropdown');
+        if (trigger) {
+            trigger.classList.toggle('open', open);
+            trigger.setAttribute('aria-expanded', String(open));
+        }
+        if (chevron)
+            chevron.classList.toggle('open', open);
+        if (dropdown) {
+            dropdown.classList.toggle('open', open);
+            if (!open) {
+                // Clear search when closing
+                const searchInput = dropdown.querySelector('.search-input');
+                if (searchInput)
+                    searchInput.value = '';
+                this._rerenderDropdown();
+            }
+        }
+        if (open) {
+            const search = sr.querySelector('.search-input');
+            if (search)
+                search.focus();
+        }
+    }
+    _rerenderDropdown() {
+        const sr = this.shadowRoot;
+        const list = sr.querySelector('.options-list');
+        if (!list)
+            return;
+        const value = this.getAttribute('value') || '';
+        const options = this._getOptions();
+        const filtered = this._filterText
+            ? options.filter(o => o.label.toLowerCase().includes(this._filterText.toLowerCase()))
+            : options;
+        list.innerHTML = filtered.length ? filtered.map(o => `
+            <div class="option${o.value === value ? ' option--selected' : ''}${o.disabled ? ' option--disabled' : ''}"
+                 data-value="${o.value}"
+                 role="option"
+                 aria-selected="${o.value === value}"
+                 aria-disabled="${o.disabled ? 'true' : 'false'}">
+                ${o.label}
+                ${o.value === value ? `
+                <svg class="option__check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                    <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>` : ''}
+            </div>
+        `).join('') : '<div class="empty">No results</div>';
+    }
+    _select(value) {
+        const opts = this._getOptions();
+        const opt = opts.find(o => o.value === value);
+        if (!opt)
+            return;
+        this._open = false;
+        this._filterText = '';
+        // Update trigger label and hidden input directly
+        const sr = this.shadowRoot;
+        const label = sr.querySelector('.trigger-label');
+        if (label)
+            label.textContent = opt.label;
+        const hidden = sr.querySelector('input[type="hidden"]');
+        if (hidden)
+            hidden.value = value;
+        // Close the dropdown
+        this._setOpen(false);
+        // Re-render option list to show the new checkmark
+        this.setAttribute('value', value);
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value,
+                label: opt.label,
+                name: this.getAttribute('name') || ''
+            }
+        }));
+    }
+    _navigateOptions(direction) {
+        const opts = this._getOptions().filter(o => !o.disabled);
+        const current = this.getAttribute('value') || '';
+        const idx = opts.findIndex(o => o.value === current);
+        const next = opts[Math.max(0, Math.min(opts.length - 1, idx + direction))];
+        if (next)
+            this._select(next.value);
+    }
+    onUnmount() {
+        document.removeEventListener('click', this._onOutsideClick);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted) {
+            this.render();
+        }
+    }
+}
+defineComponent('nc-select', NcSelect);

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

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

package/dist/components/nc-skeleton.js

@@ -0,0 +1,90 @@
+import { Component, defineComponent } from '../core/component.js';
+export class NcSkeleton extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['variant', 'width', 'height', 'lines', 'animate'];
+    }
+    template() {
+        const variant = this.getAttribute('variant') || 'text';
+        const width = this.getAttribute('width') || '100%';
+        const height = this.getAttribute('height') || '';
+        const lines = Math.max(1, Number(this.getAttribute('lines') || 1));
+        const animate = this.getAttribute('animate') ?? 'wave';
+        const baseHeight = height || (variant === 'text'
+            ? '0.875em'
+            : variant === 'rect'
+                ? '120px'
+                : variant === 'circle'
+                    ? width
+                    : '160px');
+        let content = '';
+        if (variant === 'text') {
+            content = Array.from({ length: lines }, (_, index) => {
+                const lineWidth = index === lines - 1 && lines > 1 ? '75%' : '100%';
+                return `<span class="bone bone--text" style="width:${lineWidth}"></span>`;
+            }).join('');
+        }
+        else if (variant === 'circle') {
+            content = `<span class="bone bone--circle" style="width:${width};height:${width}"></span>`;
+        }
+        else if (variant === 'card') {
+            content = `
+                <span class="bone bone--rect" style="height:120px;margin-bottom:12px"></span>
+                <span class="bone bone--text" style="width:60%;margin-bottom:8px"></span>
+                <span class="bone bone--text" style="width:90%;margin-bottom:8px"></span>
+                <span class="bone bone--text" style="width:75%"></span>`;
+        }
+        else {
+            content = `<span class="bone bone--rect" style="height:${baseHeight}"></span>`;
+        }
+        return `
+            <style>
+                :host { display: block; width: ${variant === 'circle' ? 'auto' : width}; }
+
+                .skeleton {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 6px;
+                }
+
+                .bone {
+                    display: block;
+                    background: var(--nc-bg-tertiary, #e5e7eb);
+                    border-radius: 4px;
+                    position: relative;
+                    overflow: hidden;
+                }
+
+                .bone--text { height: ${baseHeight}; border-radius: 3px; }
+                .bone--circle { border-radius: 50%; flex-shrink: 0; }
+                .bone--rect { border-radius: var(--nc-radius-md, 8px); width: 100%; }
+
+                ${animate === 'wave' ? `
+                @keyframes nc-skeleton-wave {
+                    0% { transform: translateX(-100%); }
+                    100% { transform: translateX(100%); }
+                }
+                .bone::after {
+                    content: '';
+                    position: absolute;
+                    inset: 0;
+                    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
+                    animation: nc-skeleton-wave 1.6s ease-in-out infinite;
+                }` : ''}
+
+                ${animate === 'pulse' ? `
+                @keyframes nc-skeleton-pulse {
+                    0%, 100% { opacity: 1; }
+                    50% { opacity: 0.4; }
+                }
+                .bone { animation: nc-skeleton-pulse 1.8s ease-in-out infinite; }` : ''}
+            </style>
+            <div class="skeleton" aria-hidden="true">${content}</div>
+        `;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted)
+            this.render();
+    }
+}
+defineComponent('nc-skeleton', NcSkeleton);