@o.z/zui 0.4.3 → 0.4.6

package/README.md

@@ -106,30 +106,7 @@ Since we extended the native `div`, we use the `is` attribute:
 ---
 
 ## 📚 API Reference
-
-### ```@defineElement(config)```
-Class decorator to register the custom element.
-* **tagName**: The kebab-case name for your component.
-* **html**: Raw HTML string for the template.
-* **css**: (Optional) CSS string to be injected into the Shadow Root.
-* **options**: (Optional) Standard `ElementDefinitionOptions` (e.g., `{ extends: 'button' }`).
-
-### ```@property(options)```
-Used on `accessor` fields to create reactive attributes.
-* **type**: `"string" | "number" | "boolean"`. If omitted, it's inferred from the initial value.
-* **name**: Custom attribute name (defaults to kebab-case of the property).
-* **Hook**: Automatically calls `[propertyName]Update(old, new)` on change.
-
-### ```@ref(selector)```
-Field decorator that automatically assigns a child element from the Shadow Root to the property using `querySelector`.
-
-### ```@event(options)```
-Field decorator that initializes an `EventEmitter`. 
-* **name**: Custom event name (defaults to kebab-case of the property).
-* **Usage**: Call `this.propertyName.emit(payload)` to dispatch a `CustomEvent`.
-
-### ```Zui(BaseClass)```
-A class mixin that enhances the base element (like `HTMLElement` or `HTMLDivElement`) with improved TypeScript definitions for `addEventListener`, ensuring custom events have correct payload types.
+[API Docs](docs/api/README.md)
 
 ---
 

package/dist/_constants-CnGtrSkM.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var REF_CONSTRUCTOR_KEY=Symbol("constructor");var EVENT_CONSTRUCTOR_KEY=Symbol("constructor");var OBSERVED_ATTRS_KEY=Symbol("observedAttributes");
+
+exports.EVENT_CONSTRUCTOR_KEY = EVENT_CONSTRUCTOR_KEY;
+exports.OBSERVED_ATTRS_KEY = OBSERVED_ATTRS_KEY;
+exports.REF_CONSTRUCTOR_KEY = REF_CONSTRUCTOR_KEY;

package/dist/_constants-DXNZF5so.js

@@ -0,0 +1,3 @@
+var REF_CONSTRUCTOR_KEY=Symbol("constructor");var EVENT_CONSTRUCTOR_KEY=Symbol("constructor");var OBSERVED_ATTRS_KEY=Symbol("observedAttributes");
+
+export { EVENT_CONSTRUCTOR_KEY as E, OBSERVED_ATTRS_KEY as O, REF_CONSTRUCTOR_KEY as R };

package/dist/decorators/defineElement.cjs

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const html = require('../html.cjs');
-const utilities = require('../utilities.cjs');
-const _helper = require('../_helper-YcE1MU2f.cjs');
-const _constants = require('../_constants-D8uytuQc.cjs');
+const utilities_isBrowser = require('../utilities/isBrowser.cjs');
+const index = require('../index-YcE1MU2f.cjs');
+const _constants = require('../_constants-CnGtrSkM.cjs');
 
