@yugnex/nexui 2.0.0

package/src/primitives/checkbox.ts

@@ -0,0 +1,113 @@
+// @yugnex/nexui — NexCheckbox Web Component
+// Checkbox with indeterminate state support.
+// Attributes:
+//   checked:       boolean
+//   indeterminate: boolean
+//   disabled:      boolean
+//   label:         string
+//   size:          sm | md | lg
+
+import { nexui_compiler } from "../core/compiler";
+import { NexuiIcons } from "../assets/geometry";
+
+export class NexCheckbox extends HTMLElement {
+  private _checked = false;
+  private _indeterminate = false;
+
+  static get observedAttributes() {
+    return ["checked", "indeterminate", "disabled", "label", "size"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this._checked = this.hasAttribute("checked");
+    this._indeterminate = this.hasAttribute("indeterminate");
+    this.render();
+  }
+
+  attributeChangedCallback(name: string) {
+    if (name === "checked")       this._checked = this.hasAttribute("checked");
+    if (name === "indeterminate") this._indeterminate = this.hasAttribute("indeterminate");
+    this.render();
+  }
+
+  get checked() { return this._checked; }
+  set checked(v: boolean) {
+    this._checked = v;
+    this._indeterminate = false;
+    v ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+    this.removeAttribute("indeterminate");
+    this.render();
+  }
+
+  private toggle() {
+    if (this.hasAttribute("disabled")) return;
+    this.checked = !this._checked;
+    this.dispatchEvent(new CustomEvent("change", { detail: { checked: this._checked }, bubbles: true }));
+  }
+
+  private render() {
+    if (!this.shadowRoot) return;
+
+    const size     = this.getAttribute("size") ?? "md";
+    const label    = this.getAttribute("label") ?? "";
+    const disabled = this.hasAttribute("disabled");
+    const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+
+    const szMap = { sm: 14, md: 16, lg: 20 };
+    const sz = szMap[size as keyof typeof szMap] ?? 16;
+    const iconSz = Math.round(sz * 0.7);
+    const fs = size === "sm" ? "11px" : size === "lg" ? "13px" : "12px";
+
+    const isActive = this._checked || this._indeterminate;
+    const icon = this._indeterminate
+      ? `<svg width="${iconSz}" height="${iconSz}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12h14"/></svg>`
+      : `<svg width="${iconSz}" height="${iconSz}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="${NexuiIcons.check}"/></svg>`;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${themeCSS}
+        :host { display: inline-flex; align-items: center; gap: 8px; cursor: ${disabled ? "not-allowed" : "pointer"}; }
+        .box {
+          width: ${sz}px;
+          height: ${sz}px;
+          border-radius: 4px;
+          border: 1.5px solid ${isActive ? "var(--nx-accent, #E89010)" : "var(--nx-border-strong, rgba(255,255,255,0.16))"};
+          background: ${isActive ? "var(--nx-accent, #E89010)" : "var(--nx-bg-elevated, #1C2128)"};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #000;
+          opacity: ${disabled ? 0.45 : 1};
+          transition: background 120ms ease, border-color 120ms ease;
+          flex-shrink: 0;
+          outline: none;
+        }
+        .box:focus-visible {
+          box-shadow: 0 0 0 2px var(--nx-bg-base, #0D1117), 0 0 0 4px var(--nx-accent, #E89010);
+        }
+        .icon { display: ${isActive ? "flex" : "none"}; pointer-events: none; }
+        label {
+          font-family: var(--nx-font-sans, system-ui, sans-serif);
+          font-size: ${fs};
+          color: ${disabled ? "var(--nx-text-4, #484F58)" : "var(--nx-text-2, #8B949E)"};
+          user-select: none;
+        }
+      </style>
+      <div class="box" role="checkbox" aria-checked="${this._indeterminate ? "mixed" : this._checked}" tabindex="${disabled ? -1 : 0}" part="box">
+        <span class="icon" aria-hidden="true">${icon}</span>
+      </div>
+      ${label ? `<label part="label">${label}</label>` : ""}
+    `;
+
+    const box = this.shadowRoot.querySelector(".box");
+    box?.addEventListener("click", () => this.toggle());
+    box?.addEventListener("keydown", (e) => {
+      if ((e as KeyboardEvent).key === " ") { e.preventDefault(); this.toggle(); }
+    });
+  }
+}

package/src/primitives/input.ts

@@ -0,0 +1,187 @@
+// @yugnex/nexui — NexInput Web Component
+// Full-featured input with label, helper text, error state, and prefix/suffix slots.
+// Attributes:
+//   type:        text | email | password | search | number | url (default: text)
+//   label:       string
+//   placeholder: string
+//   helper:      string — helper text below input
+//   error:       string — error message (replaces helper, sets error state)
+//   size:        sm | md | lg
+//   disabled:    boolean
+//   required:    boolean
+//   value:       initial value
+
+import { nexui_compiler } from "../core/compiler";
+
+export class NexInput extends HTMLElement {
+  private input: HTMLInputElement | null = null;
+
+  static get observedAttributes() {
+    return ["type", "label", "placeholder", "helper", "error", "size", "disabled", "required", "value"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setupProxy();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+    this.setupProxy();
+  }
+
+  // Expose input value as a property on the custom element
+  get value(): string {
+    return this.input?.value ?? this.getAttribute("value") ?? "";
+  }
+  set value(v: string) {
+    if (this.input) this.input.value = v;
+    this.setAttribute("value", v);
+  }
+
+  focus() { this.input?.focus(); }
+  blur()  { this.input?.blur(); }
+
+  private setupProxy() {
+    const input = this.shadowRoot?.querySelector<HTMLInputElement>("input");
+    if (!input) return;
+    this.input = input;
+
+    // Re-dispatch events from shadow root so they bubble out
+    const forward = (e: Event) => this.dispatchEvent(new (e.constructor as typeof Event)(e.type, e));
+    input.addEventListener("input",   forward);
+    input.addEventListener("change",  forward);
+    input.addEventListener("focus",   forward);
+    input.addEventListener("blur",    forward);
+    input.addEventListener("keydown", (e) => this.dispatchEvent(new KeyboardEvent("keydown", e)));
+  }
+
+  private render() {
+    if (!this.shadowRoot) return;
+
+    const type        = this.getAttribute("type") ?? "text";
+    const label       = this.getAttribute("label") ?? "";
+    const placeholder = this.getAttribute("placeholder") ?? "";
+    const helper      = this.getAttribute("helper") ?? "";
+    const error       = this.getAttribute("error") ?? "";
+    const size        = this.getAttribute("size") ?? "md";
+    const disabled    = this.hasAttribute("disabled");
+    const required    = this.hasAttribute("required");
+    const value       = this.getAttribute("value") ?? "";
+    const inputId     = `nx-input-${Math.random().toString(36).slice(2, 7)}`;
+    const themeCSS    = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+    const hasError    = error.length > 0;
+
+    const sizeVars: Record<string, { fs: string; ph: string; radius: string; }> = {
+      sm: { fs: "12px", ph: "6px 10px",  radius: "5px" },
+      md: { fs: "13px", ph: "8px 12px",  radius: "6px" },
+      lg: { fs: "14px", ph: "10px 14px", radius: "7px" },
+    };
+    const sv = sizeVars[size] ?? sizeVars.md;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${themeCSS}
+        :host {
+          display: block;
+          font-family: var(--nx-font-sans, system-ui, sans-serif);
+        }
+        .field {
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+        }
+        label {
+          font-size: 12px;
+          font-weight: 500;
+          color: var(--nx-text-2, #8B949E);
+          letter-spacing: 0.02em;
+          user-select: none;
+        }
+        label .req {
+          color: var(--nx-error, #EF4444);
+          margin-left: 2px;
+        }
+        .input-wrap {
+          position: relative;
+          display: flex;
+          align-items: center;
+        }
+        input {
+          width: 100%;
+          background: var(--nx-bg-elevated, #1C2128);
+          border: 1px solid ${hasError ? "var(--nx-error,#EF4444)" : "var(--nx-border,rgba(255,255,255,0.08))"};
+          border-radius: ${sv.radius};
+          color: var(--nx-text, #E6EDF3);
+          font-family: inherit;
+          font-size: ${sv.fs};
+          padding: ${sv.ph};
+          line-height: 1.5;
+          outline: none;
+          transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
+          box-sizing: border-box;
+          -webkit-appearance: none;
+        }
+        input::placeholder {
+          color: var(--nx-text-4, #484F58);
+        }
+        input:hover:not(:disabled):not(:focus) {
+          border-color: var(--nx-border-strong, rgba(255,255,255,0.16));
+        }
+        input:focus {
+          border-color: ${hasError ? "var(--nx-error,#EF4444)" : "var(--nx-border-focus,rgba(232,144,16,0.60))"};
+          box-shadow: 0 0 0 3px ${hasError ? "rgba(239,68,68,0.15)" : "rgba(232,144,16,0.12)"};
+          background: var(--nx-bg-surface, #161B22);
+        }
+        input:disabled {
+          opacity: 0.45;
+          cursor: not-allowed;
+        }
+        .prefix-slot, .suffix-slot {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          color: var(--nx-text-3, #6E7681);
+          pointer-events: none;
+        }
+        .prefix-slot { left: 10px; }
+        .suffix-slot { right: 10px; }
+        :host([has-prefix]) input { padding-left: 34px; }
+        :host([has-suffix]) input { padding-right: 34px; }
+        .help {
+          font-size: 11px;
+          color: ${hasError ? "var(--nx-error,#EF4444)" : "var(--nx-text-3,#6E7681)"};
+          line-height: 1.4;
+        }
+      </style>
+      <div class="field" part="field">
+        ${label ? `<label for="${inputId}">${label}${required ? '<span class="req" aria-hidden="true">*</span>' : ""}</label>` : ""}
+        <div class="input-wrap">
+          <span class="prefix-slot" aria-hidden="true"><slot name="prefix"></slot></span>
+          <input
+            id="${inputId}"
+            type="${type}"
+            placeholder="${placeholder}"
+            ${value ? `value="${value}"` : ""}
+            ${disabled ? "disabled" : ""}
+            ${required ? "required" : ""}
+            ${hasError ? `aria-invalid="true" aria-describedby="${inputId}-help"` : ""}
+            part="input"
+          />
+          <span class="suffix-slot" aria-hidden="true"><slot name="suffix"></slot></span>
+        </div>
+        ${error || helper
+          ? `<span class="help" id="${inputId}-help" role="${hasError ? "alert" : ""}">${error || helper}</span>`
+          : ""}
+      </div>
+    `;
+
+    this.input = this.shadowRoot.querySelector("input");
+    if (this.input && value) this.input.value = value;
+  }
+}

package/src/primitives/panel.ts

@@ -0,0 +1,111 @@
+// @yugnex/nexui — NexPanel Web Component
+// A themed container that uses the LayoutMatrix bitmask system.
+// Shadow DOM safe: injects theme vars + compiled matrix CSS into its own shadow root.
+
+import { nexui_compiler } from "../core/compiler";
+import { LayoutMatrix } from "../core/matrix";
+
+export class NexPanel extends HTMLElement {
+  static get observedAttributes() {
+    return ["matrix", "variant", "padding", "elevation"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  private getMask(): number {
+    const raw = this.getAttribute("matrix");
+    if (raw !== null) return parseInt(raw, 16);
+
+    // Build from convenience attributes if matrix is not set
+    let mask = 0;
+    const padding = this.getAttribute("padding") ?? "md";
+    const padMap: Record<string, number> = {
+      none: LayoutMatrix.PAD_NONE, xs: LayoutMatrix.PAD_XS,
+      sm: LayoutMatrix.PAD_SM, md: LayoutMatrix.PAD_MD,
+      lg: LayoutMatrix.PAD_LG, xl: LayoutMatrix.PAD_XL,
+    };
+    mask |= padMap[padding] ?? LayoutMatrix.PAD_MD;
+    return mask;
+  }
+
+  private render() {
+    if (!this.shadowRoot) return;
+
+    const mask     = this.getMask();
+    const variant  = this.getAttribute("variant") ?? "base";
+    const elevation = this.getAttribute("elevation") ?? "0";
+
+    const bgMap: Record<string, string> = {
+      "void":     "var(--nx-bg-void)",
+      "base":     "var(--nx-bg-base)",
+      "surface":  "var(--nx-bg-surface)",
+      "elevated": "var(--nx-bg-elevated)",
+      "overlay":  "var(--nx-bg-overlay)",
+      "accent":   "var(--nx-accent-dim)",
+      "live":     "var(--nx-live-dim)",
+      "success":  "var(--nx-success-dim)",
+      "error":    "var(--nx-error-dim)",
+      "warning":  "var(--nx-warning-dim)",
+    };
+
+    const shadowMap: Record<string, string> = {
+      "0": "none",
+      "1": "0 1px 3px rgba(0,0,0,0.50)",
+      "2": "0 4px 6px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.30)",
+      "3": "0 10px 15px rgba(0,0,0,0.50), 0 4px 6px rgba(0,0,0,0.30)",
+      "4": "0 20px 25px rgba(0,0,0,0.55), 0 8px 10px rgba(0,0,0,0.30)",
+    };
+
+    const matrixCSS  = nexui_compiler.compileBitmaskToString(mask);
+    const matrixClass = `nx-m-${mask.toString(16).toUpperCase()}`;
+    const themeCSS   = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${themeCSS}
+        ${matrixCSS}
+        :host {
+          display: block;
+        }
+        .panel {
+          background: ${bgMap[variant] ?? bgMap["base"]};
+          border: 1px solid var(--nx-border);
+          border-radius: 8px;
+          box-shadow: ${shadowMap[elevation] ?? "none"};
+          color: var(--nx-text);
+          font-family: var(--nx-font-sans, system-ui, sans-serif);
+          transition: border-color 150ms ease, box-shadow 150ms ease;
+        }
+        .panel[data-variant="elevated"] {
+          border-color: var(--nx-border-strong);
+        }
+        .panel[data-variant="accent"] {
+          border-color: var(--nx-accent-border);
+        }
+        .panel[data-variant="live"] {
+          border-color: var(--nx-live-border);
+        }
+        .panel[data-variant="error"] {
+          border-color: var(--nx-error-dim);
+        }
+        .panel[data-variant="success"] {
+          border-color: var(--nx-success-dim);
+        }
+      </style>
+      <div class="panel ${matrixClass}" data-variant="${variant}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/primitives/progress.ts

@@ -0,0 +1,112 @@
+// @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(); }
+
+  private 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: Record<string, string> = {
+      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 as keyof typeof szMap] ?? 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 as keyof typeof hMap] ?? "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>
+      `;
+    }
+  }
+}

package/src/primitives/separator.ts

@@ -0,0 +1,73 @@
+// @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(); }
+
+  private 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: Record<string, string> = {
+      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>
+      `;
+    }
+  }
+}

package/src/primitives/skeleton.ts

@@ -0,0 +1,68 @@
+// @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(); }
+
+  private 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>
+      `;
+    }
+  }
+}