@dso-toolkit/core 93.0.1 → 95.0.0

package/dist/collection/components/badge/badge.js

@@ -17,7 +17,6 @@ export class Badge {
         this.toggletipPlacement = "top";
         this.toggletipActive = false;
         this.hasToggletip = false;
-        this.showTooltip = false;
         this.handleShowTooltip = () => {
             // Don't show the tooltip if the button is clicked within 500ms of the last click
             if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {
@@ -28,13 +27,12 @@ export class Badge {
                 if (!this.tooltipElRef?.isConnected) {
                     return;
                 }
-                this.showTooltip = true;
                 this.tooltipElRef?.showPopover();
-                if (!this.cleanUpTooltip && this.buttonElRef && this.tooltipElRef && this.tipArrowElRef) {
-                    this.cleanUpTooltip = positionTooltip({
+                if (!this.cleanUpFunctionTooltip && this.buttonElRef && this.tooltipElRef && this.tooltipArrowElRef) {
+                    this.cleanUpFunctionTooltip = positionTooltip({
                         referenceElement: this.buttonElRef,
                         tipRef: this.tooltipElRef,
-                        tipArrowRef: this.tipArrowElRef,
+                        tipArrowRef: this.tooltipArrowElRef,
                         placementTip: "top",
                         topPositionSmallViewPort: false,
                         halfMainAxisOffset: false,
@@ -45,13 +43,12 @@ export class Badge {
         };
         this.handleHideTooltip = () => {
             this.clearToolTipTimeout();
-            this.showTooltip = false;
             if (this.tooltipElRef?.isConnected && this.tooltipElRef.matches(":popover-open")) {
                 this.tooltipElRef.hidePopover();
             }
-            if (!this.showTooltip && this.cleanUpTooltip) {
-                this.cleanUpTooltip();
-                this.cleanUpTooltip = undefined;
+            if (this.cleanUpFunctionTooltip) {
+                this.cleanUpFunctionTooltip();
+                this.cleanUpFunctionTooltip = undefined;
             }
         };
         this.keyDownHandler = (event) => {
@@ -78,28 +75,28 @@ export class Badge {
         this.toggletipActive = !this.toggletipActive;
         this.handleHideTooltip();
     }
-    cleanupToggletip() {
-        this.cleanUpToggletip?.();
-        this.cleanUpToggletip = undefined;
+    cleanUpToggletip() {
+        this.cleanUpFunctionToggletip?.();
+        this.cleanUpFunctionToggletip = undefined;
     }
-    cleanupTooltip() {
+    cleanUpTooltip() {
         this.clearToolTipTimeout();
-        this.cleanUpTooltip?.();
-        this.cleanUpTooltip = undefined;
+        this.cleanUpFunctionTooltip?.();
+        this.cleanUpFunctionTooltip = undefined;
     }
     componentDidRender() {
         if (!this.hasToggletip) {
             this.toggletipElRef?.hidePopover();
-            this.cleanupToggletip();
-            this.cleanupTooltip();
+            this.cleanUpToggletip();
+            this.cleanUpTooltip();
             return;
         }
-        if (!this.cleanUpToggletip &&
+        if (!this.cleanUpFunctionToggletip &&
             this.toggletipActive &&
             this.buttonElRef &&
             this.toggletipElRef &&
             this.toggletipArrowElRef) {
-            this.cleanUpToggletip = positionTooltip({
+            this.cleanUpFunctionToggletip = positionTooltip({
                 referenceElement: this.buttonElRef,
                 tipRef: this.toggletipElRef,
                 tipArrowRef: this.toggletipArrowElRef,
@@ -107,13 +104,13 @@ export class Badge {
                 restrictContentElement: this.restrictContentElement,
             });
         }
-        if (this.cleanUpToggletip) {
+        if (this.cleanUpFunctionToggletip) {
             if (this.toggletipActive) {
                 this.toggletipElRef?.showPopover();
             }
             else {
                 this.toggletipElRef?.hidePopover();
-                this.cleanupToggletip();
+                this.cleanUpToggletip();
             }
         }
     }
@@ -127,13 +124,13 @@ export class Badge {
         });
     }
     disconnectedCallback() {
-        this.cleanupToggletip();
+        this.cleanUpToggletip();
         this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     render() {
-        return ((this.hasToggletip && (h(Host, { key: '4ab3167d1e0da513bbfbc112cc79ea408dbb8cc6', onKeyDown: this.keyDownHandler, onFocusout: this.focusOutHandler }, h("button", { key: '46c0e3801678e2d103378e3b3000f24a294f5bc6', ref: (el) => (this.buttonElRef = el), type: "button", "aria-label": this.label, class: "toggletip-button", onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: () => this.handleToggle() }, h("span", { key: '2e39d937e4c8b236466c79b3268f8a9d7078a635', class: clsx("dso-badge", "interactive", { [`badge-${this.status}`]: this.status }, { toggled: this.toggletipActive }) }, h("slot", { key: '9cbf2331a05a1f5e171cb652c6815d144254a67a' }))), h(Tooltip, { key: 'f70128b0b00fbc1374b5ea7e0ab7aada334cc8ab', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label), h(Tooltip, { key: '93eff7b7f0f7039e1be485cd0603db096eba1f1c', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: 'e6327308f6c9938bd1913d6afa5dfbea2c13caea', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: '53996d108958bbd0f822c04cc1f02e6cece2617d', name: "toggletip" })))))) ||
-            (!this.hasToggletip && (h("span", { key: '773bc90e7868bb66eb50a043242024f2916a3d76', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: 'b32655c2b7d8344c681dff6d727283b58e4e7d4d' })))));
+        return ((this.hasToggletip && (h(Host, { key: '2d25d87a76c142459c782f1cf0a08420a5abbb3b', onKeyDown: this.keyDownHandler, onFocusout: this.focusOutHandler }, h("button", { key: 'bb6195981bfb96c304ed2688ab641d201815068c', ref: (el) => (this.buttonElRef = el), type: "button", "aria-label": this.label, class: "toggletip-button", onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: () => this.handleToggle() }, h("span", { key: 'e0dddc8bce05334ef7b384a1329c6053f8103924', class: clsx("dso-badge", "interactive", { [`badge-${this.status}`]: this.status }, { toggled: this.toggletipActive }) }, h("slot", { key: '3d87639654caea6d6fc8c979be555d835fb79872' }))), h(Tooltip, { key: 'ebb6a04bfcfb9161c52564f21e129bcef2a3468c', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label), h(Tooltip, { key: '3066b04379adf8924c9739804534f58f7c458faf', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: '568d942b7cdf26bcdb66e23d44a3aa6b87e5915a', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: 'caa5e141110124717e718b26dbc62d9c3e27e95e', name: "toggletip" })))))) ||
+            (!this.hasToggletip && (h("span", { key: 'a44e767ebb07af2d9a6795d86405a62fb22734e1', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: 'd39894fd1236eb0be88f3171f0a2767a26ba6891' })))));
     }
     static get is() { return "dso-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -226,8 +223,7 @@ export class Badge {
     static get states() {
         return {
             "toggletipActive": {},
-            "hasToggletip": {},
-            "showTooltip": {}
+            "hasToggletip": {}
         };
     }
     static get elementRef() { return "host"; }

package/dist/collection/components/card/card.css

@@ -1,4 +1,5 @@
 a {
+  overflow-wrap: anywhere;
   background-color: transparent;
   color: var(--link-color);
   text-decoration: underline;

package/dist/collection/components/document-component/document-component.css

@@ -27,7 +27,7 @@ label.dso-primary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -58,11 +58,13 @@ label.dso-primary {
   background-color: var(--_dso-button-primary-background-color, #39870c);
   border-color: var(--_dso-button-primary-border-color, #39870c);
   color: var(--_dso-button-primary-color, #fff);
+  float: var(--_dt-button-float-primary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -72,6 +74,7 @@ label.dso-primary:hover {
   background-color: var(--_dso-button-primary-hover-background-color, #275937);
   border-color: var(--_dso-button-primary-hover-border-color, #275937);
   color: var(--_dso-button-primary-hover-color, #fff);
+  float: var(--_dt-button-float-primary, none);
 }
 a.dso-primary:active,
 button.dso-primary:active,
@@ -79,6 +82,7 @@ label.dso-primary:active {
   background-color: var(--_dso-button-primary-active-background-color, #173521);
   border-color: var(--_dso-button-primary-active-border-color, #173521);
   color: var(--_dso-button-primary-active-color, #fff);
+  float: var(--_dt-button-float-primary, none);
 }
 a.dso-primary[disabled], a.dso-primary[disabled]:hover,
 button.dso-primary[disabled],
@@ -88,6 +92,7 @@ label.dso-primary[disabled]:hover {
   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);
   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-primary-disabled-color, #fff);
+  float: var(--_dt-button-float-primary, none);
 }
 a.dso-primary.dso-small,
 button.dso-primary.dso-small,
@@ -228,7 +233,7 @@ label.dso-secondary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -259,11 +264,13 @@ label.dso-secondary {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
+  float: var(--_dt-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -273,6 +280,7 @@ label.dso-secondary:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
@@ -280,6 +288,7 @@ label.dso-secondary:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
 button.dso-secondary[disabled],
@@ -289,6 +298,7 @@ label.dso-secondary[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-secondary.dso-small,
 button.dso-secondary.dso-small,
@@ -485,7 +495,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -519,7 +529,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -550,11 +560,13 @@ label.dso-tertiary {
   background-color: var(--_dso-button-tertiary-background-color, );
   border-color: var(--_dso-button-tertiary-border-color, );
   color: var(--_dso-button-tertiary-color, #39870c);
+  float: var(--_dt-button-float-tertiary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: auto;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -564,6 +576,7 @@ label.dso-tertiary:hover {
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
+  float: var(--_dt-button-float-tertiary, none);
 }
 a.dso-tertiary:active,
 button.dso-tertiary:active,
@@ -571,6 +584,7 @@ label.dso-tertiary:active {
   background-color: var(--_dso-button-tertiary-active-background-color, );
   border-color: var(--_dso-button-tertiary-active-border-color, );
   color: var(--_dso-button-tertiary-active-color, #173521);
+  float: var(--_dt-button-float-tertiary, none);
 }
 a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
 button.dso-tertiary[disabled],
@@ -580,6 +594,7 @@ label.dso-tertiary[disabled]:hover {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-tertiary, none);
 }
 a.dso-tertiary.dso-small,
 button.dso-tertiary.dso-small,
@@ -665,7 +680,8 @@ button.dso-tertiary,
 label.dso-tertiary {
   border: 0;
   line-height: 1;
-  padding: 0;
+  padding-inline: 0;
+  padding-block: var(--_dt-button-padding-block-tertiary, 0);
   background-color: transparent;
 }
 a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
@@ -810,7 +826,7 @@ label.dso-map {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -833,11 +849,13 @@ label.dso-map {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
+  float: var(--_dt-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -847,6 +865,7 @@ label.dso-map:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-map:active,
 button.dso-map:active,
@@ -854,6 +873,7 @@ label.dso-map:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-map[disabled], a.dso-map[disabled]:hover,
 button.dso-map[disabled],
@@ -863,6 +883,7 @@ label.dso-map[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-map.dso-small,
 button.dso-map.dso-small,
@@ -1069,7 +1090,8 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .dso-tertiary + .dso-primary,
 .dso-tertiary + .dso-secondary,
 .dso-tertiary + .dso-tertiary {
-  margin-inline-start: 16px;
+  margin-block-start: var(--_dt-button-after-button-margin-block-start, 0);
+  margin-inline-start: var(--_dt-button-after-button-margin-inline-start, 16px);
 }
 
 mark {
@@ -1148,13 +1170,13 @@ mark.dso-highlight {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 
 .heading-element,
 .content {
   text-decoration: var(--_dso-document-component-text-decoration);
-  --_dso-ozon-content-toggletip-text-decoration: underline var(--_dso-document-component-text-decoration);
+  --_dt-ozon-content-toggletip-text-decoration: underline var(--_dso-document-component-text-decoration);
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   .heading-element,
@@ -1202,7 +1224,7 @@ mark.dso-highlight {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 
 :host([filtered]) {
@@ -1243,6 +1265,7 @@ mark.dso-highlight {
 .heading-anchor {
   display: flex;
   flex-wrap: nowrap;
+  overflow-wrap: anywhere;
   background-color: transparent;
   color: var(--link-color);
   text-decoration: underline;

package/dist/collection/components/icon-button/icon-button.css

@@ -61,13 +61,8 @@
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.15s;
   max-inline-size: 320px;
 }
-.dso-tooltip.visible {
-  opacity: 1;
-  visibility: visible;
-}
 .dso-tooltip .tooltip-inner {
   --_dt-span-role-paragraph-margin-block: 8px;
   --_dso-alert-success-border-color: #39870c;
@@ -160,7 +155,7 @@
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -179,11 +174,13 @@
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
+  float: var(--_dt-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -191,16 +188,19 @@
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
+  float: var(--_dt-button-float-secondary, none);
 }
 .dso-secondary:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
+  float: var(--_dt-button-float-secondary, none);
 }
 .dso-secondary[disabled], .dso-secondary[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-secondary, none);
 }
 .dso-secondary.dso-small {
   line-height: 1rem;
@@ -316,7 +316,7 @@
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -355,7 +355,7 @@
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -370,11 +370,13 @@
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
+  float: var(--_dt-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -382,16 +384,19 @@
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
+  float: var(--_dt-button-float-secondary, none);
 }
 .dso-map:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
+  float: var(--_dt-button-float-secondary, none);
 }
 .dso-map[disabled], .dso-map[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-secondary, none);
 }
 .dso-map.dso-small {
   line-height: 1rem;

package/dist/collection/components/icon-button/icon-button.js

@@ -3,6 +3,8 @@ import { positionTooltip } from "../../functional-components/tooltip/position-to
 import { Tooltip } from "../../functional-components/tooltip/tooltip.functional-component";
 export class IconButton {
     constructor() {
+        this.lastClickTime = 0;
+        this.tooltipShowDelay = 500;
         /**
          * The variant of the Icon Button.
          */
@@ -15,9 +17,6 @@ export class IconButton {
          * To disable the Icon Button
          */
         this.disabled = false;
-        this.showTooltip = false;
-        this.lastClickTime = 0;
-        this.tooltipShowDelay = 500;
         this.handleShowTooltip = () => {
             if (this.disabled) {
                 return;
@@ -31,13 +30,12 @@ export class IconButton {
                 if (!this.tooltipElRef?.isConnected) {
                     return;
                 }
-                this.showTooltip = true;
                 this.tooltipElRef?.showPopover();
-                if (!this.cleanUp && this.buttonElRef && this.tooltipElRef && this.tipArrowElRef) {
-                    this.cleanUp = positionTooltip({
+                if (!this.cleanUpFunction && this.buttonElRef && this.tooltipElRef && this.tooltipArrowElRef) {
+                    this.cleanUpFunction = positionTooltip({
                         referenceElement: this.buttonElRef,
                         tipRef: this.tooltipElRef,
-                        tipArrowRef: this.tipArrowElRef,
+                        tipArrowRef: this.tooltipArrowElRef,
                         placementTip: this.tooltipPlacement,
                         topPositionSmallViewPort: false,
                         halfMainAxisOffset: false,
@@ -53,14 +51,10 @@ export class IconButton {
         };
         this.handleHideTooltip = () => {
             this.clearToolTipTimeout();
-            this.showTooltip = false;
             if (this.tooltipElRef?.isConnected && this.tooltipElRef.matches(":popover-open")) {
                 this.tooltipElRef.hidePopover();
             }
-            if (!this.showTooltip && this.cleanUp) {
-                this.cleanUp();
-                this.cleanUp = undefined;
-            }
+            this.cleanUpTooltip();
         };
         this.handleClick = (e) => {
             this.lastClickTime = Date.now();
@@ -74,13 +68,16 @@ export class IconButton {
     async setFocus() {
         this.buttonElRef?.focus();
     }
+    cleanUpTooltip() {
+        this.cleanUpFunction?.();
+        this.cleanUpFunction = undefined;
+    }
     disconnectedCallback() {
         this.clearToolTipTimeout();
-        this.cleanUp?.();
-        this.cleanUp = undefined;
+        this.cleanUpTooltip();
     }
     render() {
-        return (h("button", { key: '39b2888ecb9c678d727b500044de8eb8e040b10d', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: '1a5eb6257dcae2dd73d2307018821e51f6df04c1', icon: this.icon }), h(Tooltip, { key: 'cf80d8d08594dd9d493d17732604c9b2749bb569', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
+        return (h("button", { key: '02d16210dbee769bc2e12a292d8bde5a0833a0a2', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: '11dac1e867635398ee8f7df96ec392d8ccd1077e', icon: this.icon }), h(Tooltip, { key: '38929a7fd469d4d0ca9325dc5e039df1d9b285aa', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -217,11 +214,6 @@ export class IconButton {
             }
         };
     }
-    static get states() {
-        return {
-            "showTooltip": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "dsoClick",

package/dist/collection/components/image-overlay/image-overlay.css

@@ -94,7 +94,7 @@ ins.editaction-add {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 ins.editaction-add .wrapper {
   outline: none;
@@ -131,7 +131,7 @@ ins.editaction-add .wrapper {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 ins.editaction-add .wrapper .editaction-label {
   line-height: 1.5;
@@ -178,9 +178,9 @@ del.editaction-remove {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   del.editaction-remove {
@@ -221,9 +221,9 @@ del.editaction-remove .wrapper {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   del.editaction-remove .wrapper {

package/dist/collection/components/info-button/info-button.css

@@ -26,13 +26,8 @@
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.15s;
   max-inline-size: 640px;
 }
-.dso-tooltip.visible {
-  opacity: 1;
-  visibility: visible;
-}
 .dso-tooltip .tooltip-inner {
   --_dt-span-role-paragraph-margin-block: 8px;
   --_dso-alert-success-border-color: initial;