-function _array_like_to_array(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_without_holes(arr){if(Array.isArray(arr))return _array_like_to_array(arr)}function _assert_this_initialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return self}function _call_super(_this,derived,args){derived=_get_prototype_of(derived);return _possible_constructor_return(_this,_is_native_reflect_construct()?Reflect.construct(derived,args||[],_get_prototype_of(_this).constructor):derived.apply(_this,args))}function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);return Constructor}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else {obj[key]=value;}return obj}function _get_prototype_of(o){_get_prototype_of=Object.setPrototypeOf?Object.getPrototypeOf:function getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)};return _get_prototype_of(o)}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function")}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_set_prototype_of(subClass,superClass);}function _instanceof(left,right){if(right!=null&&typeof Symbol!=="undefined"&&right[Symbol.hasInstance]){return !!right[Symbol.hasInstance](left)}else {return left instanceof right}}function _iterable_to_array(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _non_iterable_spread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _possible_constructor_return(self,call){if(call&&(_type_of(call)==="object"||typeof call==="function")){return call}return _assert_this_initialized(self)}function _set_prototype_of(o,p){_set_prototype_of=Object.setPrototypeOf||function setPrototypeOf(o,p){o.__proto__=p;return o};return _set_prototype_of(o,p)}function _to_consumable_array(arr){return _array_without_holes(arr)||_iterable_to_array(arr)||_unsupported_iterable_to_array(arr)||_non_iterable_spread()}function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}function _is_native_reflect_construct(){try{var result=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(_){}return (_is_native_reflect_construct=function(){return !!result})()}var defineElement=function(param){var tagName=param.tagName,html$1=param.html,_param_css=param.css,css=_param_css===void 0?"":_param_css,options=param.options;return function(originalClass,context){var attributes=context.metadata[_constants.OBSERVED_ATTRS_KEY];var htmlString=_instanceof(html$1,html.SafeHTML)?html$1.value:html$1;if(!htmlString)throw "Html is empty!";var template=document.createElement("template");template.innerHTML="<style>".concat(css,"</style>").concat(htmlString);var NewClass=/*#__PURE__*/function(originalClass){_inherits(NewClass,originalClass);function NewClass(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_class_call_check(this,NewClass);var _this;_this=_call_super(this,NewClass,_to_consumable_array(args)),_define_property(_this,"shadowRoot",void 0);_this.setAttribute("z-is",tagName);_this.shadowRoot=_this.attachShadow({mode:"closed"});_this.shadowRoot.appendChild(template.content.cloneNode(true));return _this}_create_class(NewClass,[{key:"connectedCallback",value:function connectedCallback(){var _this=this;queueMicrotask(function(){var _zuiThis_connected;var zuiThis=_this;(_zuiThis_connected=zuiThis.connected)===null||_zuiThis_connected===void 0?void 0:_zuiThis_connected.call(zuiThis);});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this=this;queueMicrotask(function(){var _zuiThis_disconnected;var zuiThis=_this;(_zuiThis_disconnected=zuiThis.disconnected)===null||_zuiThis_disconnected===void 0?void 0:_zuiThis_disconnected.call(zuiThis);});}},{key:"attributeChangedCallback",value:function attributeChangedCallback(attributeName,oldValue,newValue){var zuiThis=this;if(oldValue!==newValue){var _zuiThis_attributeChanged;(_zuiThis_attributeChanged=zuiThis.attributeChanged)===null||_zuiThis_attributeChanged===void 0?void 0:_zuiThis_attributeChanged.call(zuiThis,attributeName,oldValue,newValue);}if(oldValue!==newValue){_helper.callFun(attributes.find(function(i){return i.name===attributeName}),oldValue,newValue,zuiThis);}}}]);return NewClass}(originalClass);NewClass.observedAttributes=attributes.map(function(i){return i.name});if(utilities.isBrowser&&!customElements.get(tagName)){customElements.define(tagName,NewClass,options);}return NewClass}};
+function _array_like_to_array(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_without_holes(arr){if(Array.isArray(arr))return _array_like_to_array(arr)}function _assert_this_initialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return self}function _call_super(_this,derived,args){derived=_get_prototype_of(derived);return _possible_constructor_return(_this,_is_native_reflect_construct()?Reflect.construct(derived,args||[],_get_prototype_of(_this).constructor):derived.apply(_this,args))}function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);return Constructor}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else {obj[key]=value;}return obj}function _get_prototype_of(o){_get_prototype_of=Object.setPrototypeOf?Object.getPrototypeOf:function getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)};return _get_prototype_of(o)}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function")}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_set_prototype_of(subClass,superClass);}function _instanceof(left,right){if(right!=null&&typeof Symbol!=="undefined"&&right[Symbol.hasInstance]){return !!right[Symbol.hasInstance](left)}else {return left instanceof right}}function _iterable_to_array(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _non_iterable_spread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _possible_constructor_return(self,call){if(call&&(_type_of(call)==="object"||typeof call==="function")){return call}return _assert_this_initialized(self)}function _set_prototype_of(o,p){_set_prototype_of=Object.setPrototypeOf||function setPrototypeOf(o,p){o.__proto__=p;return o};return _set_prototype_of(o,p)}function _to_consumable_array(arr){return _array_without_holes(arr)||_iterable_to_array(arr)||_unsupported_iterable_to_array(arr)||_non_iterable_spread()}function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}function _is_native_reflect_construct(){try{var result=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(_){}return (_is_native_reflect_construct=function(){return !!result})()}var defineElement=function(param){var tagName=param.tagName,html$1=param.html,_param_css=param.css,css=_param_css===void 0?"":_param_css,options=param.options;return function(originalClass,context){var attributes=context.metadata[_constants.OBSERVED_ATTRS_KEY];var htmlString=_instanceof(html$1,html.SafeHTML)?html$1.value:html$1;if(!htmlString)throw "Html is empty!";var template=document.createElement("template");template.innerHTML="<style>".concat(css,"</style>").concat(htmlString);var NewClass=/*#__PURE__*/function(originalClass){_inherits(NewClass,originalClass);function NewClass(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_class_call_check(this,NewClass);var _this;var _this_EVENT_CONSTRUCTOR_KEY,_this1,_this_REF_CONSTRUCTOR_KEY,_this2;_this=_call_super(this,NewClass,_to_consumable_array(args)),_define_property(_this,"shadowRoot",void 0);_this.setAttribute("z-is",tagName);_this.shadowRoot=_this.attachShadow({mode:"closed"});_this.shadowRoot.appendChild(template.content.cloneNode(true));(_this1=_this)===null||_this1===void 0?void 0:(_this_EVENT_CONSTRUCTOR_KEY=_this1[_constants.EVENT_CONSTRUCTOR_KEY])===null||_this_EVENT_CONSTRUCTOR_KEY===void 0?void 0:_this_EVENT_CONSTRUCTOR_KEY.call(_this1);(_this2=_this)===null||_this2===void 0?void 0:(_this_REF_CONSTRUCTOR_KEY=_this2[_constants.REF_CONSTRUCTOR_KEY])===null||_this_REF_CONSTRUCTOR_KEY===void 0?void 0:_this_REF_CONSTRUCTOR_KEY.call(_this2);return _this}_create_class(NewClass,[{key:"connectedCallback",value:function connectedCallback(){var _this=this;queueMicrotask(function(){var _zuiThis_connected;var zuiThis=_this;(_zuiThis_connected=zuiThis.connected)===null||_zuiThis_connected===void 0?void 0:_zuiThis_connected.call(zuiThis);});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this=this;queueMicrotask(function(){var _zuiThis_disconnected;var zuiThis=_this;(_zuiThis_disconnected=zuiThis.disconnected)===null||_zuiThis_disconnected===void 0?void 0:_zuiThis_disconnected.call(zuiThis);});}},{key:"attributeChangedCallback",value:function attributeChangedCallback(attributeName,oldValue,newValue){var zuiThis=this;if(oldValue!==newValue){var _zuiThis_attributeChanged;zuiThis===null||zuiThis===void 0?void 0:(_zuiThis_attributeChanged=zuiThis.attributeChanged)===null||_zuiThis_attributeChanged===void 0?void 0:_zuiThis_attributeChanged.call(zuiThis,attributeName,oldValue,newValue);index.callFun(attributes.find(function(i){return i.name===attributeName}),oldValue,newValue,zuiThis);}}}]);return NewClass}(originalClass);NewClass.observedAttributes=attributes.map(function(i){return i.name});if(utilities_isBrowser.isBrowser&&!customElements.get(tagName)){customElements.define(tagName,NewClass,options);}return NewClass}};
 
 exports.defineElement = defineElement;

