@o.z/zui 0.4.4 → 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/mixin.d.ts

@@ -1,9 +1,70 @@
 import { ZuiEventMap } from './types';
+/**
+ * Mixin function that enhances base HTML elements with ZUI capabilities.
+ *
+ * Features:
+ * - Type-safe event listeners for custom events
+ * - Abstract lifecycle methods (connected, disconnected, attributeChanged)
+ * - Proper inheritance chain for customized built-in elements
+ *
+ * @template TBase - Base constructor type (extends HTMLElement)
+ * @param {TBase} Base - Base class constructor to enhance
+ * @returns {abstract class} Enhanced class with ZUI capabilities
+ *
+ * @example
+ * ```typescript
+ * // Extend native div element
+ * class Counter extends Zui(HTMLDivElement) {
+ *   connected() {
+ *     console.log('Counter connected to DOM');
+ *   }
+ * }
+ *
+ * // Extend button element
+ * class CustomButton extends Zui(HTMLButtonElement) {
+ *   @event()
+ *   customClick!: EventEmitter<void>;
+ * }
+ * ```
+ *
+ * @remarks
+ * - Must be used as a base class for all ZUI components
+ * - Provides abstract methods that should be implemented
+ * - Enables type inference for custom event maps
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements}
+ */
 export declare function Zui<TBase extends new (...args: any[]) => HTMLElement>(Base: TBase): (abstract new (...args: any[]) => {
+    /**
+     * Called when the element is connected to the DOM.
+     * Override to perform setup operations.
+     */
     connected?(): void;
+    /**
+     * Called when the element is disconnected from the DOM.
+     * Override to perform cleanup operations.
+     */
     disconnected?(): void;
+    /**
+     * Called when an observed attribute changes.
+     * @param attributeName - Name of the changed attribute
+     * @param oldValue - Previous attribute value
+     * @param newValue - New attribute value
+     */
     attributeChanged?(attributeName: string, oldValue: string, newValue: string): void;
+    /**
+     * Type-safe overload for adding event listeners.
+     * Supports both custom ZUI events and standard DOM events.
+     *
+     * @template K - Event type key
+     * @param {K} type - Event type to listen for
+     * @param {(ev: CustomEvent<ZuiEventMap<this>[K]>) => void} listener - Event handler function
+     * @param {boolean | AddEventListenerOptions} [options] - Event listener options
+     */
     addEventListener<K extends never>(type: K, listener: (ev: CustomEvent<ZuiEventMap</*elided*/ any>[K]>) => void, options?: boolean | AddEventListenerOptions): void;
+    /**
+     * Standard DOM event listener.
+     */
     addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
     addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
     accessKey: string;

package/dist/decorators/property.cjs

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const utilities = require('../utilities.cjs');
-const _helper = require('../_helper-YcE1MU2f.cjs');
-const _constants = require('../_constants-D8uytuQc.cjs');
+const utilities_toKebabCase = require('../utilities/toKebabCase.cjs');
+const index = require('../index-YcE1MU2f.cjs');
+const _constants = require('../_constants-CnGtrSkM.cjs');
 
-function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}var property=function(){var _ref=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},type=_ref.type,name=_ref.name,callbackName=_ref.callbackName;return function(_accessor,context){var _context_metadata,_OBSERVED_ATTRS_KEY,_;var attributName=name!==null&&name!==void 0?name:utilities.toKebabCase(context.name.toString());var attributCallbackName=callbackName!==null&&callbackName!==void 0?callbackName:"".concat(context.name.toString(),"Update");var attribute={type:type,name:attributName,callbackName:attributCallbackName};(_=(_context_metadata=context.metadata)[_OBSERVED_ATTRS_KEY=_constants.OBSERVED_ATTRS_KEY])!==null&&_!==void 0?_:_context_metadata[_OBSERVED_ATTRS_KEY]=[];var attributes=context.metadata[_constants.OBSERVED_ATTRS_KEY];attributes.push(attribute);return {init:function init(initialValue){attribute.type=type!==null&&type!==void 0?type:typeof initialValue==="undefined"?"undefined":_type_of(initialValue);var zuiThis=this;zuiThis.setAttribute(attribute.name,String(initialValue));queueMicrotask(function(){_helper.callFun(attribute,initialValue,initialValue,zuiThis);});return initialValue},get:function get(){var zuiThis=this;return _helper.getConvertor(attribute,zuiThis)},set:function set(value){var _this=this;queueMicrotask(function(){var zuiThis=_this;var oldValue=_helper.getConvertor(attribute,zuiThis);if(attribute.type==="string"||attribute.type==="number"){zuiThis.setAttribute(attributName,String(value));}else if(attribute.type==="boolean"){zuiThis.setAttribute(attributName,value?"true":"false");}else throw 'Only accept type of "string", "number", "boolean"';if(oldValue!==value)_helper.callFun(attribute,oldValue,value,zuiThis);});}}}};
+function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}var property=function(){var _ref=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},type=_ref.type,name=_ref.name,callbackName=_ref.callbackName;return function(_accessor,context){var _context_metadata,_OBSERVED_ATTRS_KEY,_;var attributName=name!==null&&name!==void 0?name:utilities_toKebabCase.toKebabCase(context.name.toString());var attributCallbackName=callbackName!==null&&callbackName!==void 0?callbackName:"".concat(context.name.toString(),"Update");var attribute={type:type,name:attributName,callbackName:attributCallbackName};(_=(_context_metadata=context.metadata)[_OBSERVED_ATTRS_KEY=_constants.OBSERVED_ATTRS_KEY])!==null&&_!==void 0?_:_context_metadata[_OBSERVED_ATTRS_KEY]=[];var attributes=context.metadata[_constants.OBSERVED_ATTRS_KEY];attributes.push(attribute);return {init:function init(initialValue){attribute.type=type!==null&&type!==void 0?type:typeof initialValue==="undefined"?"undefined":_type_of(initialValue);var zuiThis=this;var defaultValue=index.getConvertor(attribute,zuiThis);if(defaultValue===undefined||defaultValue===null){zuiThis.setAttribute(attribute.name,String(initialValue));queueMicrotask(function(){index.callFun(attribute,initialValue,initialValue,zuiThis);});}return initialValue},get:function get(){var zuiThis=this;return index.getConvertor(attribute,zuiThis)},set:function set(value){var _this=this;queueMicrotask(function(){var zuiThis=_this;var oldValue=index.getConvertor(attribute,zuiThis);if(attribute.type==="string"||attribute.type==="number"){zuiThis.setAttribute(attributName,String(value));}else if(attribute.type==="boolean"){zuiThis.setAttribute(attributName,value?"true":"false");}else throw 'Only accept type of "string", "number", "boolean"';if(oldValue!==value)index.callFun(attribute,oldValue,value,zuiThis);});}}}};
 
 exports.property = property;

