@yugnex/nexui 2.0.0

package/dist/primitives/progress.js

@@ -0,0 +1,105 @@
+// @yugnex/nexui — NexProgress Web Component
+// Linear and circular progress indicators.
+// Attributes:
+//   value:    0-100 (default 0). Omit for indeterminate.
+//   variant:  linear | circular (default: linear)
+//   size:     sm | md | lg
+//   color:    accent | live | success | error | warning (default: accent)
+//   label:    string — accessible label
+//   show-value: boolean — renders the percentage text
+import { nexui_compiler } from "../core/compiler";
+export class NexProgress extends HTMLElement {
+    static get observedAttributes() {
+        return ["value", "variant", "size", "color", "label", "show-value"];
+    }
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() { this.render(); }
+    attributeChangedCallback() { this.render(); }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        const rawVal = this.getAttribute("value");
+        const value = rawVal !== null ? Math.min(100, Math.max(0, parseFloat(rawVal))) : null;
+        const variant = this.getAttribute("variant") ?? "linear";
+        const size = this.getAttribute("size") ?? "md";
+        const color = this.getAttribute("color") ?? "accent";
+        const label = this.getAttribute("label") ?? "Progress";
+        const showValue = this.getAttribute("show-value") === "true";
+        const indeterminate = value === null;
+        const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+        const colorMap = {
+            accent: "var(--nx-accent, #E89010)",
+            live: "var(--nx-live, #0FD4C6)",
+            success: "var(--nx-success, #22C55E)",
+            error: "var(--nx-error, #EF4444)",
+            warning: "var(--nx-warning, #EAB308)",
+        };
+        const fillColor = colorMap[color] ?? colorMap.accent;
+        if (variant === "circular") {
+            const szMap = { sm: 32, md: 48, lg: 64 };
+            const sz = szMap[size] ?? 48;
+            const r = (sz / 2) - 4;
+            const circ = 2 * Math.PI * r;
+            const offset = indeterminate ? circ * 0.25 : circ - (value / 100) * circ;
+            this.shadowRoot.innerHTML = `
+        <style>
+          ${themeCSS}
+          :host { display: inline-flex; align-items: center; gap: 8px; }
+          .arc {
+            transition: stroke-dashoffset 400ms cubic-bezier(0,0,0.2,1);
+            transform-origin: center;
+            transform: rotate(-90deg);
+          }
+          .indeterminate { animation: nx-spin-arc 1.4s linear infinite; }
+          @keyframes nx-spin-arc { to { transform: rotate(270deg); } }
+          .val { font-family: var(--nx-font-mono, monospace); font-size: ${Math.round(sz * 0.22)}px; fill: var(--nx-text, #E6EDF3); }
+        </style>
+        <svg width="${sz}" height="${sz}" viewBox="0 0 ${sz} ${sz}" aria-label="${label}${value !== null ? `: ${value}%` : ""}" role="progressbar" aria-valuenow="${value ?? ""}" aria-valuemin="0" aria-valuemax="100">
+          <circle cx="${sz / 2}" cy="${sz / 2}" r="${r}" fill="none" stroke="var(--nx-border, rgba(255,255,255,0.08))" stroke-width="4"/>
+          <circle class="arc${indeterminate ? " indeterminate" : ""}" cx="${sz / 2}" cy="${sz / 2}" r="${r}" fill="none"
+            stroke="${fillColor}" stroke-width="4" stroke-linecap="round"
+            stroke-dasharray="${circ}" stroke-dashoffset="${offset}"/>
+          ${showValue && !indeterminate ? `<text class="val" x="${sz / 2}" y="${sz / 2 + sz * 0.08}" text-anchor="middle" font-weight="600">${Math.round(value)}%</text>` : ""}
+        </svg>
+        ${showValue && !indeterminate ? "" : ""}
+      `;
+        }
+        else {
+            const hMap = { sm: "3px", md: "5px", lg: "8px" };
+            const h = hMap[size] ?? "5px";
+            this.shadowRoot.innerHTML = `
+        <style>
+          ${themeCSS}
+          :host { display: block; }
+          .track {
+            width: 100%;
+            height: ${h};
+            background: var(--nx-border, rgba(255,255,255,0.08));
+            border-radius: 9999px;
+            overflow: hidden;
+          }
+          .fill {
+            height: 100%;
+            background: ${fillColor};
+            border-radius: 9999px;
+            transition: width 400ms cubic-bezier(0,0,0.2,1);
+            ${indeterminate ? `animation: nx-indeterminate 1.6s ease-in-out infinite; width: 40%;` : `width: ${value}%;`}
+          }
+          .label-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-family: var(--nx-font-sans, system-ui); font-size: 11px; color: var(--nx-text-3, #6E7681); }
+          @keyframes nx-indeterminate {
+            0%   { transform: translateX(-100%); }
+            100% { transform: translateX(350%); }
+          }
+        </style>
+        <div role="progressbar" aria-label="${label}" aria-valuenow="${value ?? ""}" aria-valuemin="0" aria-valuemax="100">
+          ${label || showValue ? `<div class="label-row"><span>${label}</span>${showValue && !indeterminate ? `<span>${Math.round(value)}%</span>` : ""}</div>` : ""}
+          <div class="track"><div class="fill"></div></div>
+        </div>
+      `;
+        }
+    }
+}
+//# sourceMappingURL=progress.js.map

