@sme.up/ketchup 10.1.1 → 10.2.0

package/dist/collection/components/kup-spinner/kup-spinner.js

@@ -96,59 +96,59 @@ export class KupSpinner {
             spinnerClass = 'spinner-v' + this.layout;
             if (this.layout === 7) {
                 spinnerEl = [
-                    h("div", { key: 'c230c5225fb22715fb1494e5b8a86131e350ecc0', class: "sk-spinner-v7-dot" }),
-                    h("div", { key: '4a415afecae8baf7a01fe922e81832c25544f07d', class: "sk-spinner-v7-dot" }),
-                    h("div", { key: '198bff3795141a36765e698ec48a8b9109c0f129', class: "sk-spinner-v7-dot" }),
-                    h("div", { key: 'b17a4172f3e006640a042ba871399b80487f4f00', class: "sk-spinner-v7-dot" }),
-                    h("div", { key: '9d5f08fe30bff57d9ce86afd2775e508488027fb', class: "sk-spinner-v7-dot" }),
-                    h("div", { key: '1456cb6032d0869726b1269181953f070cd1df8e', class: "sk-spinner-v7-dot" }),
+                    h("div", { key: 'be49ed8f5286cc0cfb07cda35a1f8d9193987c2f', class: "sk-spinner-v7-dot" }),
+                    h("div", { key: 'be74afc08d77694c93e70b75e99e0f3c43135578', class: "sk-spinner-v7-dot" }),
+                    h("div", { key: '4583a2dc88cb9bff62122343fe12c3885b01b1ae', class: "sk-spinner-v7-dot" }),
+                    h("div", { key: '374e0a5829305088d9308b3007d598aee1e3cf66', class: "sk-spinner-v7-dot" }),
+                    h("div", { key: '22cae0dd7acc710b40d6507d8d04de97f101c9c5', class: "sk-spinner-v7-dot" }),
+                    h("div", { key: '078d03e628d27b6396a78c1b0df163c42e9e4d42', class: "sk-spinner-v7-dot" }),
                 ];
             }
             if (this.layout === 9) {
                 spinnerEl = [
-                    h("div", { key: '1377ea31fdb93af19b211f9e254ff7e2b509cbb1', class: "sk-spinner-v9-bounce1" }),
-                    h("div", { key: 'c290645955ede25413a377b2944aea50aefa4ffc', class: "sk-spinner-v9-bounce2" }),
+                    h("div", { key: '035a2e3e9e204d3d3747aa656d249282b2713661', class: "sk-spinner-v9-bounce1" }),
+                    h("div", { key: 'a31b555f53ac46cd52921e7dc4c572277a3a6a62', class: "sk-spinner-v9-bounce2" }),
                 ];
             }
             if (this.layout === 10) {
                 spinnerEl = [
-                    h("div", { key: '1b6db643ec099cb1d9da404e611e3984f6b0d411', class: "sk-spinner-v10-cube1" }),
-                    h("div", { key: '6f621f3449799b8f83afd083bf0e86ea1e6e31fa', class: "sk-spinner-v10-cube2" }),
+                    h("div", { key: '7acc316131ebd5ec550339d306d182ac56f241c7', class: "sk-spinner-v10-cube1" }),
+                    h("div", { key: 'eb3a4c5a54f8863423593a281b5092db0181d277', class: "sk-spinner-v10-cube2" }),
                 ];
             }
             if (this.layout === 12) {
                 spinnerEl = [
-                    h("div", { key: 'a76f225e3764c53de8fa72f9e3aa3bf093a27d24', class: "sk-spinner-v12-dot1" }),
-                    h("div", { key: 'd0a75c2e8bd6250052900dd384a5b29d33f342f2', class: "sk-spinner-v12-dot2" }),
+                    h("div", { key: '448a151cd9b8c4687ba5e767dd45bfac315b9394', class: "sk-spinner-v12-dot1" }),
+                    h("div", { key: 'b7d3dc53e7186a368371a5451fab2dca6907e9c9', class: "sk-spinner-v12-dot2" }),
                 ];
             }
             if (this.layout === 13) {
                 spinnerEl = [
-                    h("div", { key: '8cb2231ecd254958a44073b18972ecd1e801e183', class: "sk-spinner-v13-cube sk-spinner-v13-cube1" }),
-                    h("div", { key: '0d5627be12cc9b1cee0232debbddd446b04ec69f', class: "sk-spinner-v13-cube sk-spinner-v13-cube2" }),
-                    h("div", { key: 'f1ac95d34f08e2cd32450bfdb9e5e242abb09f81', class: "sk-spinner-v13-cube sk-spinner-v13-cube3" }),
-                    h("div", { key: '6b157ff750eb65904ada9cf7efe0dfadb9e14656', class: "sk-spinner-v13-cube sk-spinner-v13-cube4" }),
-                    h("div", { key: 'b44f559aa038804d0d61f15ab83a4328ef209ffa', class: "sk-spinner-v13-cube sk-spinner-v13-cube5" }),
-                    h("div", { key: '9e2a85b7f8fb6b521546aa730d473d06ffedaea2', class: "sk-spinner-v13-cube sk-spinner-v13-cube6" }),
-                    h("div", { key: '71d2051156f1fc8464cdac25513cc460d60e3f45', class: "sk-spinner-v13-cube sk-spinner-v13-cube7" }),
-                    h("div", { key: '19caa8ca874e0803c86a306bbcb931afc4c26f35', class: "sk-spinner-v13-cube sk-spinner-v13-cube8" }),
-                    h("div", { key: 'ee9c65e7d2e85a6bf4cc008561af00462d0fe730', class: "sk-spinner-v13-cube sk-spinner-v13-cube9" }),
+                    h("div", { key: 'd770d6560b78acd181785637ce741141ecb5a6be', class: "sk-spinner-v13-cube sk-spinner-v13-cube1" }),
+                    h("div", { key: '3dfb240d5c06af0d0e81ba27f304f4973c6f10cc', class: "sk-spinner-v13-cube sk-spinner-v13-cube2" }),
+                    h("div", { key: 'd74598ed1ac05aef6c15fd2865b5d088f586fe58', class: "sk-spinner-v13-cube sk-spinner-v13-cube3" }),
+                    h("div", { key: '55e2790119eaad3853f98131c3da0b9c38fc4dc5', class: "sk-spinner-v13-cube sk-spinner-v13-cube4" }),
+                    h("div", { key: '37c1dbd93c8549c3777654b5991b01425bc1de15', class: "sk-spinner-v13-cube sk-spinner-v13-cube5" }),
+                    h("div", { key: '54cae80528131227c6d403d3642d5eba4473796a', class: "sk-spinner-v13-cube sk-spinner-v13-cube6" }),
+                    h("div", { key: 'ab3b726d3807dd164052382be738fda4a35b3734', class: "sk-spinner-v13-cube sk-spinner-v13-cube7" }),
+                    h("div", { key: '8da905cbeed77ecaf57a170c937a220884e024bf', class: "sk-spinner-v13-cube sk-spinner-v13-cube8" }),
+                    h("div", { key: '1ec4d7c3101f7402fa9268c2b296fbff7636f187', class: "sk-spinner-v13-cube sk-spinner-v13-cube9" }),
                 ];
             }
             if (this.layout === 14) {
                 spinnerEl = [
-                    h("div", { key: '0473c2f769feb3596dd603367e4911d9e18fc762', class: "sk-spinner-v14-circle1 sk-spinner-v14-circle" }),
-                    h("div", { key: 'a6ad1e7e59504ecb5ca738335790d3ba12107e0a', class: "sk-spinner-v14-circle2 sk-spinner-v14-circle" }),
-                    h("div", { key: '391287689f7f735c9bc0b339bd71c751f6d6cd87', class: "sk-spinner-v14-circle3 sk-spinner-v14-circle" }),
-                    h("div", { key: 'd62ed8cfd7ffde4617005d1919e71098118bcf08', class: "sk-spinner-v14-circle4 sk-spinner-v14-circle" }),
-                    h("div", { key: '345aad397639757a08fbb5929303ccc87e88c915', class: "sk-spinner-v14-circle5 sk-spinner-v14-circle" }),
-                    h("div", { key: 'e3f6214db05bb53f07cd1568ac86aa7fd0255cc6', class: "sk-spinner-v14-circle6 sk-spinner-v14-circle" }),
-                    h("div", { key: 'd6083fdf239b0254b7e84ae0f9b43ebc71907599', class: "sk-spinner-v14-circle7 sk-spinner-v14-circle" }),
-                    h("div", { key: 'd8b1a8573ebc27090bb5cd5e6cb3c8cd76134aca', class: "sk-spinner-v14-circle8 sk-spinner-v14-circle" }),
-                    h("div", { key: '10503cbcf3d507e0ffcac975ebc83ff5c16a01cb', class: "sk-spinner-v14-circle9 sk-spinner-v14-circle" }),
-                    h("div", { key: 'cd4b9bb65e00b42e575325718cb3035fb1b013e2', class: "sk-spinner-v14-circle10 sk-spinner-v14-circle" }),
-                    h("div", { key: 'dbf2866896b92359fc2009385b30f547e6e284b3', class: "sk-spinner-v14-circle11 sk-spinner-v14-circle" }),
-                    h("div", { key: '11a5215eb384803266bf4feaa55843c49dade78d', class: "sk-spinner-v14-circle12 sk-spinner-v14-circle" }),
+                    h("div", { key: '1dd8f7ac22a607d29a2f1aba836ac71d57243a74', class: "sk-spinner-v14-circle1 sk-spinner-v14-circle" }),
+                    h("div", { key: '90538de7fa05a98194c018777bae979414e89054', class: "sk-spinner-v14-circle2 sk-spinner-v14-circle" }),
+                    h("div", { key: '8a8469d8875d994bca5e056dac45c23e33723863', class: "sk-spinner-v14-circle3 sk-spinner-v14-circle" }),
+                    h("div", { key: '082e698de2276137f1eff63935c695405e9a4628', class: "sk-spinner-v14-circle4 sk-spinner-v14-circle" }),
+                    h("div", { key: 'b91c0633d8fc818681cf3c01f189f877be54e25b', class: "sk-spinner-v14-circle5 sk-spinner-v14-circle" }),
+                    h("div", { key: 'c450c0cb09f34a997483d7a0201d38751c3f0e95', class: "sk-spinner-v14-circle6 sk-spinner-v14-circle" }),
+                    h("div", { key: '9b5da4675059e4cd740fc42ef2abc29f129e856f', class: "sk-spinner-v14-circle7 sk-spinner-v14-circle" }),
+                    h("div", { key: 'd32d440843426ab36c2a86f0e98e1817b7541798', class: "sk-spinner-v14-circle8 sk-spinner-v14-circle" }),
+                    h("div", { key: '1d59416b4a2e817635ca29fc1b15b2549c51977c', class: "sk-spinner-v14-circle9 sk-spinner-v14-circle" }),
+                    h("div", { key: 'df15de878ec26399d0732bc19d5c6e77368c3762', class: "sk-spinner-v14-circle10 sk-spinner-v14-circle" }),
+                    h("div", { key: 'bc705012c50ca66d8c62a034dc725e3a0745bde2', class: "sk-spinner-v14-circle11 sk-spinner-v14-circle" }),
+                    h("div", { key: '9e9a412dae759d41b7d562584f787bcc018112d7', class: "sk-spinner-v14-circle12 sk-spinner-v14-circle" }),
                 ];
             }
         }
