@o.z/zui 0.2.0 → 0.3.0

package/dist/decorators.cjs

@@ -2,11 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const html = require('./html.cjs');
+const types = require('./types.cjs');
 const utilities = require('./utilities.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 _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 OBSERVED_ATTRS_KEY=Symbol("observedAttributes");var callFun=function(attribute,oldValue,newValue,bindThis){if(attribute){var funName=attribute.callbackName;if(funName in bindThis){if(attribute.type==="string"){bindThis[funName](oldValue,newValue);}else if(attribute.type==="number"){bindThis[funName](+oldValue,+newValue);}else if(attribute.type==="boolean"){bindThis[funName](typeof oldValue==="string"?oldValue===""||String(oldValue).toLowerCase()==="true":Boolean(oldValue),typeof newValue==="string"?newValue===""||String(newValue).toLowerCase()==="true":Boolean(newValue));}}}};var getConvertor=function(param,bindThis){var type=param.type,name=param.name;var value=bindThis.getAttribute(name);if(value!==undefined&&value!==null){if(type==="number")return +value;else if(type==="string")return value;else if(type==="boolean"){return value===""||(value===null||value===void 0?void 0:value.toLowerCase())==="true"}else throw 'Only accept type of "string", "number", "boolean"'}};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];if(!html)throw "Html is empty!";var template=document.createElement("template");template.innerHTML="<style>".concat(css,"</style>").concat(html);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("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 _this1;(_this1=_this)===null||_this1===void 0?void 0:_this1["connected"]();});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this=this;queueMicrotask(function(){var _this1;(_this1=_this)===null||_this1===void 0?void 0:_this1["disconnected"]();});}},{key:"attributeChangedCallback",value:function attributeChangedCallback(attributeName,oldValue,newValue){if(oldValue!==newValue){var _this_attributyyeChanged,_this;(_this=this)===null||_this===void 0?void 0:(_this_attributyyeChanged=_this["attributyyeChanged"])===null||_this_attributyyeChanged===void 0?void 0:_this_attributyyeChanged.call(_this,attributeName,oldValue,newValue);}if(oldValue!==newValue){callFun(attributes.find(function(i){return i.name===attributeName}),oldValue,newValue,this);}}}]);return NewClass}(originalClass);NewClass.observedAttributes=attributes.map(function(i){return i.name});if(!customElements.get(tagName)){customElements.define(tagName,NewClass,options);}return NewClass}};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=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){var _this=this;attribute.type=type!==null&&type!==void 0?type:typeof initialValue==="undefined"?"undefined":_type_of(initialValue);this.setAttribute(attribute.name,String(initialValue));queueMicrotask(function(){callFun(attribute,initialValue,initialValue,_this);});return initialValue},get:function get(){return getConvertor(attribute,this)},set:function set(value){var _this=this;queueMicrotask(function(){var oldValue=getConvertor(attribute,_this);if(attribute.type==="string"||attribute.type==="number"){_this.setAttribute(attributName,String(value));}else if(attribute.type==="boolean"){_this.setAttribute(attributName,value?"true":"false");}else throw 'Only accept type of "string", "number", "boolean"';if(oldValue!==value)callFun(attribute,oldValue,value,_this);});}}}};var ref=function(selector){return function(_target,context){context.addInitializer(function(){var _this=this;queueMicrotask(function(){_this[context.name]=_this.shadowRoot.querySelector(selector);});});}};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(){_this[context.name]=new utilities.EventEmitter(_this,eventName);});});}};
+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 OBSERVED_ATTRS_KEY=Symbol("observedAttributes");var callFun=function(attribute,oldValue,newValue,zuiThis){if(attribute){var funName=attribute.callbackName;if(funName in zuiThis){if(attribute.type==="string"){zuiThis[funName](oldValue,newValue);}else if(attribute.type==="number"){zuiThis[funName](+oldValue,+newValue);}else if(attribute.type==="boolean"){zuiThis[funName](typeof oldValue==="string"?oldValue===""||String(oldValue).toLowerCase()==="true":Boolean(oldValue),typeof newValue==="string"?newValue===""||String(newValue).toLowerCase()==="true":Boolean(newValue));}}}};var getConvertor=function(param,zuiThis){var type=param.type,name=param.name;var value=zuiThis.getAttribute(name);if(value!==undefined&&value!==null){if(type==="number")return +value;else if(type==="string")return value;else if(type==="boolean"){return value===""||(value===null||value===void 0?void 0:value.toLowerCase())==="true"}else throw 'Only accept type of "string", "number", "boolean"'}};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[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("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(!customElements.get(tagName)){customElements.define(tagName,NewClass,options);}return NewClass}};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=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);});}}}};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();}}}};var ref=function(selector){return function(_target,context){context.addInitializer(function(){var _this=this;queueMicrotask(function(){var zuiThis=_this;zuiThis[context.name.toString()]=zuiThis.shadowRoot.querySelector(selector);});});}};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 types.EventEmitter(zuiThis,eventName);});});}};
 
 exports.defineElement = defineElement;
 exports.event = event;
 exports.property = property;
 exports.ref = ref;
+exports.state = state;

package/dist/decorators.d.ts

@@ -1,7 +1,8 @@
-import { EventEmitter } from './utilities';
+import { SafeHTML } from './html';
+import { EventEmitter } from './types';
 export interface DefineElementProp {
     tagName: string;
-    html: string;
+    html: string | SafeHTML;
     css?: string;
     options?: ElementDefinitionOptions;
 }
@@ -23,6 +24,22 @@ export declare const property: ({ type, name, callbackName }?: PropertyProp) =>
     get: (this: T) => V;
     set: (this: T, value: V) => void;
 };
+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.
+ */
+export declare const state: ({ callbackName }?: StateOptions) => <T extends HTMLElement, V>(accessor: {
+    get: (this: T) => V;
+    set: (this: T, value: V) => void;
+}, context: ClassAccessorDecoratorContext<T, V>) => {
+    init(this: T, initialValue: V): V;
+    get(this: T): V;
+    set(this: T, newValue: V): void;
+};
 export declare const ref: (selector: string) => <T extends HTMLElement, V extends HTMLElement>(_target: undefined, context: ClassFieldDecoratorContext<T, V>) => void;
 interface EventProp {
     name?: string;

package/dist/decorators.js

@@ -1,5 +1,7 @@
-import { toKebabCase, EventEmitter } from './utilities.js';
+import { SafeHTML } from './html.js';
+import { EventEmitter } from './types.js';
+import { toKebabCase, makeReactive } from './utilities.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 _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 OBSERVED_ATTRS_KEY=Symbol("observedAttributes");var callFun=function(attribute,oldValue,newValue,bindThis){if(attribute){var funName=attribute.callbackName;if(funName in bindThis){if(attribute.type==="string"){bindThis[funName](oldValue,newValue);}else if(attribute.type==="number"){bindThis[funName](+oldValue,+newValue);}else if(attribute.type==="boolean"){bindThis[funName](typeof oldValue==="string"?oldValue===""||String(oldValue).toLowerCase()==="true":Boolean(oldValue),typeof newValue==="string"?newValue===""||String(newValue).toLowerCase()==="true":Boolean(newValue));}}}};var getConvertor=function(param,bindThis){var type=param.type,name=param.name;var value=bindThis.getAttribute(name);if(value!==undefined&&value!==null){if(type==="number")return +value;else if(type==="string")return value;else if(type==="boolean"){return value===""||(value===null||value===void 0?void 0:value.toLowerCase())==="true"}else throw 'Only accept type of "string", "number", "boolean"'}};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];if(!html)throw "Html is empty!";var template=document.createElement("template");template.innerHTML="<style>".concat(css,"</style>").concat(html);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("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 _this1;(_this1=_this)===null||_this1===void 0?void 0:_this1["connected"]();});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this=this;queueMicrotask(function(){var _this1;(_this1=_this)===null||_this1===void 0?void 0:_this1["disconnected"]();});}},{key:"attributeChangedCallback",value:function attributeChangedCallback(attributeName,oldValue,newValue){if(oldValue!==newValue){var _this_attributyyeChanged,_this;(_this=this)===null||_this===void 0?void 0:(_this_attributyyeChanged=_this["attributyyeChanged"])===null||_this_attributyyeChanged===void 0?void 0:_this_attributyyeChanged.call(_this,attributeName,oldValue,newValue);}if(oldValue!==newValue){callFun(attributes.find(function(i){return i.name===attributeName}),oldValue,newValue,this);}}}]);return NewClass}(originalClass);NewClass.observedAttributes=attributes.map(function(i){return i.name});if(!customElements.get(tagName)){customElements.define(tagName,NewClass,options);}return NewClass}};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){var _this=this;attribute.type=type!==null&&type!==void 0?type:typeof initialValue==="undefined"?"undefined":_type_of(initialValue);this.setAttribute(attribute.name,String(initialValue));queueMicrotask(function(){callFun(attribute,initialValue,initialValue,_this);});return initialValue},get:function get(){return getConvertor(attribute,this)},set:function set(value){var _this=this;queueMicrotask(function(){var oldValue=getConvertor(attribute,_this);if(attribute.type==="string"||attribute.type==="number"){_this.setAttribute(attributName,String(value));}else if(attribute.type==="boolean"){_this.setAttribute(attributName,value?"true":"false");}else throw 'Only accept type of "string", "number", "boolean"';if(oldValue!==value)callFun(attribute,oldValue,value,_this);});}}}};var ref=function(selector){return function(_target,context){context.addInitializer(function(){var _this=this;queueMicrotask(function(){_this[context.name]=_this.shadowRoot.querySelector(selector);});});}};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(){_this[context.name]=new EventEmitter(_this,eventName);});});}};
+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 OBSERVED_ATTRS_KEY=Symbol("observedAttributes");var callFun=function(attribute,oldValue,newValue,zuiThis){if(attribute){var funName=attribute.callbackName;if(funName in zuiThis){if(attribute.type==="string"){zuiThis[funName](oldValue,newValue);}else if(attribute.type==="number"){zuiThis[funName](+oldValue,+newValue);}else if(attribute.type==="boolean"){zuiThis[funName](typeof oldValue==="string"?oldValue===""||String(oldValue).toLowerCase()==="true":Boolean(oldValue),typeof newValue==="string"?newValue===""||String(newValue).toLowerCase()==="true":Boolean(newValue));}}}};var getConvertor=function(param,zuiThis){var type=param.type,name=param.name;var value=zuiThis.getAttribute(name);if(value!==undefined&&value!==null){if(type==="number")return +value;else if(type==="string")return value;else if(type==="boolean"){return value===""||(value===null||value===void 0?void 0:value.toLowerCase())==="true"}else throw 'Only accept type of "string", "number", "boolean"'}};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("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(!customElements.get(tagName)){customElements.define(tagName,NewClass,options);}return NewClass}};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);});}}}};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();}}}};var ref=function(selector){return function(_target,context){context.addInitializer(function(){var _this=this;queueMicrotask(function(){var zuiThis=_this;zuiThis[context.name.toString()]=zuiThis.shadowRoot.querySelector(selector);});});}};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);});});}};
 
-export { defineElement, event, property, ref };
+export { defineElement, event, property, ref, state };

package/dist/html.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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 _instanceof(left,right){if(right!=null&&typeof Symbol!=="undefined"&&right[Symbol.hasInstance]){return !!right[Symbol.hasInstance](left)}else {return left instanceof right}}var SafeHTML=/*#__PURE__*/function(){function SafeHTML(value){_class_call_check(this,SafeHTML);_define_property(this,"value",void 0);this.value=value;}_create_class(SafeHTML,[{key:"toString",value:function toString(){return this.value}}]);return SafeHTML}();var escapeCharMap={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};var escape=function(str){return str.replace(/[&<>"']/g,function(m){return escapeCharMap[m]})};var html=function(strings){for(var _len=arguments.length,values=new Array(_len>1?_len-1:0),_key=1;_key<_len;_key++){values[_key-1]=arguments[_key];}var result=strings[0];for(var i=0;i<values.length;i++){var val=values[i];var escapedVal="";if(_instanceof(val,SafeHTML)){escapedVal=val.value;}else if(Array.isArray(val)){escapedVal=val.map(function(v){return _instanceof(v,SafeHTML)?v.value:escape(String(v))}).join("");}else {escapedVal=escape(String(val));}result+=escapedVal+strings[i+1];}return new SafeHTML(result)};var unsafeHTML=function(str){return new SafeHTML(str)};
+
+exports.SafeHTML = SafeHTML;
+exports.html = html;
+exports.unsafeHTML = unsafeHTML;

package/dist/html.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A wrapper class to mark strings as "safe" (already sanitized or trusted).
+ */
+export declare class SafeHTML {
+    readonly value: string;
+    constructor(value: string);
+    toString(): string;
+}
+/**
+ * A tagged template literal for safely generating HTML strings.
+ * It automatically escapes values unless they are already valid `SafeHTML`.
+ * * Usage:
+ * const content = html`<div>${userInput}</div>`;
+ */
+export declare const html: (strings: TemplateStringsArray, ...values: any[]) => SafeHTML;
+/**
+ * An escape hatch to treat a string as safe HTML.
+ * WARNING: Only use this with trusted content.
+ */
+export declare const unsafeHTML: (str: string) => SafeHTML;

package/dist/html.js

@@ -0,0 +1,3 @@
+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 _instanceof(left,right){if(right!=null&&typeof Symbol!=="undefined"&&right[Symbol.hasInstance]){return !!right[Symbol.hasInstance](left)}else {return left instanceof right}}var SafeHTML=/*#__PURE__*/function(){function SafeHTML(value){_class_call_check(this,SafeHTML);_define_property(this,"value",void 0);this.value=value;}_create_class(SafeHTML,[{key:"toString",value:function toString(){return this.value}}]);return SafeHTML}();var escapeCharMap={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};var escape=function(str){return str.replace(/[&<>"']/g,function(m){return escapeCharMap[m]})};var html=function(strings){for(var _len=arguments.length,values=new Array(_len>1?_len-1:0),_key=1;_key<_len;_key++){values[_key-1]=arguments[_key];}var result=strings[0];for(var i=0;i<values.length;i++){var val=values[i];var escapedVal="";if(_instanceof(val,SafeHTML)){escapedVal=val.value;}else if(Array.isArray(val)){escapedVal=val.map(function(v){return _instanceof(v,SafeHTML)?v.value:escape(String(v))}).join("");}else {escapedVal=escape(String(val));}result+=escapedVal+strings[i+1];}return new SafeHTML(result)};var unsafeHTML=function(str){return new SafeHTML(str)};
+
+export { SafeHTML, html, unsafeHTML };

package/dist/index.cjs

@@ -5,15 +5,22 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const utilities = require('./utilities.cjs');
 const decorators = require('./decorators.cjs');
 const dom = require('./dom.cjs');
+const types = require('./types.cjs');
+const html = require('./html.cjs');
 
 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){return /*#__PURE__*/function(Base){_inherits(_class,Base);function _class(){_class_call_check(this,_class);return _call_super(this,_class,arguments)}_create_class(_class,[{key:"addEventListener",value:function addEventListener(type,listener,options){_get(_get_prototype_of(_class.prototype),"addEventListener",this).call(this,type,listener,options);}}]);return _class}(Base)}
 
-exports.EventEmitter = utilities.EventEmitter;
 exports.delay = utilities.delay;
+exports.makeReactive = utilities.makeReactive;
 exports.toKebabCase = utilities.toKebabCase;
 exports.defineElement = decorators.defineElement;
 exports.event = decorators.event;
 exports.property = decorators.property;
 exports.ref = decorators.ref;
+exports.state = decorators.state;
 exports.createElement = dom.createElement;
+exports.EventEmitter = types.EventEmitter;
+exports.SafeHTML = html.SafeHTML;
+exports.html = html.html;
+exports.unsafeHTML = html.unsafeHTML;
 exports.Zui = Zui;

package/dist/index.d.ts

@@ -1,7 +1,9 @@
-import { EventEmitter } from './utilities';
+import { EventEmitter } from './types.ts';
 export * from './utilities';
 export * from './decorators';
 export * from './dom';
+export * from './types.ts';
+export * from './html.ts';
 type InferEventDetail<T, K extends keyof T> = T[K] extends EventEmitter<infer P> ? P : never;
 export declare function Zui<TBase extends new (...args: any[]) => HTMLElement>(Base: TBase): {
     new (...args: any[]): {

package/dist/index.js

@@ -1,6 +1,8 @@
-export { EventEmitter, delay, toKebabCase } from './utilities.js';
-export { defineElement, event, property, ref } from './decorators.js';
+export { delay, makeReactive, toKebabCase } from './utilities.js';
+export { defineElement, event, property, ref, state } from './decorators.js';
 export { createElement } from './dom.js';
+export { EventEmitter } from './types.js';
+export { SafeHTML, html, unsafeHTML } from './html.js';
 
 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){return /*#__PURE__*/function(Base){_inherits(_class,Base);function _class(){_class_call_check(this,_class);return _call_super(this,_class,arguments)}_create_class(_class,[{key:"addEventListener",value:function addEventListener(type,listener,options){_get(_get_prototype_of(_class.prototype),"addEventListener",this).call(this,type,listener,options);}}]);return _class}(Base)}
 

package/dist/types.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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 _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}));}ownKeys.forEach(function(key){_define_property(target,key,source[key]);});}return target}var EventEmitter=/*#__PURE__*/function(){function EventEmitter(target,eventName){_class_call_check(this,EventEmitter);_define_property(this,"target",void 0);_define_property(this,"eventName",void 0);this.target=target;this.eventName=eventName;}_create_class(EventEmitter,[{key:"emit",value:function emit(value,options){this.target.dispatchEvent(new CustomEvent(this.eventName,_object_spread({detail:{value:value},bubbles:true,composed:true},options)));}}]);return EventEmitter}();
+
+exports.EventEmitter = EventEmitter;

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+export interface ZuiComponent extends HTMLElement {
+    connected?(): void;
+    disconnected?(): void;
+    attributeChanged(attributeName: string, oldValue: string, newValue: string): void;
+    [key: string]: any;
+}
+export declare class EventEmitter<T> {
+    private target;
+    private eventName;
+    constructor(target: HTMLElement, eventName: string);
+    emit(value: T, options?: Omit<CustomEventInit, 'detail'>): void;
+}

package/dist/types.js

@@ -0,0 +1,3 @@
+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 _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}));}ownKeys.forEach(function(key){_define_property(target,key,source[key]);});}return target}var EventEmitter=/*#__PURE__*/function(){function EventEmitter(target,eventName){_class_call_check(this,EventEmitter);_define_property(this,"target",void 0);_define_property(this,"eventName",void 0);this.target=target;this.eventName=eventName;}_create_class(EventEmitter,[{key:"emit",value:function emit(value,options){this.target.dispatchEvent(new CustomEvent(this.eventName,_object_spread({detail:{value:value},bubbles:true,composed:true},options)));}}]);return EventEmitter}();
+
+export { EventEmitter };