package/dist/decorators/defineElement.d.ts

@@ -1,11 +1,59 @@
 import { SafeHTML } from '../html';
 import { UpdateMethods } from './types';
+/**
+ * Configuration options for defining a custom element.
+ *
+ * @interface DefineElementOptions
+ * @property {string} tagName - The custom element tag name (must contain hyphen, e.g., 'my-counter')
+ * @property {string|SafeHTML} html - HTML template string or SafeHTML object for the element's shadow DOM
+ * @property {string} [css] - Optional CSS string to inject into the shadow DOM
+ * @property {ElementDefinitionOptions} [options] - Custom element definition options including extension support
+ *
+ * @example
+ * @defineElement({
+ *   tagName: 'my-counter',
+ *   html: '<div>Count: <span class="count"></span></div>',
+ *   css: ':host { display: block; }',
+ *   options: { extends: 'div' }
+ * })
+ */
 export interface DefineElementOptions {
     tagName: string;
     html: string | SafeHTML;
     css?: string;
     options?: ElementDefinitionOptions;
 }
+/**
+ * Class decorator that registers a custom element with the browser's Custom Elements registry.
+ *
+ * This decorator:
+ * 1. Creates a Shadow DOM for the element
+ * 2. Injects HTML and CSS templates
+ * 3. Sets up lifecycle callbacks (connected/disconnected)
+ * 4. Handles attribute change observation
+ * 5. Registers the element with customElements.define()
+ *
+ * @template T - Constructor type extending CustomElementConstructor
+ * @param {DefineElementOptions} config - Element configuration object
+ * @returns {ClassDecorator} A class decorator function
+ *
+ * @throws {string} If HTML template is empty
+ * @example
+ * ```typescript
+ * @defineElement({
+ *   tagName: 'my-counter',
+ *   html: counterTemplate,
+ *   css: counterStyles,
+ *   options: { extends: 'div' }
+ * })
+ * class Counter extends Zui(HTMLDivElement) {
+ *   // class implementation
+ * }
+ * ```
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow}
+ */
 export declare const defineElement: ({ tagName, html, css, options }: DefineElementOptions) => <T extends CustomElementConstructor>(originalClass: T & {
     prototype: UpdateMethods<InstanceType<T>>;
 }, context: ClassDecoratorContext<T>) => T;

