@3t-transform/threeteeui 1.9.72 → 1.9.74

package/dist/components/{tttx-tabs_1_9_72.d.ts → tttx-tabs_1_9_74.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface TttxTabs_1_9_72 extends Components.TttxTabs_1_9_72, HTMLElement {}
-export const TttxTabs_1_9_72: {
-  prototype: TttxTabs_1_9_72;
-  new (): TttxTabs_1_9_72;
+interface TttxTabs_1_9_74 extends Components.TttxTabs_1_9_74, HTMLElement {}
+export const TttxTabs_1_9_74: {
+  prototype: TttxTabs_1_9_74;
+  new (): TttxTabs_1_9_74;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/{tttx-tabs_1_9_72.js → tttx-tabs_1_9_74.js}

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js';
 import { d as defineCustomElement$2 } from './tttx-icon.js';
 
-const tttxTabsCss = ".material-symbols-rounded.sc-tttx-tabs_1_9_72{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-tabs_1_9_72-h{display:block}.tab-bar.sc-tttx-tabs_1_9_72{display:flex;height:52px}.tab-bar.sc-tttx-tabs_1_9_72>.left-navigation.sc-tttx-tabs_1_9_72,.tab-bar.sc-tttx-tabs_1_9_72>.right-navigation.sc-tttx-tabs_1_9_72{padding:14px 8px;cursor:pointer}.tab-bar.sc-tttx-tabs_1_9_72>.left-navigation.sc-tttx-tabs_1_9_72>*.sc-tttx-tabs_1_9_72,.tab-bar.sc-tttx-tabs_1_9_72>.right-navigation.sc-tttx-tabs_1_9_72>*.sc-tttx-tabs_1_9_72{height:24px;width:24px;cursor:pointer}.tab-bar.sc-tttx-tabs_1_9_72>.tabs-container.sc-tttx-tabs_1_9_72{display:flex;border-bottom:1px solid #d5d5d5}.tab-bar.sc-tttx-tabs_1_9_72>.tabs-container.wide.sc-tttx-tabs_1_9_72{flex-grow:1}.tab-bar.sc-tttx-tabs_1_9_72>.tabs-container.sc-tttx-tabs_1_9_72>*[role=tab].sc-tttx-tabs_1_9_72{padding:18px 16px;line-height:16.408px;font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;color:#757575;cursor:pointer}.tab-bar.sc-tttx-tabs_1_9_72>.tabs-container.sc-tttx-tabs_1_9_72>*[role=tab].sc-tttx-tabs_1_9_72:hover{background-color:rgba(17, 17, 17, 0.05)}.tab-bar.sc-tttx-tabs_1_9_72>.tabs-container.sc-tttx-tabs_1_9_72>*[role=tab][aria-selected].sc-tttx-tabs_1_9_72{color:#212121;cursor:default;border-bottom:3px solid #1579c6}";
+const tttxTabsCss = ".material-symbols-rounded.sc-tttx-tabs_1_9_74{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-tabs_1_9_74-h{display:block}.tab-bar.sc-tttx-tabs_1_9_74{display:flex;height:52px}.tab-bar.sc-tttx-tabs_1_9_74>.left-navigation.sc-tttx-tabs_1_9_74,.tab-bar.sc-tttx-tabs_1_9_74>.right-navigation.sc-tttx-tabs_1_9_74{padding:14px 8px;cursor:pointer}.tab-bar.sc-tttx-tabs_1_9_74>.left-navigation.sc-tttx-tabs_1_9_74>*.sc-tttx-tabs_1_9_74,.tab-bar.sc-tttx-tabs_1_9_74>.right-navigation.sc-tttx-tabs_1_9_74>*.sc-tttx-tabs_1_9_74{height:24px;width:24px;cursor:pointer}.tab-bar.sc-tttx-tabs_1_9_74>.tabs-container.sc-tttx-tabs_1_9_74{display:flex;border-bottom:1px solid #d5d5d5}.tab-bar.sc-tttx-tabs_1_9_74>.tabs-container.wide.sc-tttx-tabs_1_9_74{flex-grow:1}.tab-bar.sc-tttx-tabs_1_9_74>.tabs-container.sc-tttx-tabs_1_9_74>*[role=tab].sc-tttx-tabs_1_9_74{padding:18px 16px;line-height:16.408px;font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;color:#757575;cursor:pointer}.tab-bar.sc-tttx-tabs_1_9_74>.tabs-container.sc-tttx-tabs_1_9_74>*[role=tab].sc-tttx-tabs_1_9_74:hover{background-color:rgba(17, 17, 17, 0.05)}.tab-bar.sc-tttx-tabs_1_9_74>.tabs-container.sc-tttx-tabs_1_9_74>*[role=tab][aria-selected].sc-tttx-tabs_1_9_74{color:#212121;cursor:default;border-bottom:3px solid #1579c6}";
 
 const TttxTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -80,7 +80,7 @@ const TttxTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   generateTab(tab) {
     var _a, _b, _c;
-    const tabTitle = (_a = tab.tabName) !== null && _a !== void 0 ? _a : (h("tttx-icon_1_9_72", { style: { pointerEvents: 'none', marginTop: (_b = tab.marginTop) !== null && _b !== void 0 ? _b : '-2px' }, icon: tab.tabIcon, color: 'gray', size: (_c = tab.tabIconSize) !== null && _c !== void 0 ? _c : 24 }));
+    const tabTitle = (_a = tab.tabName) !== null && _a !== void 0 ? _a : (h("tttx-icon_1_9_74", { style: { pointerEvents: 'none', marginTop: (_b = tab.marginTop) !== null && _b !== void 0 ? _b : '-2px' }, icon: tab.tabIcon, color: 'gray', size: (_c = tab.tabIconSize) !== null && _c !== void 0 ? _c : 24 }));
     return (h("a", { key: tab.id, id: tab.id, role: "tab", "aria-controls": tab.controls, tabindex: tab.tabIndex, "aria-selected": tab.selected, onClick: () => {
         this.handleTabClick(tab);
       } }, tabTitle));
@@ -99,13 +99,13 @@ const TttxTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     }
     const selectedTab = this._tabs.find(tab => tab.selected);
-    return (h(Host, null, h("div", null, h("div", { class: "tab-bar", role: "tablist", "aria-label": this.tabsName, ref: el => (this.tabList = el) }, this.navigation && (h("div", { class: "left-navigation", tabindex: "0", onClick: this.handleLeftNavigation.bind(this) }, h("tttx-icon_1_9_72", { icon: "navigate_before", color: "black" }))), h("div", { class: 'tabs-container' + (this.wide ? ' wide' : '') }, this._tabs.map(this.generateTab.bind(this))), this.navigation && (h("div", { class: "right-navigation", tabindex: "0", onClick: this.handleRightNavigation.bind(this) }, h("tttx-icon_1_9_72", { icon: "navigate_next", color: "black" })))), selectedTab && this.renderSelectedTab(selectedTab))));
+    return (h(Host, null, h("div", null, h("div", { class: "tab-bar", role: "tablist", "aria-label": this.tabsName, ref: el => (this.tabList = el) }, this.navigation && (h("div", { class: "left-navigation", tabindex: "0", onClick: this.handleLeftNavigation.bind(this) }, h("tttx-icon_1_9_74", { icon: "navigate_before", color: "black" }))), h("div", { class: 'tabs-container' + (this.wide ? ' wide' : '') }, this._tabs.map(this.generateTab.bind(this))), this.navigation && (h("div", { class: "right-navigation", tabindex: "0", onClick: this.handleRightNavigation.bind(this) }, h("tttx-icon_1_9_74", { icon: "navigate_next", color: "black" })))), selectedTab && this.renderSelectedTab(selectedTab))));
   }
   static get watchers() { return {
     "tabs": ["onDataChange"]
   }; }
   static get style() { return tttxTabsCss; }
-}, [2, "tttx-tabs_1_9_72", {
+}, [2, "tttx-tabs_1_9_74", {
     "tabsName": [1, "tabs-name"],
     "navigation": [4],
     "wide": [4],
@@ -116,14 +116,14 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-tabs_1_9_72", "tttx-icon_1_9_72"];
+  const components = ["tttx-tabs_1_9_74", "tttx-icon_1_9_74"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-tabs_1_9_72":
+    case "tttx-tabs_1_9_74":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxTabs);
       }
       break;
-    case "tttx-icon_1_9_72":
+    case "tttx-icon_1_9_74":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
@@ -131,7 +131,7 @@ function defineCustomElement$1() {
   } });
 }
 