package/dist/decorators/property.d.ts

@@ -1,10 +1,70 @@
+/**
+ * @fileoverview Property decorator for reactive attributes in ZUI components.
+ * Creates two-way binding between JavaScript properties and DOM attributes.
+ *
+ * @module property
+ */
+/**
+ * Supported property types for attribute reflection.
+ */
 export type PropertyType = "string" | "number" | "boolean";
+/**
+ * Suffix for update callback methods.
+ */
 export type PropertyCallback = "Update" | "Changed";
+/**
+ * Configuration options for the @property decorator.
+ *
+ * @interface PropertyOptions
+ * @property {PropertyType} [type] - Type of the property for attribute conversion
+ * @property {string} [name] - Custom attribute name (defaults to kebab-case of property name)
+ * @property {`${string}${PropertyCallback}`} [callbackName] - Custom update callback method name
+ *
+ * @example
+ * @property({ type: 'number', name: 'count-value' })
+ * accessor count = 0;
+ */
 export interface PropertyOptions {
     type?: PropertyType;
     name?: string;
     callbackName?: `${string}${PropertyCallback}`;
 }
+/**
+ * Accessor decorator that creates reactive properties synchronized with DOM attributes.
+ *
+ * Features:
+ * - Automatic attribute reflection (property ↔ attribute)
+ * - Type conversion (string, number, boolean)
+ * - Lifecycle hooks with automatic update callbacks
+ * - Default values from initializer
+ *
+ * @template T - Element type extending HTMLElement
+ * @template V - Property value type (number | string | boolean)
+ * @param {PropertyOptions} [options={}] - Property configuration options
+ * @returns {ClassAccessorDecorator} An accessor decorator function
+ *
+ * @example
+ * ```typescript
+ * // Basic usage with type inference
+ * @property()
+ * accessor count = 0; // Creates 'count' attribute, calls countUpdate()
+ *
+ * // With custom attribute name
+ * @property({ name: 'is-enabled' })
+ * accessor enabled = true; // Creates 'is-enabled' attribute
+ *
+ * // With explicit type
+ * @property({ type: 'boolean' })
+ * accessor disabled = false;
+ * ```
+ *
+ * @remarks
+ * - Boolean attributes are set as "true"/"false" strings
+ * - Empty string for boolean attributes evaluates to true
+ * - Update methods are called asynchronously via queueMicrotask
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute}
+ */
 export declare const property: ({ type, name, callbackName }?: PropertyOptions) => <T extends HTMLElement, V extends number | string | boolean>(_accessor: {
     get: (this: T) => V;
     set: (this: T, value: V) => void;

package/dist/decorators/property.js

@@ -1,7 +1,7 @@
-import { toKebabCase } from '../utilities.js';
-import { g as getConvertor, c as callFun } from '../_helper-B0T4FTYh.js';
-import { O as OBSERVED_ATTRS_KEY } from '../_constants-DLywjTCf.js';
+import { toKebabCase } from '../utilities/toKebabCase.js';
+import { g as getConvertor, c as callFun } from '../index-B0T4FTYh.js';
+import { O as OBSERVED_ATTRS_KEY } from '../_constants-DXNZF5so.js';
 
-function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}var property=function(){var _ref=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},type=_ref.type,name=_ref.name,callbackName=_ref.callbackName;return function(_accessor,context){var _context_metadata,_OBSERVED_ATTRS_KEY,_;var attributName=name!==null&&name!==void 0?name:toKebabCase(context.name.toString());var attributCallbackName=callbackName!==null&&callbackName!==void 0?callbackName:"".concat(context.name.toString(),"Update");var attribute={type:type,name:attributName,callbackName:attributCallbackName};(_=(_context_metadata=context.metadata)[_OBSERVED_ATTRS_KEY=OBSERVED_ATTRS_KEY])!==null&&_!==void 0?_:_context_metadata[_OBSERVED_ATTRS_KEY]=[];var attributes=context.metadata[OBSERVED_ATTRS_KEY];attributes.push(attribute);return {init:function init(initialValue){attribute.type=type!==null&&type!==void 0?type:typeof initialValue==="undefined"?"undefined":_type_of(initialValue);var zuiThis=this;zuiThis.setAttribute(attribute.name,String(initialValue));queueMicrotask(function(){callFun(attribute,initialValue,initialValue,zuiThis);});return initialValue},get:function get(){var zuiThis=this;return getConvertor(attribute,zuiThis)},set:function set(value){var _this=this;queueMicrotask(function(){var zuiThis=_this;var oldValue=getConvertor(attribute,zuiThis);if(attribute.type==="string"||attribute.type==="number"){zuiThis.setAttribute(attributName,String(value));}else if(attribute.type==="boolean"){zuiThis.setAttribute(attributName,value?"true":"false");}else throw 'Only accept type of "string", "number", "boolean"';if(oldValue!==value)callFun(attribute,oldValue,value,zuiThis);});}}}};
+function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}var property=function(){var _ref=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},type=_ref.type,name=_ref.name,callbackName=_ref.callbackName;return function(_accessor,context){var _context_metadata,_OBSERVED_ATTRS_KEY,_;var attributName=name!==null&&name!==void 0?name:toKebabCase(context.name.toString());var attributCallbackName=callbackName!==null&&callbackName!==void 0?callbackName:"".concat(context.name.toString(),"Update");var attribute={type:type,name:attributName,callbackName:attributCallbackName};(_=(_context_metadata=context.metadata)[_OBSERVED_ATTRS_KEY=OBSERVED_ATTRS_KEY])!==null&&_!==void 0?_:_context_metadata[_OBSERVED_ATTRS_KEY]=[];var attributes=context.metadata[OBSERVED_ATTRS_KEY];attributes.push(attribute);return {init:function init(initialValue){attribute.type=type!==null&&type!==void 0?type:typeof initialValue==="undefined"?"undefined":_type_of(initialValue);var zuiThis=this;var defaultValue=getConvertor(attribute,zuiThis);if(defaultValue===undefined||defaultValue===null){zuiThis.setAttribute(attribute.name,String(initialValue));queueMicrotask(function(){callFun(attribute,initialValue,initialValue,zuiThis);});}return initialValue},get:function get(){var zuiThis=this;return getConvertor(attribute,zuiThis)},set:function set(value){var _this=this;queueMicrotask(function(){var zuiThis=_this;var oldValue=getConvertor(attribute,zuiThis);if(attribute.type==="string"||attribute.type==="number"){zuiThis.setAttribute(attributName,String(value));}else if(attribute.type==="boolean"){zuiThis.setAttribute(attributName,value?"true":"false");}else throw 'Only accept type of "string", "number", "boolean"';if(oldValue!==value)callFun(attribute,oldValue,value,zuiThis);});}}}};
 
 export { property };