@@ -167,7 +167,7 @@ export class KupSpinner {
         else {
             elStyle = Object.assign(Object.assign({}, elStyle), { fontSize: '3px' });
         }
-        return (h(Host, { key: '87d7f02643062519ffa2cbdcb283506a19adab08', style: elStyle }, h("style", { key: 'a6b5eb547050eea1cada05bd1e46bfb4ed7f6077' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '3922165105f1b26cbc43d09516e14dc411763ca4', id: componentWrapperId, style: elStyle }, h("div", { key: '4eabcdc826121302dae03c5a6d705525d5912c1c', id: "loading-wrapper-master", class: masterClass, style: elStyle }, h("div", { key: 'c7841a232fc918c95a8ee7bf801b0133a3e5d419', id: wrapperClass, style: elStyle }, h("div", { key: 'bae822afca8f901ff34a0c584f9b9ba4ff9accc7', class: spinnerClass }, spinnerEl))))));
+        return (h(Host, { key: 'aefd855363cd0f6ef782fb8b9672ce1dbb4738ac', style: elStyle }, h("style", { key: '95facaf3399710b08fa25436f61a12ebe5a1a156' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '53edf8f82167edb23d397b5806df1cd049675551', id: componentWrapperId, style: elStyle }, h("div", { key: '17b882344257b18a30b5e0e9a84ee7844840c611', id: "loading-wrapper-master", class: masterClass, style: elStyle }, h("div", { key: 'ce1aa210fade00ea49a40aa38a8706d91a0c93b7', id: wrapperClass, style: elStyle }, h("div", { key: '71d5687aba03f4c0b208aaaa0c2f82542a9c1885', class: spinnerClass }, spinnerEl))))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);

package/dist/collection/components/kup-switch/kup-switch.css

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;

package/dist/collection/components/kup-switch/kup-switch.js

@@ -123,7 +123,7 @@ export class KupSwitch {
             onChange: () => this.onKupChange(),
             onFocus: () => this.onKupFocus(),
         };
-        return (h(Host, { key: 'e3fe5aa6a9401795b892ef60027deeed28c5837d' }, h("style", { key: '125bd2c5429b97deb424fddc9f539e054825c78f' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '394cc74c4cd94e38f5475e19761aeae6eb248d73', id: componentWrapperId }, h(FSwitch, Object.assign({ key: '6ee5cedc0502090113575ee03b3bef70bc1a365b' }, props)))));
+        return (h(Host, { key: '865e41de66776f62b9692a8420da6d685e81d063' }, h("style", { key: '18f77d5803091959c45970a084283f5201f3acd3' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '7e4e60b1876d5e29509a07df7e36286d392f6612', id: componentWrapperId }, h(FSwitch, Object.assign({ key: '91aad016ffdfc1bd9ee3da89b68b1182e1ac175a' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);

package/dist/collection/components/kup-tab-bar/kup-tab-bar.css

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -210,15 +210,17 @@
 .tab-bar .tab-scroller .tab:focus {
   outline: 2px solid var(--kup_tabindicator_border_bottom_color_active);
 }
-.tab-bar .tab-scroller .tab .tab__icon + .tab__text-label {
-  padding-left: 8px;
-  padding-right: 0px;
+.tab-bar .tab-scroller .tab .tab__text-label {
   font-family: var(--kup-font-family);
   font-size: var(--kup-body-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 400;
   letter-spacing: 0.16px;
 }
+.tab-bar .tab-scroller .tab .tab__text-label.tab_icon {
+  padding-left: 8px;
+  padding-right: 0px;
+}
 .tab-bar .tab-scroller .tab .tab__icon .f-image__icon {
   background: var(--kup_tabbar_text_color) !important;
 }
@@ -253,7 +255,7 @@
 .tab-bar .tab-scroller .tab.tab--active .tab__content .tab__text-label {
   transition-delay: 100ms;
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;

package/dist/collection/components/kup-tab-bar/kup-tab-bar.js

@@ -30,6 +30,8 @@ export class KupTabBar {
         /*-------------------------------------------------*/
         /*       I n t e r n a l   V a r i a b l e s       */
         /*-------------------------------------------------*/
+        this.toolbarState = [];
+        this.infoState = [];
         /**
          * Instance of the KupManager class.
          */
@@ -43,11 +45,13 @@ export class KupTabBar {
         this.value = '';
         this.customStyle = '';
         this.data = null;
+        this.infoIcon = false;
         this.variant = KupTabbarStyling.FLAT;
         this.dense = false;
         this.ripple = false;
         this.toolbar = false;
-        this.toolbarData = undefined;
+        this.toolbarCallback = undefined;
+        this.infoCallback = undefined;
     }
     onKupBlur(i, node) {
         this.kupBlur.emit({
@@ -70,16 +74,22 @@ export class KupTabBar {
             node: node,
         });
     }
-    onKupIconClick(i, node, el) {
+    onKupIconClick(el) {
+        if (!el) {
+            this.kupManager.debug.logMessage(this, 'onKupIconClick: Element is null');
+            return;
+        }
         __classPrivateFieldSet(this, _KupTabBar_dropDownActionCardAnchor, el, "f");
-        this.kupIconClick.emit({
-            comp: this,
-            id: this.rootElement.id,
-            index: i,
-            node: node,
-        });
         this.createDropDownToolbarList();
     }
+    onKupInfoIconClick(el) {
+        if (!el) {
+            this.kupManager.debug.logMessage(this, 'onKupIconClick: Element is null');
+            return;
+        }
+        __classPrivateFieldSet(this, _KupTabBar_dropDownActionCardAnchor, el, "f");
+        this.createDropDownInfoList();
+    }
     onKupFocus(i, node) {
         this.kupFocus.emit({
             comp: this,
@@ -155,15 +165,27 @@ export class KupTabBar {
             this.kupManager.dynamicPosition.stop(this.toolbarList);
             this.kupManager.removeClickCallback(__classPrivateFieldGet(this, _KupTabBar_clickCbDropCard, "f"));
             this.toolbarList.remove();
+            this.kupManager.dynamicPosition.unregister([this.toolbarList]);
             this.toolbarList = null;
         }
     }
+    /**
+     * Create dropdown list for toolbar
+     */
     createDropDownToolbarList() {
+        if (!__classPrivateFieldGet(this, _KupTabBar_dropDownActionCardAnchor, "f")) {
+            this.kupManager.debug.logMessage(this, 'createDropDownToolbarList: Anchor is null!');
+            return;
+        }
         if (this.toolbarList) {
             this.closeRowToolbarList();
         }
+        if (this.toolbarState.length === 0) {
+            this.kupManager.debug.logMessage(this, 'No toolbar state available.');
+            return;
+        }
         const listEl = document.createElement('kup-toolbar');
-        listEl.data = this.toolbarData;
+        listEl.data = this.toolbarState;
         listEl.addEventListener('kup-toolbar-click', (e) => {
             this.onKupToolbarItemClick(e);
             setTimeout(() => {
@@ -180,10 +202,57 @@ export class KupTabBar {
         this.kupManager.addClickCallback(__classPrivateFieldGet(this, _KupTabBar_clickCbDropCard, "f"), true);
         this.rootElement.shadowRoot.appendChild(this.toolbarList);
         requestAnimationFrame(() => {
+            if (!__classPrivateFieldGet(this, _KupTabBar_dropDownActionCardAnchor, "f")) {
+                this.kupManager.debug.logMessage(this, 'DropDown anchor is still null after delay!');
+                return;
+            }
             this.kupManager.dynamicPosition.register(this.toolbarList, __classPrivateFieldGet(this, _KupTabBar_dropDownActionCardAnchor, "f"), 0, KupDynamicPositionPlacement.AUTO, true);
             this.kupManager.dynamicPosition.start(this.toolbarList);
         });
     }
+    /**
+     * Create dropdown list for tab info icon
+     */
+    createDropDownInfoList() {
+        if (!__classPrivateFieldGet(this, _KupTabBar_dropDownActionCardAnchor, "f")) {
+            this.kupManager.debug.logMessage(this, 'createDropDownToolbarList: Anchor is null!');
+            return;
+        }
+        if (this.infoList) {
+            this.closeInfoDataList();
+        }
+        if (this.infoState.length === 0) {
+            this.kupManager.debug.logMessage(this, 'No toolbar state available.');
+            return;
+        }
+        const listEl = document.createElement('kup-list');
+        listEl.data = this.infoState;
+        this.infoList = listEl;
+        __classPrivateFieldSet(this, _KupTabBar_clickCbDropCard, {
+            cb: () => {
+                this.closeInfoDataList();
+            },
+            el: this.infoList,
+        }, "f");
+        this.kupManager.addClickCallback(__classPrivateFieldGet(this, _KupTabBar_clickCbDropCard, "f"), true);
+        this.rootElement.shadowRoot.appendChild(this.infoList);
+        requestAnimationFrame(() => {
+            this.kupManager.dynamicPosition.register(this.infoList, __classPrivateFieldGet(this, _KupTabBar_dropDownActionCardAnchor, "f"), 0, KupDynamicPositionPlacement.AUTO, true);
+            this.kupManager.dynamicPosition.start(this.infoList);
+        });
+    }
+    /**
+     * Destroy dropdown list for tab info icon
+     */
+    closeInfoDataList() {
+        if (this.infoList) {
+            this.kupManager.dynamicPosition.stop(this.infoList);
+            this.kupManager.removeClickCallback(__classPrivateFieldGet(this, _KupTabBar_clickCbDropCard, "f"));
+            this.infoList.remove();
+            this.kupManager.dynamicPosition.unregister([this.infoList]);
+            this.infoList = null;
+        }
+    }
     consistencyCheck() {
         let activeTabs = 0;
         let lastActiveOccurrence = 0;
@@ -244,10 +313,29 @@ export class KupTabBar {
                 'kup-dense': this.dense,
                 'kup-danger': node.danger,
             };
-            const tabEl = (h("f-button", { class: tabClass, role: "tab", "aria-selected": this.data[i].active ? true : false, tabIndex: i, title: node.title ? node.title : null, onBlur: () => this.onKupBlur(i, node), onClick: () => this.onKupClick(i, node), onFocus: () => this.onKupFocus(i, node) }, h("span", { class: "tab__content" }, node.icon ? (h(FImage, { color: `var(${KupThemeColorValues.PRIMARY})`, resource: node.icon, placeholderResource: node.placeholderIcon, wrapperClass: "tab__icon" })) : null, node.value ? (h("span", { class: "tab__text-label" }, this.data[i].value)) : null), this.toolbar && (h(FImage, { resource: "more_vert", sizeX: "16px", sizeY: "16px", onClick: (event) => {
+            const tabEl = (h("f-button", { class: tabClass, role: "tab", "aria-selected": this.data[i].active ? true : false, tabIndex: i, title: node.title ? node.title : null, onBlur: () => this.onKupBlur(i, node), onClick: () => this.onKupClick(i, node), onFocus: () => this.onKupFocus(i, node) }, h("span", { class: "tab__content" }, node.icon ? (h(FImage, { color: `var(${KupThemeColorValues.PRIMARY})`, resource: node.icon, placeholderResource: node.placeholderIcon, wrapperClass: "tab__icon" })) : null, node.value ? (h("span", { class: "tab__text-label" }, this.data[i].value)) : null), this.infoIcon && (h(FImage, { resource: "info_outline", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
                     event.stopPropagation();
-                    this.onKupIconClick(i, node, event.currentTarget);
-                }, wrapperClass: "tab__iconToolbar" })), h("span", { class: `tab-indicator ${node.active ? ' tab-indicator--active' : ''}` }, h("span", { class: "tab-indicator__content tab-indicator__content--underline" }))));
+                    const el = event.currentTarget;
+                    const data = await this.infoCallback();
+                    this.infoState = data;
+                    if (this.infoState.length > 0) {
+                        this.onKupInfoIconClick(el);
+                    }
+                    else {
+                        this.kupManager.debug.logMessage(this, 'InfoIcon data is empty, not opening dropdown.');
+                    }
+                }, wrapperClass: "tab__iconToolbar iconInfo" })), this.toolbar && (h(FImage, { resource: "more_vert", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
+                    event.stopPropagation();
+                    const el = event.currentTarget;
+                    const data = await this.toolbarCallback();
+                    this.toolbarState = data;
+                    if (this.toolbarState.length > 0) {
+                        this.onKupIconClick(el);
+                    }
+                    else {
+                        this.kupManager.debug.logMessage(this, 'Toolbar data is empty, not opening dropdown.');
+                    }
+                }, wrapperClass: "tab__iconToolbar iconToolbar" })), h("span", { class: `tab-indicator ${node.active ? ' tab-indicator--active' : ''}` }, h("span", { class: "tab-indicator__content tab-indicator__content--underline" }))));
             tabBar.push(tabEl);
         }
         const tabbarRole = {
@@ -260,6 +348,12 @@ export class KupTabBar {
     disconnectedCallback() {
         this.kupManager.scrollOnHover.unregister(this.scrollArea);
         this.kupManager.theme.unregister(this);
+        if (this.toolbarList) {
+            this.kupManager.dynamicPosition.unregister([this.toolbarList]);
+        }
+        if (this.infoList) {
+            this.kupManager.dynamicPosition.unregister([this.infoList]);
+        }
     }
     static get is() { return "kup-tab-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -324,6 +418,27 @@ export class KupTabBar {
                 },
                 "defaultValue": "null"
             },
+            "infoIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "When enabled displays toolbar item inside each single tab."
+                },
+                "attribute": "info-icon",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -414,13 +529,17 @@ export class KupTabBar {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "toolbarData": {
+            "toolbarCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "KupDataNode[]",
-                    "resolved": "KupDataNode[]",
+                    "original": "() => Promise<KupDataNode[]>",
+                    "resolved": "() => Promise<KupDataNode[]>",
                     "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
                         "KupDataNode": {
                             "location": "import",
                             "path": "../../managers/kup-data/kup-data-declarations",
@@ -431,11 +550,33 @@ export class KupTabBar {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "null"
-                        }],
-                    "text": "Display DataNode Toolbar."
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "infoCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => Promise<KupDataNode[]>",
+                    "resolved": "() => Promise<KupDataNode[]>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KupDataNode": {
+                            "location": "import",
+                            "path": "../../managers/kup-data/kup-data-declarations",
+                            "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
                 }
             }
         };
@@ -509,6 +650,27 @@ export class KupTabBar {
                         }
                     }
                 }
+            }, {
+                "method": "kupInfoIconClick",
+                "name": "kup-tabbar-infoiconclick",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the icon inside tab is clicked."
+                },
+                "complexType": {
+                    "original": "KupTabBarEventPayload",
+                    "resolved": "KupTabBarEventPayload",
+                    "references": {
+                        "KupTabBarEventPayload": {
+                            "location": "import",
+                            "path": "./kup-tab-bar-declarations",
+                            "id": "src/components/kup-tab-bar/kup-tab-bar-declarations.ts::KupTabBarEventPayload"
+                        }
+                    }
+                }
             }, {
                 "method": "kupFocus",
                 "name": "kup-tabbar-focus",

package/dist/collection/components/kup-text-field/kup-text-field.css

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;

package/dist/collection/components/kup-time-picker/kup-time-picker.css

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;

package/dist/collection/components/kup-time-picker/kup-time-picker.js

@@ -149,6 +149,10 @@ export class KupTimePicker {
             return;
         }
     }
+    watchInitialValue() {
+        this.setValue(this.initialValue);
+        this.refresh();
+    }
     /*-------------------------------------------------*/
     /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
@@ -427,7 +431,7 @@ export class KupTimePicker {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '3f6acf44358187ab49855ca4be0e34245b20e8e9' }, h("style", { key: '0d82d42fee59676ac79dda83487ea09df4c0278f' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'd4a2fae6357fbce735b13157261ed054e9402bd6', id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
+        return (h(Host, { key: '997fb07059e92499bd05e903bc1386d474158422' }, h("style", { key: 'aa3545fd8451391ca1eb53c88b61aea1aec9d30d' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'ca27bff1abeafddae9279398a31c3c83fa04aa47', id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
     }
     disconnectedCallback() {
         this.kupManager.dates.unregister(this);
@@ -1007,6 +1011,9 @@ export class KupTimePicker {
         return [{
                 "propName": "timeMinutesStep",
                 "methodName": "watchTimeMinutesStep"
+            }, {
+                "propName": "initialValue",
+                "methodName": "watchInitialValue"
             }];
     }
     static get listeners() {

package/dist/collection/components/kup-toolbar/kup-toolbar.css

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -145,7 +145,7 @@
 .parent-class {
   position: relative;
   cursor: pointer;
-  width: 200px;
+  min-width: 175px;
   background-color: var(--kup-gray-color-10);
   display: flex;
   justify-content: space-between;
@@ -165,6 +165,11 @@
   display: flex;
   gap: 8px;
   align-items: center;
+  font-family: var(--kup-font-family);
+  font-size: var(--kup-body-compact-01-font-size, 14px);
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
 }
 .parent-class:hover:not(.toolbar-item-disabled):not(:has(> .f-cell)) {
   background-color: var(--kup-gray-color-10-hover);
@@ -233,12 +238,4 @@
 }
 .nested-class .f-cell .f-cell__content .f-radio .form-field:hover {
   background-color: var(--kup-gray-color-10-hover);
-}
-.nested-class .f-cell .f-cell__content .f-radio .form-field .radio {
-  padding: var(--kup-space-03) 0 var(--kup-space-03) var(--kup-space-03);
-}
-.nested-class .f-cell .f-cell__content .f-radio .form-field label {
-  width: 100%;
-  cursor: pointer;
-  padding: var(--kup-space-03);
 }