package/dist/utilities.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-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 _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}));}ownKeys.forEach(function(key){_define_property(target,key,source[key]);});}return target}var delay=function(ms){return new Promise(function(resolve){return setTimeout(resolve,ms)})};var toKebabCase=function(str){return str.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_]+/g,"-").toLowerCase()};var EventEmitter=/*#__PURE__*/function(){function EventEmitter(target,eventName){_class_call_check(this,EventEmitter);_define_property(this,"target",void 0);_define_property(this,"eventName",void 0);this.target=target;this.eventName=eventName;}_create_class(EventEmitter,[{key:"emit",value:function emit(value,options){this.target.dispatchEvent(new CustomEvent(this.eventName,_object_spread({detail:{value:value},bubbles:true,composed:true},options)));}}]);return EventEmitter}();
+var delay=function(ms){return new Promise(function(resolve){return setTimeout(resolve,ms)})};var toKebabCase=function(str){return str.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_]+/g,"-").toLowerCase()};var makeReactive=function(target,onChange){var handler={set:function set(target,prop,value,receiver){var result=Reflect.set(target,prop,value,receiver);onChange();return result},deleteProperty:function deleteProperty(target,prop){var result=Reflect.deleteProperty(target,prop);onChange();return result}};return new Proxy(target,handler)};
 