-const TttxTabs_1_9_72 = TttxTabs;
+const TttxTabs_1_9_74 = TttxTabs;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxTabs_1_9_72, defineCustomElement };
+export { TttxTabs_1_9_74, defineCustomElement };

package/dist/components/{tttx-chart_1_9_72.d.ts → tttx-tag-v2_1_9_74.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface TttxChart_1_9_72 extends Components.TttxChart_1_9_72, HTMLElement {}
-export const TttxChart_1_9_72: {
-  prototype: TttxChart_1_9_72;
-  new (): TttxChart_1_9_72;
+interface TttxTagV2_1_9_74 extends Components.TttxTagV2_1_9_74, HTMLElement {}
+export const TttxTagV2_1_9_74: {
+  prototype: TttxTagV2_1_9_74;
+  new (): TttxTagV2_1_9_74;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/{tttx-tag-v2_1_9_72.js → tttx-tag-v2_1_9_74.js}

@@ -73,10 +73,10 @@ const TttxTagV2 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const colors = this.getColors();
-    return (h(Host, null, h("div", { class: `tag ${this.state} ${this.size} ${this.variant || ''}`, style: { 'background-color': colors.bg, color: colors.text } }, this.hasStartIcon && this.iconStart && (h("tttx-icon_1_9_72", { role: "icon", class: "tag_icon", "aria-label": colors.text, icon: this.iconStart, color: colors.icon, size: this.size === 'S' ? 12 : 16 })), h("span", null, this.text), this.hasEndIcon && this.iconEnd && (h("tttx-icon_1_9_72", { role: "icon", class: "tag_icon", "aria-label": colors.text, icon: this.iconEnd, color: colors.icon, size: this.iconSize })))));
+    return (h(Host, null, h("div", { class: `tag ${this.state} ${this.size} ${this.variant || ''}`, style: { 'background-color': colors.bg, color: colors.text } }, this.hasStartIcon && this.iconStart && (h("tttx-icon_1_9_74", { role: "icon", class: "tag_icon", "aria-label": colors.text, icon: this.iconStart, color: colors.icon, size: this.size === 'S' ? 12 : 16 })), h("span", null, this.text), this.hasEndIcon && this.iconEnd && (h("tttx-icon_1_9_74", { role: "icon", class: "tag_icon", "aria-label": colors.text, icon: this.iconEnd, color: colors.icon, size: this.iconSize })))));
   }
   static get style() { return tttxTagV2Css; }
-}, [1, "tttx-tag-v2_1_9_72", {
+}, [1, "tttx-tag-v2_1_9_74", {
     "text": [1],
     "color": [1],
     "textColor": [1, "text-color"],
@@ -93,14 +93,14 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-tag-v2_1_9_72", "tttx-icon_1_9_72"];
+  const components = ["tttx-tag-v2_1_9_74", "tttx-icon_1_9_74"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-tag-v2_1_9_72":
+    case "tttx-tag-v2_1_9_74":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxTagV2);
       }
       break;
-    case "tttx-icon_1_9_72":
+    case "tttx-icon_1_9_74":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
@@ -108,7 +108,7 @@ function defineCustomElement$1() {
   } });
 }
 
