nativecorejs 0.1.0

package/dist/components/nc-accordion.js

@@ -0,0 +1,186 @@
+/**
+ * NcAccordion + NcAccordionItem Components
+ *
+ * nc-accordion:
+ *   - multiple: boolean - allow multiple items open simultaneously
+ *   - variant: 'default'|'bordered'|'flush' (default: 'default')
+ *
+ * nc-accordion-item:
+ *   - header: string - header text (or use slot[name="header"])
+ *   - open: boolean - expanded state
+ *   - disabled: boolean
+ *
+ * Events (on nc-accordion-item):
+ *   - toggle: CustomEvent<{ open: boolean }>
+ *
+ * Usage:
+ *   <nc-accordion>
+ *     <nc-accordion-item header="Section 1" open>Content here</nc-accordion-item>
+ *     <nc-accordion-item header="Section 2">More content</nc-accordion-item>
+ *   </nc-accordion>
+ */
+import { Component, defineComponent } from '../core/component.js';
+// ── NcAccordionItem ──────────────────────────────────────────────────────────
+export class NcAccordionItem extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() { return ['header', 'open', 'disabled']; }
+    template() {
+        const header = this.getAttribute('header') || '';
+        const open = this.hasAttribute('open');
+        const disabled = this.hasAttribute('disabled');
+        return `
+            <style>
+                :host { display: block; }
+
+                .item {
+                    border-bottom: 1px solid var(--nc-border);
+                }
+
+                .trigger {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    gap: var(--nc-spacing-sm);
+                    padding: var(--nc-spacing-md) var(--nc-spacing-lg);
+                    background: none;
+                    border: none;
+                    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+                    color: ${disabled ? 'var(--nc-text-muted)' : 'var(--nc-text)'};
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-base);
+                    font-weight: var(--nc-font-weight-medium);
+                    text-align: left;
+                    transition: background var(--nc-transition-fast), color var(--nc-transition-fast);
+                    opacity: ${disabled ? '0.6' : '1'};
+                }
+
+                .trigger:hover:not([disabled]) { background: var(--nc-bg-secondary); }
+                .trigger:focus-visible { outline: 2px solid var(--nc-primary); outline-offset: -2px; }
+
+                .chevron {
+                    flex-shrink: 0;
+                    transition: transform var(--nc-transition-base);
+                    transform: rotate(${open ? '180deg' : '0deg'});
+                    color: var(--nc-text-muted);
+                }
+
+                .body {
+                    display: ${open ? 'block' : 'none'};
+                    padding: 0 var(--nc-spacing-lg) var(--nc-spacing-md);
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text-secondary, var(--nc-text-muted));
+                    line-height: var(--nc-line-height-relaxed, 1.7);
+                }
+            </style>
+            <div class="item">
+                <button
+                    class="trigger"
+                    type="button"
+                    aria-expanded="${open}"
+                    ${disabled ? 'disabled' : ''}
+                >
+                    <slot name="header">${header}</slot>
+                    <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </button>
+                <div class="body" role="region" aria-hidden="${!open}">
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+    }
+    onMount() {
+        this.$('.trigger').addEventListener('click', () => {
+            if (this.hasAttribute('disabled'))
+                return;
+            const nowOpen = !this.hasAttribute('open');
+            if (nowOpen) {
+                this.setAttribute('open', '');
+            }
+            else {
+                this.removeAttribute('open');
+            }
+            this.dispatchEvent(new CustomEvent('toggle', {
+                bubbles: true, composed: true,
+                detail: { open: nowOpen }
+            }));
+        });
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'open' && this._mounted) {
+            const open = this.hasAttribute('open');
+            const body = this.$('.body');
+            const chevron = this.$('.chevron');
+            const trigger = this.$('.trigger');
+            if (body) {
+                body.style.display = open ? 'block' : 'none';
+                body.setAttribute('aria-hidden', String(!open));
+            }
+            if (chevron)
+                chevron.style.transform = `rotate(${open ? 180 : 0}deg)`;
+            if (trigger)
+                trigger.setAttribute('aria-expanded', String(open));
+            return;
+        }
+        if (this._mounted) {
+            this.render();
+            this.onMount();
+        }
+    }
+}
+// ── NcAccordion ──────────────────────────────────────────────────────────────
+export class NcAccordion extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() { return ['multiple', 'variant']; }
+    template() {
+        return `
+            <style>
+                :host { display: block; }
+
+                .accordion {
+                    border-radius: var(--nc-radius-md, 8px);
+                    overflow: hidden;
+                }
+
+                :host([variant="bordered"]) .accordion {
+                    border: 1px solid var(--nc-border);
+                }
+
+                :host([variant="flush"]) .accordion {
+                    border-radius: 0;
+                }
+
+                ::slotted(nc-accordion-item:last-child) {
+                    border-bottom: none !important;
+                }
+            </style>
+            <div class="accordion">
+                <slot></slot>
+            </div>
+        `;
+    }
+    onMount() {
+        // Collapse siblings unless multiple is set
+        this.addEventListener('toggle', (e) => {
+            if (this.hasAttribute('multiple'))
+                return;
+            const opened = e.target;
+            if (!opened.hasAttribute('open'))
+                return;
+            this.querySelectorAll('nc-accordion-item').forEach(item => {
+                if (item !== opened)
+                    item.removeAttribute('open');
+            });
+        });
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted)
+            this.render();
+    }
+}
+defineComponent('nc-accordion-item', NcAccordionItem);
+defineComponent('nc-accordion', NcAccordion);

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

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

package/dist/components/nc-alert.js

@@ -0,0 +1,127 @@
+import { Component, defineComponent } from '../core/component.js';
+const ICONS = {
+    info: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>`,
+    success: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>`,
+    warning: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>`,
+    danger: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>`,
+    neutral: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>`
+};
+export class NcAlert extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['variant', 'title', 'dismissible', 'duration', 'icon', 'open'];
+    }
+    dismissTimer = null;
+    template() {
+        const variant = this.getAttribute('variant') || 'info';
+        const title = this.getAttribute('title') || '';
+        const dismissible = this.hasAttribute('dismissible');
+        const showIcon = this.getAttribute('icon') !== 'false';
+        const open = !this.hasAttribute('open') || this.getAttribute('open') !== 'false';
+        return `
+            <style>
+                :host { display: block; font-family: var(--nc-font-family); }
+
+                .alert {
+                    display: ${open ? 'flex' : 'none'};
+                    align-items: flex-start;
+                    gap: var(--nc-spacing-sm, 0.5rem);
+                    padding: var(--nc-spacing-md, 1rem) var(--nc-spacing-lg, 1.5rem);
+                    border-radius: var(--nc-radius-md, 8px);
+                    border: 1px solid transparent;
+                    line-height: 1.5;
+                    animation: nc-alert-in 0.2s ease;
+                }
+
+                @keyframes nc-alert-in {
+                    from { opacity: 0; transform: translateY(-4px); }
+                    to { opacity: 1; transform: translateY(0); }
+                }
+                .alert.out {
+                    animation: nc-alert-out 0.18s ease forwards;
+                }
+                @keyframes nc-alert-out {
+                    to { opacity: 0; transform: scale(0.97); }
+                }
+
+                .alert--info { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
+                .alert--success { background: #f0fdf4; color: #166534; border-color: #86efac; }
+                .alert--warning { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
+                .alert--danger { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
+                .alert--neutral { background: var(--nc-bg-secondary, #f8fafc); color: var(--nc-text, #111827); border-color: var(--nc-border, #e5e7eb); }
+
+                .alert__icon { flex-shrink: 0; margin-top: 1px; }
+                .alert__body { flex: 1; font-size: var(--nc-font-size-sm, 0.875rem); }
+                .alert__title {
+                    font-weight: var(--nc-font-weight-semibold, 600);
+                    font-size: var(--nc-font-size-base, 1rem);
+                    margin-bottom: 2px;
+                    display: block;
+                }
+                .alert__close {
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    flex-shrink: 0;
+                    padding: 2px;
+                    color: inherit;
+                    opacity: 0.5;
+                    transition: opacity var(--nc-transition-fast, 160ms ease);
+                    display: flex;
+                    line-height: 1;
+                    border-radius: var(--nc-radius-sm, 4px);
+                }
+                .alert__close:hover { opacity: 1; }
+            </style>
+            <div class="alert alert--${variant}" role="alert" aria-live="polite">
+                ${showIcon ? `<span class="alert__icon">${ICONS[variant] ?? ICONS.info}</span>` : ''}
+                <div class="alert__body">
+                    ${title ? `<strong class="alert__title">${title}</strong>` : ''}
+                    <slot></slot>
+                </div>
+                ${dismissible ? `
+                <button class="alert__close" type="button" aria-label="Close alert">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none" width="14" height="14">
+                        <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    </svg>
+                </button>` : ''}
+            </div>
+        `;
+    }
+    onMount() {
+        const closeButton = this.$('.alert__close');
+        if (closeButton) {
+            closeButton.addEventListener('click', () => this.dismiss());
+        }
+        const duration = Number(this.getAttribute('duration') || 0);
+        if (duration > 0) {
+            this.dismissTimer = setTimeout(() => this.dismiss(), duration);
+        }
+    }
+    onUnmount() {
+        if (this.dismissTimer) {
+            clearTimeout(this.dismissTimer);
+        }
+    }
+    dismiss() {
+        if (this.dismissTimer) {
+            clearTimeout(this.dismissTimer);
+            this.dismissTimer = null;
+        }
+        const alertElement = this.$('.alert');
+        if (alertElement) {
+            alertElement.classList.add('out');
+            alertElement.addEventListener('animationend', () => {
+                alertElement.style.display = 'none';
+                this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));
+            }, { once: true });
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted) {
+            this.render();
+            this.onMount();
+        }
+    }
+}
+defineComponent('nc-alert', NcAlert);

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