package/dist/primitives/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../src/primitives/progress.ts"],"names":[],"mappings":"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"}

package/dist/primitives/separator.d.ts

@@ -0,0 +1,8 @@
+export declare class NexSeparator extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
+//# sourceMappingURL=separator.d.ts.map

package/dist/primitives/separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/primitives/separator.ts"],"names":[],"mappings":"AASA,qBAAa,YAAa,SAAQ,WAAW;IAC3C,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IACjB,wBAAwB;IAExB,OAAO,CAAC,MAAM;CAkDf"}

package/dist/primitives/separator.js

@@ -0,0 +1,69 @@
+// @yugnex/nexui — NexSeparator Web Component
+// Horizontal or vertical divider line.
+// Attributes:
+//   orientation: horizontal | vertical (default: horizontal)
+//   variant:     default | strong | muted (default: default)
+//   label:       string — centered label text
+import { nexui_compiler } from "../core/compiler";
+export class NexSeparator extends HTMLElement {
+    static get observedAttributes() {
+        return ["orientation", "variant", "label"];
+    }
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() { this.render(); }
+    attributeChangedCallback() { this.render(); }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        const orientation = this.getAttribute("orientation") ?? "horizontal";
+        const variant = this.getAttribute("variant") ?? "default";
+        const label = this.getAttribute("label") ?? "";
+        const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+        const colorMap = {
+            default: "var(--nx-border, rgba(255,255,255,0.08))",
+            strong: "var(--nx-border-strong, rgba(255,255,255,0.16))",
+            muted: "rgba(255,255,255,0.04)",
+        };
+        const borderColor = colorMap[variant] ?? colorMap.default;
+        if (orientation === "vertical") {
+            this.shadowRoot.innerHTML = `
+        <style>
+          ${themeCSS}
+          :host { display: inline-block; width: 1px; align-self: stretch; }
+          .line { width: 1px; height: 100%; background: ${borderColor}; }
+        </style>
+        <div class="line" role="separator" aria-orientation="vertical"></div>
+      `;
+        }
+        else if (label) {
+            this.shadowRoot.innerHTML = `
+        <style>
+          ${themeCSS}
+          :host { display: block; }
+          .row { display: flex; align-items: center; gap: 12px; }
+          .line { flex: 1; height: 1px; background: ${borderColor}; }
+          .text { font-family: var(--nx-font-sans, system-ui); font-size: 11px; font-weight: 500; color: var(--nx-text-4, #484F58); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
+        </style>
+        <div class="row" role="separator">
+          <div class="line"></div>
+          <span class="text">${label}</span>
+          <div class="line"></div>
+        </div>
+      `;
+        }
+        else {
+            this.shadowRoot.innerHTML = `
+        <style>
+          ${themeCSS}
+          :host { display: block; }
+          .line { width: 100%; height: 1px; background: ${borderColor}; }
+        </style>
+        <div class="line" role="separator" aria-orientation="horizontal"></div>
+      `;
+        }
+    }
+}
+//# sourceMappingURL=separator.js.map

