nativecorejs 0.1.0

package/README.md

@@ -0,0 +1,22 @@
+# nativecorejs
+
+This package now contains the extracted NativeCore runtime surface and the reusable built-in component library.
+
+Current exports:
+
+- router primitives
+- component base class and custom element helper
+- built-in framework component registry manifest
+- extracted UI components from `nativecore/src/components/core`, including navigation, input, feedback, layout, picker, overlay, data-display, and utility `nc-*` elements
+- multi-tag component modules such as accordion, bottom nav, form, stepper, and timeline
+- state, computed, and effect primitives
+- lazy component registry
+- cache-busting utilities
+- controller event and subscription cleanup helpers
+- base framework CSS at `nativecorejs/styles/base.css`
+
+Not extracted yet:
+
+- app-shell specific components: `app-header`, `app-sidebar`, and `app-footer`
+- genericized services and build helpers
+- app-shell specific CSS and demo layout components

package/dist/components/builtinRegistry.d.ts

@@ -0,0 +1,2 @@
+export declare const builtinComponentManifest: readonly [readonly ["loading-spinner", "./components/loading-spinner.js"], readonly ["nc-a", "./components/nc-a.js"], readonly ["nc-accordion-item", "./components/nc-accordion.js"], readonly ["nc-accordion", "./components/nc-accordion.js"], readonly ["nc-alert", "./components/nc-alert.js"], readonly ["nc-animation", "./components/nc-animation.js"], readonly ["nc-autocomplete", "./components/nc-autocomplete.js"], readonly ["nc-avatar", "./components/nc-avatar.js"], readonly ["nc-avatar-group", "./components/nc-avatar-group.js"], readonly ["nc-badge", "./components/nc-badge.js"], readonly ["nc-bottom-nav-item", "./components/nc-bottom-nav.js"], readonly ["nc-bottom-nav", "./components/nc-bottom-nav.js"], readonly ["nc-breadcrumb", "./components/nc-breadcrumb.js"], readonly ["nc-button", "./components/nc-button.js"], readonly ["nc-card", "./components/nc-card.js"], readonly ["nc-checkbox", "./components/nc-checkbox.js"], readonly ["nc-chip", "./components/nc-chip.js"], readonly ["nc-code", "./components/nc-code.js"], readonly ["nc-collapsible", "./components/nc-collapsible.js"], readonly ["nc-color-picker", "./components/nc-color-picker.js"], readonly ["nc-copy-button", "./components/nc-copy-button.js"], readonly ["nc-date-picker", "./components/nc-date-picker.js"], readonly ["nc-div", "./components/nc-div.js"], readonly ["nc-divider", "./components/nc-divider.js"], readonly ["nc-drawer", "./components/nc-drawer.js"], readonly ["nc-dropdown", "./components/nc-dropdown.js"], readonly ["nc-empty-state", "./components/nc-empty-state.js"], readonly ["nc-field", "./components/nc-form.js"], readonly ["nc-file-upload", "./components/nc-file-upload.js"], readonly ["nc-form", "./components/nc-form.js"], readonly ["nc-image", "./components/nc-image.js"], readonly ["nc-input", "./components/nc-input.js"], readonly ["nc-kbd", "./components/nc-kbd.js"], readonly ["nc-menu", "./components/nc-menu.js"], readonly ["nc-menu-item", "./components/nc-menu-item.js"], readonly ["nc-modal", "./components/nc-modal.js"], readonly ["nc-nav-item", "./components/nc-nav-item.js"], readonly ["nc-number-input", "./components/nc-number-input.js"], readonly ["nc-otp-input", "./components/nc-otp-input.js"], readonly ["nc-pagination", "./components/nc-pagination.js"], readonly ["nc-popover", "./components/nc-popover.js"], readonly ["nc-progress", "./components/nc-progress.js"], readonly ["nc-progress-circular", "./components/nc-progress-circular.js"], readonly ["nc-radio", "./components/nc-radio.js"], readonly ["nc-rating", "./components/nc-rating.js"], readonly ["nc-rich-text", "./components/nc-rich-text.js"], readonly ["nc-scroll-top", "./components/nc-scroll-top.js"], readonly ["nc-select", "./components/nc-select.js"], readonly ["nc-skeleton", "./components/nc-skeleton.js"], readonly ["nc-slider", "./components/nc-slider.js"], readonly ["nc-snackbar", "./components/nc-snackbar.js"], readonly ["nc-splash", "./components/nc-splash.js"], readonly ["nc-step", "./components/nc-stepper.js"], readonly ["nc-stepper", "./components/nc-stepper.js"], readonly ["nc-switch", "./components/nc-switch.js"], readonly ["nc-tab-item", "./components/nc-tab-item.js"], readonly ["nc-table", "./components/nc-table.js"], readonly ["nc-tabs", "./components/nc-tabs.js"], readonly ["nc-tag-input", "./components/nc-tag-input.js"], readonly ["nc-textarea", "./components/nc-textarea.js"], readonly ["nc-time-picker", "./components/nc-time-picker.js"], readonly ["nc-timeline-item", "./components/nc-timeline.js"], readonly ["nc-timeline", "./components/nc-timeline.js"], readonly ["nc-tooltip", "./components/nc-tooltip.js"]];
+export declare function registerBuiltinComponents(): void;