-exports.EventEmitter = EventEmitter;
 exports.delay = delay;
+exports.makeReactive = makeReactive;
 exports.toKebabCase = toKebabCase;

package/dist/utilities.d.ts

@@ -1,8 +1,3 @@
 export declare const delay: (ms: number) => Promise<unknown>;
 export declare const toKebabCase: (str: string) => string;
-export declare class EventEmitter<T> {
-    private target;
-    private eventName;
-    constructor(target: HTMLElement, eventName: string);
-    emit(value: T, options?: Omit<CustomEventInit, 'detail'>): void;
-}
+export declare const makeReactive: <T extends object>(target: T, onChange: () => void) => T;

package/dist/utilities.js

@@ -1,3 +1,3 @@
-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 _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}));}ownKeys.forEach(function(key){_define_property(target,key,source[key]);});}return target}var delay=function(ms){return new Promise(function(resolve){return setTimeout(resolve,ms)})};var toKebabCase=function(str){return str.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_]+/g,"-").toLowerCase()};var EventEmitter=/*#__PURE__*/function(){function EventEmitter(target,eventName){_class_call_check(this,EventEmitter);_define_property(this,"target",void 0);_define_property(this,"eventName",void 0);this.target=target;this.eventName=eventName;}_create_class(EventEmitter,[{key:"emit",value:function emit(value,options){this.target.dispatchEvent(new CustomEvent(this.eventName,_object_spread({detail:{value:value},bubbles:true,composed:true},options)));}}]);return EventEmitter}();
+var delay=function(ms){return new Promise(function(resolve){return setTimeout(resolve,ms)})};var toKebabCase=function(str){return str.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_]+/g,"-").toLowerCase()};var makeReactive=function(target,onChange){var handler={set:function set(target,prop,value,receiver){var result=Reflect.set(target,prop,value,receiver);onChange();return result},deleteProperty:function deleteProperty(target,prop){var result=Reflect.deleteProperty(target,prop);onChange();return result}};return new Proxy(target,handler)};
 
-export { EventEmitter, delay, toKebabCase };
+export { delay, makeReactive, toKebabCase };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@o.z/zui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Next-generation Web Component framework leveraging TypeScript Stage 3 standard decorators.",
   "homepage": "https://github.com/z-npm/zui#readme",
   "docs": "https://github.com/z-npm/zui#readme",
@@ -74,11 +74,21 @@
       "import": "./dist/utilities.js",
       "require": "./dist/utilities.cjs"
     },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.js",
+      "require": "./dist/types.cjs"
+    },
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./html": {
+      "types": "./dist/html.d.ts",
+      "import": "./dist/html.js",
+      "require": "./dist/html.cjs"
+    },
     "./dom": {
       "types": "./dist/dom.d.ts",
       "import": "./dist/dom.js",