package/dist/primitives/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","sourceRoot":"","sources":["../../src/primitives/separator.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,uCAAuC;AACvC,cAAc;AACd,6DAA6D;AAC7D,6DAA6D;AAC7D,8CAA8C;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,OAAO,YAAa,SAAQ,WAAW;IAC3C,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,aAAa,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;IAC7C,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IACtC,CAAC;IAED,iBAAiB,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACtC,wBAAwB,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAErC,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAE7B,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,YAAY,CAAC;QACrE,MAAM,OAAO,GAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC;QAC9D,MAAM,KAAK,GAAS,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACrD,MAAM,QAAQ,GAAM,cAAc,CAAC,WAAW,CAAC,cAAc,CAAC,cAAc,EAAE,EAAE,OAAO,CAAC,CAAC;QAEzF,MAAM,QAAQ,GAA2B;YACvC,OAAO,EAAE,0CAA0C;YACnD,MAAM,EAAG,iDAAiD;YAC1D,KAAK,EAAI,wBAAwB;SAClC,CAAC;QACF,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC;QAE1D,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;YAC/B,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG;;YAEtB,QAAQ;;0DAEsC,WAAW;;;OAG9D,CAAC;QACJ,CAAC;aAAM,IAAI,KAAK,EAAE,CAAC;YACjB,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG;;YAEtB,QAAQ;;;sDAGkC,WAAW;;;;;+BAKlC,KAAK;;;OAG7B,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG;;YAEtB,QAAQ;;0DAEsC,WAAW;;;OAG9D,CAAC;QACJ,CAAC;IACH,CAAC;CACF"}

package/dist/primitives/skeleton.d.ts

@@ -0,0 +1,8 @@
+export declare class NexSkeleton extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/primitives/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/primitives/skeleton.ts"],"names":[],"mappings":"AAWA,qBAAa,WAAY,SAAQ,WAAW;IAC1C,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IACjB,wBAAwB;IAExB,OAAO,CAAC,MAAM;CA2Cf"}

package/dist/primitives/skeleton.js

@@ -0,0 +1,61 @@
+// @yugnex/nexui — NexSkeleton Web Component
+// Loading placeholder with shimmer animation.
+// Attributes:
+//   variant: text | circle | rect (default: rect)
+//   width:   CSS value (default: 100%)
+//   height:  CSS value (default: 16px for text, 40px for rect)
+//   lines:   number — for text variant, renders N stacked lines
+//   animate: boolean (default: true)
+import { nexui_compiler } from "../core/compiler";
+export class NexSkeleton extends HTMLElement {
+    static get observedAttributes() {
+        return ["variant", "width", "height", "lines", "animate"];
+    }
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() { this.render(); }
+    attributeChangedCallback() { this.render(); }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        const variant = this.getAttribute("variant") ?? "rect";
+        const width = this.getAttribute("width") ?? "100%";
+        const animate = this.getAttribute("animate") !== "false";
+        const lines = Math.max(1, parseInt(this.getAttribute("lines") ?? "1", 10));
+        const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+        let height = this.getAttribute("height");
+        if (!height) {
+            height = variant === "text" ? "12px" : variant === "circle" ? width : "40px";
+        }
+        const baseStyle = `
+      background: linear-gradient(
+        90deg,
+        var(--nx-bg-elevated, #1C2128) 25%,
+        var(--nx-bg-overlay,  #21262D) 50%,
+        var(--nx-bg-elevated, #1C2128) 75%
+      );
+      background-size: 200% 100%;
+      ${animate ? "animation: nx-shimmer 1.8s ease-in-out infinite;" : ""}
+      border-radius: ${variant === "circle" ? "50%" : variant === "text" ? "4px" : "6px"};
+    `;
+        if (variant === "text" && lines > 1) {
+            const lineEls = Array.from({ length: lines }, (_, i) => {
+                const w = i === lines - 1 ? "65%" : "100%";
+                return `<div style="${baseStyle} width:${w}; height:${height}; margin-bottom:${i < lines - 1 ? "8px" : "0"};"></div>`;
+            }).join("");
+            this.shadowRoot.innerHTML = `
+        <style>${themeCSS} :host{display:block;} @keyframes nx-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}</style>
+        <div role="status" aria-label="Loading..." style="width:${width};">${lineEls}</div>
+      `;
+        }
+        else {
+            this.shadowRoot.innerHTML = `
+        <style>${themeCSS} :host{display:block;} @keyframes nx-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}</style>
+        <div role="status" aria-label="Loading..." style="${baseStyle} width:${width}; height:${height};"></div>
+      `;
+        }
+    }
+}
+//# sourceMappingURL=skeleton.js.map

