create-nativecore 0.1.0 → 0.2.0

package/template/src/components/core/nc-bottom-nav.ts

@@ -0,0 +1,214 @@
+/**
+ * NcBottomNav Component — mobile bottom navigation bar
+ *
+ * Container for nc-nav-bottom-item children. Handles active state management.
+ * Designed for mobile viewports but works on all sizes.
+ *
+ * Attributes:
+ *   value      — currently active tab value
+ *   variant    — 'default'|'labeled'|'icon-only' (default: 'labeled')
+ *   elevated   — boolean — add drop shadow / elevated appearance
+ *   bordered   — boolean — top border (default: true)
+ *
+ * Slots:
+ *   (default) — nc-bottom-nav-item elements
+ *
+ * Events:
+ *   change — CustomEvent<{ value: string }> — tab changed
+ *
+ * Usage:
+ *   <nc-bottom-nav value="home">
+ *     <nc-bottom-nav-item value="home"   icon="home"   label="Home"></nc-bottom-nav-item>
+ *     <nc-bottom-nav-item value="search" icon="search" label="Search"></nc-bottom-nav-item>
+ *     <nc-bottom-nav-item value="inbox"  icon="inbox"  label="Inbox" badge="3"></nc-bottom-nav-item>
+ *     <nc-bottom-nav-item value="me"     icon="users"  label="Me"></nc-bottom-nav-item>
+ *   </nc-bottom-nav>
+ */
+
+/**
+ * NcBottomNavItem Component — individual tab in a bottom nav bar
+ *
+ * Attributes:
+ *   value    — unique identifier for this tab
+ *   label    — tab label text
+ *   icon     — icon name (same set as nc-nav-item)
+ *   badge    — numeric badge count
+ *   disabled — boolean
+ *   active   — boolean (managed by parent nc-bottom-nav)
+ */
+import { Component, defineComponent } from '@core/component.js';
+
+// Shared icon paths with nc-nav-item
+const NAV_ICONS: Record<string, string> = {
+    home:      `<path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1H14v-5h-4v5H4a1 1 0 0 1-1-1V9.5z"/>`,
+    search:    `<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>`,
+    inbox:     `<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>`,
+    users:     `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+    heart:     `<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>`,
+    bookmark:  `<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>`,
+    settings:  `<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>`,
+    chart:     `<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>`,
+    bell:      `<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>`,
+};
+const svgWrap = (p: string) =>
+    `<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${p}</svg>`;
+
+// ── NcBottomNavItem ───────────────────────────────────────────────────────────
+
+export class NcBottomNavItem extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() { return ['active', 'badge', 'disabled']; }
+
+    template() {
+        const value    = this.getAttribute('value') ?? '';
+        const label    = this.getAttribute('label') ?? '';
+        const iconName = this.getAttribute('icon') ?? '';
+        const active   = this.hasAttribute('active');
+        const disabled = this.hasAttribute('disabled');
+        const badge    = this.getAttribute('badge') ?? '';
+        const iconOnly = this.closest('nc-bottom-nav')?.getAttribute('variant') === 'icon-only';
+
+        const iconHtml = NAV_ICONS[iconName] ? svgWrap(NAV_ICONS[iconName]) : '';
+
+        return `
+            <style>
+                :host { display: flex; flex: 1; }
+                button {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 2px;
+                    flex: 1;
+                    padding: 6px 4px 8px;
+                    background: none;
+                    border: none;
+                    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+                    opacity: ${disabled ? 0.4 : 1};
+                    font-family: var(--nc-font-family);
+                    font-size: 10px;
+                    font-weight: var(--nc-font-weight-medium);
+                    color: ${active ? 'var(--nc-primary)' : 'var(--nc-text-muted)'};
+                    outline: none;
+                    transition: color var(--nc-transition-fast);
+                    position: relative;
+                    min-width: 48px;
+                    user-select: none;
+                }
+                button:focus-visible { color: var(--nc-primary); }
+                .icon-wrap {
+                    position: relative;
+                    display: flex;
+                }
+                .icon-wrap svg {
+                    transition: transform var(--nc-transition-fast);
+                    ${active ? 'transform: translateY(-1px) scale(1.05);' : ''}
+                }
+                .badge {
+                    position: absolute;
+                    top: -5px;
+                    right: -8px;
+                    background: var(--nc-danger);
+                    color: #fff;
+                    font-size: 9px;
+                    font-weight: 700;
+                    min-width: 16px;
+                    height: 16px;
+                    border-radius: 99px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 0 4px;
+                    line-height: 1;
+                    border: 1.5px solid var(--nc-bg-elevated, #fff);
+                }
+            </style>
+            <button type="button" ${disabled ? 'disabled' : ''} aria-label="${label}" aria-current="${active ? 'page' : 'false'}" data-value="${value}">
+                <span class="icon-wrap">
+                    ${iconHtml}
+                    <slot name="icon"></slot>
+                    ${badge ? `<span class="badge">${badge}</span>` : ''}
+                </span>
+                ${!iconOnly && label ? `<span>${label}</span>` : ''}
+            </button>
+        `;
+    }
+
+    onMount() {
+        this.shadowRoot!.addEventListener('click', () => {
+            if (this.hasAttribute('disabled')) return;
+            this.dispatchEvent(new CustomEvent('_item-click', {
+                detail: { value: this.getAttribute('value') },
+                bubbles: true, composed: true,
+            }));
+        });
+    }
+
+    attributeChangedCallback(n: string, o: string, v: string) {
+        if (o !== v && this._mounted) this.render();
+    }
+}
+
+defineComponent('nc-bottom-nav-item', NcBottomNavItem);
+
+// ── NcBottomNav ───────────────────────────────────────────────────────────────
+
+export class NcBottomNav extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() { return ['value']; }
+
+    template() {
+        const elevated = this.hasAttribute('elevated');
+        const bordered = !this.hasAttribute('no-border');
+
+        return `
+            <style>
+                :host { display: block; }
+                nav {
+                    display: flex;
+                    align-items: stretch;
+                    background: var(--nc-bg-elevated, var(--nc-bg));
+                    ${bordered ? 'border-top: 1px solid var(--nc-border);' : ''}
+                    ${elevated ? 'box-shadow: 0 -2px 12px rgba(0,0,0,.08);' : ''}
+                    safe-area-inset-bottom: env(safe-area-inset-bottom);
+                    padding-bottom: env(safe-area-inset-bottom);
+                }
+            </style>
+            <nav role="navigation" aria-label="Bottom navigation">
+                <slot></slot>
+            </nav>
+        `;
+    }
+
+    onMount() {
+        this.addEventListener('_item-click', (e: Event) => {
+            const ce = e as CustomEvent<{ value: string }>;
+            const newValue = ce.detail.value;
+            this._setActive(newValue);
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: { value: newValue }, bubbles: true, composed: true,
+            }));
+        });
+
+        // Set initial active state
+        const initial = this.getAttribute('value');
+        if (initial) this._setActive(initial);
+    }
+
+    private _setActive(value: string) {
+        this.setAttribute('value', value);
+        const items = this.querySelectorAll<HTMLElement>('nc-bottom-nav-item');
+        items.forEach(item => {
+            if (item.getAttribute('value') === value) item.setAttribute('active', '');
+            else item.removeAttribute('active');
+        });
+    }
+
+    attributeChangedCallback(n: string, o: string, v: string) {
+        if (n === 'value' && o !== v && this._mounted) this._setActive(v);
+    }
+}
+
+defineComponent('nc-bottom-nav', NcBottomNav);

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

@@ -0,0 +1,96 @@
+/**
+ * NcBreadcrumb Component
+ *
+ * Attributes:
+ *   - separator: string — separator character/text (default: '/')
+ *
+ * Usage — place nc-a or plain <a> children inside:
+ *   <nc-breadcrumb>
+ *     <nc-a href="/">Home</nc-a>
+ *     <nc-a href="/settings">Settings</nc-a>
+ *     <span>Profile</span>
+ *   </nc-breadcrumb>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcBreadcrumb extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() { return ['separator']; }
+
+    template() {
+        return `
+            <style>
+                :host { display: block; font-family: var(--nc-font-family); }
+
+                nav { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
+
+                .sep {
+                    color: var(--nc-text-muted);
+                    font-size: var(--nc-font-size-sm);
+                    padding: 0 4px;
+                    user-select: none;
+                }
+
+                ::slotted(*) {
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text-muted);
+                    text-decoration: none;
+                    white-space: nowrap;
+                }
+
+                ::slotted(*:last-child) {
+                    color: var(--nc-text);
+                    font-weight: var(--nc-font-weight-medium);
+                    pointer-events: none;
+                }
+
+                ::slotted(*:not(:last-child):hover) {
+                    color: var(--nc-primary);
+                }
+            </style>
+            <nav aria-label="Breadcrumb">
+                <slot></slot>
+            </nav>
+        `;
+    }
+
+    onMount() {
+        this._insertSeparators();
+        // Re-apply when children change
+        const observer = new MutationObserver(() => this._insertSeparators());
+        observer.observe(this, { childList: true });
+        (this as any)._breadcrumbObserver = observer;
+    }
+
+    onUnmount() {
+        (this as any)._breadcrumbObserver?.disconnect();
+    }
+
+    private _insertSeparators() {
+        const sep = this.getAttribute('separator') || '/';
+        const existing = Array.from(this.querySelectorAll('.nc-breadcrumb-sep'));
+        existing.forEach(s => s.remove());
+
+        const children = Array.from(this.children).filter(
+            el => !el.classList.contains('nc-breadcrumb-sep')
+        );
+
+        children.slice(0, -1).forEach(child => {
+            const span = document.createElement('span');
+            span.className = 'nc-breadcrumb-sep';
+            span.setAttribute('aria-hidden', 'true');
+            span.textContent = sep;
+            child.after(span);
+        });
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) {
+            this._insertSeparators();
+        }
+    }
+}
+
+defineComponent('nc-breadcrumb', NcBreadcrumb);

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

@@ -0,0 +1,307 @@
+/**
+ * NativeCore Button Component
+ * 
+ * Framework core component using Shadow DOM and --nc- variables.
+ * 
+ * Attributes:
+ *   - variant: 'primary' | 'secondary' | 'tertiary' | 'success' | 'danger' | 'outline' (default: 'primary')
+ *   - size: 'sm' | 'md' | 'lg' (default: 'md')
+ *   - icon: URL to icon/image (optional, e.g., '/icons/delete.svg' or 'assets/logo.png')
+ *   - icon-position: 'left' | 'right' | 'top' | 'bottom' (default: 'left')
+ *   - alt: Alt text for icon (optional, for accessibility)
+ *   - disabled: boolean
+ *   - loading: boolean
+ *   - full-width: boolean
+ * 
+ * Usage:
+ *   
+ *   
+ *   
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcButton extends Component {
+    static useShadowDOM = true;
+    
+    // Dev tools will auto-detect these dropdown options
+    static attributeOptions = {
+        variant: ['primary', 'secondary', 'tertiary', 'success', 'danger', 'outline'],
+        size: ['sm', 'md', 'lg'],
+        'icon-position': ['left', 'right', 'top', 'bottom']
+    };
+    
+    // Add placeholders for text inputs in dev tools
+    static attributePlaceholders = {
+        icon: '/icons/my-icon.svg or assets/image.png',
+        alt: 'Icon description for accessibility'
+    };
+    
+    static get observedAttributes() {
+        return ['variant', 'size', 'icon', 'icon-position', 'alt', 'disabled', 'loading', 'full-width'];
+    }
+    
+    constructor() {
+        super();
+    }
+    
+    template() {
+        const icon = this.getAttribute('icon');
+        const iconPosition = this.getAttribute('icon-position') || 'left';
+        const alt = this.getAttribute('alt') || '';
+        const disabled = this.hasAttribute('disabled');
+        const loading = this.hasAttribute('loading');
+        const fullWidth = this.hasAttribute('full-width');
+        
+        const iconHTML = icon ? `<img class="nc-button-icon" src="${icon}" alt="${alt}" />` : '';
+        
+        return`
+            <style>
+                :host {
+                    display: ${fullWidth ? 'block' : 'inline-flex'};
+                    align-items: center;
+                    justify-content: center;
+                    gap: var(--nc-spacing-sm);
+                    font-family: var(--nc-font-family);
+                    font-weight: var(--nc-font-weight-semibold);
+                    border: none;
+                    border-radius: var(--nc-button-radius);
+                    cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};
+                    transition: all var(--nc-transition-fast);
+                    text-decoration: none;
+                    outline: none;
+                    position: relative;
+                    overflow: ${loading ? 'visible' : 'hidden'};
+                    user-select: none;
+                    box-sizing: border-box !important;
+                    margin: 0 !important;
+                    flex-direction: ${iconPosition === 'top' ? 'column' : iconPosition === 'bottom' ? 'column-reverse' : iconPosition === 'right' ? 'row-reverse' : 'row'};
+                    
+                    /* Default size (md) */
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-xl) !important;
+                    font-size: var(--nc-font-size-base);
+                    min-height: 40px;
+                    
+                    /* Default variant (primary) */
+                    background: var(--nc-gradient-primary);
+                    color: var(--nc-white);
+                }
+                
+                .nc-button-icon {
+                    width: 1.2em;
+                    height: 1.2em;
+                    object-fit: contain;
+                    flex-shrink: 0;
+                }
+                
+                :host(:focus-visible) {
+                    outline: 2px solid var(--nc-primary);
+                    outline-offset: 2px;
+                }
+                
+                /* Size Variants */
+                :host([size="sm"]) {
+                    padding: var(--nc-spacing-xs) var(--nc-spacing-lg) !important;
+                    font-size: var(--nc-font-size-sm);
+                    min-height: 32px;
+                }
+                
+                :host([size="md"]) {
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-xl) !important;
+                    font-size: var(--nc-font-size-base);
+                    min-height: 40px;
+                }
+                
+                :host([size="lg"]) {
+                    padding: var(--nc-spacing-md) var(--nc-spacing-2xl) !important;
+                    font-size: var(--nc-font-size-lg);
+                    min-height: 48px;
+                }
+                
+                /* Variant: Primary */
+                :host([variant="primary"]) {
+                    background: #10b981;
+                    color: white;
+                    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
+                }
+                
+                :host([variant="primary"]:hover:not([disabled]):not([loading])) {
+                    transform: translateY(-1px);
+                    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
+                    background: #059669;
+                }
+                
+                :host([variant="primary"]:active:not([disabled]):not([loading])) {
+                    transform: translateY(0);
+                }
+                
+                /* Variant: Secondary */
+                :host([variant="secondary"]) {
+                    background: var(--nc-gray-200);
+                    color: var(--nc-text);
+                    border: none;
+                }
+                
+                :host([variant="secondary"]:hover:not([disabled]):not([loading])) {
+                    background: var(--nc-gray-300);
+                    transform: translateY(-1px);
+                }
+                
+                /* Variant: Success */
+                :host([variant="success"]) {
+                    background: var(--nc-gradient-success);
+                    color: var(--nc-white);
+                }
+                
+                :host([variant="success"]:hover:not([disabled]):not([loading])) {
+                    transform: translateY(-2px);
+                    box-shadow: var(--nc-shadow-success);
+                }
+                
+                :host([variant="success"]:active:not([disabled]):not([loading])) {
+                    transform: translateY(0);
+                }
+                
+                /* Variant: Danger */
+                :host([variant="danger"]) {
+                    background: var(--nc-gradient-danger);
+                    color: var(--nc-white);
+                }
+                
+                :host([variant="danger"]:hover:not([disabled]):not([loading])) {
+                    transform: translateY(-2px);
+                    box-shadow: var(--nc-shadow-danger);
+                }
+                
+                :host([variant="danger"]:active:not([disabled]):not([loading])) {
+                    transform: translateY(0);
+                }
+                
+                /* Variant: Tertiary (dark) */
+                :host([variant="tertiary"]) {
+                    background: var(--nc-gray-900);
+                    color: var(--nc-white);
+                }
+                
+                :host([variant="tertiary"]:hover:not([disabled]):not([loading])) {
+                    background: var(--nc-gray-800);
+                    transform: translateY(-2px);
+                }
+                
+                :host([variant="tertiary"]:active:not([disabled]):not([loading])) {
+                    transform: translateY(0);
+                }
+                
+                /* Variant: Outline */
+                :host([variant="outline"]) {
+                    background: transparent;
+                    color: var(--nc-primary);
+                    border: 2px solid var(--nc-primary);
+                }
+                
+                :host([variant="outline"]:hover:not([disabled]):not([loading])) {
+                    background: var(--nc-primary);
+                    color: var(--nc-white);
+                }
+                
+                /* Full Width */
+                :host([full-width]) {
+                    width: 100%;
+                }
+                
+                /* Disabled State */
+                :host([disabled]) {
+                    opacity: 0.5;
+                    pointer-events: none;
+                }
+                
+                /* Loading State */
+                :host([loading]) {
+                    pointer-events: none;
+                    position: relative;
+                }
+                
+                :host([loading])::after {
+                    content: '';
+                    position: absolute;
+                    width: 16px;
+                    height: 16px;
+                    border: 2px solid currentColor;
+                    border-top-color: transparent;
+                    border-radius: 50%;
+                    animation: spin 0.6s linear infinite;
+                    margin-left: var(--nc-spacing-sm);
+                }
+                
+                @keyframes spin {
+                    to { transform: rotate(360deg); }
+                }
+                
+                /* Ripple Effect */
+                :host::before {
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    width: 0;
+                    height: 0;
+                    border-radius: 50%;
+                    background: rgba(255, 255, 255, 0.5);
+                    transform: translate(-50%, -50%);
+                    transition: width 0.6s, height 0.6s;
+                }
+                
+                :host(:active:not([disabled]):not([loading]))::before {
+                    width: 300px;
+                    height: 300px;
+                    opacity: 0;
+                }
+                
+                /* Anchor tags inside button */
+                ::slotted(a) {
+                    color: white;
+                    text-decoration: none;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+            </style>
+            ${iconHTML}
+            <slot></slot>
+        `;
+    }
+    
+    onMount() {
+        // Set button role and tab index for accessibility
+        this.setAttribute('role', 'button');
+        if (!this.hasAttribute('tabindex')) {
+            this.setAttribute('tabindex', '0');
+        }
+        
+        // Handle keyboard navigation (Enter and Space)
+        this.addEventListener('keydown', (e) => {
+            if ((e.key === 'Enter' || e.key === ' ') && 
+                !this.hasAttribute('disabled') && 
+                !this.hasAttribute('loading')) {
+                e.preventDefault();
+                this.click();
+            }
+        });
+        
+        // Handle click - prevent when disabled/loading
+        this.addEventListener('click', (e) => {
+            if (this.hasAttribute('disabled') || this.hasAttribute('loading')) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        });
+    }
+    
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue) {
+            this.render();
+        }
+    }
+}
+
+defineComponent('nc-button', NcButton);