package/dist/decorators/refs.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const _constants = require('../_constants-D8uytuQc.cjs');
+const _constants = require('../_constants-CnGtrSkM.cjs');
 
-var ref=function(selector){return function(_target,context){var _context_metadata,_REFS_KEY,_;(_=(_context_metadata=context.metadata)[_REFS_KEY=_constants.REFS_KEY])!==null&&_!==void 0?_:_context_metadata[_REFS_KEY]=[];var refs=context.metadata[_constants.REFS_KEY];refs.push(selector);context.addInitializer(function(){var _this=this;queueMicrotask(function(){var zuiThis=_this;zuiThis[context.name.toString()]=zuiThis.shadowRoot.querySelector(selector);});});}};
+var ref=function(selector){return function(_target,context){context.addInitializer(function(){var zuiThis=this;var refInit=zuiThis===null||zuiThis===void 0?void 0:zuiThis[_constants.REF_CONSTRUCTOR_KEY];zuiThis[_constants.REF_CONSTRUCTOR_KEY]=function(){if(typeof refInit==="function")refInit.call(this);zuiThis[context.name.toString()]=zuiThis.shadowRoot.querySelector(selector);};});}};
 
 exports.ref = ref;

package/dist/decorators/refs.d.ts

@@ -1 +1,45 @@
+/**
+ * @fileoverview Refs decorator for type-safe DOM element references in ZUI components.
+ * Provides automatic element querying from Shadow DOM with proper typing.
+ *
+ * @module refs
+ */
+/**
+ * Field decorator that automatically queries and assigns DOM elements from the shadow root.
+ *
+ * Features:
+ * - Type-safe element references
+ * - Automatic query on component initialization
+ * - Works with any CSS selector
+ * - Asynchronous resolution via queueMicrotask
+ *
+ * @template T - Element type extending HTMLElement
+ * @template V - Reference element type extending HTMLElement
+ * @param {string} selector - CSS selector to query the element in shadow DOM
+ * @returns {ClassFieldDecorator} A field decorator function
+ *
+ * @throws {Error} If selector doesn't match any element (returns null)
+ *
+ * @example
+ * ```typescript
+ * // Query by class
+ * @ref('.counter-display')
+ * displayRef!: HTMLDivElement;
+ *
+ * // Query by ID
+ * @ref('#submit-btn')
+ * submitButton!: HTMLButtonElement;
+ *
+ * // Query with complex selector
+ * @ref('form input[type="text"]')
+ * textInput!: HTMLInputElement;
+ * ```
+ *
+ * @remarks
+ * - References are resolved after the element is connected to DOM
+ * - Uses shadowRoot.querySelector() internally
+ * - Non-null assertion is used, ensure selector matches
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector}
+ */
 export declare const ref: (selector: string) => <T extends HTMLElement, V extends HTMLElement>(_target: undefined, context: ClassFieldDecoratorContext<T, V>) => void;

