@dso-toolkit/core 92.0.0 → 94.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;
@@ -1351,8 +1374,8 @@ mark.dso-highlight {
   gap: 8px;
 }
 
-:host([type=ARTIKEL]:not([alternative-title])) dso-ozon-content.kop::part(_kop),
-:host([type=ARTIKEL]:not([alternative-title])) .toggle-button {
+:host([type=ARTIKEL]:not([alternative-title]):not([mode=table-of-contents])) dso-ozon-content.kop::part(_kop),
+:host([type=ARTIKEL]:not([alternative-title]):not([mode=table-of-contents])) .toggle-button {
   --_dso-icon-button-tertiary-color: #000;
   color: #000;
 }

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

@@ -188,11 +188,11 @@ export class DocumentComponent {
                 next: !this.openAnnotation,
                 scrollRef: this.host,
                 originalEvent: e.detail.originalEvent,
-            }) }))))))), this.openAnnotation && (h("div", { key: '8746bc4ed68bc3620c113eef074b948272959f87', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: 'ae75591436513944b20b30962f4291cfb157efca', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
+            }) }))))))), this.openAnnotation && (h("div", { key: '8162cc176d5a8c05b983c36cbb769722c91c9813', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: 'ffd7c0629cb9bb955551ac716d6edcfffab9c78e', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
                 current: true,
                 next: false,
                 originalEvent: e,
-            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '37175e255f0a9dfa3a024b14be3fbca10f18f64c', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '950f26b33105a31a4d957164ca3c426d2dcb4110', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: 'e4dd128387e4407a11f9e10420e3f88309754fd8', class: "content", part: "_content" }, h(AantekenAlert, { key: '3f7e2c0ca74defd8fac24ba02822843db173e6ee', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: 'b7aa32e7939d50978ef7730132c84e8cd038344c', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: '85bfd9f8b0737cea51673410fb7c226dae2474c9', class: "children-container", part: "_children-container" }, h("slot", { key: 'eb36a4df9e2252f25ba39e36e0cd4b0b4bc2e6cc' }))));
+            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: 'c25b22f974f8396f2bbc44c0ae7a368d293bf88c', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '3006e43fe595baf212fb17f9a47474151fa29966', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '1026dadf34687669b2f09833a17286668842d5b4', class: "content", part: "_content" }, h(AantekenAlert, { key: '67918f72432b3a6f4c8cc1d2f4b21f51ba032437', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: 'b782dc85db857445454076ddeeca96524f4e3012', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: '5fbcca6a7d74bf25f29213bcdc64a2f9a38564d2', class: "children-container", part: "_children-container" }, h("slot", { key: 'a4424bd30e1b65048ba35a1ab9ff8b583cf73738' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }

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;