create-nativecore 0.1.1 → 0.2.0

package/template/src/components/core/nc-a.ts

@@ -0,0 +1,313 @@
+/**
+ * NativeCore Link/Button Component (nc-a)
+ *
+ * A semantic <a> element styled as a button. Handles SPA navigation
+ * internally so the router's light-DOM event delegation is not needed.
+ * External links open normally; internal paths use router.navigate().
+ *
+ * Attributes:
+ *   href      — Destination path or URL (required for navigation)
+ *   variant   — Visual style (default: 'primary')
+ *   size      — 'sm' | 'md' | 'lg' (default: 'md')
+ *   disabled  — Boolean. Prevents navigation and dims the element.
+ *   target    — '_blank' etc. Passed through to the inner <a>. External links
+ *               are always handled by the browser (no SPA navigation).
+ *
+ * Variants:
+ *   primary, secondary, success, danger, warning, info,
+ *   outline, ghost, link,
+ *   hero-primary, hero-ghost
+ *
+ * Slots:
+ *   default — Link label / content.
+ *
+ * Events emitted:
+ *   nc-navigate — { href } — fires before SPA navigation (cancelable).
+ *
+ * Usage:
+ *   <nc-a href="/components" variant="primary">Explore Components</nc-a>
+ *   <nc-a href="/login" variant="ghost" size="lg">Get Started</nc-a>
+ *   <nc-a href="https://github.com" target="_blank" variant="link">GitHub</nc-a>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+import router from '@core/router.js';
+import { html } from '@utils/templates.js';
+
+export class NcA extends Component {
+    static useShadowDOM = true;
+
+    static attributeOptions = {
+        variant: [
+            'primary', 'secondary', 'success', 'danger', 'warning', 'info',
+            'outline', 'ghost', 'link',
+            'hero-primary', 'hero-ghost',
+        ],
+        size: ['sm', 'md', 'lg'],
+    };
+
+    static get observedAttributes() {
+        return ['href', 'variant', 'size', 'disabled', 'target'];
+    }
+
+    private _onClick: ((e: Event) => void) | null = null;
+
+    template(): string {
+        const href     = this.attr('href', '#');
+        const disabled = this.hasAttribute('disabled');
+        const target   = this.attr('target', '');
+
+        const targetAttr = target ? `target="${target}" rel="noopener noreferrer"` : '';
+
+        return html`
+            <style>
+                :host {
+                    display: inline-block;
+                    width: var(--nc-a-host-width, auto);
+                }
+
+                a {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: var(--nc-spacing-xs);
+                    font-family: var(--nc-font-family);
+                    font-weight: var(--nc-font-weight-semibold);
+                    text-decoration: none;
+                    border: none;
+                    border-radius: var(--nc-radius-md);
+                    cursor: pointer;
+                    transition:
+                        background var(--nc-transition-fast),
+                        color var(--nc-transition-fast),
+                        box-shadow var(--nc-transition-fast),
+                        transform var(--nc-transition-fast),
+                        border-color var(--nc-transition-fast);
+                    white-space: nowrap;
+                    user-select: none;
+                    box-sizing: border-box;
+                    outline: none;
+                    width: var(--nc-a-width, auto);
+
+                    /* default size: md */
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-xl);
+                    font-size: var(--nc-font-size-base);
+                    min-height: 40px;
+
+                    /* default variant: primary */
+                    background: var(--nc-primary);
+                    color: var(--nc-white);
+                }
+
+                a:focus-visible {
+                    outline: 2px solid var(--nc-primary);
+                    outline-offset: 2px;
+                }
+
+                /* ── Sizes ─────────────────────────────────────────────────── */
+                :host([size="sm"]) a {
+                    padding: var(--nc-spacing-xs) var(--nc-spacing-lg);
+                    font-size: var(--nc-font-size-sm);
+                    min-height: 32px;
+                }
+
+                :host([size="lg"]) a {
+                    padding: var(--nc-spacing-md) var(--nc-spacing-2xl);
+                    font-size: var(--nc-font-size-lg);
+                    min-height: 48px;
+                }
+
+                /* ── Variants ──────────────────────────────────────────────── */
+                :host([variant="primary"]) a {
+                    background: var(--nc-primary);
+                    color: var(--nc-white);
+                    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
+                }
+                :host([variant="primary"]) a:hover {
+                    background: var(--nc-primary-dark);
+                    transform: translateY(-1px);
+                    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
+                }
+
+                :host([variant="secondary"]) a {
+                    background: var(--nc-gray-200);
+                    color: var(--nc-text);
+                }
+                :host([variant="secondary"]) a:hover {
+                    background: var(--nc-gray-300);
+                    transform: translateY(-1px);
+                }
+
+                :host([variant="success"]) a {
+                    background: var(--nc-success);
+                    color: var(--nc-white);
+                    box-shadow: var(--nc-shadow-success);
+                }
+                :host([variant="success"]) a:hover {
+                    background: var(--nc-success-dark);
+                    transform: translateY(-1px);
+                }
+
+                :host([variant="danger"]) a {
+                    background: var(--nc-danger);
+                    color: var(--nc-white);
+                    box-shadow: var(--nc-shadow-danger);
+                }
+                :host([variant="danger"]) a:hover {
+                    background: var(--nc-danger-dark);
+                    transform: translateY(-1px);
+                }
+
+                :host([variant="warning"]) a {
+                    background: var(--nc-warning);
+                    color: var(--nc-white);
+                }
+                :host([variant="warning"]) a:hover {
+                    background: var(--nc-warning-dark);
+                    transform: translateY(-1px);
+                }
+
+                :host([variant="info"]) a {
+                    background: var(--nc-info);
+                    color: var(--nc-white);
+                }
+                :host([variant="info"]) a:hover {
+                    background: var(--nc-info-dark);
+                    transform: translateY(-1px);
+                }
+
+                :host([variant="outline"]) a {
+                    background: transparent;
+                    color: var(--nc-primary);
+                    border: 2px solid var(--nc-primary);
+                }
+                :host([variant="outline"]) a:hover {
+                    background: var(--nc-primary);
+                    color: var(--nc-white);
+                    transform: translateY(-1px);
+                }
+
+                :host([variant="ghost"]) a {
+                    background: transparent;
+                    color: var(--nc-text);
+                    border: 2px solid var(--nc-border-dark);
+                }
+                :host([variant="ghost"]) a:hover {
+                    background: var(--nc-bg-tertiary);
+                    transform: translateY(-1px);
+                }
+
+                :host([variant="link"]) a {
+                    background: transparent;
+                    color: var(--nc-primary);
+                    padding-left: 0;
+                    padding-right: 0;
+                    min-height: unset;
+                    text-decoration: underline;
+                    text-underline-offset: 3px;
+                }
+                :host([variant="link"]) a:hover {
+                    color: var(--nc-primary-dark);
+                }
+
+                /* ── Hero variants (landing page CTA style) ─────────────────── */
+                :host([variant="hero-primary"]) a {
+                    background: var(--nc-primary);
+                    color: var(--nc-white);
+                    padding: var(--nc-spacing-md) var(--nc-spacing-2xl);
+                    font-size: var(--nc-font-size-lg);
+                    min-height: 52px;
+                    border-radius: var(--nc-radius-full);
+                    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
+                }
+                :host([variant="hero-primary"]) a:hover {
+                    background: var(--nc-primary-dark);
+                    transform: translateY(-2px);
+                    box-shadow: 0 8px 28px rgba(16, 185, 129, 0.5);
+                }
+
+                :host([variant="hero-ghost"]) a {
+                    background: transparent;
+                    color: var(--nc-white);
+                    padding: var(--nc-spacing-md) var(--nc-spacing-2xl);
+                    font-size: var(--nc-font-size-lg);
+                    min-height: 52px;
+                    border-radius: var(--nc-radius-full);
+                    border: 2px solid rgba(255, 255, 255, 0.4);
+                }
+                :host([variant="hero-ghost"]) a:hover {
+                    background: rgba(255, 255, 255, 0.1);
+                    border-color: rgba(255, 255, 255, 0.7);
+                    transform: translateY(-2px);
+                }
+
+                /* ── Disabled ────────────────────────────────────────────────── */
+                :host([disabled]) a {
+                    opacity: 0.45;
+                    cursor: not-allowed;
+                    pointer-events: none;
+                    transform: none !important;
+                    box-shadow: none !important;
+                }
+            </style>
+            <a href="${href}" ${targetAttr} aria-disabled="${disabled}" role="link">
+                <slot></slot>
+            </a>
+        `;
+    }
+
+    onMount(): void {
+        this._onClick = (e: Event) => {
+            if (this.hasAttribute('disabled')) {
+                e.preventDefault();
+                return;
+            }
+
+            const href   = this.attr('href', '');
+            const target = this.attr('target', '');
+
+            if (!href) return;
+
+            // External links, hash links, or explicit target — let the browser handle
+            if (
+                href.startsWith('http://') ||
+                href.startsWith('https://') ||
+                href.startsWith('mailto:') ||
+                href.startsWith('tel:') ||
+                href.startsWith('#') ||
+                target === '_blank'
+            ) {
+                return; // don't prevent default
+            }
+
+            // SPA navigation
+            e.preventDefault();
+
+            const cancelled = !this.emitEvent('nc-navigate', { href }, { cancelable: true });
+            if (cancelled) return;
+
+            router.navigate(href);
+        };
+
+        this.shadowRoot!.addEventListener('click', this._onClick);
+    }
+
+    onUnmount(): void {
+        if (this._onClick) {
+            this.shadowRoot?.removeEventListener('click', this._onClick);
+            this._onClick = null;
+        }
+    }
+
+    attributeChangedCallback(
+        _name: string,
+        oldValue: string | null,
+        newValue: string | null
+    ): void {
+        if (this._mounted && oldValue !== newValue) {
+            this.render();
+        }
+    }
+}
+
+defineComponent('nc-a', NcA);

package/template/src/components/core/nc-accordion.ts

@@ -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.$<HTMLButtonElement>('.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: string, oldValue: string, newValue: string) {
+        if (oldValue === newValue) return;
+        if (name === 'open' && this._mounted) {
+            const open = this.hasAttribute('open');
+            const body = this.$<HTMLElement>('.body');
+            const chevron = this.$<HTMLElement>('.chevron');
+            const trigger = this.$<HTMLButtonElement>('.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: Event) => {
+            if (this.hasAttribute('multiple')) return;
+            const opened = e.target as NcAccordionItem;
+            if (!(opened as any).hasAttribute('open')) return;
+            this.querySelectorAll<NcAccordionItem>('nc-accordion-item').forEach(item => {
+                if (item !== opened) item.removeAttribute('open');
+            });
+        });
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) this.render();
+    }
+}
+
+defineComponent('nc-accordion-item', NcAccordionItem);
+defineComponent('nc-accordion', NcAccordion);

package/template/src/components/core/nc-alert.ts

@@ -0,0 +1,153 @@
+/**
+ * NcAlert Component
+ *
+ * Attributes:
+ *   - variant: 'info'|'success'|'warning'|'danger'|'neutral' (default: 'info')
+ *   - title: string — optional bold heading
+ *   - dismissible: boolean — show close button
+ *   - duration: number — ms before auto-dismiss (0 = sticky)
+ *   - icon: boolean — show variant icon (default: true)
+ *   - open: boolean — visible state (default: true; remove to hide)
+ *
+ * Events:
+ *   - dismiss: CustomEvent — fired when closed
+ *
+ * Usage:
+ *   <nc-alert variant="success" title="Saved!" dismissible>Your changes have been saved.</nc-alert>
+ *   <nc-alert variant="warning">Your session expires in 5 minutes.</nc-alert>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+const ICONS: Record<string, string> = {
+    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'];
+    }
+
+    private _dismissTimer: ReturnType<typeof setTimeout> | null = 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);
+                    padding: var(--nc-spacing-md) var(--nc-spacing-lg);
+                    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); color: var(--nc-text); border-color: var(--nc-border); }
+
+                .alert__icon { flex-shrink: 0; margin-top: 1px; }
+
+                .alert__body { flex: 1; font-size: var(--nc-font-size-sm); }
+
+                .alert__title {
+                    font-weight: var(--nc-font-weight-semibold);
+                    font-size: var(--nc-font-size-base);
+                    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);
+                    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 closeBtn = this.$<HTMLButtonElement>('.alert__close');
+        if (closeBtn) {
+            closeBtn.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);
+    }
+
+    private _dismiss() {
+        if (this._dismissTimer) { clearTimeout(this._dismissTimer); this._dismissTimer = null; }
+        const alertEl = this.$<HTMLElement>('.alert');
+        if (alertEl) {
+            alertEl.classList.add('out');
+            alertEl.addEventListener('animationend', () => {
+                alertEl.style.display = 'none';
+                this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));
+            }, { once: true });
+        }
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) { this.render(); this.onMount(); }
+    }
+}
+
+defineComponent('nc-alert', NcAlert);