package/dist/components/builtinRegistry.js

@@ -0,0 +1,72 @@
+import { componentRegistry } from '../core/lazyComponents.js';
+export const builtinComponentManifest = [
+    ['loading-spinner', './components/loading-spinner.js'],
+    ['nc-a', './components/nc-a.js'],
+    ['nc-accordion-item', './components/nc-accordion.js'],
+    ['nc-accordion', './components/nc-accordion.js'],
+    ['nc-alert', './components/nc-alert.js'],
+    ['nc-animation', './components/nc-animation.js'],
+    ['nc-autocomplete', './components/nc-autocomplete.js'],
+    ['nc-avatar', './components/nc-avatar.js'],
+    ['nc-avatar-group', './components/nc-avatar-group.js'],
+    ['nc-badge', './components/nc-badge.js'],
+    ['nc-bottom-nav-item', './components/nc-bottom-nav.js'],
+    ['nc-bottom-nav', './components/nc-bottom-nav.js'],
+    ['nc-breadcrumb', './components/nc-breadcrumb.js'],
+    ['nc-button', './components/nc-button.js'],
+    ['nc-card', './components/nc-card.js'],
+    ['nc-checkbox', './components/nc-checkbox.js'],
+    ['nc-chip', './components/nc-chip.js'],
+    ['nc-code', './components/nc-code.js'],
+    ['nc-collapsible', './components/nc-collapsible.js'],
+    ['nc-color-picker', './components/nc-color-picker.js'],
+    ['nc-copy-button', './components/nc-copy-button.js'],
+    ['nc-date-picker', './components/nc-date-picker.js'],
+    ['nc-div', './components/nc-div.js'],
+    ['nc-divider', './components/nc-divider.js'],
+    ['nc-drawer', './components/nc-drawer.js'],
+    ['nc-dropdown', './components/nc-dropdown.js'],
+    ['nc-empty-state', './components/nc-empty-state.js'],
+    ['nc-field', './components/nc-form.js'],
+    ['nc-file-upload', './components/nc-file-upload.js'],
+    ['nc-form', './components/nc-form.js'],
+    ['nc-image', './components/nc-image.js'],
+    ['nc-input', './components/nc-input.js'],
+    ['nc-kbd', './components/nc-kbd.js'],
+    ['nc-menu', './components/nc-menu.js'],
+    ['nc-menu-item', './components/nc-menu-item.js'],
+    ['nc-modal', './components/nc-modal.js'],
+    ['nc-nav-item', './components/nc-nav-item.js'],
+    ['nc-number-input', './components/nc-number-input.js'],
+    ['nc-otp-input', './components/nc-otp-input.js'],
+    ['nc-pagination', './components/nc-pagination.js'],
+    ['nc-popover', './components/nc-popover.js'],
+    ['nc-progress', './components/nc-progress.js'],
+    ['nc-progress-circular', './components/nc-progress-circular.js'],
+    ['nc-radio', './components/nc-radio.js'],
+    ['nc-rating', './components/nc-rating.js'],
+    ['nc-rich-text', './components/nc-rich-text.js'],
+    ['nc-scroll-top', './components/nc-scroll-top.js'],
+    ['nc-select', './components/nc-select.js'],
+    ['nc-skeleton', './components/nc-skeleton.js'],
+    ['nc-slider', './components/nc-slider.js'],
+    ['nc-snackbar', './components/nc-snackbar.js'],
+    ['nc-splash', './components/nc-splash.js'],
+    ['nc-step', './components/nc-stepper.js'],
+    ['nc-stepper', './components/nc-stepper.js'],
+    ['nc-switch', './components/nc-switch.js'],
+    ['nc-tab-item', './components/nc-tab-item.js'],
+    ['nc-table', './components/nc-table.js'],
+    ['nc-tabs', './components/nc-tabs.js'],
+    ['nc-tag-input', './components/nc-tag-input.js'],
+    ['nc-textarea', './components/nc-textarea.js'],
+    ['nc-time-picker', './components/nc-time-picker.js'],
+    ['nc-timeline-item', './components/nc-timeline.js'],
+    ['nc-timeline', './components/nc-timeline.js'],
+    ['nc-tooltip', './components/nc-tooltip.js']
+];
+export function registerBuiltinComponents() {
+    builtinComponentManifest.forEach(([tagName, modulePath]) => {
+        componentRegistry.register(tagName, modulePath);
+    });
+}