package/dist/decorators/defineElement.js

@@ -1,8 +1,8 @@
 import { SafeHTML } from '../html.js';
-import { isBrowser } from '../utilities.js';
-import { c as callFun } from '../_helper-B0T4FTYh.js';
-import { O as OBSERVED_ATTRS_KEY } from '../_constants-DLywjTCf.js';
+import { isBrowser } from '../utilities/isBrowser.js';
+import { c as callFun } from '../index-B0T4FTYh.js';
+import { O as OBSERVED_ATTRS_KEY, E as EVENT_CONSTRUCTOR_KEY, R as REF_CONSTRUCTOR_KEY } from '../_constants-DXNZF5so.js';
 
-function _array_like_to_array(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_without_holes(arr){if(Array.isArray(arr))return _array_like_to_array(arr)}function _assert_this_initialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return self}function _call_super(_this,derived,args){derived=_get_prototype_of(derived);return _possible_constructor_return(_this,_is_native_reflect_construct()?Reflect.construct(derived,args||[],_get_prototype_of(_this).constructor):derived.apply(_this,args))}function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);return Constructor}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else {obj[key]=value;}return obj}function _get_prototype_of(o){_get_prototype_of=Object.setPrototypeOf?Object.getPrototypeOf:function getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)};return _get_prototype_of(o)}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function")}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_set_prototype_of(subClass,superClass);}function _instanceof(left,right){if(right!=null&&typeof Symbol!=="undefined"&&right[Symbol.hasInstance]){return !!right[Symbol.hasInstance](left)}else {return left instanceof right}}function _iterable_to_array(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _non_iterable_spread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _possible_constructor_return(self,call){if(call&&(_type_of(call)==="object"||typeof call==="function")){return call}return _assert_this_initialized(self)}function _set_prototype_of(o,p){_set_prototype_of=Object.setPrototypeOf||function setPrototypeOf(o,p){o.__proto__=p;return o};return _set_prototype_of(o,p)}function _to_consumable_array(arr){return _array_without_holes(arr)||_iterable_to_array(arr)||_unsupported_iterable_to_array(arr)||_non_iterable_spread()}function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}function _is_native_reflect_construct(){try{var result=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(_){}return (_is_native_reflect_construct=function(){return !!result})()}var defineElement=function(param){var tagName=param.tagName,html=param.html,_param_css=param.css,css=_param_css===void 0?"":_param_css,options=param.options;return function(originalClass,context){var attributes=context.metadata[OBSERVED_ATTRS_KEY];var htmlString=_instanceof(html,SafeHTML)?html.value:html;if(!htmlString)throw "Html is empty!";var template=document.createElement("template");template.innerHTML="<style>".concat(css,"</style>").concat(htmlString);var NewClass=/*#__PURE__*/function(originalClass){_inherits(NewClass,originalClass);function NewClass(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_class_call_check(this,NewClass);var _this;_this=_call_super(this,NewClass,_to_consumable_array(args)),_define_property(_this,"shadowRoot",void 0);_this.setAttribute("z-is",tagName);_this.shadowRoot=_this.attachShadow({mode:"closed"});_this.shadowRoot.appendChild(template.content.cloneNode(true));return _this}_create_class(NewClass,[{key:"connectedCallback",value:function connectedCallback(){var _this=this;queueMicrotask(function(){var _zuiThis_connected;var zuiThis=_this;(_zuiThis_connected=zuiThis.connected)===null||_zuiThis_connected===void 0?void 0:_zuiThis_connected.call(zuiThis);});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this=this;queueMicrotask(function(){var _zuiThis_disconnected;var zuiThis=_this;(_zuiThis_disconnected=zuiThis.disconnected)===null||_zuiThis_disconnected===void 0?void 0:_zuiThis_disconnected.call(zuiThis);});}},{key:"attributeChangedCallback",value:function attributeChangedCallback(attributeName,oldValue,newValue){var zuiThis=this;if(oldValue!==newValue){var _zuiThis_attributeChanged;(_zuiThis_attributeChanged=zuiThis.attributeChanged)===null||_zuiThis_attributeChanged===void 0?void 0:_zuiThis_attributeChanged.call(zuiThis,attributeName,oldValue,newValue);}if(oldValue!==newValue){callFun(attributes.find(function(i){return i.name===attributeName}),oldValue,newValue,zuiThis);}}}]);return NewClass}(originalClass);NewClass.observedAttributes=attributes.map(function(i){return i.name});if(isBrowser&&!customElements.get(tagName)){customElements.define(tagName,NewClass,options);}return NewClass}};
+function _array_like_to_array(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_without_holes(arr){if(Array.isArray(arr))return _array_like_to_array(arr)}function _assert_this_initialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return self}function _call_super(_this,derived,args){derived=_get_prototype_of(derived);return _possible_constructor_return(_this,_is_native_reflect_construct()?Reflect.construct(derived,args||[],_get_prototype_of(_this).constructor):derived.apply(_this,args))}function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);return Constructor}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else {obj[key]=value;}return obj}function _get_prototype_of(o){_get_prototype_of=Object.setPrototypeOf?Object.getPrototypeOf:function getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)};return _get_prototype_of(o)}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function")}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_set_prototype_of(subClass,superClass);}function _instanceof(left,right){if(right!=null&&typeof Symbol!=="undefined"&&right[Symbol.hasInstance]){return !!right[Symbol.hasInstance](left)}else {return left instanceof right}}function _iterable_to_array(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _non_iterable_spread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _possible_constructor_return(self,call){if(call&&(_type_of(call)==="object"||typeof call==="function")){return call}return _assert_this_initialized(self)}function _set_prototype_of(o,p){_set_prototype_of=Object.setPrototypeOf||function setPrototypeOf(o,p){o.__proto__=p;return o};return _set_prototype_of(o,p)}function _to_consumable_array(arr){return _array_without_holes(arr)||_iterable_to_array(arr)||_unsupported_iterable_to_array(arr)||_non_iterable_spread()}function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}function _is_native_reflect_construct(){try{var result=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(_){}return (_is_native_reflect_construct=function(){return !!result})()}var defineElement=function(param){var tagName=param.tagName,html=param.html,_param_css=param.css,css=_param_css===void 0?"":_param_css,options=param.options;return function(originalClass,context){var attributes=context.metadata[OBSERVED_ATTRS_KEY];var htmlString=_instanceof(html,SafeHTML)?html.value:html;if(!htmlString)throw "Html is empty!";var template=document.createElement("template");template.innerHTML="<style>".concat(css,"</style>").concat(htmlString);var NewClass=/*#__PURE__*/function(originalClass){_inherits(NewClass,originalClass);function NewClass(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_class_call_check(this,NewClass);var _this;var _this_EVENT_CONSTRUCTOR_KEY,_this1,_this_REF_CONSTRUCTOR_KEY,_this2;_this=_call_super(this,NewClass,_to_consumable_array(args)),_define_property(_this,"shadowRoot",void 0);_this.setAttribute("z-is",tagName);_this.shadowRoot=_this.attachShadow({mode:"closed"});_this.shadowRoot.appendChild(template.content.cloneNode(true));(_this1=_this)===null||_this1===void 0?void 0:(_this_EVENT_CONSTRUCTOR_KEY=_this1[EVENT_CONSTRUCTOR_KEY])===null||_this_EVENT_CONSTRUCTOR_KEY===void 0?void 0:_this_EVENT_CONSTRUCTOR_KEY.call(_this1);(_this2=_this)===null||_this2===void 0?void 0:(_this_REF_CONSTRUCTOR_KEY=_this2[REF_CONSTRUCTOR_KEY])===null||_this_REF_CONSTRUCTOR_KEY===void 0?void 0:_this_REF_CONSTRUCTOR_KEY.call(_this2);return _this}_create_class(NewClass,[{key:"connectedCallback",value:function connectedCallback(){var _this=this;queueMicrotask(function(){var _zuiThis_connected;var zuiThis=_this;(_zuiThis_connected=zuiThis.connected)===null||_zuiThis_connected===void 0?void 0:_zuiThis_connected.call(zuiThis);});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this=this;queueMicrotask(function(){var _zuiThis_disconnected;var zuiThis=_this;(_zuiThis_disconnected=zuiThis.disconnected)===null||_zuiThis_disconnected===void 0?void 0:_zuiThis_disconnected.call(zuiThis);});}},{key:"attributeChangedCallback",value:function attributeChangedCallback(attributeName,oldValue,newValue){var zuiThis=this;if(oldValue!==newValue){var _zuiThis_attributeChanged;zuiThis===null||zuiThis===void 0?void 0:(_zuiThis_attributeChanged=zuiThis.attributeChanged)===null||_zuiThis_attributeChanged===void 0?void 0:_zuiThis_attributeChanged.call(zuiThis,attributeName,oldValue,newValue);callFun(attributes.find(function(i){return i.name===attributeName}),oldValue,newValue,zuiThis);}}}]);return NewClass}(originalClass);NewClass.observedAttributes=attributes.map(function(i){return i.name});if(isBrowser&&!customElements.get(tagName)){customElements.define(tagName,NewClass,options);}return NewClass}};
 
 export { defineElement };