package/dist/primitives/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../src/primitives/skeleton.ts"],"names":[],"mappings":"AAAA,4CAA4C;AAC5C,8CAA8C;AAC9C,cAAc;AACd,kDAAkD;AAClD,uCAAuC;AACvC,+DAA+D;AAC/D,gEAAgE;AAChE,qCAAqC;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,OAAO,WAAY,SAAQ,WAAW;IAC1C,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;IAC5D,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IACtC,CAAC;IAED,iBAAiB,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACtC,wBAAwB,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAErC,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAE7B,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC;QACvD,MAAM,KAAK,GAAK,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC;QACrD,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,OAAO,CAAC;QACzD,MAAM,KAAK,GAAK,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;QAC7E,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,cAAc,CAAC,cAAc,EAAE,EAAE,OAAO,CAAC,CAAC;QAEtF,IAAI,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACzC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;QAC/E,CAAC;QAED,MAAM,SAAS,GAAG;;;;;;;;QAQd,OAAO,CAAC,CAAC,CAAC,kDAAkD,CAAC,CAAC,CAAC,EAAE;uBAClD,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;KACnF,CAAC;QAEF,IAAI,OAAO,KAAK,MAAM,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACpC,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBACrD,MAAM,CAAC,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;gBAC3C,OAAO,eAAe,SAAS,UAAU,CAAC,YAAY,MAAM,mBAAmB,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC;YACxH,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAEZ,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG;iBACjB,QAAQ;kEACyC,KAAK,MAAM,OAAO;OAC7E,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG;iBACjB,QAAQ;4DACmC,SAAS,UAAU,KAAK,YAAY,MAAM;OAC/F,CAAC;QACJ,CAAC;IACH,CAAC;CACF"}

package/dist/primitives/spinner.d.ts

@@ -0,0 +1,8 @@
+export declare class NexSpinner extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
+//# sourceMappingURL=spinner.d.ts.map

package/dist/primitives/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/primitives/spinner.ts"],"names":[],"mappings":"AASA,qBAAa,UAAW,SAAQ,WAAW;IACzC,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IACjB,wBAAwB;IAExB,OAAO,CAAC,MAAM;CAgDf"}

package/dist/primitives/spinner.js

