@gov-design-system-ce/components 4.0.8-rc11 → 4.0.8-rc12

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { b as bootstrapLazy } from './index-84a63a3e.js';
-export { s as setNonce } from './index-84a63a3e.js';
+import { b as bootstrapLazy } from './index-b44c6c92.js';
+export { s as setNonce } from './index-b44c6c92.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {

package/dist/hydrate/index.js

@@ -124,7 +124,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'core';
-const BUILD = /* core */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: true, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: false, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* core */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: true, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: false, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Hydrate Platform v4.20.0 | MIT Licensed | https://stenciljs.com
@@ -1343,6 +1343,9 @@ var postUpdateComponent = (hostRef) => {
       }
     }
   } else {
+    {
+      safeCall(instance, "componentDidUpdate");
+    }
     endPostUpdate();
   }
   {
@@ -8112,11 +8115,7 @@ class GovTooltip {
         validateProp(TooltipPosition, newValue, TooltipClass.root);
     }
     rerenderMessage() {
-        var _a;
-        const isContent = document.body.querySelector(`#${(_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId}`);
-        if (!isContent) {
-            this.createContentWrapper();
-        }
+        this.createContentWrapper();
     }
     componentWillLoad() {
         this.validateVariant(this.variant);
@@ -8125,45 +8124,53 @@ class GovTooltip {
         this.createContentWrapper();
         this.registerListeners();
     }
+    componentDidUpdate() {
+        this.createContentWrapper();
+    }
     disconnectedCallback() {
         this.removeContent();
     }
     createContentWrapper() {
         var _a;
-        const hasContentInside = this.host.querySelector(TooltipContentClass.root);
-        if (hasContentInside) {
-            this.content = hasContentInside;
+        if (this.tooltipContent) {
+            if (this.message) {
+                this.tooltipContent.innerHTML = this.message;
+            }
+            else if (this.insideContent) {
+                this.tooltipContent.innerHTML = this.insideContent.innerHTML;
+            }
+            return;
+        }
+        let content;
+        if (this.insideContent) {
+            content = this.insideContent;
         }
         else {
-            this.content = document.createElement(TooltipContentClass.root);
-            this.content.innerHTML = this.message;
-            this.host.appendChild(this.content);
+            content = documentNode().createElement(TooltipContentClass.root);
+            content.innerHTML = this.message;
         }
-        this.content.setAttribute("id", (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId);
-        this.content.setAttribute("parent-id", this.tooltipId);
-        this.content.setAttribute("variant", this.variant);
-        this.content.setAttribute("size", this.size);
-        document.body.appendChild(this.content);
+        content.setAttribute("id", (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId);
+        content.setAttribute("parent-id", this.tooltipId);
+        content.setAttribute("variant", this.variant);
+        content.setAttribute("size", this.size);
+        documentNode().body.appendChild(content);
+    }
+    get tooltipContent() {
+        var _a;
+        return documentNode().body.querySelector(`#${(_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId}`);
+    }
+    get insideContent() {
+        return this.host.querySelector(TooltipContentClass.root);
     }
     registerListeners() {
         this.host.addEventListener("click", e => {
             e.preventDefault();
             this.persist = true;
-            if (this.content) {
-                this.content.setAttribute("persist", "true");
+            if (this.tooltipContent) {
+                this.tooltipContent.setAttribute("persist", "true");
             }
             this.showTooltip();
         });
-        this.host.addEventListener("focus", e => {
-            e.preventDefault();
-            this.showTooltip();
-        });
-        this.host.addEventListener("blur", e => {
-            e.preventDefault();
-            if (this.persist === false) {
-                this.hideTooltip();
-            }
-        });
         this.host.addEventListener("mouseenter", e => {
             e.preventDefault();
             this.showTooltip();
@@ -8181,8 +8188,8 @@ class GovTooltip {
         const trigger = this.host.getBoundingClientRect();
         const trgWidth = this.host.offsetWidth;
         const trgHeight = this.host.offsetHeight;
-        const contentWidth = this.content.offsetWidth;
-        const contentHeight = this.content.offsetHeight;
+        const contentWidth = this.tooltipContent.offsetWidth;
+        const contentHeight = this.tooltipContent.offsetHeight;
         const triggerPos = {
             left: trigger.left + document.documentElement.scrollLeft,
             top: trigger.top + document.documentElement.scrollTop,
@@ -8191,10 +8198,10 @@ class GovTooltip {
         const isLeftSpace = triggerPos.left > contentWidth;
         // LEFT/RIGHT
         if (this.position === TooltipPosition.LEFT || this.position === TooltipPosition.RIGHT) {
-            this.content.style.top = (triggerPos.top - ((contentHeight - trgHeight) / 2)) + "px";
+            this.tooltipContent.style.top = (triggerPos.top - ((contentHeight - trgHeight) / 2)) + "px";
             if (isRightSpace === false && isLeftSpace === false) {
                 this.position = TooltipPosition.TOP;
-                this.content.setAttribute("position", TooltipPosition.TOP);
+                this.tooltipContent.setAttribute("position", TooltipPosition.TOP);
             }
             if (isLeftSpace && isRightSpace === false && this.position === TooltipPosition.RIGHT) {
                 this.position = TooltipPosition.LEFT;
@@ -8204,12 +8211,12 @@ class GovTooltip {
             }
         }
         if (this.position === TooltipPosition.RIGHT) {
-            this.content.setAttribute("position", TooltipPosition.RIGHT);
-            this.content.style.left = (triggerPos.left + offset + trigger.width) + "px";
+            this.tooltipContent.setAttribute("position", TooltipPosition.RIGHT);
+            this.tooltipContent.style.left = (triggerPos.left + offset + trigger.width) + "px";
         }
         if (this.position === TooltipPosition.LEFT) {
-            this.content.setAttribute("position", TooltipPosition.LEFT);
-            this.content.style.left = (triggerPos.left - (contentWidth + offset)) + "px";
+            this.tooltipContent.setAttribute("position", TooltipPosition.LEFT);
+            this.tooltipContent.style.left = (triggerPos.left - (contentWidth + offset)) + "px";
         }
         // LEFT/RIGHT FOR TOP/BOTTOM
         if (this.position === TooltipPosition.TOP || this.position === TooltipPosition.BOTTOM) {
@@ -8218,9 +8225,9 @@ class GovTooltip {
                 const isNotLeftSpace = leftPosition < 0;
                 const isNotRightSpace = (leftPosition + contentWidth) > windowWidth;
                 if (isNotLeftSpace && isNotRightSpace) {
-                    this.content.style.width = "auto";
-                    this.content.style.left = offset + "px";
-                    this.content.style.right = offset + "px";
+                    this.tooltipContent.style.width = "auto";
+                    this.tooltipContent.style.left = offset + "px";
+                    this.tooltipContent.style.right = offset + "px";
                 }
                 else {
                     if (isNotLeftSpace) {
@@ -8229,39 +8236,39 @@ class GovTooltip {
                     if (isNotRightSpace) {
                         leftPosition = leftPosition - ((windowWidth - (leftPosition + contentWidth + offset)) * -1);
                     }
-                    this.content.style.left = leftPosition + "px";
+                    this.tooltipContent.style.left = leftPosition + "px";
                 }
             }
             else {
                 const leftPosition = (triggerPos.left + ((trgWidth - contentWidth) / 2));
-                this.content.style.left = leftPosition + "px";
+                this.tooltipContent.style.left = leftPosition + "px";
             }
         }
         if (this.position === TooltipPosition.TOP) {
-            this.content.setAttribute("position", TooltipPosition.TOP);
-            this.content.style.top = (triggerPos.top - (contentHeight + offset)) + "px";
+            this.tooltipContent.setAttribute("position", TooltipPosition.TOP);
+            this.tooltipContent.style.top = (triggerPos.top - (contentHeight + offset)) + "px";
         }
         if (this.position === TooltipPosition.BOTTOM) {
-            this.content.setAttribute("position", TooltipPosition.BOTTOM);
-            this.content.style.top = (triggerPos.top + (trgHeight + offset)) + "px";
+            this.tooltipContent.setAttribute("position", TooltipPosition.BOTTOM);
+            this.tooltipContent.style.top = (triggerPos.top + (trgHeight + offset)) + "px";
         }
-        this.content.style.opacity = '1';
+        this.tooltipContent.style.opacity = '1';
     }
     showTooltip() {
-        if (this.content) {
-            this.content.style.opacity = '0';
-            this.content.hidden = false;
-            this.content.setAttribute("is-visible", "true");
-            requestAnimationFrame(() => {
+        if (this.tooltipContent) {
+            this.tooltipContent.style.opacity = '0';
+            this.tooltipContent.hidden = false;
+            this.tooltipContent.setAttribute("is-visible", "true");
+            tick(() => {
                 this.verifyPositionSpace();
             });
         }
     }
     hideTooltip() {
-        if (this.content) {
-            this.content.setAttribute("is-visible", "false");
-            this.content.setAttribute("persist", "false");
-            this.content.removeAttribute('style');
+        if (this.tooltipContent) {
+            this.tooltipContent.setAttribute("is-visible", "false");
+            this.tooltipContent.setAttribute("persist", "false");
+            this.tooltipContent.removeAttribute('style');
         }
     }
     removeContent() {
@@ -8272,7 +8279,11 @@ class GovTooltip {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: '2073902a25078b3875e41e710a9b583a30d2d09e', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, hAsync("span", { key: '56d35be005985c3a4a22d4975714141ae4817157', role: 'button', tabindex: 0, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, hAsync("slot", { key: '61c4bc19ef21b15791eff343964aafa4fc4dde99' }))));
+        return (hAsync(Host, { key: 'd16d7493cc470032d16e762e75c426c919b683d5', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, hAsync("span", { key: 'd80316da39311fde00a00bb7867fd4c73864bd7e', role: 'button', tabindex: 0, onKeyPress: () => this.showTooltip(), onBlur: () => {
+                if (this.persist === false) {
+                    this.hideTooltip();
+                }
+            }, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, hAsync("slot", { key: '1ccc180def543def370a189a5c10351fc166dcdd' }))));
     }
     /**
      * Showing the modal

package/dist/hydrate/index.mjs

@@ -120,7 +120,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'core';
-const BUILD = /* core */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: true, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: false, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* core */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: true, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: false, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Hydrate Platform v4.20.0 | MIT Licensed | https://stenciljs.com
@@ -1339,6 +1339,9 @@ var postUpdateComponent = (hostRef) => {
       }
     }
   } else {
+    {
+      safeCall(instance, "componentDidUpdate");
+    }
     endPostUpdate();
   }
   {
@@ -8108,11 +8111,7 @@ class GovTooltip {
         validateProp(TooltipPosition, newValue, TooltipClass.root);
     }
     rerenderMessage() {
-        var _a;
-        const isContent = document.body.querySelector(`#${(_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId}`);
-        if (!isContent) {
-            this.createContentWrapper();
-        }
+        this.createContentWrapper();
     }
     componentWillLoad() {
         this.validateVariant(this.variant);
@@ -8121,45 +8120,53 @@ class GovTooltip {
         this.createContentWrapper();
         this.registerListeners();
     }
+    componentDidUpdate() {
+        this.createContentWrapper();
+    }
     disconnectedCallback() {
         this.removeContent();
     }
     createContentWrapper() {
         var _a;
-        const hasContentInside = this.host.querySelector(TooltipContentClass.root);
-        if (hasContentInside) {
-            this.content = hasContentInside;
+        if (this.tooltipContent) {
+            if (this.message) {
+                this.tooltipContent.innerHTML = this.message;
+            }
+            else if (this.insideContent) {
+                this.tooltipContent.innerHTML = this.insideContent.innerHTML;
+            }
+            return;
+        }
+        let content;
+        if (this.insideContent) {
+            content = this.insideContent;
         }
         else {
-            this.content = document.createElement(TooltipContentClass.root);
-            this.content.innerHTML = this.message;
-            this.host.appendChild(this.content);
+            content = documentNode().createElement(TooltipContentClass.root);
+            content.innerHTML = this.message;
         }
-        this.content.setAttribute("id", (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId);
-        this.content.setAttribute("parent-id", this.tooltipId);
-        this.content.setAttribute("variant", this.variant);
-        this.content.setAttribute("size", this.size);
-        document.body.appendChild(this.content);
+        content.setAttribute("id", (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId);
+        content.setAttribute("parent-id", this.tooltipId);
+        content.setAttribute("variant", this.variant);
+        content.setAttribute("size", this.size);
+        documentNode().body.appendChild(content);
+    }
+    get tooltipContent() {
+        var _a;
+        return documentNode().body.querySelector(`#${(_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId}`);
+    }
+    get insideContent() {
+        return this.host.querySelector(TooltipContentClass.root);
     }
     registerListeners() {
         this.host.addEventListener("click", e => {
             e.preventDefault();
             this.persist = true;
-            if (this.content) {
-                this.content.setAttribute("persist", "true");
+            if (this.tooltipContent) {
+                this.tooltipContent.setAttribute("persist", "true");
             }
             this.showTooltip();
         });
-        this.host.addEventListener("focus", e => {
-            e.preventDefault();
-            this.showTooltip();
-        });
-        this.host.addEventListener("blur", e => {
-            e.preventDefault();
-            if (this.persist === false) {
-                this.hideTooltip();
-            }
-        });
         this.host.addEventListener("mouseenter", e => {
             e.preventDefault();
             this.showTooltip();
@@ -8177,8 +8184,8 @@ class GovTooltip {
         const trigger = this.host.getBoundingClientRect();
         const trgWidth = this.host.offsetWidth;
         const trgHeight = this.host.offsetHeight;
-        const contentWidth = this.content.offsetWidth;
-        const contentHeight = this.content.offsetHeight;
+        const contentWidth = this.tooltipContent.offsetWidth;
+        const contentHeight = this.tooltipContent.offsetHeight;
         const triggerPos = {
             left: trigger.left + document.documentElement.scrollLeft,
             top: trigger.top + document.documentElement.scrollTop,
@@ -8187,10 +8194,10 @@ class GovTooltip {
         const isLeftSpace = triggerPos.left > contentWidth;
         // LEFT/RIGHT
         if (this.position === TooltipPosition.LEFT || this.position === TooltipPosition.RIGHT) {
-            this.content.style.top = (triggerPos.top - ((contentHeight - trgHeight) / 2)) + "px";
+            this.tooltipContent.style.top = (triggerPos.top - ((contentHeight - trgHeight) / 2)) + "px";
             if (isRightSpace === false && isLeftSpace === false) {
                 this.position = TooltipPosition.TOP;
-                this.content.setAttribute("position", TooltipPosition.TOP);
+                this.tooltipContent.setAttribute("position", TooltipPosition.TOP);
             }
             if (isLeftSpace && isRightSpace === false && this.position === TooltipPosition.RIGHT) {
                 this.position = TooltipPosition.LEFT;
@@ -8200,12 +8207,12 @@ class GovTooltip {
             }
         }
         if (this.position === TooltipPosition.RIGHT) {
-            this.content.setAttribute("position", TooltipPosition.RIGHT);
-            this.content.style.left = (triggerPos.left + offset + trigger.width) + "px";
+            this.tooltipContent.setAttribute("position", TooltipPosition.RIGHT);
+            this.tooltipContent.style.left = (triggerPos.left + offset + trigger.width) + "px";
         }
         if (this.position === TooltipPosition.LEFT) {
-            this.content.setAttribute("position", TooltipPosition.LEFT);
-            this.content.style.left = (triggerPos.left - (contentWidth + offset)) + "px";
+            this.tooltipContent.setAttribute("position", TooltipPosition.LEFT);
+            this.tooltipContent.style.left = (triggerPos.left - (contentWidth + offset)) + "px";
         }
         // LEFT/RIGHT FOR TOP/BOTTOM
         if (this.position === TooltipPosition.TOP || this.position === TooltipPosition.BOTTOM) {
@@ -8214,9 +8221,9 @@ class GovTooltip {
                 const isNotLeftSpace = leftPosition < 0;
                 const isNotRightSpace = (leftPosition + contentWidth) > windowWidth;
                 if (isNotLeftSpace && isNotRightSpace) {
-                    this.content.style.width = "auto";
-                    this.content.style.left = offset + "px";
-                    this.content.style.right = offset + "px";
+                    this.tooltipContent.style.width = "auto";
+                    this.tooltipContent.style.left = offset + "px";
+                    this.tooltipContent.style.right = offset + "px";
                 }
                 else {
                     if (isNotLeftSpace) {
@@ -8225,39 +8232,39 @@ class GovTooltip {
                     if (isNotRightSpace) {
                         leftPosition = leftPosition - ((windowWidth - (leftPosition + contentWidth + offset)) * -1);
                     }
-                    this.content.style.left = leftPosition + "px";
+                    this.tooltipContent.style.left = leftPosition + "px";
                 }
             }
             else {
                 const leftPosition = (triggerPos.left + ((trgWidth - contentWidth) / 2));
-                this.content.style.left = leftPosition + "px";
+                this.tooltipContent.style.left = leftPosition + "px";
             }
         }
         if (this.position === TooltipPosition.TOP) {
-            this.content.setAttribute("position", TooltipPosition.TOP);
-            this.content.style.top = (triggerPos.top - (contentHeight + offset)) + "px";
+            this.tooltipContent.setAttribute("position", TooltipPosition.TOP);
+            this.tooltipContent.style.top = (triggerPos.top - (contentHeight + offset)) + "px";
         }
         if (this.position === TooltipPosition.BOTTOM) {
-            this.content.setAttribute("position", TooltipPosition.BOTTOM);
-            this.content.style.top = (triggerPos.top + (trgHeight + offset)) + "px";
+            this.tooltipContent.setAttribute("position", TooltipPosition.BOTTOM);
+            this.tooltipContent.style.top = (triggerPos.top + (trgHeight + offset)) + "px";
         }
-        this.content.style.opacity = '1';
+        this.tooltipContent.style.opacity = '1';
     }
     showTooltip() {
-        if (this.content) {
-            this.content.style.opacity = '0';
-            this.content.hidden = false;
-            this.content.setAttribute("is-visible", "true");
-            requestAnimationFrame(() => {
+        if (this.tooltipContent) {
+            this.tooltipContent.style.opacity = '0';
+            this.tooltipContent.hidden = false;
+            this.tooltipContent.setAttribute("is-visible", "true");
+            tick(() => {
                 this.verifyPositionSpace();
             });
         }
     }
     hideTooltip() {
-        if (this.content) {
-            this.content.setAttribute("is-visible", "false");
-            this.content.setAttribute("persist", "false");
-            this.content.removeAttribute('style');
+        if (this.tooltipContent) {
+            this.tooltipContent.setAttribute("is-visible", "false");
+            this.tooltipContent.setAttribute("persist", "false");
+            this.tooltipContent.removeAttribute('style');
         }
     }
     removeContent() {
@@ -8268,7 +8275,11 @@ class GovTooltip {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: '2073902a25078b3875e41e710a9b583a30d2d09e', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, hAsync("span", { key: '56d35be005985c3a4a22d4975714141ae4817157', role: 'button', tabindex: 0, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, hAsync("slot", { key: '61c4bc19ef21b15791eff343964aafa4fc4dde99' }))));
+        return (hAsync(Host, { key: 'd16d7493cc470032d16e762e75c426c919b683d5', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, hAsync("span", { key: 'd80316da39311fde00a00bb7867fd4c73864bd7e', role: 'button', tabindex: 0, onKeyPress: () => this.showTooltip(), onBlur: () => {
+                if (this.persist === false) {
+                    this.hideTooltip();
+                }
+            }, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, hAsync("slot", { key: '1ccc180def543def370a189a5c10351fc166dcdd' }))));
     }
     /**
      * Showing the modal

package/dist/types/components/gov-tooltip/gov-tooltip.d.ts

@@ -1,7 +1,6 @@
 import { TooltipPositionType, TooltipSizeType, TooltipVariantType } from "./constants";
 export declare class GovTooltip {
     private h;
-    private content;
     private readonly tooltipContentId;
     private readonly tooltipId;
     constructor();
@@ -36,8 +35,11 @@ export declare class GovTooltip {
     validatePosition(newValue: string): void;
     rerenderMessage(): void;
     componentWillLoad(): void;
+    componentDidUpdate(): void;
     disconnectedCallback(): void;
     private createContentWrapper;
+    private get tooltipContent();
+    private get insideContent();
     private registerListeners;
     private verifyPositionSpace;
     private showTooltip;

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@gov-design-system-ce/components",
 	"description": "This package includes Gov Design System Web Components and related utilities.",
 	"author": "Zdeněk Vítek",
-	"version": "4.0.8-rc11",
+	"version": "4.0.8-rc12",
 	"license": "EUPL v1.2 Licensed",
 	"main": "./dist/index.cjs.js",
 	"unpkg": "./dist/core/core.esm.js",