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

package/dist/esm/gov-form-control.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govForm, b as FormControlClass } from './form-738c5b12.js';
 import { g as govHost } from './template-94812ab3.js';
 import { c as createID, s as splitByWhitespace } from './string.utils-5ce3f551.js';

package/dist/esm/gov-form-file.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { c as createID } from './string.utils-5ce3f551.js';
 import { g as govHost, a as toBoolAttr, t as toBoolAttrIfDefined } from './template-94812ab3.js';
 import { a as validateWcagRef, b as validateWcagLabelFor } from './wcag-6ad92279.js';

package/dist/esm/gov-form-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { a as FormGroupClass, b as FormGroupSizes, c as FormGroupOrientation } from './constants-4da2b3c0.js';
 import { g as govHost } from './template-94812ab3.js';
 import { v as validateProp } from './props-ec3beb91.js';

package/dist/esm/gov-form-input.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govForm, k as FormInputClass, l as FormInputVariants, m as FormInputSizes } from './form-738c5b12.js';
 import { g as govHost, a as toBoolAttr, t as toBoolAttrIfDefined, d as toOnOffAttrIfDefined } from './template-94812ab3.js';
 import { c as canValidateWcagOnRender } from './win-b64cd8a6.js';

package/dist/esm/gov-form-label.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host } from './index-b44c6c92.js';
 import { F as FormLabelClass } from './constants-43f10674.js';
 import './utils-e10e994d.js';
 import './sizes-5b9e579f.js';

package/dist/esm/gov-form-multi-select.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govForm, c as FormMultiSelectClass, d as FormMultiselectVariants, e as FormMultiselectSizes } from './form-738c5b12.js';
 import { g as govHost, a as toBoolAttr, t as toBoolAttrIfDefined } from './template-94812ab3.js';
 import { c as canValidateWcagOnRender } from './win-b64cd8a6.js';

package/dist/esm/gov-form-password-power.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host } from './index-b44c6c92.js';
 
 const FormPasswordPowerClass = {
     root: 'gov-form-password-power',

package/dist/esm/gov-form-radio-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { d as FormRadioGroupClass, a as FormGroupClass, b as FormGroupSizes, c as FormGroupOrientation } from './constants-4da2b3c0.js';
 import { g as govHost } from './template-94812ab3.js';
 import { v as validateProp } from './props-ec3beb91.js';

package/dist/esm/gov-form-radio.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { c as createID } from './string.utils-5ce3f551.js';
 import { v as validateProp } from './props-ec3beb91.js';
 import { g as govForm, f as FormRadioClass, h as FormRadioSizes } from './form-738c5b12.js';

package/dist/esm/gov-form-search.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { V as Variants } from './variants-69f013c1.js';
 import { p as pick } from './utils-e10e994d.js';
 

package/dist/esm/gov-form-select.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govForm, n as FormSelectClass, o as FormSelectVariants, p as FormSelectSizes } from './form-738c5b12.js';
 import { g as govHost, a as toBoolAttr, t as toBoolAttrIfDefined } from './template-94812ab3.js';
 import { c as canValidateWcagOnRender } from './win-b64cd8a6.js';

package/dist/esm/gov-form-switch.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { c as createID } from './string.utils-5ce3f551.js';
 import { v as validateProp } from './props-ec3beb91.js';
 import { g as govForm, i as FormSwitchClass, j as FormSwitchSizes } from './form-738c5b12.js';

package/dist/esm/gov-grid-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { a as GridItemClass } from './constants-2d5a0e18.js';
 import { g as govHost } from './template-94812ab3.js';
 

package/dist/esm/gov-grid.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { G as GridClass } from './constants-2d5a0e18.js';
 import { g as govHost } from './template-94812ab3.js';
 

package/dist/esm/gov-icon.entry.js

