@yugnex/nexui 2.0.0

package/dist/primitives/button.js

@@ -0,0 +1,137 @@
+// @yugnex/nexui — NexButton Web Component
+// Attributes:
+//   variant: primary | secondary | ghost | danger | outline | accent | live
+//   size:    sm | md | lg
+//   loading: boolean
+//   disabled: boolean (native HTML attribute)
+//   icon-only: boolean (square aspect ratio)
+import { nexui_compiler } from "../core/compiler";
+export class NexButton extends HTMLElement {
+    static get observedAttributes() {
+        return ["variant", "size", "loading", "disabled", "icon-only", "type"];
+    }
+    constructor() {
+        super();
+        this.btn = null;
+        this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+        this.render();
+        this.setupDelegation();
+    }
+    attributeChangedCallback() {
+        this.render();
+        this.setupDelegation();
+    }
+    // Forward clicks from the host element to the internal button
+    setupDelegation() {
+        this.onclick = (e) => {
+            if (this.hasAttribute("disabled") || this.getAttribute("loading") === "true") {
+                e.stopImmediatePropagation();
+                return;
+            }
+        };
+    }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        const variant = this.getAttribute("variant") ?? "primary";
+        const size = this.getAttribute("size") ?? "md";
+        const loading = this.getAttribute("loading") === "true";
+        const disabled = this.hasAttribute("disabled") || loading;
+        const iconOnly = this.getAttribute("icon-only") === "true";
+        const type = this.getAttribute("type") ?? "button";
+        const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+        const sizeStyles = {
+            sm: `font-size:11px; padding:${iconOnly ? "5px" : "5px 10px"}; min-height:28px; border-radius:5px; gap:6px;`,
+            md: `font-size:13px; padding:${iconOnly ? "7px" : "7px 14px"}; min-height:34px; border-radius:6px; gap:8px;`,
+            lg: `font-size:14px; padding:${iconOnly ? "9px" : "9px 18px"}; min-height:40px; border-radius:7px; gap:10px;`,
+        };
+        const variantStyles = {
+            primary: `background:var(--nx-accent,#E89010); color:#000; border:none;`,
+            secondary: `background:var(--nx-bg-elevated,#1C2128); color:var(--nx-text,#E6EDF3); border:1px solid var(--nx-border-strong,rgba(255,255,255,0.16));`,
+            ghost: `background:transparent; color:var(--nx-text,#E6EDF3); border:none;`,
+            outline: `background:transparent; color:var(--nx-text,#E6EDF3); border:1px solid var(--nx-border-strong,rgba(255,255,255,0.16));`,
+            danger: `background:var(--nx-error,#EF4444); color:#fff; border:none;`,
+            accent: `background:var(--nx-accent-dim,rgba(232,144,16,0.09)); color:var(--nx-accent-text,#F5B342); border:1px solid var(--nx-accent-border,rgba(232,144,16,0.22));`,
+            live: `background:var(--nx-live-dim,rgba(15,212,198,0.09)); color:var(--nx-live,#0FD4C6); border:1px solid var(--nx-live-border,rgba(15,212,198,0.22));`,
+        };
+        const hoverStyles = {
+            primary: `filter:brightness(1.1);`,
+            secondary: `background:var(--nx-bg-overlay,#21262D);`,
+            ghost: `background:rgba(255,255,255,0.06);`,
+            outline: `background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.24);`,
+            danger: `filter:brightness(1.1);`,
+            accent: `background:rgba(232,144,16,0.14);`,
+            live: `background:rgba(15,212,198,0.14);`,
+        };
+        const iconSize = size === "sm" ? 12 : size === "lg" ? 16 : 14;
+        this.shadowRoot.innerHTML = `
+      <style>
+        ${themeCSS}
+        :host {
+          display: inline-block;
+        }
+        button {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-family: var(--nx-font-sans, system-ui, sans-serif);
+          font-weight: 500;
+          letter-spacing: 0.01em;
+          cursor: pointer;
+          user-select: none;
+          white-space: nowrap;
+          text-decoration: none;
+          transition: background 150ms ease, color 150ms ease, border-color 150ms ease, filter 150ms ease, opacity 150ms ease, box-shadow 150ms ease;
+          ${sizeStyles[size] ?? sizeStyles.md}
+          ${variantStyles[variant] ?? variantStyles.primary}
+          ${iconOnly ? `aspect-ratio: 1; padding: ${size === "sm" ? "5px" : size === "lg" ? "9px" : "7px"};` : ""}
+        }
+        button:hover:not(:disabled):not(.loading) {
+          ${hoverStyles[variant] ?? ""}
+        }
+        button:active:not(:disabled):not(.loading) {
+          transform: translateY(1px);
+          filter: brightness(0.95);
+        }
+        button:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 2px var(--nx-bg-base, #0D1117), 0 0 0 4px var(--nx-accent, #E89010);
+        }
+        button:disabled, button.loading {
+          opacity: 0.45;
+          cursor: not-allowed;
+        }
+        .spinner {
+          width: ${iconSize}px;
+          height: ${iconSize}px;
+          border: 1.5px solid transparent;
+          border-top-color: currentColor;
+          border-radius: 50%;
+          animation: nx-spin 600ms linear infinite;
+          flex-shrink: 0;
+        }
+        @keyframes nx-spin {
+          to { transform: rotate(360deg); }
+        }
+        ::slotted(svg) {
+          width: ${iconSize}px;
+          height: ${iconSize}px;
+          flex-shrink: 0;
+        }
+      </style>
+      <button
+        type="${type}"
+        ${disabled ? "disabled" : ""}
+        ${loading ? 'class="loading"' : ""}
+        part="button"
+      >
+        ${loading ? '<span class="spinner" aria-hidden="true"></span>' : ""}
+        <slot></slot>
+      </button>
+    `;
+        this.btn = this.shadowRoot.querySelector("button");
+    }
+}
+//# sourceMappingURL=button.js.map