@@ -0,0 +1,117 @@
+/**
+ * NcAnimation Component
+ *
+ * A declarative animation wrapper that intelligently selects the most
+ * GPU-efficient execution path for each animation type:
+ *
+ *   - Simple CSS keyframes  → runs entirely on the compositor thread (no JS)
+ *   - Enter / exit          → Web Animations API via gpu-animation.ts
+ *   - Scroll-reveal         → IntersectionObserver + Web Animations API
+ *   - Continuous / looping  → CSS animation (compositor-only)
+ *   - Particle effects      → WebGL (vertex shader) with canvas2d fallback
+ *
+ * Attributes:
+ *   name         - Animation preset name (see list below). Required.
+ *   trigger      - When to run: 'mount'|'visible'|'hover'|'click'|'manual' (default: 'mount')
+ *   duration     - Ms integer (default: varies per preset)
+ *   delay        - Ms delay before animation starts (default: 0)
+ *   easing       - CSS easing / cubic-bezier string (default: preset-specific)
+ *   iterations   - Number or 'infinite' (default: 1)
+ *   distance     - Slide/offset distance in px (default: 40)
+ *   threshold    - IntersectionObserver threshold 0-1 (default: 0.15, trigger=visible only)
+ *   fill         - Web Animations fill mode: 'forwards'|'backwards'|'both'|'none' (default: 'forwards')
+ *   reverse      - boolean - play animation backwards
+ *   no-gpu-hint  - boolean - skip will-change + contain hints (use for very tiny elements)
+ *
+ * Particle-specific attributes (all optional):
+ *   origin-x     - Horizontal start position as 0-1 fraction of screen width (default: 0.5 = center)
+ *   origin-y     - Vertical start position as 0-1 fraction of screen height (default: 0.5)
+ *                  Special shortcuts: 'top'=0, 'bottom'=1, 'left'=0, 'right'=1, 'center'=0.5
+ *   target-x     - End-point X fraction (used by 'converge'/'ripple' presets)
+ *   target-y     - End-point Y fraction
+ *   count        - Override particle count (integer)
+ *   spread       - Override spread/speed scale 0-2 (default: 1)
+ *
+ * Animation preset names:
+ *   Enter/exit:  fade-in | fade-out | slide-up | slide-down | slide-left | slide-right
+ *                scale-in | scale-out | zoom-in | zoom-out | flip-x | flip-y
+ *   Attention:   pulse | shake | bounce | rubber-band | swing | jello | tada | heartbeat
+ *   Continuous:  spin | ping | float | glow
+ *   Particles:   confetti | sparkles | bubbles | snow | firework |
+ *                electricity | fire | explosion | ripple
+ *
+ * Events:
+ *   start    - CustomEvent - animation begins
+ *   finish   - CustomEvent - animation ends (not fired for infinite)
+ *   cancel   - CustomEvent - animation was cancelled
+ *
+ * Methods (call on the element):
+ *   el.play()    - play / replay
+ *   el.pause()   - pause (Web Animations API animations only)
+ *   el.cancel()  - cancel and reset
+ *
+ * Slots:
+ *   default - the content to animate
+ *
+ * Usage:
+ *   <nc-animation name="fade-in" trigger="visible">
+ *     <nc-card>...</nc-card>
+ *   </nc-animation>
+ *
+ *   <nc-animation name="slide-up" trigger="visible" delay="150">
+ *     <p>Staggered paragraph</p>
+ *   </nc-animation>
+ *
+ *   <nc-animation name="pulse" trigger="hover" iterations="infinite">
+ *     <nc-button>Hover me</nc-button>
+ *   </nc-animation>
+ *
+ *   <nc-animation name="confetti" trigger="click">
+ *     <nc-button variant="success">Celebrate</nc-button>
+ *   </nc-animation>
+ */
+import { Component } from '../core/component.js';
+export declare class NcAnimation extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    private _waAnimation;
+    private _particleLoop;
+    private _particleWebGL;
+    private _canvas;
+    private _io;
+    private _hoverOff;
+    private _clickOff;
+    private _cssAnimName;
+    private _visibleFired;
+    template(): string;
+    onMount(): void;
+    onUnmount(): void;
+    play(): void;
+    pause(): void;
+    cancel(): void;
+    private _setup;
+    private _teardown;
+    private _scheduleRun;
+    private _setupVisibleTrigger;
+    private _setupHoverTrigger;
+    private _setupClickTrigger;
+    private _run;
+    private _runWAAPI;
+    private _runCSS;
+    /** Resolve 'top'|'bottom'|'left'|'right'|'center'|number-string → 0-1 float */
+    private _resolvePos;
+    private _runParticles;
+    /**
+     * Full canvas2d particle engine.
+     * origin / target are 0-1 fractions of canvas dimensions.
+     * Each preset type gets its own spawn + update behaviour.
+     */
+    private _runCanvas2D;
+    private _stopParticles;
+    /** First painted element assigned to the default slot. */
+    private _target;
+    private _attr;
+    private _numAttr;
+    private _iterAttr;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}