@sula-tech/webcomponents 0.8.0 → 0.9.0

package/dist/components/sula-textarea.js

@@ -138,32 +138,32 @@ const SulaTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextarea exten
     }
     render() {
         const containerHeight = this.rows * 24 + 48;
-        return (h(Host, { key: '0586b5e31d5bda244cc4c1f993f883eb785f39b3', ref: node => (this.node = node) }, h("div", { key: '28d230964948161540ba96b948a4d7a63ecd8748' }, h("div", { key: '478bf00ea0f45407ecc36708bcfe4fb95fe49619', id: "textarea-container", class: {
+        return (h(Host, { key: '2fcc7b99d23820764799bcf3eed0a7605c9d2f72', ref: node => (this.node = node) }, h("div", { key: '5b6fecfaef896755b1862cf8468fb31297169885' }, h("div", { key: 'ed641bb610135c66bd663bfa284f0d81e7e1738d', id: "textarea-container", class: {
                 'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,
                 'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,
                 'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-text': !this.disabled,
-            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: 'c0450390c2d40f2a3e0e4b486fc9580c369bf912', class: {
+            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '69ad1cd86d7395ecdeb7a6aeac02273370a10fef', class: {
                 'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,
                 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: '2d73abbc98c3cb70d0234f9629b392cb1cd8f83e', class: {
+            }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: '0352260db567f497becd5f8f347cf206aecb595b', class: {
                 'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,
                 'text-sm top-12 left-16': this.isActive,
                 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: 'ce8af45adb97d797dbc07a557235c47378a10bb2', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
+            }, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: 'edeacd0e14078081c1d5986e60852b8ed5b6a6a6', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
                 'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,
                 'text-text-primary': !this.disabled,
                 'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,
-            }, style: { paddingTop: this.isActive ? `${this.labelPadding}px` : '0' }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: '676e2be41409e297c350dd95a715014f0589594c', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: '69a22552f623c03a458137f3bfa4f92a2fb0a62d', id: "textarea-help-text", class: {
+            }, style: { paddingTop: this.isActive ? `${this.labelPadding}px` : '0' }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: 'f1036cde3cf5bbd60fba5938fc2054d12d110624', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'db55a3ae78e63964a9d26a8cd44a71874a500004', id: "textarea-help-text", class: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,
-            } }, this.helpText)), this.maxLength && (h("div", { key: '29ab1273eef5520bb5436aaa0baa767cd24644c4', id: "max-length-container", class: {
+            } }, this.helpText)), this.maxLength && (h("div", { key: '4e73a6934d1b959c86fa2c9f4cfb5dadaf20e943', id: "max-length-container", class: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,

package/dist/components/sula-textfield.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
 import { g as getDefaultExportFromCjs } from './p-B85MJLTf.js';
-import { d as defineCustomElement$2 } from './p-BrY8WoEl.js';
+import { d as defineCustomElement$2 } from './p-ff6chV3i.js';
 
 var SulaTextfieldType;
 (function (SulaTextfieldType) {
@@ -384,14 +384,14 @@ const SulaTextfield$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextfield ext
         return this.icon;
     }
     render() {
-        return (h(Host, { key: '2287b38b1441da7fcab2caa4dd495bc593a4e268', ref: node => (this.node = node) }, h("div", { key: '1e9538652f7a57c1f8a99760028a45726d4cf1b8' }, h("div", { key: '48b038746bbe3ba11ea374c7cc5e28cae65d5d30', id: "button-container", class: {
+        return (h(Host, { key: '7f3d6752bea3a556fa77a52513eabe0655d9234d', ref: node => (this.node = node) }, h("div", { key: 'cd9cbc06a0244161c06e770d87834ddd7311ada3' }, h("div", { key: 'b66f4f6f2a5cfdcbc212264d500d219b4deb335e', id: "button-container", class: {
                 'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
                 'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
                 'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
                 'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-pointer': !this.disabled,
-            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '9c4a9e1e7017593db75a77585c1392125b1a98b9', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: 'd07846ebd85fff94f477f59b512304e00102bb58', class: "font-bold text-sm text-text-primary from-down" }, this.label), h("input", { key: '92955b96950cae398681755cec9fcbf0a8327695', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue }))), h("div", { key: 'cadc6f4d64f3e85dee539b9bf270a839709c1bfa', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (h("div", { key: '5f0fee95a1d89743084c86f9b9bdec69b3976da5', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: 'a41969ee7b207c6fdcaf43c0345e927a19b58d1c', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: '14e36d4ee992aeb3ab3341f030fc05231c803e3d', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'e4286e8635c5b6f8fc3032359567cbdba2479748', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (h("div", { key: 'd2813e234f057e952f85ded243510a4a12a43654', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
+            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '79eabd37134b96bbb5a315ca73d81d0c8be01ce4', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: 'd24af603a0e365d1482daea31b75fa8e86fd5e8a', class: "font-bold text-sm text-text-primary from-down" }, this.label), h("input", { key: 'aea523483b4a39f31b0d2c9506001d69c397da70', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue }))), h("div", { key: '2e3d9fbe37ba1dc5aceea8e8ce7e6152f740a955', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (h("div", { key: 'd6f5aacd486e093d64307117d8c6b0bfea460f49', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: 'cfc400df76f2c487a09b641c101543a3e2895bd1', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: '8d450abc836ba702aeda16f4f6c1d379373ee698', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'e0d25ac6878865510a0afc793d81b07d8a016bb5', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (h("div", { key: '6384a6d5468b03bef0ddf2e0345438efe1b5fd32', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
     }
     static get watchers() { return {
         "value": ["watchValueHandler"]

package/dist/components/sula-tiles.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-BrY8WoEl.js';
+import { d as defineCustomElement$2 } from './p-ff6chV3i.js';
 
 var SulaTilesType;
 (function (SulaTilesType) {
@@ -139,7 +139,7 @@ const SulaTiles$1 = /*@__PURE__*/ proxyCustomElement(class SulaTiles extends H {
         return (h("div", { class: this.getTextContainerClasses() }, h("span", { class: this.getTextClasses(true), title: this.ellipsis ? this.text : undefined }, this.text), this.hasSubText && (h("span", { class: this.getTextClasses(false), title: this.ellipsis ? this.subText : undefined }, this.subText))));
     }
     render() {
-        return (h(Host, { key: 'bd93893ff89e978258ceb3621a260b305de320f5' }, h("div", { key: '661f7050d9a816aa3437e2d1c0de179cfb9d605d', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
+        return (h(Host, { key: '32ee3b19743f75052428014a010545e4a6c9098b' }, h("div", { key: '09384829c191d1ec6518e0ccbc3ac4c290e1e798', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
     }
     static get style() { return sulaTilesCss; }
 }, [1, "sula-tiles", {

package/dist/components/sula-timeline-list.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-BrY8WoEl.js';
+import { d as defineCustomElement$2 } from './p-ff6chV3i.js';
 
 var SulaTimelineListItemIconStatus;
 (function (SulaTimelineListItemIconStatus) {
@@ -51,7 +51,7 @@ const SulaTimelineList$1 = /*@__PURE__*/ proxyCustomElement(class SulaTimelineLi
         return iconByStatus[status];
     }
     render() {
-        return (h(Host, { key: 'be18bb7bcb5cff8b45b1dc33fe9f4a14b6e21d5e' }, h("div", { key: '1a2bd5e50d78223c0ef3824beef028b0d6b8fa27', class: "flex flex-col bg-surface-on-body px-24 py-32 w-fit rounded-md" }, this.sulaTimelineList.map((item, index) => {
+        return (h(Host, { key: '61a3d229e04aa2935ef1d03fca3aa519aa21d13b' }, h("div", { key: 'cd8c1483e94ea8f8cf2e0c51e400528f83fcf9f5', class: "flex flex-col bg-surface-on-body px-24 py-32 w-fit rounded-md" }, this.sulaTimelineList.map((item, index) => {
             const isLastItem = index === this.sulaTimelineList.length - 1;
             return (h("div", { class: {
                     'relative timeline-item': true,

package/dist/esm/{index-or7qTZgT.js → index-CrFclBiX.js}

@@ -784,10 +784,17 @@ var insertBefore = (parent, newNode, reference) => {
 };
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const hostElm = hostRef.$hostElement$;
+  const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
   const isHostElement = isHost(renderFnResults);
   const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
+  if (cmpMeta.$attrsToReflect$) {
+    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+    cmpMeta.$attrsToReflect$.map(
+      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
+    );
+  }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
       if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
@@ -1143,8 +1150,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         /* @__PURE__ */ new Set([
           ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
           ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
+            var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
+            if (m[0] & 512 /* ReflectAttr */) {
+              (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
+            }
             return attrName;
           })
         ])
@@ -1334,6 +1345,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$listeners$ = compactMeta[3];
       }
+      {
+        cmpMeta.$attrsToReflect$ = [];
+      }
       {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
       }
@@ -1469,6 +1483,6 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 export { Host as H, getElement as a, bootstrapLazy as b, createEvent as c, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-or7qTZgT.js.map
+//# sourceMappingURL=index-CrFclBiX.js.map
 
-//# sourceMappingURL=index-or7qTZgT.js.map
+//# sourceMappingURL=index-CrFclBiX.js.map