@@ -1,4 +1,4 @@
-import { d as getAssetPath, r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { d as getAssetPath, r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { i as iconsPath, e as iconsLazyLoad } from './win-b64cd8a6.js';
 import { g as govHost } from './template-94812ab3.js';
 import './utils-e10e994d.js';
@@ -14,7 +14,7 @@ const IconClass = {
     holder: 'gov-icon__holder',
 };
 
-const version = "4.0.8-rc11";
+const version = "4.0.8-rc12";
 
 const dsVersion = () => {
     return version;

package/dist/esm/gov-infobar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govHost, a as toBoolAttr } from './template-94812ab3.js';
 import { c as canValidateWcagOnRender } from './win-b64cd8a6.js';
 import { F as Fragment } from './Fragment-8d8d54fb.js';

package/dist/esm/gov-layout-column.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { a as LayoutColumnClass } from './constants-f0f531b6.js';
 import { g as govHost } from './template-94812ab3.js';
 

package/dist/esm/gov-layout.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { L as LayoutClass } from './constants-f0f531b6.js';
 import { g as govHost } from './template-94812ab3.js';
 

package/dist/esm/gov-loading.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govHost, p as prepareClasses } from './template-94812ab3.js';
 
 const LoadingClass = {

package/dist/esm/gov-message.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { v as validateProp } from './props-ec3beb91.js';
 import { V as Variants } from './variants-69f013c1.js';
 import { p as pick } from './utils-e10e994d.js';

package/dist/esm/gov-modal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govHost, c as boolToFocusValue, a as toBoolAttr } from './template-94812ab3.js';
 import { c as canValidateWcagOnRender } from './win-b64cd8a6.js';
 import { a as govErrorLog } from './gov.log-431da6b2.js';

package/dist/esm/gov-nav-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { a as govErrorLog } from './gov.log-431da6b2.js';
 import { a as NavItemClass } from './constants-a2828485.js';
 import './win-b64cd8a6.js';

package/dist/esm/gov-nav.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { N as NavClass } from './constants-a2828485.js';
 import { v as validateWcagLabel } from './wcag-6ad92279.js';
 import { c as canValidateWcagOnRender } from './win-b64cd8a6.js';

package/dist/esm/gov-pagination.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { F as Fragment } from './Fragment-8d8d54fb.js';
 import { v as validateProp } from './props-ec3beb91.js';
 import { S as Sizes } from './sizes-5b9e579f.js';

package/dist/esm/gov-prompt.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govHost, a as toBoolAttr } from './template-94812ab3.js';
 import { c as canValidateWcagOnRender } from './win-b64cd8a6.js';
 import { a as govErrorLog } from './gov.log-431da6b2.js';

package/dist/esm/gov-side-nav-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { a as govErrorLog } from './gov.log-431da6b2.js';
 import { S as SideNavItemClass } from './constants-1998bac1.js';
 import { g as govHost, p as prepareClasses, b as booleanString } from './template-94812ab3.js';

package/dist/esm/gov-side-nav.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { S as SideNavItemClass, a as SideNavClass } from './constants-1998bac1.js';
 import { v as validateWcagLabel } from './wcag-6ad92279.js';
 import { c as canValidateWcagOnRender } from './win-b64cd8a6.js';

package/dist/esm/gov-skeleton.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { p as pick, d as delay } from './utils-e10e994d.js';
 import { V as Variants } from './variants-69f013c1.js';
 import { g as govHost } from './template-94812ab3.js';

package/dist/esm/gov-spacer.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { v as validateProp } from './props-ec3beb91.js';
 import { S as Sizes } from './sizes-5b9e579f.js';
 import { p as pick } from './utils-e10e994d.js';

package/dist/esm/gov-statsbar-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govHost } from './template-94812ab3.js';
 import { v as validateProp } from './props-ec3beb91.js';
 import { a as StatsBarItemClass, c as StatsBarIconPosition } from './constants-f98e7750.js';

package/dist/esm/gov-statsbar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { v as validateProp } from './props-ec3beb91.js';
 import { S as StatsBarVariants, a as StatsBarItemClass, b as StatsBarClass, c as StatsBarIconPosition } from './constants-f98e7750.js';
 import { g as govHost } from './template-94812ab3.js';

package/dist/esm/gov-stepper-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { a as govErrorLog } from './gov.log-431da6b2.js';
 import { v as validateProp } from './props-ec3beb91.js';
 import { S as StepperItemClass, c as StepperVariants } from './constants-122ac484.js';