package/dist/decorators/event.cjs

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const utilities = require('../utilities.cjs');
+const utilities_toKebabCase = require('../utilities/toKebabCase.cjs');
+const _constants = require('../_constants-CnGtrSkM.cjs');
 const decorators_types = require('./types.cjs');
 
-var event=function(){var options=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};return function(_target,context){var _options_name;var eventName=(_options_name=options.name)!==null&&_options_name!==void 0?_options_name:utilities.toKebabCase(context.name.toString());context.addInitializer(function(){var _this=this;queueMicrotask(function(){var zuiThis=_this;zuiThis[context.name.toString()]=new decorators_types.EventEmitter(zuiThis,eventName);});});}};
+var event=function(){var options=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};return function(_target,context){var _options_name;var eventName=(_options_name=options.name)!==null&&_options_name!==void 0?_options_name:utilities_toKebabCase.toKebabCase(context.name.toString());context.addInitializer(function(){var zuiThis=this;var refInit=zuiThis===null||zuiThis===void 0?void 0:zuiThis[_constants.EVENT_CONSTRUCTOR_KEY];zuiThis[_constants.EVENT_CONSTRUCTOR_KEY]=function(){if(typeof refInit==="function")refInit.call(this);zuiThis[context.name.toString()]=new decorators_types.EventEmitter(zuiThis,eventName);};});}};
 
 exports.event = event;