-const TttxTagV2_1_9_72 = TttxTagV2;
+const TttxTagV2_1_9_74 = TttxTagV2;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxTagV2_1_9_72, defineCustomElement };
+export { TttxTagV2_1_9_74, defineCustomElement };

package/dist/components/tttx-tag.js

@@ -18,10 +18,10 @@ const TttxTag = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     return (h(Host, null, h("div", { class: "tag", style: { 'background-color': this.color, color: this.textColor } }, this.hasIcon &&
-      h("tttx-icon_1_9_72", { role: "icon", class: "tag_icon", "aria-label": this.text, icon: this.icon, color: this.iconColor, size: this.iconSize }), h("span", null, this.text))));
+      h("tttx-icon_1_9_74", { role: "icon", class: "tag_icon", "aria-label": this.text, icon: this.icon, color: this.iconColor, size: this.iconSize }), h("span", null, this.text))));
   }
   static get style() { return tttxTagCss; }
-}, [1, "tttx-tag_1_9_72", {
+}, [1, "tttx-tag_1_9_74", {
     "text": [1],
     "color": [1],
     "textColor": [1, "text-color"],
@@ -34,14 +34,14 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-tag_1_9_72", "tttx-icon_1_9_72"];
+  const components = ["tttx-tag_1_9_74", "tttx-icon_1_9_74"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-tag_1_9_72":
+    case "tttx-tag_1_9_74":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxTag);
       }
       break;
-    case "tttx-icon_1_9_72":
+    case "tttx-icon_1_9_74":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/{tttx-tag_1_9_72.d.ts → tttx-tag_1_9_74.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface TttxTag_1_9_72 extends Components.TttxTag_1_9_72, HTMLElement {}
-export const TttxTag_1_9_72: {
-  prototype: TttxTag_1_9_72;
-  new (): TttxTag_1_9_72;
+interface TttxTag_1_9_74 extends Components.TttxTag_1_9_74, HTMLElement {}
+export const TttxTag_1_9_74: {
+  prototype: TttxTag_1_9_74;
+  new (): TttxTag_1_9_74;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/{tttx-tag_1_9_72.js → tttx-tag_1_9_74.js}

@@ -1,6 +1,6 @@
 import { T as TttxTag, d as defineCustomElement$1 } from './tttx-tag.js';
 
-const TttxTag_1_9_72 = TttxTag;
+const TttxTag_1_9_74 = TttxTag;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxTag_1_9_72, defineCustomElement };
+export { TttxTag_1_9_74, defineCustomElement };

package/dist/components/tttx-textarea_1_9_74.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxTextarea_1_9_74 extends Components.TttxTextarea_1_9_74, HTMLElement {}
+export const TttxTextarea_1_9_74: {
+  prototype: TttxTextarea_1_9_74;
+  new (): TttxTextarea_1_9_74;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/{tttx-textarea_1_9_72.js → tttx-textarea_1_9_74.js}

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const tttxTextareaCss = ".material-symbols-rounded.sc-tttx-textarea_1_9_72{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-textarea_1_9_72-h{display:block}label.sc-tttx-textarea_1_9_72{font-weight:500;font-size:16px;line-height:18.752px;color:#212121}label.sc-tttx-textarea_1_9_72 .textarea-container.sc-tttx-textarea_1_9_72{position:relative}label.sc-tttx-textarea_1_9_72 .textarea-container.sc-tttx-textarea_1_9_72 textarea.sc-tttx-textarea_1_9_72{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;padding:9px 16px;font-size:16px;line-height:18.752px;border:1px solid #d5d5d5;border-radius:4px;margin-top:8px;resize:none}label.sc-tttx-textarea_1_9_72 .textarea-container.sc-tttx-textarea_1_9_72 textarea.no-label.sc-tttx-textarea_1_9_72{margin-top:0}label.sc-tttx-textarea_1_9_72 .textarea-container.sc-tttx-textarea_1_9_72 textarea.sc-tttx-textarea_1_9_72~.errorBubble.sc-tttx-textarea_1_9_72{font-size:14px;line-height:16.408px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label.sc-tttx-textarea_1_9_72 .textarea-container.sc-tttx-textarea_1_9_72 textarea.sc-tttx-textarea_1_9_72~.errorBubble.sc-tttx-textarea_1_9_72:not(.visible){display:none}label.sc-tttx-textarea_1_9_72 .textarea-container.sc-tttx-textarea_1_9_72 textarea.sc-tttx-textarea_1_9_72~.errorBubble.sc-tttx-textarea_1_9_72 span.sc-tttx-textarea_1_9_72{color:#dc0000;font-size:16px;margin-right:4px}label.sc-tttx-textarea_1_9_72 .textarea-container.sc-tttx-textarea_1_9_72 textarea.sc-tttx-textarea_1_9_72:focus{border-color:#1479c6}label.sc-tttx-textarea_1_9_72 .textarea-container.sc-tttx-textarea_1_9_72 textarea.sc-tttx-textarea_1_9_72:focus-visible{outline:none}label.sc-tttx-textarea_1_9_72 .secondarylabel.sc-tttx-textarea_1_9_72{color:#757575;font-size:14px;line-height:16.408px;font-weight:normal;display:flex;margin-top:4px}label.sc-tttx-textarea_1_9_72 .optional.sc-tttx-textarea_1_9_72{color:#757575;font-weight:normal}";
+const tttxTextareaCss = ".material-symbols-rounded.sc-tttx-textarea_1_9_74{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-textarea_1_9_74-h{display:block}label.sc-tttx-textarea_1_9_74{font-weight:500;font-size:16px;line-height:18.752px;color:#212121}label.sc-tttx-textarea_1_9_74 .textarea-container.sc-tttx-textarea_1_9_74{position:relative}label.sc-tttx-textarea_1_9_74 .textarea-container.sc-tttx-textarea_1_9_74 textarea.sc-tttx-textarea_1_9_74{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;padding:9px 16px;font-size:16px;line-height:18.752px;border:1px solid #d5d5d5;border-radius:4px;margin-top:8px;resize:none}label.sc-tttx-textarea_1_9_74 .textarea-container.sc-tttx-textarea_1_9_74 textarea.no-label.sc-tttx-textarea_1_9_74{margin-top:0}label.sc-tttx-textarea_1_9_74 .textarea-container.sc-tttx-textarea_1_9_74 textarea.sc-tttx-textarea_1_9_74~.errorBubble.sc-tttx-textarea_1_9_74{font-size:14px;line-height:16.408px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label.sc-tttx-textarea_1_9_74 .textarea-container.sc-tttx-textarea_1_9_74 textarea.sc-tttx-textarea_1_9_74~.errorBubble.sc-tttx-textarea_1_9_74:not(.visible){display:none}label.sc-tttx-textarea_1_9_74 .textarea-container.sc-tttx-textarea_1_9_74 textarea.sc-tttx-textarea_1_9_74~.errorBubble.sc-tttx-textarea_1_9_74 span.sc-tttx-textarea_1_9_74{color:#dc0000;font-size:16px;margin-right:4px}label.sc-tttx-textarea_1_9_74 .textarea-container.sc-tttx-textarea_1_9_74 textarea.sc-tttx-textarea_1_9_74:focus{border-color:#1479c6}label.sc-tttx-textarea_1_9_74 .textarea-container.sc-tttx-textarea_1_9_74 textarea.sc-tttx-textarea_1_9_74:focus-visible{outline:none}label.sc-tttx-textarea_1_9_74 .secondarylabel.sc-tttx-textarea_1_9_74{color:#757575;font-size:14px;line-height:16.408px;font-weight:normal;display:flex;margin-top:4px}label.sc-tttx-textarea_1_9_74 .optional.sc-tttx-textarea_1_9_74{color:#757575;font-weight:normal}";
 
 const TttxTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -51,7 +51,7 @@ const TttxTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return (h(Host, null, h("label", null, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: "textarea-container" }, h("textarea", { rows: this.rows, class: classNames, autofocus: this.textareaautofocus, enterkeyhint: this.inputkeyhint, tabindex: this.inputindex, title: this.inputtitle, disabled: this.disabled, maxlength: this.maxlength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.secondarylabel && h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
   }
   static get style() { return tttxTextareaCss; }
-}, [2, "tttx-textarea_1_9_72", {
+}, [2, "tttx-textarea_1_9_74", {
     "label": [1],
     "secondarylabel": [1],
     "showerrormsg": [4],
@@ -74,9 +74,9 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-textarea_1_9_72"];
+  const components = ["tttx-textarea_1_9_74"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-textarea_1_9_72":
+    case "tttx-textarea_1_9_74":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxTextarea);
       }
@@ -84,7 +84,7 @@ function defineCustomElement$1() {
   } });
 }
 
-const TttxTextarea_1_9_72 = TttxTextarea;
+const TttxTextarea_1_9_74 = TttxTextarea;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxTextarea_1_9_72, defineCustomElement };
+export { TttxTextarea_1_9_74, defineCustomElement };

package/dist/components/tttx-toggle_1_9_74.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxToggle_1_9_74 extends Components.TttxToggle_1_9_74, HTMLElement {}
+export const TttxToggle_1_9_74: {
+  prototype: TttxToggle_1_9_74;
+  new (): TttxToggle_1_9_74;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/{tttx-toggle_1_9_72.js → tttx-toggle_1_9_74.js}

@@ -33,7 +33,7 @@ const TttxToggle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h("div", { id: 'toggle-switch' }, checkbox, h("div", { id: 'toggle-body' })));
   }
   static get style() { return tttxToggleCss; }
-}, [1, "tttx-toggle_1_9_72", {
+}, [1, "tttx-toggle_1_9_74", {
     "initialstate": [8],
     "_state": [32]
   }]);
@@ -41,9 +41,9 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-toggle_1_9_72"];
+  const components = ["tttx-toggle_1_9_74"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-toggle_1_9_72":
+    case "tttx-toggle_1_9_74":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxToggle);
       }
@@ -51,7 +51,7 @@ function defineCustomElement$1() {
   } });
 }
 