package/dist/esm/gov-stepper.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { v as validateProp } from './props-ec3beb91.js';
 import { S as StepperItemClass, a as StepperClass, b as StepperSizes } from './constants-122ac484.js';
 import { g as govHost } from './template-94812ab3.js';

package/dist/esm/gov-tabs-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govHost, t as toBoolAttrIfDefined } from './template-94812ab3.js';
 import { c as createID } from './string.utils-5ce3f551.js';
 import { T as TabsItemClass } from './constants-a5fadb10.js';

package/dist/esm/gov-tabs.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govHost, a as toBoolAttr } from './template-94812ab3.js';
 import { c as canValidateWcagOnRender } from './win-b64cd8a6.js';
 import { v as validateProp } from './props-ec3beb91.js';

package/dist/esm/gov-tag.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govHost } from './template-94812ab3.js';
 import { v as validateProp } from './props-ec3beb91.js';
 import { a as ButtonSizes, b as ButtonVariants } from './constants-f6ecfd4e.js';

package/dist/esm/gov-tile.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govHost } from './template-94812ab3.js';
 
 const TileClass = {

package/dist/esm/gov-tiles.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { g as govHost, p as prepareClasses } from './template-94812ab3.js';
 
 const TilesClass = {

package/dist/esm/gov-toast.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { v as validateProp } from './props-ec3beb91.js';
 import { V as Variants, T as Types } from './variants-69f013c1.js';
 import { p as pick } from './utils-e10e994d.js';

package/dist/esm/gov-tooltip-content.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { T as TooltipVariant, a as TooltipSize, b as TooltipContentClass } from './constants-14f351fd.js';
 import { a as toBoolAttr } from './template-94812ab3.js';
 import './variants-69f013c1.js';

package/dist/esm/gov-tooltip.entry.js

@@ -1,13 +1,14 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84a63a3e.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
 import { v as validateProp } from './props-ec3beb91.js';
 import { T as TooltipVariant, a as TooltipSize, b as TooltipContentClass, c as TooltipPosition, d as TooltipClass } from './constants-14f351fd.js';
 import { c as createID } from './string.utils-5ce3f551.js';
 import { g as govHost } from './template-94812ab3.js';
+import { d as documentNode } from './win-b64cd8a6.js';
+import { t as tick } from './stencil.utils-5d8e3d11.js';
 import './gov.log-431da6b2.js';
-import './win-b64cd8a6.js';
-import './utils-e10e994d.js';
 import './variants-69f013c1.js';
 import './sizes-5b9e579f.js';
+import './utils-e10e994d.js';
 
 const govTooltipCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-tooltip{display:inline-block;border-bottom:1px dashed currentcolor;color:var(--gov-color-primary);cursor:help}.gov-tooltip[icon=\"\"],.gov-tooltip[icon=true i],.gov-tooltip[icon=\"1\"]{border-bottom:0}";
 const GovTooltipStyle0 = govTooltipCss;
@@ -38,11 +39,7 @@ const GovTooltip = class {
         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);
@@ -51,45 +48,53 @@ const GovTooltip = class {
         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();
@@ -107,8 +112,8 @@ const GovTooltip = class {
         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,
@@ -117,10 +122,10 @@ const GovTooltip = class {
         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;
@@ -130,12 +135,12 @@ const GovTooltip = class {
             }
         }
         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) {
@@ -144,9 +149,9 @@ const GovTooltip = class {
                 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) {
@@ -155,39 +160,39 @@ const GovTooltip = class {
                     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() {
@@ -198,7 +203,11 @@ const GovTooltip = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2073902a25078b3875e41e710a9b583a30d2d09e', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, h("span", { key: '56d35be005985c3a4a22d4975714141ae4817157', role: 'button', tabindex: 0, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, h("slot", { key: '61c4bc19ef21b15791eff343964aafa4fc4dde99' }))));
+        return (h(Host, { key: 'd16d7493cc470032d16e762e75c426c919b683d5', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, h("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 }, h("slot", { key: '1ccc180def543def370a189a5c10351fc166dcdd' }))));
     }
     /**
      * Showing the modal