package/dist/decorators/refs.js

@@ -1,5 +1,5 @@
-import { R as REFS_KEY } from '../_constants-DLywjTCf.js';
+import { R as REF_CONSTRUCTOR_KEY } from '../_constants-DXNZF5so.js';
 
-var ref=function(selector){return function(_target,context){var _context_metadata,_REFS_KEY,_;(_=(_context_metadata=context.metadata)[_REFS_KEY=REFS_KEY])!==null&&_!==void 0?_:_context_metadata[_REFS_KEY]=[];var refs=context.metadata[REFS_KEY];refs.push(selector);context.addInitializer(function(){var _this=this;queueMicrotask(function(){var zuiThis=_this;zuiThis[context.name.toString()]=zuiThis.shadowRoot.querySelector(selector);});});}};
+var ref=function(selector){return function(_target,context){context.addInitializer(function(){var zuiThis=this;var refInit=zuiThis===null||zuiThis===void 0?void 0:zuiThis[REF_CONSTRUCTOR_KEY];zuiThis[REF_CONSTRUCTOR_KEY]=function(){if(typeof refInit==="function")refInit.call(this);zuiThis[context.name.toString()]=zuiThis.shadowRoot.querySelector(selector);};});}};
 
 export { ref };

package/dist/decorators/state.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const utilities = require('../utilities.cjs');
+const utilities_makeReactive = require('../utilities/makeReactive.cjs');
 