package/dist/components/index.d.ts

@@ -0,0 +1,59 @@
+export { LoadingSpinner } from './loading-spinner.js';
+export { NcA } from './nc-a.js';
+export { NcAccordion, NcAccordionItem } from './nc-accordion.js';
+export { NcAlert } from './nc-alert.js';
+export { NcAnimation } from './nc-animation.js';
+export { NcAutocomplete } from './nc-autocomplete.js';
+export { NcAvatar } from './nc-avatar.js';
+export { NcAvatarGroup } from './nc-avatar-group.js';
+export { NcBadge } from './nc-badge.js';
+export { NcBottomNav, NcBottomNavItem } from './nc-bottom-nav.js';
+export { NcBreadcrumb } from './nc-breadcrumb.js';
+export { NcButton } from './nc-button.js';
+export { NcCard } from './nc-card.js';
+export { NcCheckbox } from './nc-checkbox.js';
+export { NcChip } from './nc-chip.js';
+export { NcCode } from './nc-code.js';
+export { NcCollapsible } from './nc-collapsible.js';
+export { NcColorPicker } from './nc-color-picker.js';
+export { NcCopyButton } from './nc-copy-button.js';
+export { NcDatePicker } from './nc-date-picker.js';
+export { NcDiv } from './nc-div.js';
+export { NcDivider } from './nc-divider.js';
+export { NcDrawer } from './nc-drawer.js';
+export { NcDropdown } from './nc-dropdown.js';
+export { NcEmptyState } from './nc-empty-state.js';
+export { NcField, NcForm } from './nc-form.js';
+export { NcFileUpload } from './nc-file-upload.js';
+export { NcImage } from './nc-image.js';
+export { NcInput } from './nc-input.js';
+export { NcKbd } from './nc-kbd.js';
+export { NcMenu } from './nc-menu.js';
+export { NcMenuItem } from './nc-menu-item.js';
+export { NcModal } from './nc-modal.js';
+export { NcNavItem } from './nc-nav-item.js';
+export { NcNumberInput } from './nc-number-input.js';
+export { NcOtpInput } from './nc-otp-input.js';
+export { NcPagination } from './nc-pagination.js';
+export { NcPopover } from './nc-popover.js';
+export { NcProgress } from './nc-progress.js';
+export { NcProgressCircular } from './nc-progress-circular.js';
+export { NcRadio } from './nc-radio.js';
+export { NcRating } from './nc-rating.js';
+export { NcRichText } from './nc-rich-text.js';
+export { NcScrollTop } from './nc-scroll-top.js';
+export { NcSelect } from './nc-select.js';
+export { NcSkeleton } from './nc-skeleton.js';
+export { NcSlider } from './nc-slider.js';
+export { NcSnackbar } from './nc-snackbar.js';
+export { NcSplash } from './nc-splash.js';
+export { NcStep, NcStepper } from './nc-stepper.js';
+export { NcSwitch } from './nc-switch.js';
+export { NcTabItem } from './nc-tab-item.js';
+export { NcTable } from './nc-table.js';
+export { NcTabs } from './nc-tabs.js';
+export { NcTagInput } from './nc-tag-input.js';
+export { NcTextarea } from './nc-textarea.js';
+export { NcTimePicker } from './nc-time-picker.js';
+export { NcTimeline, NcTimelineItem } from './nc-timeline.js';
+export { NcTooltip } from './nc-tooltip.js';

