create-nativecore 0.1.1 → 0.2.1

package/template/src/components/core/nc-otp-input.ts

@@ -0,0 +1,235 @@
+/**
+ * NcOtpInput Component — One-time password / verification code input
+ *
+ * Attributes:
+ *   length       — number of boxes (default: 6)
+ *   type         — 'numeric'(default)|'alphanumeric'|'alpha'
+ *   separator    — insert a visual dash/space separator after this position (e.g. "3" for 3+3)
+ *   disabled     — boolean
+ *   masked       — boolean — mask input like a password
+ *   autofocus    — boolean — focus first box on mount
+ *   label        — accessible label
+ *   error        — error message
+ *   hint         — helper text
+ *
+ * Value (read/write via property):
+ *   el.value     — get/set current OTP string
+ *
+ * Events:
+ *   change   — CustomEvent<{ value: string; complete: boolean }>
+ *   complete — CustomEvent<{ value: string }> — fired when all boxes are filled
+ *
+ * Usage:
+ *   <nc-otp-input length="6" type="numeric"></nc-otp-input>
+ */
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcOtpInput extends Component {
+    static useShadowDOM = true;
+
+    private _values: string[] = [];
+
+    static get observedAttributes() { return ['length', 'disabled', 'masked', 'error']; }
+
+    get value(): string { return this._values.join(''); }
+    set value(v: string) {
+        const len = this._length();
+        this._values = v.slice(0, len).split('');
+        while (this._values.length < len) this._values.push('');
+        this.render();
+        this._bindEvents();
+    }
+
+    private _length() { return parseInt(this.getAttribute('length') ?? '6', 10); }
+
+    template() {
+        const len       = this._length();
+        const masked    = this.hasAttribute('masked');
+        const disabled  = this.hasAttribute('disabled');
+        const label     = this.getAttribute('label') ?? '';
+        const error     = this.getAttribute('error') ?? '';
+        const hint      = this.getAttribute('hint') ?? '';
+        const separator = parseInt(this.getAttribute('separator') ?? '0', 10);
+
+        while (this._values.length < len) this._values.push('');
+
+        const boxesHtml = Array.from({ length: len }, (_, i) => {
+            const val = this._values[i] ?? '';
+            const showSep = separator > 0 && i === separator - 1 && i < len - 1;
+            return `
+                <input
+                    class="box"
+                    type="${masked ? 'password' : 'text'}"
+                    inputmode="${masked ? 'text' : 'numeric'}"
+                    maxlength="1"
+                    data-idx="${i}"
+                    value="${val}"
+                    ${disabled ? 'disabled' : ''}
+                    autocomplete="one-time-code"
+                    aria-label="${label ? label + ' ' : ''}digit ${i + 1}"
+                />
+                ${showSep ? '<span class="sep">–</span>' : ''}
+            `;
+        }).join('');
+
+        return `
+            <style>
+                :host { display: block; font-family: var(--nc-font-family); }
+                .wrap    { display: flex; align-items: center; gap: var(--nc-spacing-xs); }
+                .box {
+                    width: 44px;
+                    height: 52px;
+                    text-align: center;
+                    font-size: var(--nc-font-size-xl);
+                    font-weight: var(--nc-font-weight-semibold);
+                    color: var(--nc-text);
+                    background: var(--nc-bg);
+                    border: 2px solid ${error ? 'var(--nc-danger)' : 'var(--nc-border)'};
+                    border-radius: var(--nc-radius-md);
+                    outline: none;
+                    transition: border-color var(--nc-transition-fast), box-shadow var(--nc-transition-fast);
+                    caret-color: transparent;
+                    padding: 0;
+                }
+                .box:focus {
+                    border-color: var(--nc-primary);
+                    box-shadow: 0 0 0 3px rgba(var(--nc-primary-rgb, 99,102,241),.2);
+                }
+                .box:disabled { opacity: 0.5; cursor: not-allowed; }
+                .box.filled   { border-color: var(--nc-primary); background: var(--nc-bg-secondary); }
+                .sep {
+                    color: var(--nc-text-muted);
+                    font-size: var(--nc-font-size-lg);
+                    font-weight: var(--nc-font-weight-medium);
+                    user-select: none;
+                    padding: 0 2px;
+                }
+                .hint  { font-size: var(--nc-font-size-xs); color: var(--nc-text-muted); margin-top: 6px; }
+                .error { font-size: var(--nc-font-size-xs); color: var(--nc-danger);      margin-top: 6px; }
+            </style>
+            <div class="wrap" role="group" aria-label="${label || 'OTP input'}">
+                ${boxesHtml}
+            </div>
+            ${error ? `<p class="error">${error}</p>` : hint ? `<p class="hint">${hint}</p>` : ''}
+        `;
+    }
+
+    onMount() {
+        if (this.hasAttribute('autofocus')) {
+            requestAnimationFrame(() => this._boxAt(0)?.focus());
+        }
+        this._bindEvents();
+        this._applyFilledClass();
+    }
+
+    private _bindEvents() {
+        const boxes = this._boxes();
+        boxes.forEach((box, idx) => {
+            // Remove stale listeners by replacing (simple approach via re-render)
+            box.addEventListener('focus', () => box.select());
+
+            box.addEventListener('input', () => {
+                const type  = this.getAttribute('type') ?? 'numeric';
+                const input = box as HTMLInputElement;
+                let val = input.value;
+                // Filter by type
+                if (type === 'numeric')       val = val.replace(/\D/g, '');
+                if (type === 'alpha')         val = val.replace(/[^a-zA-Z]/g, '');
+                if (type === 'alphanumeric')  val = val.replace(/[^a-zA-Z0-9]/g, '');
+                val = val.slice(-1).toUpperCase();
+                input.value = val;
+                this._values[idx] = val;
+                this._applyFilledClass();
+                this._emitChange();
+                if (val && idx < boxes.length - 1) this._boxAt(idx + 1)?.focus();
+            });
+
+            box.addEventListener('keydown', (e: KeyboardEvent) => {
+                const input = box as HTMLInputElement;
+                if (e.key === 'Backspace') {
+                    if (input.value) {
+                        input.value = '';
+                        this._values[idx] = '';
+                        this._applyFilledClass();
+                        this._emitChange();
+                    } else if (idx > 0) {
+                        this._boxAt(idx - 1)?.focus();
+                    }
+                    e.preventDefault();
+                } else if (e.key === 'ArrowLeft'  && idx > 0)               this._boxAt(idx - 1)?.focus();
+                else if   (e.key === 'ArrowRight' && idx < boxes.length - 1) this._boxAt(idx + 1)?.focus();
+                else if   (e.key === 'Delete') {
+                    input.value = '';
+                    this._values[idx] = '';
+                    this._applyFilledClass();
+                    this._emitChange();
+                    e.preventDefault();
+                }
+            });
+
+            // Handle multi-character paste without blocking the native paste event.
+            box.addEventListener('paste', (e: ClipboardEvent) => {
+                const text = e.clipboardData?.getData('text') ?? '';
+                if (!text) return;
+
+                let filtered = text;
+                const type = this.getAttribute('type') ?? 'numeric';
+                if (type === 'numeric')      filtered = text.replace(/\D/g, '');
+                if (type === 'alpha')        filtered = text.replace(/[^a-zA-Z]/g, '');
+                if (type === 'alphanumeric') filtered = text.replace(/[^a-zA-Z0-9]/g, '');
+
+                requestAnimationFrame(() => {
+                    const chars = filtered.toUpperCase().slice(0, this._length() - idx).split('');
+                    chars.forEach((ch, offset) => {
+                        const targetIndex = idx + offset;
+                        this._values[targetIndex] = ch;
+                        const targetBox = this._boxAt(targetIndex);
+                        if (targetBox) targetBox.value = ch;
+                    });
+
+                    this._applyFilledClass();
+                    this._emitChange();
+
+                    const nextFocus = Math.min(idx + chars.length, boxes.length - 1);
+                    this._boxAt(nextFocus)?.focus();
+                });
+            });
+        });
+    }
+
+    private _applyFilledClass() {
+        this._boxes().forEach((box, i) => {
+            box.classList.toggle('filled', !!(this._values[i]));
+        });
+    }
+
+    private _emitChange() {
+        const value    = this.value;
+        const complete = value.length === this._length() && !value.includes('');
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value, complete }, bubbles: true, composed: true,
+        }));
+        if (complete) {
+            this.dispatchEvent(new CustomEvent('complete', {
+                detail: { value }, bubbles: true, composed: true,
+            }));
+        }
+    }
+
+    private _boxes(): HTMLInputElement[] {
+        return Array.from(this.shadowRoot!.querySelectorAll<HTMLInputElement>('.box'));
+    }
+
+    private _boxAt(i: number): HTMLInputElement | null {
+        return this.shadowRoot!.querySelector<HTMLInputElement>(`.box[data-idx="${i}"]`);
+    }
+
+    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
+        if (oldVal === newVal || !this._mounted) return;
+        this.render();
+        this._bindEvents();
+        this._applyFilledClass();
+    }
+}
+
+defineComponent('nc-otp-input', NcOtpInput);

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