-const TttxToggle_1_9_72 = TttxToggle;
+const TttxToggle_1_9_74 = TttxToggle;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxToggle_1_9_72, defineCustomElement };
+export { TttxToggle_1_9_74, defineCustomElement };

package/dist/components/tttx-toolbar.js

@@ -28,7 +28,7 @@ const TttxToolbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, null, h("div", { class: `container ${this.border ? 'bordered' : ''} ${this.viewSize}` }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' }))));
   }
   static get style() { return tttxToolbarCss; }
-}, [1, "tttx-toolbar_1_9_72", {
+}, [1, "tttx-toolbar_1_9_74", {
     "border": [4],
     "viewSize": [32]
   }, [[9, "resize", "handleResize"]]]);
@@ -36,9 +36,9 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-toolbar_1_9_72"];
+  const components = ["tttx-toolbar_1_9_74"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-toolbar_1_9_72":
+    case "tttx-toolbar_1_9_74":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxToolbar);
       }

package/dist/components/tttx-toolbar_1_9_74.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxToolbar_1_9_74 extends Components.TttxToolbar_1_9_74, HTMLElement {}
+export const TttxToolbar_1_9_74: {
+  prototype: TttxToolbar_1_9_74;
+  new (): TttxToolbar_1_9_74;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/{tttx-toolbar_1_9_72.js → tttx-toolbar_1_9_74.js}

@@ -1,6 +1,6 @@
 import { T as TttxToolbar, d as defineCustomElement$1 } from './tttx-toolbar.js';
 
-const TttxToolbar_1_9_72 = TttxToolbar;
+const TttxToolbar_1_9_74 = TttxToolbar;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxToolbar_1_9_72, defineCustomElement };
+export { TttxToolbar_1_9_74, defineCustomElement };

