nativecorejs 0.1.0

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

@@ -0,0 +1,70 @@
+/**
+ * NcForm + NcField Components
+ *
+ * nc-form:
+ *   A form wrapper that collects values from all nc-* form controls within it,
+ *   runs validation, and emits structured events.
+ *
+ *   Attributes:
+ *     - novalidate: boolean - skip HTML5 native validation
+ *
+ *   Methods:
+ *     - form.getValues(): Record<string, string> - collect all named form control values
+ *     - form.validate(): boolean - trigger validation; returns true if all valid
+ *     - form.reset() - reset all fields to initial value/clear errors
+ *
+ *   Events:
+ *     - submit: CustomEvent<{ values: Record<string, string> }> - on valid submit
+ *     - invalid: CustomEvent<{ fields: string[] }> - on invalid submit (list of failing names)
+ *
+ * nc-field:
+ *   A labelled wrapper for a single form control. Handles the label, hint, and
+ *   error message display in a consistent layout. Pairs naturally with nc-input,
+ *   nc-select, nc-textarea, nc-autocomplete, nc-date-picker, etc.
+ *
+ *   Attributes:
+ *     - label: string - field label
+ *     - for: string - id of the slotted input (for focus on label click)
+ *     - required: boolean - shows required marker
+ *     - hint: string - sub-label hint text
+ *     - error: string - error message (shown in red; overrides hint)
+ *
+ * Usage:
+ *   <nc-form id="signup-form">
+ *     <nc-field label="Email" required hint="We'll never share your email.">
+ *       <nc-input name="email" type="email" placeholder="you@example.com"></nc-input>
+ *     </nc-field>
+ *     <nc-field label="Password" required>
+ *       <nc-input name="password" type="password" show-password-toggle></nc-input>
+ *     </nc-field>
+ *     <nc-button type="submit">Sign up</nc-button>
+ *   </nc-form>
+ *
+ *   document.getElementById('signup-form').addEventListener('submit', e => {
+ *     console.log(e.detail.values);
+ *   });
+ */
+import { Component } from '../core/component.js';
+export declare class NcField extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    template(): string;
+    setError(msg: string): void;
+    clearError(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export declare class NcForm extends Component {
+    static useShadowDOM: boolean;
+    private readonly _submitHandler;
+    private readonly _keydownHandler;
+    private readonly _clickHandler;
+    template(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onSubmit;
+    private _handleSubmit;
+    getValues(): Record<string, string>;
+    validate(): boolean;
+    reset(): void;
+    attributeChangedCallback(_name: string, _oldValue: string, _newValue: string): void;
+}

package/dist/components/nc-form.js

@@ -0,0 +1,273 @@
+/**
+ * NcForm + NcField Components
+ *
+ * nc-form:
+ *   A form wrapper that collects values from all nc-* form controls within it,
+ *   runs validation, and emits structured events.
+ *
+ *   Attributes:
+ *     - novalidate: boolean - skip HTML5 native validation
+ *
+ *   Methods:
+ *     - form.getValues(): Record<string, string> - collect all named form control values
+ *     - form.validate(): boolean - trigger validation; returns true if all valid
+ *     - form.reset() - reset all fields to initial value/clear errors
+ *
+ *   Events:
+ *     - submit: CustomEvent<{ values: Record<string, string> }> - on valid submit
+ *     - invalid: CustomEvent<{ fields: string[] }> - on invalid submit (list of failing names)
+ *
+ * nc-field:
+ *   A labelled wrapper for a single form control. Handles the label, hint, and
+ *   error message display in a consistent layout. Pairs naturally with nc-input,
+ *   nc-select, nc-textarea, nc-autocomplete, nc-date-picker, etc.
+ *
+ *   Attributes:
+ *     - label: string - field label
+ *     - for: string - id of the slotted input (for focus on label click)
+ *     - required: boolean - shows required marker
+ *     - hint: string - sub-label hint text
+ *     - error: string - error message (shown in red; overrides hint)
+ *
+ * Usage:
+ *   <nc-form id="signup-form">
+ *     <nc-field label="Email" required hint="We'll never share your email.">
+ *       <nc-input name="email" type="email" placeholder="you@example.com"></nc-input>
+ *     </nc-field>
+ *     <nc-field label="Password" required>
+ *       <nc-input name="password" type="password" show-password-toggle></nc-input>
+ *     </nc-field>
+ *     <nc-button type="submit">Sign up</nc-button>
+ *   </nc-form>
+ *
+ *   document.getElementById('signup-form').addEventListener('submit', e => {
+ *     console.log(e.detail.values);
+ *   });
+ */
+import { Component, defineComponent } from '../core/component.js';
+// ── NcField ──────────────────────────────────────────────────────────────────
+export class NcField extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['label', 'for', 'required', 'hint', 'error'];
+    }
+    template() {
+        const label = this.getAttribute('label') || '';
+        const forAttr = this.getAttribute('for') || '';
+        const required = this.hasAttribute('required');
+        const hint = this.getAttribute('hint') || '';
+        const error = this.getAttribute('error') || '';
+        return `
+            <style>
+                :host { display: block; font-family: var(--nc-font-family); }
+
+                .field { display: flex; flex-direction: column; gap: 4px; }
+
+                label {
+                    font-size: var(--nc-font-size-sm);
+                    font-weight: var(--nc-font-weight-medium);
+                    color: var(--nc-text);
+                    cursor: ${forAttr ? 'pointer' : 'default'};
+                }
+
+                .required {
+                    color: var(--nc-danger, #ef4444);
+                    margin-left: 2px;
+                }
+
+                .subtext {
+                    font-size: var(--nc-font-size-xs);
+                    line-height: 1.4;
+                }
+                .subtext--hint  { color: var(--nc-text-muted); }
+                .subtext--error { color: var(--nc-danger, #ef4444); }
+            </style>
+            <div class="field">
+                ${label ? `
+                <label ${forAttr ? `for="${forAttr}"` : ''}>
+                    ${label}${required ? `<span class="required" aria-hidden="true">*</span>` : ''}
+                </label>` : ''}
+                <slot></slot>
+                ${error
+            ? `<span class="subtext subtext--error" role="alert">${error}</span>`
+            : hint ? `<span class="subtext subtext--hint">${hint}</span>` : ''}
+            </div>
+        `;
+    }
+    setError(msg) {
+        if (msg)
+            this.setAttribute('error', msg);
+        else
+            this.removeAttribute('error');
+    }
+    clearError() { this.removeAttribute('error'); }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted)
+            this.render();
+    }
+}
+defineComponent('nc-field', NcField);
+// ── NcForm ───────────────────────────────────────────────────────────────────
+const FORM_CONTROLS = [
+    'nc-input', 'nc-textarea', 'nc-select', 'nc-checkbox', 'nc-radio',
+    'nc-switch', 'nc-slider', 'nc-rating', 'nc-number-input',
+    'nc-autocomplete', 'nc-date-picker', 'nc-time-picker', 'nc-color-picker',
+    'input', 'textarea', 'select',
+];
+export class NcForm extends Component {
+    static useShadowDOM = true;
+    _submitHandler = this._onSubmit.bind(this);
+    _keydownHandler = (e) => {
+        const ke = e;
+        const target = ke.target;
+        if (ke.key === 'Enter' && target.tagName !== 'TEXTAREA') {
+            this._handleSubmit();
+        }
+    };
+    _clickHandler = (e) => {
+        const btn = e.target.closest('[type="submit"], nc-button[type="submit"]');
+        if (btn && this.contains(btn)) {
+            e.preventDefault();
+            this._handleSubmit();
+        }
+    };
+    template() {
+        return `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                }
+            </style>
+            <slot></slot>
+        `;
+    }
+    connectedCallback() {
+        super.connectedCallback?.();
+        this.addEventListener('submit', this._submitHandler);
+        this.addEventListener('keydown', this._keydownHandler);
+        this.addEventListener('click', this._clickHandler);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('submit', this._submitHandler);
+        this.removeEventListener('keydown', this._keydownHandler);
+        this.removeEventListener('click', this._clickHandler);
+        super.disconnectedCallback?.();
+    }
+    _onSubmit(e) {
+        const customEvent = e;
+        if (customEvent.detail?.values) {
+            return;
+        }
+        e.preventDefault();
+        this._handleSubmit();
+    }
+    _handleSubmit() {
+        if (!this.hasAttribute('novalidate')) {
+            const valid = this.validate();
+            if (!valid)
+                return;
+        }
+        const values = this.getValues();
+        this.dispatchEvent(new CustomEvent('submit', {
+            bubbles: true, composed: true,
+            detail: { values }
+        }));
+    }
+    getValues() {
+        const result = {};
+        FORM_CONTROLS.forEach(tag => {
+            this.querySelectorAll(tag).forEach(el => {
+                const name = el.getAttribute('name');
+                if (!name)
+                    return;
+                // nc-checkbox/nc-switch: use checked state
+                if (tag === 'nc-checkbox' || tag === 'nc-switch') {
+                    result[name] = el.hasAttribute('checked') ? 'true' : 'false';
+                }
+                else {
+                    const controlWithValue = el;
+                    result[name] = controlWithValue.value ?? el.getAttribute('value') ?? el.value ?? '';
+                }
+            });
+        });
+        return result;
+    }
+    validate() {
+        let valid = true;
+        const invalidFields = [];
+        // Check nc-field wrappers first
+        this.querySelectorAll('nc-field').forEach(field => {
+            // Find the first named control inside this field
+            const ctrl = FORM_CONTROLS.map(tag => field.querySelector(tag)).find(Boolean);
+            if (!ctrl)
+                return;
+            const name = ctrl.getAttribute('name') || '';
+            const value = ctrl.value ?? ctrl.getAttribute('value') ?? ctrl.value ?? '';
+            const isRequired = field.hasAttribute('required') || ctrl.hasAttribute('required');
+            if (isRequired && !String(value).trim()) {
+                valid = false;
+                field.setError('This field is required.');
+                invalidFields.push(name);
+                ctrl.clearValidationError?.();
+                return;
+            }
+            if (typeof ctrl.checkValidity === 'function' && !ctrl.checkValidity()) {
+                valid = false;
+                field.setError(typeof ctrl.getValidationMessage === 'function'
+                    ? ctrl.getValidationMessage()
+                    : 'Enter a valid value.');
+                invalidFields.push(name);
+                ctrl.clearValidationError?.();
+                return;
+            }
+            field.clearError();
+            ctrl.clearValidationError?.();
+        });
+        // Validate standalone controls not wrapped in nc-field.
+        FORM_CONTROLS.forEach(tag => {
+            this.querySelectorAll(tag).forEach(ctrl => {
+                if (ctrl.closest('nc-field'))
+                    return;
+                const element = ctrl;
+                if (typeof element.validate === 'function') {
+                    const isValid = element.validate();
+                    if (!isValid) {
+                        valid = false;
+                        const name = ctrl.getAttribute('name');
+                        if (name)
+                            invalidFields.push(name);
+                    }
+                    return;
+                }
+                if (typeof element.checkValidity === 'function' && !element.checkValidity()) {
+                    valid = false;
+                    const name = ctrl.getAttribute('name');
+                    if (name)
+                        invalidFields.push(name);
+                    return;
+                }
+                element.clearValidationError?.();
+            });
+        });
+        if (!valid) {
+            this.dispatchEvent(new CustomEvent('invalid', {
+                bubbles: true, composed: true,
+                detail: { fields: Array.from(new Set(invalidFields)) }
+            }));
+        }
+        return valid;
+    }
+    reset() {
+        FORM_CONTROLS.forEach(tag => {
+            this.querySelectorAll(tag).forEach(el => {
+                el.setAttribute('value', '');
+                if (tag === 'nc-checkbox' || tag === 'nc-switch')
+                    el.removeAttribute('checked');
+            });
+        });
+        this.querySelectorAll('nc-field').forEach(f => f.clearError());
+    }
+    attributeChangedCallback(_name, _oldValue, _newValue) { }
+}
+defineComponent('nc-form', NcForm);

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

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

