nativecorejs 0.1.0

package/dist/components/nc-popover.js

@@ -0,0 +1,301 @@
+/**
+ * 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';
+export class NcPopover extends Component {
+    static useShadowDOM = true;
+    _open = false;
+    _hoverTimer = null;
+    _outside = 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 ─────────────────────────────────────────────────────
+    _bindTrigger() {
+        const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
+        if (!triggerSlot)
+            return;
+        const getTrigger = () => {
+            const els = triggerSlot.assignedElements({ flatten: true });
+            return els[0] ?? 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 ────────────────────────────────────────────────
+    _position() {
+        const popover = this.shadowRoot.querySelector('#popover');
+        const arrow = this.shadowRoot.querySelector('#arrow');
+        if (!popover)
+            return;
+        const placement = (this.getAttribute('placement') ?? 'bottom');
+        const offset = parseInt(this.getAttribute('offset') ?? '8', 10);
+        const [side, align = 'center'] = placement.split('-');
+        // Reset
+        ['top', 'bottom', 'left', 'right'].forEach(s => { popover.style[s] = ''; });
+        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';
+            }
+        }
+    }
+    _setupOutside() {
+        if (this.getAttribute('close-on-outside') === 'false')
+            return;
+        const handler = (e) => {
+            if (!this.contains(e.target))
+                this.hide();
+        };
+        document.addEventListener('mousedown', handler);
+        this._outside = handler;
+    }
+    _cleanupOutside() {
+        if (this._outside) {
+            document.removeEventListener('mousedown', this._outside);
+            this._outside = null;
+        }
+    }
+    _cleanup() {
+        this._cleanupOutside();
+        if (this._hoverTimer)
+            clearTimeout(this._hoverTimer);
+    }
+    attributeChangedCallback(n, o, v) {
+        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);

package/dist/components/nc-progress-circular.d.ts

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

package/dist/components/nc-progress-circular.js

@@ -0,0 +1,67 @@
+import { Component, defineComponent } from '../core/component.js';
+const VARIANT_COLORS = {
+    primary: 'var(--nc-primary, #10b981)',
+    success: 'var(--nc-success, #10b981)',
+    warning: 'var(--nc-warning, #f59e0b)',
+    danger: 'var(--nc-danger, #ef4444)',
+    neutral: 'var(--nc-text-muted, #6b7280)'
+};
+export class NcProgressCircular extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['value', 'max', 'size', 'thickness', 'variant', 'show-value', 'indeterminate', 'label'];
+    }
+    template() {
+        const max = Number(this.getAttribute('max') || 100);
+        const value = Math.min(max, Math.max(0, Number(this.getAttribute('value') || 0)));
+        const pct = max > 0 ? Math.round((value / max) * 100) : 0;
+        const sizeAttr = this.getAttribute('size') || '48';
+        const size = Number(sizeAttr) || 48;
+        const thickness = Number(this.getAttribute('thickness') || 4);
+        const variant = this.getAttribute('variant') || 'primary';
+        const showValue = this.hasAttribute('show-value');
+        const indeterminate = this.hasAttribute('indeterminate');
+        const label = this.getAttribute('label') || (indeterminate ? 'Loading' : `${pct}%`);
+        const color = VARIANT_COLORS[variant] ?? VARIANT_COLORS.primary;
+        const radius = (size - thickness) / 2;
+        const circumference = 2 * Math.PI * radius;
+        const dashOffset = indeterminate ? circumference * 0.25 : circumference * (1 - pct / 100);
+        const centerX = size / 2;
+        const centerY = size / 2;
+        const fontSize = Math.max(10, Math.round(size * 0.22));
+        return `
+            <style>
+                :host { display: inline-flex; align-items: center; justify-content: center; }
+                svg { display: block; }
+                .track { fill: none; stroke: var(--nc-bg-tertiary, #e5e7eb); }
+                .fill { fill: none; stroke: ${color}; stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; }
+                ${indeterminate ? `
+                @keyframes nc-spin {
+                    from { transform: rotate(0deg); }
+                    to { transform: rotate(360deg); }
+                }
+                svg { animation: nc-spin 1s linear infinite; transform-origin: center; }
+                .fill { stroke-dashoffset: ${dashOffset}; }
+                ` : ''}
+                .label {
+                    font-family: var(--nc-font-family);
+                    font-size: ${fontSize}px;
+                    font-weight: var(--nc-font-weight-semibold, 600);
+                    fill: var(--nc-text, #111827);
+                    dominant-baseline: central;
+                    text-anchor: middle;
+                }
+            </style>
+            <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" role="progressbar" aria-label="${label}" aria-valuenow="${indeterminate ? '' : value}" aria-valuemin="0" aria-valuemax="${max}">
+                <circle class="track" cx="${centerX}" cy="${centerY}" r="${radius}" stroke-width="${thickness}" />
+                <circle class="fill" cx="${centerX}" cy="${centerY}" r="${radius}" stroke-width="${thickness}" stroke-dasharray="${circumference}" stroke-dashoffset="${dashOffset}" transform="rotate(-90 ${centerX} ${centerY})" />
+                ${showValue && !indeterminate ? `<text class="label" x="${centerX}" y="${centerY}">${pct}%</text>` : ''}
+            </svg>
+        `;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted)
+            this.render();
+    }
+}
+defineComponent('nc-progress-circular', NcProgressCircular);

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

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

package/dist/components/nc-progress.js

@@ -0,0 +1,109 @@
+import { Component, defineComponent } from '../core/component.js';
+export class NcProgress extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['value', 'max', 'variant', 'size', 'label', 'show-value', 'indeterminate', 'striped', 'animated'];
+    }
+    template() {
+        const max = Number(this.getAttribute('max') || 100);
+        const value = Math.min(max, Math.max(0, Number(this.getAttribute('value') || 0)));
+        const percentage = max > 0 ? Math.round((value / max) * 100) : 0;
+        const variant = this.getAttribute('variant') || 'primary';
+        const showValue = this.hasAttribute('show-value');
+        const indeterminate = this.hasAttribute('indeterminate');
+        const striped = this.hasAttribute('striped');
+        const animated = this.hasAttribute('animated');
+        const label = this.getAttribute('label') || `${percentage}%`;
+        return `
+            <style>
+                :host { display: block; width: 100%; font-family: var(--nc-font-family); }
+
+                .wrap { display: flex; align-items: center; gap: var(--nc-spacing-sm, 0.5rem); }
+
+                .track {
+                    flex: 1;
+                    background: var(--nc-bg-tertiary, #e5e7eb);
+                    border-radius: 999px;
+                    overflow: hidden;
+                    position: relative;
+                }
+
+                :host([size="xs"]) .track { height: 4px; }
+                :host([size="sm"]) .track,
+                :host .track { height: 6px; }
+                :host([size="md"]) .track { height: 10px; }
+                :host([size="lg"]) .track { height: 16px; }
+
+                .bar {
+                    height: 100%;
+                    border-radius: 999px;
+                    transition: width 0.4s ease;
+                    width: ${indeterminate ? '40%' : `${percentage}%`};
+                }
+
+                .bar--primary { background: var(--nc-primary, #10b981); }
+                .bar--success { background: var(--nc-success, #10b981); }
+                .bar--warning { background: var(--nc-warning, #f59e0b); }
+                .bar--danger { background: var(--nc-danger, #ef4444); }
+                .bar--neutral { background: var(--nc-text-muted, #6b7280); }
+
+                ${striped ? `
+                .bar {
+                    background-image: linear-gradient(
+                        45deg,
+                        rgba(255,255,255,.15) 25%,
+                        transparent 25%,
+                        transparent 50%,
+                        rgba(255,255,255,.15) 50%,
+                        rgba(255,255,255,.15) 75%,
+                        transparent 75%,
+                        transparent
+                    );
+                    background-size: 1rem 1rem;
+                }` : ''}
+
+                ${animated ? `
+                @keyframes nc-progress-stripes {
+                    from { background-position: 1rem 0; }
+                    to { background-position: 0 0; }
+                }
+                .bar { animation: nc-progress-stripes 1s linear infinite; }` : ''}
+
+                ${indeterminate ? `
+                @keyframes nc-indeterminate {
+                    0% { left: -40%; }
+                    100% { left: 100%; }
+                }
+                .bar {
+                    position: absolute;
+                    animation: nc-indeterminate 1.4s ease infinite;
+                }` : ''}
+
+                .value-label {
+                    font-size: var(--nc-font-size-xs, 0.75rem);
+                    color: var(--nc-text-muted, #6b7280);
+                    min-width: 2.8ch;
+                    text-align: right;
+                }
+            </style>
+            <div class="wrap">
+                <div
+                    class="track"
+                    role="progressbar"
+                    aria-label="${label}"
+                    aria-valuenow="${indeterminate ? '' : value}"
+                    aria-valuemin="0"
+                    aria-valuemax="${max}"
+                >
+                    <div class="bar bar--${variant}"></div>
+                </div>
+                ${showValue && !indeterminate ? `<span class="value-label">${percentage}%</span>` : ''}
+            </div>
+        `;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted)
+            this.render();
+    }
+}
+defineComponent('nc-progress', NcProgress);

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

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

package/dist/components/nc-radio.js

@@ -0,0 +1,169 @@
+import { Component, defineComponent } from '../core/component.js';
+export class NcRadio extends Component {
+    static useShadowDOM = true;
+    static attributeOptions = {
+        variant: ['primary', 'success', 'danger'],
+        size: ['sm', 'md', 'lg']
+    };
+    static get observedAttributes() {
+        return ['label', 'name', 'value', 'checked', 'disabled', 'size', 'variant'];
+    }
+    template() {
+        const label = this.getAttribute('label') || '';
+        const size = this.getAttribute('size') || 'md';
+        const checked = this.hasAttribute('checked');
+        const disabled = this.hasAttribute('disabled');
+        const dotSize = size === 'sm' ? '6px' : size === 'lg' ? '10px' : '8px';
+        const boxSize = size === 'sm' ? '16px' : size === 'lg' ? '24px' : '20px';
+        return `
+            <style>
+                :host {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: var(--nc-spacing-sm, 0.5rem);
+                    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+                    user-select: none;
+                    font-family: var(--nc-font-family);
+                    opacity: ${disabled ? '0.5' : '1'};
+                }
+                .radio-wrapper {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: var(--nc-spacing-sm, 0.5rem);
+                }
+                input[type="radio"] {
+                    position: absolute;
+                    opacity: 0;
+                    width: 0;
+                    height: 0;
+                    pointer-events: none;
+                }
+                .ring {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-shrink: 0;
+                    width: ${boxSize};
+                    height: ${boxSize};
+                    border-radius: var(--nc-radius-full, 9999px);
+                    border: 2px solid var(--nc-border-dark, #9ca3af);
+                    background: var(--nc-bg, #ffffff);
+                    transition: all var(--nc-transition-fast, 160ms ease);
+                    box-sizing: border-box;
+                    position: relative;
+                }
+                .dot {
+                    width: ${dotSize};
+                    height: ${dotSize};
+                    border-radius: var(--nc-radius-full, 9999px);
+                    background: var(--nc-white, #ffffff);
+                    opacity: 0;
+                    transform: scale(0);
+                    transition: all var(--nc-transition-fast, 160ms ease);
+                }
+                :host([checked]) .ring {
+                    border-color: var(--nc-primary, #10b981);
+                    background: var(--nc-primary, #10b981);
+                }
+                :host([checked]) .dot {
+                    opacity: 1;
+                    transform: scale(1);
+                }
+                :host([variant="success"][checked]) .ring {
+                    border-color: var(--nc-success, #10b981);
+                    background: var(--nc-success, #10b981);
+                }
+                :host([variant="danger"][checked]) .ring {
+                    border-color: var(--nc-danger, #ef4444);
+                    background: var(--nc-danger, #ef4444);
+                }
+                :host(:not([disabled])) .ring:hover {
+                    border-color: var(--nc-primary, #10b981);
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+                :host([variant="success"]:not([disabled])) .ring:hover {
+                    border-color: var(--nc-success, #10b981);
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+                :host([variant="danger"]:not([disabled])) .ring:hover {
+                    border-color: var(--nc-danger, #ef4444);
+                    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+                }
+                :host(:focus-visible) .ring {
+                    outline: 2px solid var(--nc-primary, #10b981);
+                    outline-offset: 2px;
+                }
+                .label {
+                    font-size: var(--nc-font-size-base, 1rem);
+                    color: var(--nc-text, #111827);
+                    line-height: var(--nc-line-height-normal, 1.5);
+                }
+                :host([size="sm"]) .label {
+                    font-size: var(--nc-font-size-sm, 0.875rem);
+                }
+                :host([size="lg"]) .label {
+                    font-size: var(--nc-font-size-lg, 1.125rem);
+                }
+            </style>
+
+            <label class="radio-wrapper">
+                <input type="radio" ${checked ? 'checked' : ''} ${disabled ? 'disabled' : ''} name="${this.getAttribute('name') || ''}" value="${this.getAttribute('value') || ''}" />
+                <span class="ring"><span class="dot"></span></span>
+                ${label ? `<span class="label">${label}</span>` : '<slot></slot>'}
+            </label>
+        `;
+    }
+    onMount() {
+        if (!this.hasAttribute('tabindex')) {
+            this.setAttribute('tabindex', '0');
+        }
+        this.setAttribute('role', 'radio');
+        this.setAttribute('aria-checked', String(this.hasAttribute('checked')));
+        this.shadowRoot?.addEventListener('click', () => {
+            if (this.hasAttribute('disabled'))
+                return;
+            this.select();
+        });
+        this.addEventListener('keydown', (event) => {
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+                if (!this.hasAttribute('disabled'))
+                    this.select();
+            }
+        });
+    }
+    select() {
+        if (this.hasAttribute('checked'))
+            return;
+        const name = this.getAttribute('name');
+        if (name) {
+            const root = this.getRootNode();
+            const siblings = Array.from(root.querySelectorAll(`nc-radio[name="${name}"]`));
+            siblings.forEach(sibling => {
+                if (sibling !== this) {
+                    sibling.removeAttribute('checked');
+                    sibling.setAttribute('aria-checked', 'false');
+                }
+            });
+        }
+        this.setAttribute('checked', '');
+        this.setAttribute('aria-checked', 'true');
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.getAttribute('value') || '',
+                name: this.getAttribute('name') || ''
+            }
+        }));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.render();
+            if (name === 'checked') {
+                this.setAttribute('aria-checked', String(this.hasAttribute('checked')));
+            }
+        }
+    }
+}
+defineComponent('nc-radio', NcRadio);