package/dist/components/tttx-tooltip_1_9_74.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxTooltip_1_9_74 extends Components.TttxTooltip_1_9_74, HTMLElement {}
+export const TttxTooltip_1_9_74: {
+  prototype: TttxTooltip_1_9_74;
+  new (): TttxTooltip_1_9_74;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/{tttx-tooltip_1_9_72.js → tttx-tooltip_1_9_74.js}

@@ -54,7 +54,7 @@ const TttxTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   get el() { return this; }
   static get style() { return tttxTooltipCss; }
-}, [1, "tttx-tooltip_1_9_72", {
+}, [1, "tttx-tooltip_1_9_74", {
     "text": [1],
     "placement": [1],
     "trigger": [16],
@@ -67,9 +67,9 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-tooltip_1_9_72"];
+  const components = ["tttx-tooltip_1_9_74"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-tooltip_1_9_72":
+    case "tttx-tooltip_1_9_74":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxTooltip);
       }
@@ -77,7 +77,7 @@ function defineCustomElement$1() {
   } });
 }
 
-const TttxTooltip_1_9_72 = TttxTooltip;
+const TttxTooltip_1_9_74 = TttxTooltip;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxTooltip_1_9_72, defineCustomElement };
+export { TttxTooltip_1_9_74, defineCustomElement };