package/dist/components/nc-image.js

@@ -0,0 +1,139 @@
+import { Component, defineComponent } from '../core/component.js';
+const RADIUS = {
+    none: '0',
+    sm: 'var(--nc-radius-sm, 0.375rem)',
+    md: 'var(--nc-radius-md, 0.5rem)',
+    lg: 'var(--nc-radius-lg, 1rem)',
+    full: '9999px'
+};
+export class NcImage extends Component {
+    static useShadowDOM = true;
+    loaded = false;
+    errored = false;
+    static get observedAttributes() {
+        return ['src', 'alt', 'width', 'height', 'fit', 'radius', 'aspect', 'fallback'];
+    }
+    template() {
+        const src = this.getAttribute('src') ?? '';
+        const alt = this.getAttribute('alt') ?? '';
+        const width = this.getAttribute('width') ?? '';
+        const height = this.getAttribute('height') ?? '';
+        const fit = this.getAttribute('fit') ?? 'cover';
+        const position = this.getAttribute('position') ?? 'center';
+        const radius = this.getAttribute('radius') ?? 'none';
+        const loading = this.getAttribute('loading') ?? 'lazy';
+        const placeholder = this.getAttribute('placeholder') ?? 'skeleton';
+        const aspect = this.getAttribute('aspect') ?? '';
+        const caption = this.getAttribute('caption') ?? '';
+        const radiusValue = RADIUS[radius] ?? radius;
+        const aspectStyle = aspect ? `aspect-ratio: ${aspect};` : '';
+        const widthStyle = width ? `width:${/^\d+$/.test(width) ? width + 'px' : width};` : '';
+        const heightStyle = height ? `height:${/^\d+$/.test(height) ? height + 'px' : height};` : '';
+        const showSkeleton = !this.loaded && !this.errored && placeholder === 'skeleton';
+        return `
+            <style>
+                :host { display: inline-block; }
+                figure {
+                    margin: 0;
+                    padding: 0;
+                    display: block;
+                    ${widthStyle} ${heightStyle}
+                    border-radius: ${radiusValue};
+                    overflow: hidden;
+                    position: relative;
+                    ${aspectStyle}
+                }
+                .skeleton {
+                    position: absolute;
+                    inset: 0;
+                    background: linear-gradient(90deg, var(--nc-bg-secondary, #f8fafc) 25%, var(--nc-bg-tertiary, #e2e8f0) 50%, var(--nc-bg-secondary, #f8fafc) 75%);
+                    background-size: 200% 100%;
+                    animation: nc-img-shimmer 1.4s infinite linear;
+                    border-radius: inherit;
+                    display: ${showSkeleton ? 'block' : 'none'};
+                }
+                @keyframes nc-img-shimmer {
+                    0% { background-position: -200% 0; }
+                    100% { background-position: 200% 0; }
+                }
+                img {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    object-fit: ${fit};
+                    object-position: ${position};
+                    border-radius: inherit;
+                    opacity: ${this.loaded ? 1 : 0};
+                    transition: opacity var(--nc-transition-base, 220ms ease);
+                }
+                .error-plate {
+                    display: ${this.errored ? 'flex' : 'none'};
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    inset: 0;
+                    background: var(--nc-bg-secondary, #f8fafc);
+                    color: var(--nc-text-muted, #6b7280);
+                    font-size: var(--nc-font-size-xs, 0.75rem);
+                    font-family: var(--nc-font-family);
+                    flex-direction: column;
+                    gap: 4px;
+                }
+                figcaption {
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-xs, 0.75rem);
+                    color: var(--nc-text-muted, #6b7280);
+                    text-align: center;
+                    padding-top: 4px;
+                    line-height: 1.4;
+                }
+            </style>
+            <figure>
+                <div class="skeleton"></div>
+                <img id="img" src="${src}" alt="${alt}" loading="${loading}" decoding="async" ${width ? `width="${width}"` : ''} ${height ? `height="${height}"` : ''} />
+                <div class="error-plate" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+                    <span>Image not found</span>
+                </div>
+            </figure>
+            ${caption ? `<figcaption>${caption}</figcaption>` : ''}
+        `;
+    }
+    onMount() {
+        const image = this.$('#img');
+        if (!image)
+            return;
+        if (image.complete && image.naturalWidth > 0) {
+            this.loaded = true;
+            this.render();
+            return;
+        }
+        image.addEventListener('load', () => {
+            this.loaded = true;
+            this.errored = false;
+            this.render();
+            this.dispatchEvent(new CustomEvent('load', { bubbles: true, composed: true }));
+        }, { once: true });
+        image.addEventListener('error', () => {
+            const fallback = this.getAttribute('fallback');
+            if (fallback && image.src !== fallback) {
+                image.src = fallback;
+                return;
+            }
+            this.errored = true;
+            this.loaded = false;
+            this.render();
+            this.dispatchEvent(new CustomEvent('error', { bubbles: true, composed: true }));
+        }, { once: true });
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue || !this._mounted)
+            return;
+        if (name === 'src') {
+            this.loaded = false;
+            this.errored = false;
+        }
+        this.render();
+    }
+}
+defineComponent('nc-image', NcImage);

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

@@ -0,0 +1,25 @@
+import { Component } from '../core/component.js';
+export declare class NcInput extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    private currentValue;
+    private showPassword;
+    private validationError;
+    private readonly handleInputEvent;
+    private readonly handleChangeEvent;
+    private readonly handleClickEvent;
+    get value(): string;
+    set value(nextValue: string);
+    template(): string;
+    onMount(): void;
+    onUnmount(): void;
+    private syncClearButton;
+    private getInput;
+    private buildValidationMessage;
+    getValidationMessage(): string;
+    checkValidity(): boolean;
+    validate(): boolean;
+    reportValidity(): boolean;
+    clearValidationError(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}