-function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}var state=function(){var callbackName=(arguments.length>0&&arguments[0]!==void 0?arguments[0]:{}).callbackName;return function(accessor,context){var propName=context.name.toString();var updateMethodName=callbackName!==null&&callbackName!==void 0?callbackName:"".concat(propName,"Update");return {init:function init(initialValue){var zuiThis=this;var triggerUpdate=function(){queueMicrotask(function(){if(typeof zuiThis[updateMethodName]==="function"){zuiThis[updateMethodName](initialValue,initialValue);}});};var finalValue=initialValue;if(initialValue&&(typeof initialValue==="undefined"?"undefined":_type_of(initialValue))==="object"){finalValue=utilities.makeReactive(initialValue,triggerUpdate);}triggerUpdate();return finalValue},get:function get(){return accessor.get.call(this)},set:function set(newValue){var zuiThis=this;var triggerUpdate=function(){queueMicrotask(function(){if(typeof zuiThis[updateMethodName]==="function"){zuiThis[updateMethodName](newValue,newValue);}});};var finalValue=newValue;if(newValue&&(typeof newValue==="undefined"?"undefined":_type_of(newValue))==="object"){finalValue=utilities.makeReactive(newValue,triggerUpdate);}accessor.set.call(this,finalValue);triggerUpdate();}}}};
+function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}var state=function(){var callbackName=(arguments.length>0&&arguments[0]!==void 0?arguments[0]:{}).callbackName;return function(accessor,context){var propName=context.name.toString();var updateMethodName=callbackName!==null&&callbackName!==void 0?callbackName:"".concat(propName,"Update");return {init:function init(initialValue){var zuiThis=this;var triggerUpdate=function(){queueMicrotask(function(){if(typeof zuiThis[updateMethodName]==="function"){zuiThis[updateMethodName](initialValue,initialValue);}});};var finalValue=initialValue;if(initialValue&&(typeof initialValue==="undefined"?"undefined":_type_of(initialValue))==="object"){finalValue=utilities_makeReactive.makeReactive(initialValue,triggerUpdate);}triggerUpdate();return finalValue},get:function get(){return accessor.get.call(this)},set:function set(newValue){var zuiThis=this;var triggerUpdate=function(){queueMicrotask(function(){if(typeof zuiThis[updateMethodName]==="function"){zuiThis[updateMethodName](newValue,newValue);}});};var finalValue=newValue;if(newValue&&(typeof newValue==="undefined"?"undefined":_type_of(newValue))==="object"){finalValue=utilities_makeReactive.makeReactive(newValue,triggerUpdate);}accessor.set.call(this,finalValue);triggerUpdate();}}}};
 
 exports.state = state;