@@ -0,0 +1,178 @@
+/**
+ * NcPagination Component
+ *
+ * Attributes:
+ *   - page: number — current page (1-based, default: 1)
+ *   - total: number — total pages (required)
+ *   - siblings: number — pages shown on each side of current (default: 1)
+ *   - show-first-last: boolean — show First/Last buttons
+ *   - disabled: boolean
+ *   - size: 'sm'|'md'|'lg' (default: 'md')
+ *   - variant: 'default'|'outline' (default: 'default')
+ *
+ * Events:
+ *   - change: CustomEvent<{ page: number }>
+ *
+ * Usage:
+ *   <nc-pagination page="3" total="20"></nc-pagination>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcPagination extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['page', 'total', 'siblings', 'show-first-last', 'disabled', 'size', 'variant'];
+    }
+
+    private _buildPages(current: number, total: number, siblings: number): (number | '...')[] {
+        if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+
+        const left = Math.max(2, current - siblings);
+        const right = Math.min(total - 1, current + siblings);
+        const pages: (number | '...')[] = [1];
+
+        if (left > 2) pages.push('...');
+        for (let i = left; i <= right; i++) pages.push(i);
+        if (right < total - 1) pages.push('...');
+        pages.push(total);
+
+        return pages;
+    }
+
+    template() {
+        const current = Number(this.getAttribute('page') || 1);
+        const total = Number(this.getAttribute('total') || 1);
+        const siblings = Number(this.getAttribute('siblings') ?? 1);
+        const showFirstLast = this.hasAttribute('show-first-last');
+        const disabled = this.hasAttribute('disabled');
+
+        const pages = this._buildPages(current, total, siblings);
+        const atFirst = current <= 1;
+        const atLast = current >= total;
+
+        const navBtn = (dir: string, label: string, dis: boolean) => `
+            <button class="btn btn--nav" data-dir="${dir}" ${dis || disabled ? 'disabled' : ''} aria-label="${label}">
+                ${dir === 'prev' || dir === 'first'
+                    ? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M${dir === 'first' ? '12 3L7 8l5 5M7 3L2 8l5 5' : '10 3L5 8l5 5'}" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+                    : `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M${dir === 'last' ? '4 3l5 5-5 5M9 3l5 5-5 5' : '6 3l5 5-5 5'}" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+                }
+            </button>`;
+
+        return `
+            <style>
+                :host { display: block; font-family: var(--nc-font-family); }
+
+                .pagination {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 4px;
+                    flex-wrap: wrap;
+                    opacity: ${disabled ? '0.5' : '1'};
+                    pointer-events: ${disabled ? 'none' : 'auto'};
+                }
+
+                .btn {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    border: 1px solid var(--nc-border);
+                    background: var(--nc-bg);
+                    color: var(--nc-text);
+                    cursor: pointer;
+                    border-radius: var(--nc-radius-sm, 6px);
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-sm);
+                    transition: background var(--nc-transition-fast), color var(--nc-transition-fast), border-color var(--nc-transition-fast);
+                    min-width: 36px;
+                    height: 36px;
+                    padding: 0 6px;
+                }
+
+                :host([size="sm"]) .btn { min-width: 28px; height: 28px; font-size: var(--nc-font-size-xs); }
+                :host([size="lg"]) .btn { min-width: 44px; height: 44px; font-size: var(--nc-font-size-base); }
+
+                .btn:hover:not(:disabled):not(.btn--active) { background: var(--nc-bg-secondary); border-color: var(--nc-border-dark); }
+                .btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+                .btn--active {
+                    background: var(--nc-primary);
+                    color: #fff;
+                    border-color: var(--nc-primary);
+                    font-weight: var(--nc-font-weight-semibold);
+                    pointer-events: none;
+                }
+
+                :host([variant="outline"]) .btn--active {
+                    background: transparent;
+                    color: var(--nc-primary);
+                }
+
+                .ellipsis {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    min-width: 36px;
+                    height: 36px;
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text-muted);
+                }
+            </style>
+            <nav aria-label="Pagination" class="pagination">
+                ${showFirstLast ? navBtn('first', 'First page', atFirst) : ''}
+                ${navBtn('prev', 'Previous page', atFirst)}
+                ${pages.map(p =>
+                    p === '...'
+                        ? `<span class="ellipsis" aria-hidden="true">...</span>`
+                        : `<button class="btn${p === current ? ' btn--active' : ''}" data-page="${p}" aria-label="Page ${p}" aria-current="${p === current ? 'page' : 'false'}">${p}</button>`
+                ).join('')}
+                ${navBtn('next', 'Next page', atLast)}
+                ${showFirstLast ? navBtn('last', 'Last page', atLast) : ''}
+            </nav>
+        `;
+    }
+
+    onMount() {
+        this._bindEvents();
+    }
+
+    private _bindEvents() {
+        this.$<HTMLElement>('.pagination')!.addEventListener('click', (e) => {
+            const btn = (e.target as HTMLElement).closest<HTMLButtonElement>('button');
+            if (!btn || btn.disabled) return;
+
+            const current = Number(this.getAttribute('page') || 1);
+            const total = Number(this.getAttribute('total') || 1);
+            let next = current;
+
+            if (btn.dataset.page) {
+                next = Number(btn.dataset.page);
+            } else {
+                switch (btn.dataset.dir) {
+                    case 'first': next = 1; break;
+                    case 'prev':  next = Math.max(1, current - 1); break;
+                    case 'next':  next = Math.min(total, current + 1); break;
+                    case 'last':  next = total; break;
+                }
+            }
+
+            if (next !== current) {
+                this.setAttribute('page', String(next));
+                this.dispatchEvent(new CustomEvent('change', {
+                    bubbles: true, composed: true,
+                    detail: { page: next }
+                }));
+            }
+        });
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) {
+            this.render();
+            this._bindEvents();
+        }
+    }
+}
+
+defineComponent('nc-pagination', NcPagination);

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

@@ -0,0 +1,260 @@
+/**
+ * NcPopover Component — floating panel anchored to a trigger element
+ *
+ * More flexible than a dropdown: supports arbitrary slot content,
+ * arrow pointer, multiple placement options, and click/hover triggers.
+ *
+ * Attributes:
+ *   placement — 'top'|'bottom'(default)|'left'|'right'
+ *               + '-start' or '-end' suffix: 'bottom-start'|'top-end' etc.
+ *   trigger   — 'click'(default)|'hover'|'focus'|'manual'
+ *   open      — boolean — controlled open state
+ *   offset    — gap between anchor and popover in px (default: 8)
+ *   arrow     — boolean — show arrow pointer (default: true)
+ *   width     — popover width CSS value (default: 'auto')
+ *   max-width — CSS value (default: '320px')
+ *   close-on-outside — boolean(default true) — close on outside click
+ *   disabled  — boolean
+ *   hover-delay — ms before hover-trigger opens (default: 200)
+ *
+ * Slots:
+ *   trigger  — the anchor element
+ *   (default) — popover content
+ *
+ * Events:
+ *   open  — popover opened
+ *   close — popover closed
+ *
+ * Methods:
+ *   el.show() / el.hide() / el.toggle()
+ *
+ * Usage:
+ *   <nc-popover placement="bottom-start">
+ *     <nc-button slot="trigger">Info</nc-button>
+ *     <div style="padding:12px">
+ *       <p>Popover content here.</p>
+ *     </div>
+ *   </nc-popover>
+ */
+import { Component, defineComponent } from '@core/component.js';
+
+type Placement = 'top'|'top-start'|'top-end'|'bottom'|'bottom-start'|'bottom-end'|'left'|'left-start'|'left-end'|'right'|'right-start'|'right-end';
+
+export class NcPopover extends Component {
+    static useShadowDOM = true;
+
+    private _open       = false;
+    private _hoverTimer: ReturnType<typeof setTimeout> | null = null;
+    private _outside: ((e: MouseEvent) => void) | null = null;
+
+    static get observedAttributes() { return ['open', 'placement', 'disabled']; }
+
+    template() {
+        const open     = this._open;
+        const arrow    = this.getAttribute('arrow') !== 'false';
+        const width    = this.getAttribute('width') ?? 'auto';
+        const maxWidth = this.getAttribute('max-width') ?? '320px';
+
+        return `
+            <style>
+                :host { display: inline-block; position: relative; }
+                .trigger-wrap { display: contents; }
+                .popover {
+                    position: absolute;
+                    z-index: 1000;
+                    background: var(--nc-bg-elevated, var(--nc-bg));
+                    border: 1px solid var(--nc-border);
+                    border-radius: var(--nc-radius-lg);
+                    box-shadow: var(--nc-shadow-lg);
+                    width: ${width};
+                    max-width: ${maxWidth};
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text);
+                    opacity: ${open ? 1 : 0};
+                    pointer-events: ${open ? 'auto' : 'none'};
+                    transform: ${open ? 'scale(1) translateY(0)' : 'scale(0.97) translateY(-4px)'};
+                    transform-origin: top center;
+                    transition:
+                        opacity var(--nc-transition-fast),
+                        transform var(--nc-transition-fast);
+                    white-space: normal;
+                }
+                /* Placement styles applied via JS in _position() */
+                .arrow {
+                    display: ${arrow ? 'block' : 'none'};
+                    position: absolute;
+                    width: 8px;
+                    height: 8px;
+                    background: var(--nc-bg-elevated, var(--nc-bg));
+                    border: 1px solid var(--nc-border);
+                    transform: rotate(45deg);
+                    pointer-events: none;
+                }
+            </style>
+            <div class="trigger-wrap">
+                <slot name="trigger"></slot>
+            </div>
+            <div class="popover" id="popover" role="dialog" aria-modal="false">
+                ${arrow ? '<div class="arrow" id="arrow"></div>' : ''}
+                <slot></slot>
+            </div>
+        `;
+    }
+
+    onMount() {
+        this._bindTrigger();
+        if (this.hasAttribute('open')) { this._open = true; this.render(); }
+        this._position();
+    }
+
+    onUnmount() {
+        this._cleanup();
+    }
+
+    // ── Public API ──────────────────────────────────────────────────────────
+
+    show()   { if (!this._open) { this._open = true;  this.render(); this._position(); this._setupOutside(); this.dispatchEvent(new CustomEvent('open',  { bubbles: true, composed: true })); } }
+    hide()   { if (this._open)  { this._open = false; this.render(); this._cleanupOutside(); this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true })); } }
+    toggle() {
+        if (this._open) this.hide();
+        else this.show();
+    }
+
+    // ── Trigger binding ─────────────────────────────────────────────────────
+
+    private _bindTrigger() {
+        const triggerSlot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="trigger"]');
+        if (!triggerSlot) return;
+
+        const getTrigger = (): HTMLElement | null => {
+            const els = triggerSlot.assignedElements({ flatten: true });
+            return (els[0] as HTMLElement) ?? null;
+        };
+
+        const mode = this.getAttribute('trigger') ?? 'click';
+        const hoverDelay = parseInt(this.getAttribute('hover-delay') ?? '200', 10);
+
+        if (mode === 'click') {
+            triggerSlot.addEventListener('slotchange', () => {
+                const el = getTrigger();
+                if (el) el.addEventListener('click', () => {
+                    if (this.hasAttribute('disabled')) return;
+                    this.toggle();
+                });
+            });
+            // Also handle if already slotted
+            requestAnimationFrame(() => {
+                const el = getTrigger();
+                if (el) el.addEventListener('click', () => {
+                    if (this.hasAttribute('disabled')) return;
+                    this.toggle();
+                });
+            });
+        }
+
+        if (mode === 'hover') {
+            triggerSlot.addEventListener('slotchange', () => {
+                const el = getTrigger();
+                if (!el) return;
+                el.addEventListener('mouseenter', () => {
+                    if (this.hasAttribute('disabled')) return;
+                    this._hoverTimer = setTimeout(() => this.show(), hoverDelay);
+                });
+                el.addEventListener('mouseleave', () => {
+                    if (this._hoverTimer) { clearTimeout(this._hoverTimer); this._hoverTimer = null; }
+                    this.hide();
+                });
+            });
+        }
+
+        if (mode === 'focus') {
+            triggerSlot.addEventListener('slotchange', () => {
+                const el = getTrigger();
+                if (!el) return;
+                el.addEventListener('focusin',  () => { if (!this.hasAttribute('disabled')) this.show(); });
+                el.addEventListener('focusout', () => this.hide());
+            });
+        }
+    }
+
+    // ── Position calculation ────────────────────────────────────────────────
+
+    private _position() {
+        const popover = this.shadowRoot!.querySelector<HTMLElement>('#popover');
+        const arrow   = this.shadowRoot!.querySelector<HTMLElement>('#arrow');
+        if (!popover) return;
+
+        const placement = (this.getAttribute('placement') ?? 'bottom') as Placement;
+        const offset    = parseInt(this.getAttribute('offset') ?? '8', 10);
+        const [side, align = 'center'] = placement.split('-') as [string, string?];
+
+        // Reset
+        ['top','bottom','left','right'].forEach(s => { popover.style[s as any] = ''; });
+
+        const arrowSz = 8;
+        const fullOff = offset + (this.getAttribute('arrow') !== 'false' ? arrowSz / 2 : 0);
+
+        if (side === 'bottom') {
+            popover.style.top = `calc(100% + ${fullOff}px)`;
+            popover.style.transformOrigin = 'top center';
+            if (align === 'start') popover.style.left = '0';
+            else if (align === 'end') popover.style.right = '0';
+            else { popover.style.left = '50%'; popover.style.transform = this._open ? 'translateX(-50%)' : 'translateX(-50%) scale(0.97) translateY(-4px)'; }
+            if (arrow) { arrow!.style.top = `-${arrowSz/2}px`; arrow!.style.left = '16px'; arrow!.style.borderRight = 'none'; arrow!.style.borderBottom = 'none'; }
+        } else if (side === 'top') {
+            popover.style.bottom = `calc(100% + ${fullOff}px)`;
+            popover.style.transformOrigin = 'bottom center';
+            if (align === 'start') popover.style.left = '0';
+            else if (align === 'end') popover.style.right = '0';
+            else { popover.style.left = '50%'; popover.style.transform = this._open ? 'translateX(-50%)' : 'translateX(-50%) scale(0.97) translateY(4px)'; }
+            if (arrow) { arrow!.style.bottom = `-${arrowSz/2}px`; arrow!.style.left = '16px'; arrow!.style.borderLeft = 'none'; arrow!.style.borderTop = 'none'; }
+        } else if (side === 'right') {
+            popover.style.left = `calc(100% + ${fullOff}px)`;
+            popover.style.top = '0';
+            popover.style.transformOrigin = 'left center';
+            if (arrow) { arrow!.style.left = `-${arrowSz/2}px`; arrow!.style.top = '12px'; arrow!.style.borderRight = 'none'; arrow!.style.borderTop = 'none'; }
+        } else { // left
+            popover.style.right = `calc(100% + ${fullOff}px)`;
+            popover.style.top = '0';
+            popover.style.transformOrigin = 'right center';
+            if (arrow) { arrow!.style.right = `-${arrowSz/2}px`; arrow!.style.top = '12px'; arrow!.style.borderLeft = 'none'; arrow!.style.borderBottom = 'none'; }
+        }
+    }
+
+    private _setupOutside() {
+        if (this.getAttribute('close-on-outside') === 'false') return;
+        const handler = (e: MouseEvent) => {
+            if (!this.contains(e.target as Node)) this.hide();
+        };
+        document.addEventListener('mousedown', handler as EventListener);
+        this._outside = handler;
+    }
+
+    private _cleanupOutside() {
+        if (this._outside) {
+            document.removeEventListener('mousedown', this._outside as EventListener);
+            this._outside = null;
+        }
+    }
+
+    private _cleanup() {
+        this._cleanupOutside();
+        if (this._hoverTimer) clearTimeout(this._hoverTimer);
+    }
+
+    attributeChangedCallback(n: string, o: string, v: string) {
+        if (o === v || !this._mounted) return;
+        if (n === 'open') {
+            this._open = this.hasAttribute('open');
+            this.render();
+            if (this._open) { this._position(); this._setupOutside(); }
+            else this._cleanupOutside();
+            return;
+        }
+        this.render();
+        this._position();
+    }
+}
+
+defineComponent('nc-popover', NcPopover);