package/dist/decorators/event.d.ts

@@ -1,5 +1,53 @@
 import { EventEmitter } from './types';
+/**
+ * Configuration options for the @event decorator.
+ *
+ * @interface EventOptions
+ * @property {string} [name] - Custom event name (defaults to kebab-case of property name)
+ *
+ * @example
+ * @event({ name: 'count-changed' })
+ * onChange!: EventEmitter<number>;
+ */
 export interface EventOptions {
     name?: string;
 }
+/**
+ * Field decorator that creates a typed EventEmitter instance for dispatching custom events.
+ *
+ * Features:
+ * - Automatic event naming (camelCase → kebab-case)
+ * - Type-safe event payloads
+ * - Bubbles and composed by default
+ * - Asynchronous initialization via queueMicrotask
+ *
+ * @template T - Element type extending HTMLElement
+ * @template V - Event detail type
+ * @param {EventOptions} [options={}] - Event configuration options
+ * @returns {ClassFieldDecorator} A field decorator function
+ *
+ * @example
+ * ```typescript
+ * // Basic usage with automatic naming
+ * @event()
+ * counterClick!: EventEmitter<{ count: number }>;
+ * // Dispatches 'counter-click' event
+ *
+ * // With custom event name
+ * @event({ name: 'value-changed' })
+ * onChange!: EventEmitter<number>;
+ * // Dispatches 'value-changed' event
+ *
+ * // Usage in component
+ * this.counterClick.emit({ count: this.count });
+ * ```
+ *
+ * @remarks
+ * - Events bubble up the DOM tree by default
+ * - Events can cross shadow DOM boundaries (composed: true)
+ * - Event name is converted to kebab-case automatically
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent}
+ * @see {@link EventEmitter}
+ */
 export declare const event: (options?: EventOptions) => <T extends HTMLElement, V>(_target: undefined, context: ClassFieldDecoratorContext<T, EventEmitter<V>>) => void;