package/dist/decorators/state.d.ts

@@ -1,10 +1,61 @@
+/**
+ * @fileoverview State decorator for reactive internal state management in ZUI components.
+ * Provides reactive state that triggers updates without reflecting to DOM attributes.
+ *
+ * @module state
+ */
+/**
+ * Configuration options for the @state decorator.
+ *
+ * @interface StateOptions
+ * @property {string} [callbackName] - Custom update callback method name
+ *
+ * @example
+ * @state({ callbackName: 'onHistoryChange' })
+ * accessor history: number[] = [];
+ */
 export interface StateOptions {
     callbackName?: string;
 }
 /**
- * Decorator for internal reactive state.
- * Triggers component updates but does NOT reflect to DOM attributes.
- * Useful for Objects, Arrays, or private data.
+ * Accessor decorator for internal reactive state that doesn't reflect to DOM attributes.
+ *
+ * Features:
+ * - Reactive state for objects and arrays
+ * - Automatic update callbacks on state changes
+ * - Deep reactivity with Proxy
+ * - No attribute reflection (unlike @property)
+ *
+ * @template T - Element type extending HTMLElement
+ * @template V - State value type
+ * @param {StateOptions} [options={}] - State configuration options
+ * @returns {ClassAccessorDecorator} An accessor decorator function
+ *
+ * @example
+ * ```typescript
+ * // Reactive array state
+ * @state()
+ * accessor items: string[] = [];
+ * // Calls itemsUpdate() on array mutations
+ *
+ * // Reactive object state
+ * @state()
+ * accessor user = { name: '', age: 0 };
+ * // Calls userUpdate() on property changes
+ *
+ * // With custom callback
+ * @state({ callbackName: 'onDataChange' })
+ * accessor data = {};
+ * // Calls onDataChange() instead of dataUpdate()
+ * ```
+ *
+ * @remarks
+ * - Best for complex objects, arrays, or private data
+ * - Uses Proxy for deep reactivity
+ * - Update callbacks receive (oldValue, newValue)
+ * - Changes are batched with queueMicrotask
+ *
+ * @see {@link makeReactive}
  */
 export declare const state: ({ callbackName }?: StateOptions) => <T extends HTMLElement, V>(accessor: {
     get: (this: T) => V;

package/dist/decorators/state.js

@@ -1,4 +1,4 @@
-import { makeReactive } from '../utilities.js';
+import { makeReactive } from '../utilities/makeReactive.js';
 
 function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}var state=function(){var callbackName=(arguments.length>0&&arguments[0]!==void 0?arguments[0]:{}).callbackName;return function(accessor,context){var propName=context.name.toString();var updateMethodName=callbackName!==null&&callbackName!==void 0?callbackName:"".concat(propName,"Update");return {init:function init(initialValue){var zuiThis=this;var triggerUpdate=function(){queueMicrotask(function(){if(typeof zuiThis[updateMethodName]==="function"){zuiThis[updateMethodName](initialValue,initialValue);}});};var finalValue=initialValue;if(initialValue&&(typeof initialValue==="undefined"?"undefined":_type_of(initialValue))==="object"){finalValue=makeReactive(initialValue,triggerUpdate);}triggerUpdate();return finalValue},get:function get(){return accessor.get.call(this)},set:function set(newValue){var zuiThis=this;var triggerUpdate=function(){queueMicrotask(function(){if(typeof zuiThis[updateMethodName]==="function"){zuiThis[updateMethodName](newValue,newValue);}});};var finalValue=newValue;if(newValue&&(typeof newValue==="undefined"?"undefined":_type_of(newValue))==="object"){finalValue=makeReactive(newValue,triggerUpdate);}accessor.set.call(this,finalValue);triggerUpdate();}}}};