).

---

📦 Installation

``bash
npm install @o.z/zui


or

yarn add @o.z/zui

or

pnpm add @o.z/zui
`

---

🛠️ Usage Example

ZUI is designed to work seamlessly with Vite’s raw and inline string imports for templates and styles.

$3

`typescript
import { defineElement, event, property, ref, Zui, EventEmitter } from "@o.z/zui"
import htmlStr from "./counter.html?raw"
import cssStr from "./counter.scss?inline"

export type CounterClickEvent = { count: number; e?: MouseEvent }

@defineElement({
tagName: "my-counter",
html: htmlStr,
css: cssStr,
options: { extends: 'div' } // Extend native div functionality
})
export class Counter extends Zui(HTMLDivElement) {
// 1. Reactive State: Synchronized with 'count' attribute
@property()
accessor count = 0

// 2. DOM References: Automatically queried from Shadow Root
@ref(".counter-display")
displayRef!: HTMLDivElement

@ref(".btn-inc")
incBtn!: HTMLButtonElement

// 3. Event Emitter: Typed event dispatcher
@event()
counterClick!: EventEmitter

connected() {
this.incBtn.addEventListener("click", () => {
this.counterClick.emit({ count: 1 })
})
}

// 4. Reactive Hook: Called when 'count' changes
countUpdate(oldValue: number, newValue: number) {
this.displayRef.innerHTML = newValue.toString()
}
}
`

$3

Since we extended the native div, we use the is attribute:

`html



`

---

📚 API Reference

API Docs

---

💻 Development

`bash


Install dependencies

yarn install

Start development server

yarn dev

Build the library

yarn build
``

---

License and AI Training

This project is licensed under the GNU General Public License v3.0 (GPLv3).

The authors of this software consider the use of this code, including its source code, documentation, and any other project artifacts, for the training of artificial intelligence (AI) systems (including but not limited to machine learning, large language models, and other AI technologies) to be creating a derivative work. As such, any entity using this code for such purposes must comply with the terms of the GPLv3. This includes, but is not limited to, making the entire source code of the AI system that uses this code available under the same GPLv3 license.

If you wish to use this code for AI training without being subject to the GPLv3, please contact the authors to negotiate a separate license.