package/dist/decorators/event.js

@@ -1,6 +1,7 @@
-import { toKebabCase } from '../utilities.js';
+import { toKebabCase } from '../utilities/toKebabCase.js';
+import { E as EVENT_CONSTRUCTOR_KEY } from '../_constants-DXNZF5so.js';
 import { EventEmitter } from './types.js';
 
-var event=function(){var options=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};return function(_target,context){var _options_name;var eventName=(_options_name=options.name)!==null&&_options_name!==void 0?_options_name:toKebabCase(context.name.toString());context.addInitializer(function(){var _this=this;queueMicrotask(function(){var zuiThis=_this;zuiThis[context.name.toString()]=new EventEmitter(zuiThis,eventName);});});}};
+var event=function(){var options=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};return function(_target,context){var _options_name;var eventName=(_options_name=options.name)!==null&&_options_name!==void 0?_options_name:toKebabCase(context.name.toString());context.addInitializer(function(){var zuiThis=this;var refInit=zuiThis===null||zuiThis===void 0?void 0:zuiThis[EVENT_CONSTRUCTOR_KEY];zuiThis[EVENT_CONSTRUCTOR_KEY]=function(){if(typeof refInit==="function")refInit.call(this);zuiThis[context.name.toString()]=new EventEmitter(zuiThis,eventName);};});}};
 
 export { event };