package/dist/components/tttx-tree-view_1_9_74.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxTreeView_1_9_74 extends Components.TttxTreeView_1_9_74, HTMLElement {}
+export const TttxTreeView_1_9_74: {
+  prototype: TttxTreeView_1_9_74;
+  new (): TttxTreeView_1_9_74;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/{tttx-tree-view_1_9_72.js → tttx-tree-view_1_9_74.js}

@@ -1,9 +1,9 @@
-import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h, Fragment } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h } from '@stencil/core/internal/client';
 import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js';
 import { d as defineCustomElement$3 } from './tttx-button.js';
 import { d as defineCustomElement$2 } from './tttx-icon.js';
 
-const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element>ul{margin:0;padding:0}.tree-view-element>* ul{padding:0 0 0 36px}.tree-view-element ul li{list-style-type:none}.tree-view-element ul li.inline-tree-item{display:flex;align-items:center}.tree-view-element ul li.inline-tree-item .element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%;padding-left:8px}.tree-view-element ul li.inline-tree-item .element .padding-icon{padding:6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}@media (hover: hover){.tree-view-element ul li.inline-tree-item.element-row.rowHover:hover{cursor:pointer}.tree-view-element ul li.inline-tree-item.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;pointer-events:none}.tree-view-element ul li.inline-tree-item.element-row.rowHover:not(.rowSelected):hover::before{background-color:rgba(17, 17, 17, 0.05)}.tree-view-element ul li.inline-tree-item.element-row.rowHover.rowSelected:hover::before{background-color:rgba(17, 17, 17, 0.15)}}.tree-view-element ul li.inline-tree-item.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.tree-view-element ul li.inline-tree-item.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5;pointer-events:none}.tree-view-element ul li.inline-tree-item.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);pointer-events:none}.tree-view-element ul li.inline-tree-item.element-row.tree-node::before{background-color:#fafafa;height:51px;z-index:1}.tree-view-element ul li.inline-tree-item.element-row.tree-node *{z-index:2}.tree-view-element ul li.inline-tree-item.element-row .treeNode{width:100%;font-weight:500;color:#212121}.tree-view-element ul li.inline-tree-item.element-row .treeLeaf{width:100%;font-weight:400}.tree-view-element ul li.inline-tree-item.element-row .drag-handle{margin-right:10px}.tree-view-element ul li.inline-tree-item.element-row .drop-not-allowed{border-color:red;border-style:dashed;cursor:not-allowed;opacity:0.7}";
+const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{--tree-accent:#2196F3;--tree-selected-bg:#E8E8E8;--indent:36px;--accent-gap:46px;--accent-width:4px;--tree-left-edge-shift:0px}.tree-view-element>ul{margin:0;padding:0}.tree-view-element ul{padding-left:var(--indent)}.tree-view-element ul li{list-style:none}.tree-view-element ul li.selected-group{position:relative;}.tree-view-element ul li.selected-group::before,.tree-view-element ul li.selected-group::after{display:none}.tree-view-element ul li.selected-group>li.inline-tree-item.element-row.tree-node{background-color:#E8E8E8 !important;position:relative}.tree-view-element ul li.selected-group>li.inline-tree-item.element-row.tree-node::after{content:\"\";position:absolute;top:0;bottom:0;width:var(--accent-width);left:calc(-1 * (var(--accent-gap) + var(--level, 0) * var(--indent)));background-color:var(--tree-accent);border-radius:0 2px 2px 0;z-index:5}.tree-view-element ul li.selected-group>ul li.inline-tree-item.element-row.tree-node{background-color:#F9F9F9 !important}.tree-view-element ul li.selected-group>ul li.inline-tree-item.element-row.tree-node::after{display:none !important}.tree-view-element ul li.selected-group li.inline-tree-item.element-row:not(.tree-node)::before{background-color:transparent !important}.tree-view-element ul li.inline-tree-item{display:flex;align-items:center}.tree-view-element ul li.inline-tree-item .element{display:flex;width:100%;padding-left:8px;align-items:center}.tree-view-element ul li.inline-tree-item .element .padding-icon{padding:6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}@media (hover: hover){.tree-view-element ul li.inline-tree-item.element-row.rowHover:hover:not(.rowSelected){cursor:pointer}.tree-view-element ul li.inline-tree-item.element-row.rowHover:hover:not(.rowSelected)::before{background-color:rgba(17, 17, 17, 0.05);z-index:3}.tree-view-element ul li.inline-tree-item.element-row.rowHover:hover.rowSelected::before{background-color:rgba(17, 17, 17, 0.15);z-index:3}}.tree-view-element ul li.inline-tree-item.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative;color:#212121 !important}.tree-view-element ul li.inline-tree-item.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5;pointer-events:none}.tree-view-element ul li.inline-tree-item.element-row.tree-node::before{height:51px;z-index:2;background-color:#F9F9F9}.tree-view-element ul li.inline-tree-item.element-row.tree-node.rowSelected::before{background-color:#E8E8E8 !important}.tree-view-element ul li.inline-tree-item.element-row.tree-node *{z-index:3}.tree-view-element ul li.inline-tree-item.element-row .treeNode{width:100%;font-weight:500;color:#212121}.tree-view-element ul li.inline-tree-item.element-row .treeLeaf{width:100%;font-weight:400;color:#212121 !important}.tree-view-element ul li.inline-tree-item.element-row.rowSelected .treeLeaf,.tree-view-element ul li.inline-tree-item.element-row.rowSelected .treeNode{color:#212121 !important}.tree-view-element ul li.inline-tree-item.element-row .drag-handle{margin-right:10px}.tree-view-element ul li.inline-tree-item.element-row .drop-not-allowed{border-color:red;border-style:dashed;cursor:not-allowed;opacity:0.7}@media (forced-colors: active){.tree-view-element ul li.selected-group li.inline-tree-item.element-row.tree-node::after{background:CanvasText}.tree-view-element ul li.selected-group::after{background:Highlight}}.inline-tree-item:focus-visible{outline:2px solid var(--tree-accent);outline-offset:2px;border-radius:6px}.tree-view-element ul li.inline-tree-item.element-row:not(.tree-node).rowSelected{background-color:transparent !important}.tree-view-element ul li.inline-tree-item.element-row:not(.tree-node).rowSelected::before{background-color:transparent !important}.tree-view-element ul li.inline-tree-item.element-row:not(.tree-node).rowSelected:hover::before{background-color:transparent !important}";
 
 const TttxTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -52,15 +52,26 @@ const TttxTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       if (!nodeData)
         return;
       const { parentId: sourceParentId, index: sourceParentIndex, node: sourceNode } = JSON.parse(nodeData);
+      // Prevent dropping on itself or different parents
       if (node.id === sourceNode.id || sourceParentId !== parentId)
         return;
       const updatedTree = [...this.treeData];
-      const parent = this.findNodeById(updatedTree, parentId);
-      const children = [...parent.child];
+      // Find the parent node
+      const parent = parentId ? this.findNodeById(updatedTree, parentId) : null;
+      // If no parent (root level), work with treeData directly
+      const children = (parent === null || parent === void 0 ? void 0 : parent.child) ? [...parent.child] : [...updatedTree];
+      if (!children || children.length === 0)
+        return;
+      // Move the node
       const [moved] = children.splice(sourceParentIndex, 1);
       children.splice(targetIndex, 0, moved);
-      parent.child = children;
-      this.treeData = updatedTree;
+      // Update the tree
+      if (parent) {
+        parent.child = children;
+      }
+      else {
+        this.treeData = children;
+      }
       this.draggedNodeParentId = undefined;
       if (this.dragGhost.el) {
         this.dragGhost.el.remove();
@@ -85,6 +96,19 @@ const TttxTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   onClickHandler(event, node) {
     event.stopPropagation();
+    // Handle selection: if node is already selected, deselect it; otherwise select it and deselect all others
+    if (node.selectable) {
+      if (node.selected) {
+        // Toggle off: deselect this node
+        node.selected = false;
+      }
+      else {
+        // Toggle on: deselect all others and select this one
+        this.handleNodeSelection(node);
+        // node.selected is already set to true in handleNodeSelection
+      }
+      this.treeData = [...this.treeData];
+    }
     this.clickEvent.emit(node);
   }
   toggleNode(node, event) {
@@ -170,28 +194,51 @@ const TttxTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
     return undefined;
   }
-  renderNode(node, index, parentId = undefined) {
+  deselectAllNodes(nodes) {
+    for (const node of nodes) {
+      if (node.selectable) {
+        node.selected = false;
+      }
+      if (node.child) {
+        this.deselectAllNodes(node.child);
+      }
+    }
+  }
+  handleNodeSelection(node) {
+    // Deselect all nodes first
+    this.deselectAllNodes(this.treeData);
+    // Select only the clicked node if it's selectable
+    if (node.selectable) {
+      node.selected = true;
+    }
+    // Update the tree to trigger re-render
+    this.treeData = [...this.treeData];
+  }
+  renderNode(node, index, parentId = undefined, level = 0 // <-- depth
+  ) {
     var _a, _b;
     const options = this.treeConfigs(node);
     if (node.child) {
-      return (h(Fragment, null, h("li", Object.assign({ "data-id": node.id, draggable: (_a = node.draggable) !== null && _a !== void 0 ? _a : false }, (node.draggable ? { onDragOver: event => this.handleDragOver(event, parentId) } : {}), (node.draggable ? { onDrop: event => this.handleDragDrop(event, node, index, parentId) } : {}), { class: `inline-tree-item element-row tree-node ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
-          if (node.hasHover) {
-            this.onClickHandler(event, node);
-          }
-        } }), h("tttx-button_1_9_72", { class: "toggleNode", design: "borderless-circle", notext: true, icon: options.expanderIcon, color: "black", onClick: event => this.toggleNode(node, event) }), this.htmlcode('treeNode', node, options.checkboxIcon, options.checkboxColor, index, parentId)), node.isOpen ? (h("li", null, h("ul", null, node.child.map((childNode, index) => {
-        return this.renderNode(childNode, index, node.id);
-      })))) : null));
-    }
-    else {
-      return (h("li", Object.assign({ "data-id": node.id, draggable: (_b = node.draggable) !== null && _b !== void 0 ? _b : false }, (node.draggable ? { onDragOver: event => this.handleDragOver(event, parentId) } : {}), (node.draggable ? { onDrop: event => this.handleDragDrop(event, node, index, parentId) } : {}), { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
+      // group node
+      const isSelectedGroup = !!node.selected;
+      return (h("li", { class: `${isSelectedGroup ? 'selected-group' : ''}`, style: { '--level': String(level) } }, h("li", Object.assign({ "data-id": node.id, draggable: (_a = node.draggable) !== null && _a !== void 0 ? _a : false }, (node.draggable ? { onDragOver: event => this.handleDragOver(event, parentId) } : {}), (node.draggable ? { onDrop: event => this.handleDragDrop(event, node, index, parentId) } : {}), { class: `inline-tree-item element-row tree-node ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
           if (node.hasHover) {
             this.onClickHandler(event, node);
           }
-        } }), this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor, index, parentId)));
+        } }), h("tttx-button_1_9_74", { class: "toggleNode", design: "borderless-circle", notext: true, icon: options.expanderIcon, color: "black", onClick: event => this.toggleNode(node, event) }), this.htmlcode('treeNode', node, options.checkboxIcon, options.checkboxColor, index, parentId)), node.isOpen ? (h("ul", null, node.child.map((childNode, childIndex) => {
+        // next level = level + 1
+        return this.renderNode(childNode, childIndex, node.id, level + 1);
+      }))) : null));
     }
