@sula-tech/webcomponents 0.10.0 → 0.11.1

package/dist/components/sula-search-bar.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-BuA_ueQn.js';
+import { d as defineCustomElement$2 } from './p-DO7voMbe.js';
 
 var SulaSearchBarStyle;
 (function (SulaSearchBarStyle) {
@@ -59,11 +59,11 @@ const SulaSearchBar$1 = /*@__PURE__*/ proxyCustomElement(class SulaSearchBar ext
         return style[this.searchBarStyle];
     }
     render() {
-        return (h(Host, { key: '7ac3cb2028df077a2489a7343c7618f04976e211' }, h("div", { key: '720808c66eb0b5eeaaf38384e9c954ce2a2f42ff', class: {
+        return (h(Host, { key: 'e5d8f7608d743e75d2071dde601f3bbb295cc415' }, h("div", { key: '84e01e17c71129cce09372b1a76ed486ce3d168b', class: {
                 'flex flex-row items-center space-x-12 px-16 rounded-xxl h-44 caret-brand-primary outline-none group': true,
                 [this.getStyleClass()]: true,
                 'search-bar-focus': this.isFocused,
-            }, tabIndex: 0, onFocus: this.handleInputFocus, onClick: this.handleInputFocus }, !this.isFocused && this.leftIcon && (h("div", { key: '0d5668fc5b271feb3c7b5aea735652c2f2abdeb1', class: "flex justify-center items-center leading-6" }, h("sula-icon", { key: '0f61816afeef7db9f9c36fed903c87ea9d71edc5', icon: this.leftIcon, customClass: "text-2xl text-icon-primary group-hover:text-brand-primary" }))), h("input", { key: '27f2199404e9c197fb8d31cc8a8ab53c32f38c2e', ref: node => (this.inputElement = node), type: "text", class: "outline-none border-none w-full bg-transparent text-text-primary", placeholder: this.placeholder, onBlur: this.handleInputBlur, value: this.value, onInput: this.handleValueChanges }), this.rightIcon && (h("div", { key: 'c47335437563eb82df68215411f6add6f91c41a7', class: "flex justify-center items-center leading-6 cursor-pointer", onClick: this.handleRightIconClick, onMouseDown: e => e.preventDefault() }, h("sula-icon", { key: '83759286dee48cea835b9a16a970d4bc16c33f83', icon: this.rightIcon, customClass: "text-2xl text-icon-primary" }))))));
+            }, tabIndex: 0, onFocus: this.handleInputFocus, onClick: this.handleInputFocus }, !this.isFocused && this.leftIcon && (h("div", { key: 'f8f61d01078eea0273ca1eabdea401f841a7931a', class: "flex justify-center items-center leading-6" }, h("sula-icon", { key: '6567a11f541d140dac9303607371c7e2f8b04f96', icon: this.leftIcon, customClass: "text-2xl text-icon-primary group-hover:text-brand-primary" }))), h("input", { key: '69dc721e94529cb2f6c22baa9fd917754d7e0dff', ref: node => (this.inputElement = node), type: "text", class: "outline-none border-none w-full bg-transparent text-text-primary", placeholder: this.placeholder, onBlur: this.handleInputBlur, value: this.value, onInput: this.handleValueChanges }), this.rightIcon && (h("div", { key: '5b3b9aca94cf85dcef78605738e05900838efcf6', class: "flex justify-center items-center leading-6 cursor-pointer", onClick: this.handleRightIconClick, onMouseDown: e => e.preventDefault() }, h("sula-icon", { key: '04a65741683ccf50852e3015c085ffc5714bb0f6', icon: this.rightIcon, customClass: "text-2xl text-icon-primary" }))))));
     }
     static get style() { return sulaSearchBarCss; }
 }, [1, "sula-search-bar", {

package/dist/components/sula-segmented-control.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-BuA_ueQn.js';
+import { d as defineCustomElement$2 } from './p-DO7voMbe.js';
 
 var SulaSegmentedControlType;
 (function (SulaSegmentedControlType) {
@@ -61,7 +61,7 @@ const SulaSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class SulaSegmen
         return item.selected ? 'text-brand-primary' : 'text-text-primary';
     }
     render() {
-        return (h(Host, { key: 'e1dfe69feaf9d299a87c3006849751fb053e1410' }, h("div", { key: '77ce9955a1ed4a99c3dc35c76b4367a90b2dad61', class: {
+        return (h(Host, { key: '047229bea44614f1b7570d405d342c1924e7f368' }, h("div", { key: '14df0e4cf5316c609a5961c7b5a9e2adf75efdda', class: {
                 'flex flex-row items-center rounded-xxl p-2 w-fit backdrop-blur-[20px]': true,
                 'bg-opacity-on-body': this.color === SulaSegmentedControlColor.Gray,
                 'bg-opacity-body': this.color === SulaSegmentedControlColor.White,

package/dist/components/sula-switch.js

@@ -49,23 +49,23 @@ const SulaSwitch$1 = /*@__PURE__*/ proxyCustomElement(class SulaSwitch extends H
         };
     }
     render() {
-        return (h(Host, { key: 'e920dbb868a5bdde5e34ac4d015529aef08a8e3d' }, h("div", { key: '7552191cc1632d04c0c496f382fdbbb166547236', class: {
+        return (h(Host, { key: '5147ccb90d8e6a9b3de3eaa1ceefb3dd4e655f37' }, h("div", { key: 'ebae10c01afe26b23afcbaa86bab531fe56e617f', class: {
                 'outline-none': true,
                 'flex items-center space-x-12': !!this.label && this.type === SulaSwitchType.Default,
                 'flex items-center justify-between bg-surface-on-body rounded-md w-[280px] min-h-[85px] px-24 py-16': this.type === SulaSwitchType.List,
                 'hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed cursor-pointer': this.type === SulaSwitchType.List && !this.disabled,
                 'container-focus': this.isFocus && this.type === SulaSwitchType.List,
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, tabIndex: 0 }, this.type === SulaSwitchType.List && (h("div", { key: '322c268b6e010f49cb1b61509398d9f7a1b9b8a1', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: '0da8b536c781a7d0fdfc1539b115c11171328455', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: '8ff30bb13d52d759c6b2a2892ec608d14e9ece86', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: 'cec3a0d3f3620af6e25c2ae1e6ac771eb7acaef2', class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, tabIndex: 0 }, this.type === SulaSwitchType.List && (h("div", { key: '6e3132438518dee7a1337db52a204387d2828ec3', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: '830b2c235cc07efb236f6a86d90dd7d62b3b776a', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: 'd085e4e303aad5b75d275d894f03b0e9ea201a47', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: 'ff6f20db45aa6c0050b233ff541f8973cd5f4244', class: {
                 'switch-container w-56 h-32 flex items-center rounded-xxl p-2 outline-none': true,
                 'switch-on bg-brand-primary justify-end': this.active,
                 'switch-off bg-neutral-neutral-3 justify-start': !this.active,
                 'cursor-not-allowed bg-states-bg-disabled': this.disabled,
                 'switch-focus': this.isFocus && this.type === SulaSwitchType.Default,
-            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'ae01eb32010e93fbc3fb652c0fdd653df57b7835', class: {
+            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'e43cca2e88a20a524201ed0d785a8ba81ed8a4f7', class: {
                 'switch-thumb w-[28px] h-[28px] rounded-full flex justify-center items-center': true,
                 'bg-negative-negative-1': !this.disabled,
                 'bg-states-bg-disabled shadow-md': this.disabled,
-            } }, h("div", { key: 'f965f1fa8af298f87383c8549a82990a9daeafee', class: {
+            } }, h("div", { key: '248043d5d4e7e53718563cc722937644362c47bf', class: {
                 'switch-indicator rounded-full': true,
                 'switch-indicator-on w-12 h-12 bg-brand-primary': this.active,
                 'switch-indicator-off w-[10px] h-4 bg-neutral-neutral-4': !this.active,

package/dist/components/sula-tag.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-BuA_ueQn.js';
+import { d as defineCustomElement$2 } from './p-DO7voMbe.js';
 
 var SulaTagSize;
 (function (SulaTagSize) {
@@ -106,14 +106,14 @@ const SulaTag$1 = /*@__PURE__*/ proxyCustomElement(class SulaTag extends H {
         return iconStatusStyles[this.iconStatus];
     }
     render() {
-        return (h(Host, { key: 'ea42eeb4ee80620a790938eb08c6322fa4dee214' }, h("div", { key: '29745dd127c152c8e2e74534f8fa53cc8d305534', class: {
+        return (h(Host, { key: '7adccbc8b3035550420d5e0eac1d46f68052526d' }, h("div", { key: '65526b32c1e2db8888d70b79732526e7b0e20812', class: {
                 'flex items-center rounded-xxl w-fit': true,
                 [this.getSizeClass()]: true,
                 [this.getAppearanceClass()]: true,
-            } }, this.icon && (h("div", { key: '2eb1b3d506d98a12b5513c947237289fcacfe035', class: {
+            } }, this.icon && (h("div", { key: '3808e66f0596f2e2f73520bfccb7504f4b20b6cf', class: {
                 'flex justify-center items-center mr-8 rounded-full leading-4 px-2 py-1': true,
                 [this.getIconStatusClass()]: true,
-            } }, h("sula-icon", { key: 'b3daed5248632ce22ee43f9d64987939a3682242', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: 'd436740cbce0feab73152447b7694818fe87f90e', class: {
+            } }, h("sula-icon", { key: '88a00ebd5e3692d72f832d6fe5a1db74cb608334', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: 'a8bfa714580e86bbc9972320a6ae9f9820076f5b', class: {
                 'text-base leading-4': true,
                 [this.getTextColorClass()]: true,
                 [this.getTextWeightClass()]: true,

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: 'f920e3734338d888531522bf9140c8d3982e2f69', ref: node => (this.node = node) }, h("div", { key: '2afeec5069358b61d7e5b26cb9aac627dd76f845' }, h("div", { key: '79273334d739ddf9d9be0ed536497764fa877ffc', 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: '10b0a9b82f07d8c9b8267d49f3c2d32e3c508bd8', 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: 'e3bed9dc020446dceb4149a667b60af5dc55bff3', 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: '1ba336d4bcf9c276b69b65c8165edc1b30a2490b', 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: '359a206d17995cec9bdbd3c9832de597827e1d0f', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: '64e46f682c87605bd793d0fffe0f74eea16931c3', 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: '761b430f847ea583d720570320f7fdbed53a5d6f', 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-BuA_ueQn.js';
+import { d as defineCustomElement$2 } from './p-DO7voMbe.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: '40a7bb18169b3d8970b45c694c1893ff9f64bbab', ref: node => (this.node = node) }, h("div", { key: '6777fa4dd7436443969d0c0e1142be8c4eb284e7' }, h("div", { key: 'd3d7789d4d36d65adedf1ad6b6e62c8957ebb680', 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: '956eadf48754f760e062d83663e32c47fcff1337', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: '99e202b916e25409144476a9c57fe75e0753f4ff', class: "font-bold text-sm text-text-primary from-down" }, this.label), h("input", { key: '1bac9e8fff8f951ca2dd2fcbc60b5efe97757254', 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: 'cb1626373a04dda96120a28bb982b72db41e3b4e', 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: '09050fd2dc99bc07a73565804a5332bddfa2883c', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: '120077ac071a88964d824f66117eb9b4a97ca93c', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: 'e1cf2bd5e34d00125807f12d853c0630e1061434', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'fd485e6cd34d4a90df9f15e33359e5ed02c4bf82', 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: '70b2df0825f91a40db9e2e111c83947e8df6c7e9', 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-BuA_ueQn.js';
+import { d as defineCustomElement$2 } from './p-DO7voMbe.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: '77ee1e56a324ab1971d9e81288222087363bb4b6' }, h("div", { key: '88acc4015fcf2cbe96ad300b17428b6e06d713e1', 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-BuA_ueQn.js';
+import { d as defineCustomElement$2 } from './p-DO7voMbe.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: '7dc177fdc19ba097bd9cf686036817c883f25051' }, h("div", { key: '265a172c85656bdbd04ab2517f50b7fe5d558f82', 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/loader.js

@@ -4,7 +4,7 @@ export { s as setNonce } from './index-CrFclBiX.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_20",[[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"selectedItem":[32],"showItems":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"],"showItems":["handleShowItemsChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_21",[[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"selected":[1028],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"selectedItem":[32],"showItems":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"],"showItems":["handleShowItemsChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-breadcrumb",{"items":[1040]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 };
 
 export { defineCustomElements };