package/dist/components/index.js

@@ -0,0 +1,59 @@
+export { LoadingSpinner } from './loading-spinner.js';
+export { NcA } from './nc-a.js';
+export { NcAccordion, NcAccordionItem } from './nc-accordion.js';
+export { NcAlert } from './nc-alert.js';
+export { NcAnimation } from './nc-animation.js';
+export { NcAutocomplete } from './nc-autocomplete.js';
+export { NcAvatar } from './nc-avatar.js';
+export { NcAvatarGroup } from './nc-avatar-group.js';
+export { NcBadge } from './nc-badge.js';
+export { NcBottomNav, NcBottomNavItem } from './nc-bottom-nav.js';
+export { NcBreadcrumb } from './nc-breadcrumb.js';
+export { NcButton } from './nc-button.js';
+export { NcCard } from './nc-card.js';
+export { NcCheckbox } from './nc-checkbox.js';
+export { NcChip } from './nc-chip.js';
+export { NcCode } from './nc-code.js';
+export { NcCollapsible } from './nc-collapsible.js';
+export { NcColorPicker } from './nc-color-picker.js';
+export { NcCopyButton } from './nc-copy-button.js';
+export { NcDatePicker } from './nc-date-picker.js';
+export { NcDiv } from './nc-div.js';
+export { NcDivider } from './nc-divider.js';
+export { NcDrawer } from './nc-drawer.js';
+export { NcDropdown } from './nc-dropdown.js';
+export { NcEmptyState } from './nc-empty-state.js';
+export { NcField, NcForm } from './nc-form.js';
+export { NcFileUpload } from './nc-file-upload.js';
+export { NcImage } from './nc-image.js';
+export { NcInput } from './nc-input.js';
+export { NcKbd } from './nc-kbd.js';
+export { NcMenu } from './nc-menu.js';
+export { NcMenuItem } from './nc-menu-item.js';
+export { NcModal } from './nc-modal.js';
+export { NcNavItem } from './nc-nav-item.js';
+export { NcNumberInput } from './nc-number-input.js';
+export { NcOtpInput } from './nc-otp-input.js';
+export { NcPagination } from './nc-pagination.js';
+export { NcPopover } from './nc-popover.js';
+export { NcProgress } from './nc-progress.js';
+export { NcProgressCircular } from './nc-progress-circular.js';
+export { NcRadio } from './nc-radio.js';
+export { NcRating } from './nc-rating.js';
+export { NcRichText } from './nc-rich-text.js';
+export { NcScrollTop } from './nc-scroll-top.js';
+export { NcSelect } from './nc-select.js';
+export { NcSkeleton } from './nc-skeleton.js';
+export { NcSlider } from './nc-slider.js';
+export { NcSnackbar } from './nc-snackbar.js';
+export { NcSplash } from './nc-splash.js';
+export { NcStep, NcStepper } from './nc-stepper.js';
+export { NcSwitch } from './nc-switch.js';
+export { NcTabItem } from './nc-tab-item.js';
+export { NcTable } from './nc-table.js';
+export { NcTabs } from './nc-tabs.js';
+export { NcTagInput } from './nc-tag-input.js';
+export { NcTextarea } from './nc-textarea.js';
+export { NcTimePicker } from './nc-time-picker.js';
+export { NcTimeline, NcTimelineItem } from './nc-timeline.js';
+export { NcTooltip } from './nc-tooltip.js';