@@ -0,0 +1,64 @@
+// @yugnex/nexui — NexSpinner Web Component
+// Loading spinner. Lightweight — just CSS animation, no JS after render.
+// Attributes:
+//   size:  xs | sm | md | lg | xl (default: md)
+//   color: accent | live | success | error | muted (default: accent)
+//   label: accessible label (default: "Loading")
+import { nexui_compiler } from "../core/compiler";
+export class NexSpinner extends HTMLElement {
+    static get observedAttributes() {
+        return ["size", "color", "label"];
+    }
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() { this.render(); }
+    attributeChangedCallback() { this.render(); }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        const size = this.getAttribute("size") ?? "md";
+        const color = this.getAttribute("color") ?? "accent";
+        const label = this.getAttribute("label") ?? "Loading";
+        const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+        const szMap = {
+            xs: { px: 12, sw: 1.5 },
+            sm: { px: 16, sw: 2 },
+            md: { px: 24, sw: 2.5 },
+            lg: { px: 32, sw: 3 },
+            xl: { px: 48, sw: 3.5 },
+        };
+        const { px, sw } = szMap[size] ?? szMap.md;
+        const colorMap = {
+            accent: "var(--nx-accent, #E89010)",
+            live: "var(--nx-live, #0FD4C6)",
+            success: "var(--nx-success, #22C55E)",
+            error: "var(--nx-error, #EF4444)",
+            muted: "var(--nx-text-4, #484F58)",
+        };
+        const spinColor = colorMap[color] ?? colorMap.accent;
+        this.shadowRoot.innerHTML = `
+      <style>
+        ${themeCSS}
+        :host { display: inline-flex; align-items: center; justify-content: center; }
+        .ring {
+          width: ${px}px;
+          height: ${px}px;
+          border-radius: 50%;
+          border: ${sw}px solid rgba(255,255,255,0.08);
+          border-top-color: ${spinColor};
+          animation: nx-spin 700ms linear infinite;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .ring { animation-duration: 2s; }
+        }
+        @keyframes nx-spin { to { transform: rotate(360deg); } }
+      </style>
+      <div class="ring" role="status" aria-label="${label}">
+        <span style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">${label}</span>
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=spinner.js.map

package/dist/primitives/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../src/primitives/spinner.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,yEAAyE;AACzE,cAAc;AACd,gDAAgD;AAChD,qEAAqE;AACrE,iDAAiD;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,OAAO,UAAW,SAAQ,WAAW;IACzC,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IACpC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IACtC,CAAC;IAED,iBAAiB,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACtC,wBAAwB,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAErC,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAE7B,MAAM,IAAI,GAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC;QAClD,MAAM,KAAK,GAAK,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC;QACvD,MAAM,KAAK,GAAK,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,SAAS,CAAC;QACxD,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,cAAc,CAAC,cAAc,EAAE,EAAE,OAAO,CAAC,CAAC;QAEtF,MAAM,KAAK,GAA+C;YACxD,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE;YACvB,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE;YACrB,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE;YACvB,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE;YACrB,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE;SACxB,CAAC;QACF,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;QAE3C,MAAM,QAAQ,GAA2B;YACvC,MAAM,EAAG,2BAA2B;YACpC,IAAI,EAAK,yBAAyB;YAClC,OAAO,EAAE,4BAA4B;YACrC,KAAK,EAAI,0BAA0B;YACnC,KAAK,EAAI,2BAA2B;SACrC,CAAC;QACF,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,MAAM,CAAC;QAErD,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG;;UAEtB,QAAQ;;;mBAGC,EAAE;oBACD,EAAE;;oBAEF,EAAE;8BACQ,SAAS;;;;;;;;oDAQa,KAAK;kGACyC,KAAK;;KAElG,CAAC;IACJ,CAAC;CACF"}

package/dist/primitives/status-ring.d.ts

@@ -0,0 +1,8 @@
+export declare class NexStatusRing extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
+//# sourceMappingURL=status-ring.d.ts.map

package/dist/primitives/status-ring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-ring.d.ts","sourceRoot":"","sources":["../../src/primitives/status-ring.ts"],"names":[],"mappings":"AAMA,qBAAa,aAAc,SAAQ,WAAW;IAC5C,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAIjB,wBAAwB;IAIxB,OAAO,CAAC,MAAM;CAoFf"}

package/dist/primitives/status-ring.js

@@ -0,0 +1,101 @@
+// @yugnex/nexui — NexStatusRing Web Component
+// Circular progress ring with animated entry.
+// Attributes: score (0-100), label, color, size
+import { nexui_compiler } from "../core/compiler";
+export class NexStatusRing extends HTMLElement {
+    static get observedAttributes() {
+        return ["score", "label", "color", "size"];
+    }
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        const score = Math.min(100, Math.max(0, parseInt(this.getAttribute("score") ?? "0", 10)));
+        const label = this.getAttribute("label") ?? "METRIC";
+        const color = this.getAttribute("color") ?? "var(--nx-accent, #E89010)";
+        const size = Math.max(40, parseInt(this.getAttribute("size") ?? "80", 10));
+        const cx = size / 2;
+        const cy = size / 2;
+        const radius = (size / 2) - (size * 0.075);
+        const sw = size * 0.075;
+        const circumference = 2 * Math.PI * radius;
+        const targetOffset = circumference - (score / 100) * circumference;
+        const fontSize = Math.round(size * 0.175);
+        const labelSize = Math.round(size * 0.08);
+        const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+        // Key technique: render at full offset (empty ring), then in the next frame
+        // update to the target offset so the CSS transition actually fires.
+        // Without this two-frame approach the element starts at the final value
+        // and the transition is never observed.
+        this.shadowRoot.innerHTML = `
+      <style>
+        ${themeCSS}
+        :host {
+          display: inline-flex;
+          flex-direction: column;
+          align-items: center;
+          font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
+        }
+        .ring-arc {
+          transition: stroke-dashoffset 700ms cubic-bezier(0, 0, 0.2, 1);
+          transform-origin: center;
+          transform: rotate(-90deg);
+        }
+        .label {
+          font-size: ${labelSize}px;
+          color: var(--nx-text-3, #6E7681);
+          margin-top: ${Math.round(size * 0.04)}px;
+          text-transform: uppercase;
+          letter-spacing: 0.06em;
+          user-select: none;
+        }
+      </style>
+      <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" aria-label="${label}: ${score}%" role="img">
+        <circle
+          cx="${cx}" cy="${cy}" r="${radius}"
+          fill="none"
+          stroke="var(--nx-border, rgba(255,255,255,0.08))"
+          stroke-width="${sw}"
+        />
+        <circle
+          class="ring-arc"
+          cx="${cx}" cy="${cy}" r="${radius}"
+          fill="none"
+          stroke="${color}"
+          stroke-width="${sw}"
+          stroke-linecap="round"
+          stroke-dasharray="${circumference}"
+          stroke-dashoffset="${circumference}"
+        />
+        <text
+          x="${cx}" y="${cy + fontSize * 0.35}"
+          text-anchor="middle"
+          fill="var(--nx-text, #E6EDF3)"
+          font-size="${fontSize}"
+          font-weight="600"
+          font-family="inherit"
+        >${score}</text>
+      </svg>
+      <div class="label">${label}</div>
+    `;
+        // Two-frame update triggers the CSS transition
+        const arc = this.shadowRoot.querySelector(".ring-arc");
+        if (arc) {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    arc.style.strokeDashoffset = String(targetOffset);
+                });
+            });
+        }
+    }
+}
+//# sourceMappingURL=status-ring.js.map

package/dist/primitives/status-ring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-ring.js","sourceRoot":"","sources":["../../src/primitives/status-ring.ts"],"names":[],"mappings":"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"}

package/dist/primitives/switch.d.ts

@@ -0,0 +1,12 @@
+export declare class NexSwitch extends HTMLElement {
+    private _checked;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string, val: string): void;
+    get checked(): boolean;
+    set checked(v: boolean);
+    private toggle;
+    private render;
+}
+//# sourceMappingURL=switch.d.ts.map

package/dist/primitives/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/primitives/switch.ts"],"names":[],"mappings":"AAWA,qBAAa,SAAU,SAAQ,WAAW;IACxC,OAAO,CAAC,QAAQ,CAAS;IAEzB,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAYjB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM;IAKhE,IAAI,OAAO,IACI,OAAO,CADiB;IACvC,IAAI,OAAO,CAAC,CAAC,EAAE,OAAO,EAIrB;IAED,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,MAAM;CAgFf"}

package/dist/primitives/switch.js

@@ -0,0 +1,124 @@
+// @yugnex/nexui — NexSwitch Web Component
+// Toggle switch with label and ARIA.
+// Attributes:
+//   checked:  boolean
+//   disabled: boolean
+//   label:    string
+//   size:     sm | md | lg
+//   color:    accent | live | success (default: accent)
+import { nexui_compiler } from "../core/compiler";
+export class NexSwitch extends HTMLElement {
+    static get observedAttributes() {
+        return ["checked", "disabled", "label", "size", "color"];
+    }
+    constructor() {
+        super();
+        this._checked = false;
+        this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+        this._checked = this.hasAttribute("checked");
+        this.render();
+        this.shadowRoot?.querySelector(".track")?.addEventListener("click", () => this.toggle());
+        this.shadowRoot?.querySelector(".track")?.addEventListener("keydown", (e) => {
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault();
+                this.toggle();
+            }
+        });
+    }
+    attributeChangedCallback(name, _old, val) {
+        if (name === "checked")
+            this._checked = val !== null;
+        this.render();
+    }
+    get checked() { return this._checked; }
+    set checked(v) {
+        this._checked = v;
+        v ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+        this.render();
+    }
+    toggle() {
+        if (this.hasAttribute("disabled"))
+            return;
+        this.checked = !this._checked;
+        this.dispatchEvent(new CustomEvent("change", { detail: { checked: this._checked }, bubbles: true }));
+    }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        const size = this.getAttribute("size") ?? "md";
+        const color = this.getAttribute("color") ?? "accent";
+        const label = this.getAttribute("label") ?? "";
+        const disabled = this.hasAttribute("disabled");
+        const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+        const colorMap = {
+            accent: "var(--nx-accent, #E89010)",
+            live: "var(--nx-live, #0FD4C6)",
+            success: "var(--nx-success, #22C55E)",
+        };
+        const activeColor = colorMap[color] ?? colorMap.accent;
+        const dims = {
+            sm: { w: 28, h: 16, thumb: 12, fs: "11px" },
+            md: { w: 36, h: 20, thumb: 16, fs: "12px" },
+            lg: { w: 44, h: 24, thumb: 20, fs: "13px" },
+        };
+        const d = dims[size] ?? dims.md;
+        const thumbTravel = d.w - d.thumb - 4;
+        this.shadowRoot.innerHTML = `
+      <style>
+        ${themeCSS}
+        :host { display: inline-flex; align-items: center; gap: 8px; }
+        .track {
+          position: relative;
+          width: ${d.w}px;
+          height: ${d.h}px;
+          border-radius: 9999px;
+          background: ${this._checked ? activeColor : "var(--nx-bg-elevated, #1C2128)"};
+          border: 1px solid ${this._checked ? "transparent" : "var(--nx-border-strong, rgba(255,255,255,0.16))"};
+          cursor: ${disabled ? "not-allowed" : "pointer"};
+          opacity: ${disabled ? 0.45 : 1};
+          transition: background 150ms ease, border-color 150ms ease;
+          outline: none;
+          flex-shrink: 0;
+        }
+        .track:focus-visible {
+          box-shadow: 0 0 0 2px var(--nx-bg-base, #0D1117), 0 0 0 4px ${activeColor};
+        }
+        .thumb {
+          position: absolute;
+          top: 50%;
+          left: 2px;
+          transform: translateY(-50%) translateX(${this._checked ? `${thumbTravel}px` : "0"});
+          width: ${d.thumb}px;
+          height: ${d.thumb}px;
+          border-radius: 50%;
+          background: ${this._checked ? "var(--nx-bg-base, #0D1117)" : "var(--nx-text-4, #484F58)"};
+          transition: transform 150ms cubic-bezier(0.34,1.56,0.64,1), background 150ms ease;
+          pointer-events: none;
+        }
+        .label {
+          font-family: var(--nx-font-sans, system-ui, sans-serif);
+          font-size: ${d.fs};
+          color: ${disabled ? "var(--nx-text-4, #484F58)" : "var(--nx-text-2, #8B949E)"};
+          user-select: none;
+          cursor: ${disabled ? "not-allowed" : "pointer"};
+        }
+      </style>
+      <div class="track" role="switch" aria-checked="${this._checked}" tabindex="${disabled ? -1 : 0}" part="track">
+        <div class="thumb" part="thumb"></div>
+      </div>
+      ${label ? `<span class="label" part="label">${label}</span>` : ""}
+    `;
+        // Re-attach events after innerHTML reset
+        const track = this.shadowRoot.querySelector(".track");
+        track?.addEventListener("click", () => this.toggle());
+        track?.addEventListener("keydown", (e) => {
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault();
+                this.toggle();
+            }
+        });
+    }
+}
+//# sourceMappingURL=switch.js.map

package/dist/primitives/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/primitives/switch.ts"],"names":[],"mappings":"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"}