package/dist/decorators/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const decorators_defineElement = require('./defineElement.cjs');
 const decorators_event = require('./event.cjs');
+const decorators_mixin = require('./mixin.cjs');
 const decorators_property = require('./property.cjs');
 const decorators_refs = require('./refs.cjs');
 const decorators_state = require('./state.cjs');
@@ -13,6 +14,7 @@ const decorators_types = require('./types.cjs');
 
 exports.defineElement = decorators_defineElement.defineElement;
 exports.event = decorators_event.event;
+exports.Zui = decorators_mixin.Zui;
 exports.property = decorators_property.property;
 exports.ref = decorators_refs.ref;
 exports.state = decorators_state.state;

package/dist/decorators/index.d.ts

@@ -1,5 +1,6 @@
 export * from './defineElement.ts';
 export * from './event.ts';
+export * from './mixin.ts';
 export * from './property.ts';
 export * from './refs.ts';
 export * from './state.ts';

package/dist/decorators/index.js

@@ -1,5 +1,6 @@
 export { defineElement } from './defineElement.js';
 export { event } from './event.js';
+export { Zui } from './mixin.js';
 export { property } from './property.js';
 export { ref } from './refs.js';
 export { state } from './state.js';

package/dist/decorators/mixin.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+function _assert_this_initialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return self}function _call_super(_this,derived,args){derived=_get_prototype_of(derived);return _possible_constructor_return(_this,_is_native_reflect_construct()?Reflect.construct(derived,args||[],_get_prototype_of(_this).constructor):derived.apply(_this,args))}function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);return Constructor}function _get(target,property,receiver){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get;}else {_get=function get(target,property,receiver){var base=_super_prop_base(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(receiver||target)}return desc.value};}return _get(target,property,receiver||target)}function _get_prototype_of(o){_get_prototype_of=Object.setPrototypeOf?Object.getPrototypeOf:function getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)};return _get_prototype_of(o)}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function")}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_set_prototype_of(subClass,superClass);}function _possible_constructor_return(self,call){if(call&&(_type_of(call)==="object"||typeof call==="function")){return call}return _assert_this_initialized(self)}function _set_prototype_of(o,p){_set_prototype_of=Object.setPrototypeOf||function setPrototypeOf(o,p){o.__proto__=p;return o};return _set_prototype_of(o,p)}function _super_prop_base(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_get_prototype_of(object);if(object===null)break}return object}function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}function _is_native_reflect_construct(){try{var result=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(_){}return (_is_native_reflect_construct=function(){return !!result})()}function Zui(Base){var ZuiElement=/*#__PURE__*/function(Base){_inherits(ZuiElement,Base);function ZuiElement(){_class_call_check(this,ZuiElement);return _call_super(this,ZuiElement,arguments)}_create_class(ZuiElement,[{key:"addEventListener",value:function addEventListener(type,listener,options){_get(_get_prototype_of(ZuiElement.prototype),"addEventListener",this).call(this,type,listener,options);}}]);return ZuiElement}(Base);return ZuiElement}
+
+exports.Zui = Zui;