+    // leaf (activity)
+    return (h("li", Object.assign({ "data-id": node.id, draggable: (_b = node.draggable) !== null && _b !== void 0 ? _b : false }, (node.draggable ? { onDragOver: event => this.handleDragOver(event, parentId) } : {}), (node.draggable ? { onDrop: event => this.handleDragDrop(event, node, index, parentId) } : {}), { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, style: { '--level': String(level) }, onClick: event => {
+        if (node.hasHover) {
+          this.onClickHandler(event, node);
+        }
+      } }), this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor, index, parentId)));
   }
   htmlcode(type, node, check_box, check_boxColor, index, parentId = undefined) {
-    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.draggable && (h("img", { src: this.dragIcon, alt: "drag", class: "drag-handle", draggable: true, onDragStart: event => this.handleDragStart(event, node, index, parentId) })), node.hasCheckbox && (h("tttx-button_1_9_72", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && (h("tttx-icon_1_9_72", { icon: node.icon, color: node.iconColor, class: "padding-icon" })), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: purify.sanitize(node.html, domSanitiserOptions) })));
+    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.draggable && (h("img", { src: this.dragIcon, alt: "drag", class: "drag-handle", draggable: true, onDragStart: event => this.handleDragStart(event, node, index, parentId) })), node.hasCheckbox && (h("tttx-button_1_9_74", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && (h("tttx-icon_1_9_74", { icon: node.icon, color: node.iconColor, class: "padding-icon" })), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: purify.sanitize(node.html, domSanitiserOptions) })));
     return htmlcode;
   }
   render() {
@@ -201,7 +248,7 @@ const TttxTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   get el() { return this; }
   static get style() { return tttxTreeViewCss; }
-}, [1, "tttx-tree-view_1_9_72", {
+}, [1, "tttx-tree-view_1_9_74", {
     "data": [1040],
     "treeData": [32]
   }]);
@@ -209,19 +256,19 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-tree-view_1_9_72", "tttx-button_1_9_72", "tttx-icon_1_9_72"];
+  const components = ["tttx-tree-view_1_9_74", "tttx-button_1_9_74", "tttx-icon_1_9_74"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-tree-view_1_9_72":
+    case "tttx-tree-view_1_9_74":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxTreeView);
       }
       break;
-    case "tttx-button_1_9_72":
+    case "tttx-button_1_9_74":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "tttx-icon_1_9_72":
+    case "tttx-icon_1_9_74":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
@@ -229,7 +276,7 @@ function defineCustomElement$1() {
   } });
 }
 
-const TttxTreeView_1_9_72 = TttxTreeView;
+const TttxTreeView_1_9_74 = TttxTreeView;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxTreeView_1_9_72, defineCustomElement };
+export { TttxTreeView_1_9_74, defineCustomElement };