package/dist/primitives/button.js.map

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

package/dist/primitives/checkbox.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/primitives/checkbox.ts"],"names":[],"mappings":"AAYA,qBAAa,WAAY,SAAQ,WAAW;IAC1C,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,cAAc,CAAS;IAE/B,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAMjB,wBAAwB,CAAC,IAAI,EAAE,MAAM;IAMrC,IAAI,OAAO,IACI,OAAO,CADiB;IACvC,IAAI,OAAO,CAAC,CAAC,EAAE,OAAO,EAMrB;IAED,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,MAAM;CA4Df"}

package/dist/primitives/checkbox.js

@@ -0,0 +1,107 @@
+// @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 {
+    static get observedAttributes() {
+        return ["checked", "indeterminate", "disabled", "label", "size"];
+    }
+    constructor() {
+        super();
+        this._checked = false;
+        this._indeterminate = false;
+        this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+        this._checked = this.hasAttribute("checked");
+        this._indeterminate = this.hasAttribute("indeterminate");
+        this.render();
+    }
+    attributeChangedCallback(name) {
+        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) {
+        this._checked = v;
+        this._indeterminate = false;
+        v ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+        this.removeAttribute("indeterminate");
+        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 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] ?? 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.key === " ") {
+                e.preventDefault();
+                this.toggle();
+            }
+        });
+    }
+}
+//# sourceMappingURL=checkbox.js.map

package/dist/primitives/checkbox.js.map

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

package/dist/primitives/input.d.ts

@@ -0,0 +1,14 @@
+export declare class NexInput extends HTMLElement {
+    private input;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get value(): string;
+    set value(v: string);
+    focus(): void;
+    blur(): void;
+    private setupProxy;
+    private render;
+}
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/primitives/input.ts"],"names":[],"mappings":"AAeA,qBAAa,QAAS,SAAQ,WAAW;IACvC,OAAO,CAAC,KAAK,CAAiC;IAE9C,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAKjB,wBAAwB;IAMxB,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAGlB;IAED,KAAK;IACL,IAAI;IAEJ,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,MAAM;CA2Hf"}

package/dist/primitives/input.js

@@ -0,0 +1,177 @@
+// @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 {
+    static get observedAttributes() {
+        return ["type", "label", "placeholder", "helper", "error", "size", "disabled", "required", "value"];
+    }
+    constructor() {
+        super();
+        this.input = null;
+        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() {
+        return this.input?.value ?? this.getAttribute("value") ?? "";
+    }
+    set value(v) {
+        if (this.input)
+            this.input.value = v;
+        this.setAttribute("value", v);
+    }
+    focus() { this.input?.focus(); }
+    blur() { this.input?.blur(); }
+    setupProxy() {
+        const input = this.shadowRoot?.querySelector("input");
+        if (!input)
+            return;
+        this.input = input;
+        // Re-dispatch events from shadow root so they bubble out
+        const forward = (e) => this.dispatchEvent(new e.constructor(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)));
+    }
+    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 = {
+            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;
+    }
+}
+//# sourceMappingURL=input.js.map

package/dist/primitives/input.js.map

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

package/dist/primitives/panel.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/primitives/panel.ts"],"names":[],"mappings":"AAOA,qBAAa,QAAS,SAAQ,WAAW;IACvC,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAIjB,wBAAwB;IAIxB,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,MAAM;CAqEf"}

package/dist/primitives/panel.js

@@ -0,0 +1,101 @@
+// @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();
+    }
+    getMask() {
+        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 = {
+            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;
+    }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        const mask = this.getMask();
+        const variant = this.getAttribute("variant") ?? "base";
+        const elevation = this.getAttribute("elevation") ?? "0";
+        const bgMap = {
+            "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 = {
+            "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>
+    `;
+    }
+}
+//# sourceMappingURL=panel.js.map

package/dist/primitives/panel.js.map

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

package/dist/primitives/progress.d.ts

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

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

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