package/dist/components/loading-spinner.d.ts

@@ -0,0 +1,5 @@
+import { Component } from '../core/component.js';
+export declare class LoadingSpinner extends Component {
+    static get observedAttributes(): string[];
+    template(): string;
+}

package/dist/components/loading-spinner.js

@@ -0,0 +1,48 @@
+import { Component, defineComponent } from '../core/component.js';
+export class LoadingSpinner extends Component {
+    static get observedAttributes() {
+        return ['size', 'message'];
+    }
+    template() {
+        const size = this.attr('size', 'medium');
+        const message = this.attr('message', 'Loading...');
+        const dimension = size === 'small' ? '20px' : size === 'large' ? '40px' : '28px';
+        return `
+            <style>
+                :host {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-family: var(--nc-font-family);
+                }
+                .loading-spinner {
+                    display: inline-flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: 0.75rem;
+                }
+                .spinner {
+                    width: ${dimension};
+                    height: ${dimension};
+                    border-radius: 50%;
+                    border: 3px solid var(--nc-bg-tertiary, #e5e7eb);
+                    border-top-color: var(--nc-primary, #10b981);
+                    animation: nc-spin 0.8s linear infinite;
+                }
+                .loading-message {
+                    margin: 0;
+                    color: var(--nc-text-muted, #6b7280);
+                    font-size: var(--nc-font-size-sm, 0.875rem);
+                }
+                @keyframes nc-spin {
+                    to { transform: rotate(360deg); }
+                }
+            </style>
+            <div class="loading-spinner ${size}">
+                <div class="spinner"></div>
+                ${message ? `<p class="loading-message">${message}</p>` : ''}
+            </div>
+        `;
+    }
+}
+defineComponent('loading-spinner', LoadingSpinner);

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

@@ -0,0 +1,45 @@
+/**
+ * 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 } from '../core/component.js';
+export declare class NcA extends Component {
+    static useShadowDOM: boolean;
+    static attributeOptions: {
+        variant: string[];
+        size: string[];
+    };
+    static get observedAttributes(): string[];
+    private _onClick;
+    template(): string;
+    onMount(): void;
+    onUnmount(): void;
+    attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+}

package/dist/components/nc-a.js

@@ -0,0 +1,290 @@
+/**
+ * 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'];
+    }
+    _onClick = null;
+    template() {
+        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() {
+        this._onClick = (e) => {
+            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() {
+        if (this._onClick) {
+            this.shadowRoot?.removeEventListener('click', this._onClick);
+            this._onClick = null;
+        }
+    }
+    attributeChangedCallback(_name, oldValue, newValue) {
+        if (this._mounted && oldValue !== newValue) {
+            this.render();
+        }
+    }
+}
+defineComponent('nc-a', NcA);

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

@@ -0,0 +1,36 @@
+/**
+ * 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 } from '../core/component.js';
+export declare class NcAccordionItem extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    template(): string;
+    onMount(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export declare class NcAccordion extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    template(): string;
+    onMount(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}