@sula-tech/webcomponents 0.20.0 → 0.21.0

package/dist/components/sula-segmented-control.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DYfmicjp.js';
-import { d as defineCustomElement$2 } from './p-DqRqPukj.js';
+import { d as defineCustomElement$2 } from './p-DaG0HavP.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: 'e2bbad066710c909c2eb3e1a65d42d0c7ddc9f2c' }, h("div", { key: 'c37d068e7e2034639d3bd5a06df3c030d8c49ed8', class: {
+        return (h(Host, { key: 'e4d257cbdefcae292ace48939622ac2b6c86808d' }, h("div", { key: '831495bf8af249b2d0ded6fa457cf76c1020a1fa', 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

@@ -54,7 +54,7 @@ const SulaSwitch$1 = /*@__PURE__*/ proxyCustomElement(class SulaSwitch extends H
         };
     }
     render() {
-        return (h(Host, { key: '5f3c3815d79322d30adc9aca2264aed80adb4ffb' }, h("div", { key: '6e15ebd790f54d86474ee82ff089f5243d90cbc8', class: {
+        return (h(Host, { key: '03ac13764a97e343c005d0b6ad86aedd63d3fcc0' }, h("div", { key: 'ddca75645b49d3b965011eb36e57a6eeaece645f', 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 min-h-[85px] px-24 py-16': this.type === SulaSwitchType.List,
@@ -62,17 +62,17 @@ const SulaSwitch$1 = /*@__PURE__*/ proxyCustomElement(class SulaSwitch extends H
                 'w-[280px]': this.type === SulaSwitchType.List && !this.responsive,
                 '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: '7e7f8fa16b903558cbfd3f1d2d83f0036f5308a9', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: 'de7ede038c1c3d7a542372ea173772c580f9d586', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: '038ae8fbb49000bda137cc5d56cc2579f62d6685', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: 'e3e841b12ba1e8ad04be7318c2470c32d6465e66', class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, tabIndex: 0 }, this.type === SulaSwitchType.List && (h("div", { key: 'e15ca8ec7506497d574a76b523ce5c4fd6def934', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: '2bcd6af3688e18d597b39db6ee2eb4355a3c0377', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: '7433a736246106dddfff92f681c274d2ea6d6938', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: 'cfe3186e0a7409a0cfe2092f0cca822eecf45727', 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: '3e87cd1d342ba55578267710ac00fa80f44e91a5', class: {
+            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '411f40ad8ad8b6395ea24a076f88602342126cfc', 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: '97028a358647414a5007ef90daf8acd15789bfa6', class: {
+            } }, h("div", { key: 'ee793fac1da4897922c413dc253b66b47bebaec2', 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-table-body.js

@@ -12,7 +12,7 @@ const SulaTableBody$1 = /*@__PURE__*/ proxyCustomElement(class SulaTableBody ext
         replaceHostWithRenderedElement(this.host, 'tbody');
     }
     render() {
-        return (h(Host, { key: 'a2ca717e7a9bdd053ff6ca09eb9ed4281b5677c6' }, h("tbody", { key: '30825da8235ec61310c61ce4c289028e29588916' }, h("slot", { key: '5062ba06890652e9668d77eab0b80c8154ae3baa' }))));
+        return (h(Host, { key: 'b9f5648337032d4e589e940439a0099f1d43cffa' }, h("tbody", { key: 'b7cdcb725274bd440f9561aada4c7aac517de710' }, h("slot", { key: '02978fec755b66e807c8b8c57d8da66ba348a45d' }))));
     }
     get host() { return this; }
     static get style() { return sulaTableBodyCss; }

package/dist/components/sula-table-cell.js

@@ -17,13 +17,13 @@ const SulaTableCell$1 = /*@__PURE__*/ proxyCustomElement(class SulaTableCell ext
         replaceHostWithRenderedElement(this.host, 'td');
     }
     render() {
-        return (h(Host, { key: 'b9b5bc0c6832f8fbcf560732f0e1c058f8c4cfbc' }, h("td", { key: 'c5443ad7921b69f2e143b6418cec98546674ac34', class: "align-middle text-left border-b border-dashed border-line-general" }, h("div", { key: 'd13c0977403ad4d3b506676801ca8925a78fae0a', class: {
+        return (h(Host, { key: '347aabb92b3ae336b47c092b4836a9683abdb945' }, h("td", { key: 'abe8e1a42e60ca0314f2bccedaf51953d6e3efe6', class: "align-middle text-left border-b border-dashed border-line-general" }, h("div", { key: '5fb52f18fea375e0db464b1a81194ae2a5f5d53f', class: {
                 'px-16 py-4 w-full flex flex-col justify-center items-start box-border text-label-medium-regular text-text-secondary': true,
                 'min-h-56': this.tableDensity === SulaTableDensity.Compact,
                 'min-h-60': this.tableDensity === SulaTableDensity.Default,
                 'min-h-64': this.tableDensity === SulaTableDensity.Spaced,
                 'min-h-72': this.tableDensity === SulaTableDensity.Confortable,
-            } }, h("slot", { key: 'c9f1fd7456a928cbdee2df8576e671bc7459d8c9' })))));
+            } }, h("slot", { key: 'fce54db787004cec755f69f9eabd1931ed27f7cf' })))));
     }
     get host() { return this; }
     static get style() { return sulaTableCellCss; }

package/dist/components/sula-table-head-cell.js

@@ -17,13 +17,13 @@ const SulaTableHeadCell$1 = /*@__PURE__*/ proxyCustomElement(class SulaTableHead
         replaceHostWithRenderedElement(this.host, 'th');
     }
     render() {
-        return (h(Host, { key: '3b767e7a414a202d1947e4eb66575ee95620381f' }, h("th", { key: '38a32fe248db78d736187a777bbedd8dd56dae98', scope: "col", class: "align-middle text-left border-b border-line-general" }, h("div", { key: 'ddc9fc22c86783843aba386214a9eaa2bc9077c9', class: {
+        return (h(Host, { key: '41e5f68802c240cd1e691e3df61066d585117122' }, h("th", { key: '42907dc4d92bb3f70ad1a2c88e2580a3c07b8bc5', scope: "col", class: "align-middle text-left border-b border-line-general" }, h("div", { key: '482ebc9be886ea48becf0f72035c26ec694ff8c8', class: {
                 'px-16 py-4 w-full flex justify-start items-center box-border text-label-small-bold text-text-secondary': true,
                 'min-h-40': this.tableDensity === SulaTableDensity.Compact,
                 'min-h-44': this.tableDensity === SulaTableDensity.Default,
                 'min-h-48': this.tableDensity === SulaTableDensity.Spaced,
                 'min-h-56': this.tableDensity === SulaTableDensity.Confortable,
-            } }, h("slot", { key: '2143a6ac5d48db398022e7ff3b3f7d11ad0e45a2' })))));
+            } }, h("slot", { key: '328c07d328409e3e6c571ada4e36ede8609d38f4' })))));
     }
     get host() { return this; }
     static get style() { return sulaTableHeadCellCss; }

package/dist/components/sula-table-header.js

@@ -12,7 +12,7 @@ const SulaTableHeader$1 = /*@__PURE__*/ proxyCustomElement(class SulaTableHeader
         replaceHostWithRenderedElement(this.host, 'thead');
     }
     render() {
-        return (h(Host, { key: 'bd57b78f2a48bd304fe4abbed189f9a095cc0380' }, h("thead", { key: '987ed815cb21c18c31976b1cdd65af00bcb6ed7a' }, h("slot", { key: '60fe9f82cf5532dbaf747a59be77433238181e5b' }))));
+        return (h(Host, { key: '9b60e1345817d85150547d9f6a8c4aea18fecf35' }, h("thead", { key: 'e1280134d0f2efa76aaada715771a9d3cb59c2cb' }, h("slot", { key: '9014c8901806203c448b8a263b39da14541ee4c2' }))));
     }
     get host() { return this; }
     static get style() { return sulaTableHeaderCss; }

package/dist/components/sula-table-row.js

@@ -12,7 +12,7 @@ const SulaTableRow$1 = /*@__PURE__*/ proxyCustomElement(class SulaTableRow exten
         replaceHostWithRenderedElement(this.host, 'tr');
     }
     render() {
-        return (h(Host, { key: '41b95e085a9afac2499b2d3b3efc03c842a46021' }, h("tr", { key: '2798991eba9533fa5c3538ecd64c99b3a797683a' }, h("slot", { key: '762c70dda8ec2924b1973ddffc4c8bf3df624cd0' }))));
+        return (h(Host, { key: '2f3bfac0df53bdac8f2bcd85b09719da7cef4f1d' }, h("tr", { key: '5b4a56ae49d512bcbe0ff49c878fcbe2cfde6386' }, h("slot", { key: '7bc654792d9375c53f000e4fb9b370e16b3bed19' }))));
     }
     get host() { return this; }
     static get style() { return sulaTableRowCss; }

package/dist/components/sula-table.js

@@ -21,15 +21,15 @@ const SulaTable$1 = /*@__PURE__*/ proxyCustomElement(class SulaTable extends H {
         this.fullWidth = true;
     }
     render() {
-        return (h(Host, { key: '0bfcfd6170d099d2f6023f07d1cb20c9621a3f77', class: {
+        return (h(Host, { key: 'c4c85f0a00f5848a5ceeee0fa975b98dd8aaca10', class: {
                 'block max-w-full overflow-x-auto': true,
-            } }, h("table", { key: '76e07331ac894ad8fa79a3f75ef32ddc20f8d7b6', class: {
+            } }, h("table", { key: '429f48bb7125d0623a0896e2ffd64b5096bf3dcc', class: {
                 'w-full': this.fullWidth && this.equalWidth,
                 'w-max': !this.equalWidth,
                 'min-w-full': this.fullWidth && !this.equalWidth,
                 'table-fixed': this.equalWidth,
                 'border-collapse border-spacing-0 box-border': true,
-            } }, h("slot", { key: 'f1ed7cb3542792195d281f9194d6bb0dbe350fac' }))));
+            } }, h("slot", { key: '8887f401133f605293b98b0408e3b605270fcaad' }))));
     }
     static get style() { return sulaTableCss; }
 }, [4, "sula-table", {

package/dist/components/sula-tag.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-DYfmicjp.js';
-import { d as defineCustomElement$2 } from './p-DqRqPukj.js';
+import { d as defineCustomElement$2 } from './p-DaG0HavP.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: '39ea76b92a3337f5e3285f90e9dbb4c3c3438208' }, h("div", { key: '34d452a673a20f2fa655104fcea96c47ed8265b8', class: {
+        return (h(Host, { key: 'a2b77019aff1c066579e1b7aef2a95fba5039b71' }, h("div", { key: '63ff50af0b9ad7fe808d7d57865fe6febd855d94', class: {
                 'flex items-center rounded-xxl w-fit': true,
                 [this.getSizeClass()]: true,
                 [this.getAppearanceClass()]: true,
-            } }, this.icon && (h("div", { key: '8218e0be2aa84e8cbab22cc264d916fd32fb99f2', class: {
+            } }, this.icon && (h("div", { key: 'a7f85beae1c42d19fe6b03ba4bba5b64b1b8e076', class: {
                 'flex justify-center items-center mr-8 rounded-full leading-4 px-2 py-1': true,
                 [this.getIconStatusClass()]: true,
-            } }, h("sula-icon", { key: '73bd199ca776120207192f1d165295ef163b7b8d', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: '4f992b7d8d201516645003cd164bab8c106dd60a', class: {
+            } }, h("sula-icon", { key: '4f2059c35afb8e6b0a51d54acac9b85988883e0c', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: '6ec9221c71bab0fb9aa60b4e0bc70d1c681030a6', 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: 'dcd0e19c0d17e57010d3cc6d8f51b98aed181424', ref: node => (this.node = node) }, h("div", { key: 'f9ea80dfe83143dd45dfe08c42fed537061eed57' }, h("div", { key: 'a64bacfe19a2d8882bbb155daaa834a3c693e01b', id: "textarea-container", class: {
+        return (h(Host, { key: '69414124a1d0d623de74dd294f5a7c12d03be510', ref: node => (this.node = node) }, h("div", { key: 'd7aed61f535cb6a78200f03d276acc2d698c4ca0' }, h("div", { key: '1eb5db4d428026b4e81349e6d414681b854175ee', 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: 'f9865b76263c8dc5e3856f7c5cdd8abe9e020038', class: {
+            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '2bb9278a3114114c869940be38c0c3887f539a45', 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: '76972c8587ceee12c3813be506759e25fefdd003', class: {
+            }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: 'c3904b5cb4b240d963b295d8cb21525d3335aafb', 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: '2aaa6e88eb339ff1b77d5efb55953978792e08c5', 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: '23b6a8c876b771decfb7c89df727cd6a23c34a20', 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: 'f3f012f9fd85cc23f306ca0e0c7931228c6226d6', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'be0e877f6286eac1766419abdbaeb9a443104b28', 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: '2fc851e5b752a0745be44c2caa50d7cd3bfeb1bb', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'd3a91b547841b7de10dded53bcace7789a9f5ba5', 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: '609b90fb7f0a28a123cdfa8a402092decde4e0c5', id: "max-length-container", class: {
+            } }, this.helpText)), this.maxLength && (h("div", { key: '3c6df29600df35826cfd75aad2cef9b55ef1ac17', 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,