@gov-design-system-ce/components 0.0.58 → 0.0.60

package/dist/collection/components/gov-tooltip/gov-tooltip.js

@@ -1,18 +1,22 @@
 import { h, Host } from "@stencil/core";
 import { validateProp } from "../../helpers/Validate/props";
-import { TooltipPosition, TooltipSize, TooltipClass, TooltipContentClass, TooltipVariant, } from "./constants";
+import { TooltipClass, TooltipContentClass, TooltipPosition, TooltipSize, TooltipVariant, } from "./constants";
 import { createID } from "../../utils/string.utils";
 import { govHost } from "../../helpers/Dom/template";
 export class GovTooltip {
   constructor() {
-    this.variant = 'primary';
-    this.size = 'm';
-    this.position = 'right';
+    this.tooltipContentId = undefined;
+    this.tooltipId = undefined;
+    this.variant = TooltipVariant.PRIMARY;
+    this.size = TooltipSize._M;
+    this.position = "right";
     this.message = undefined;
     this.identifier = undefined;
     this.icon = undefined;
+    this.persist = false;
     this.h = govHost(this.host);
-    this.tooltipId = createID('GovTooltip');
+    this.tooltipId = createID("GovTooltip");
+    this.tooltipContentId = createID("GovContentTooltip");
   }
   validateVariant(newValue) {
     validateProp(TooltipVariant, newValue, TooltipClass.root);
@@ -30,6 +34,9 @@ export class GovTooltip {
     this.createContentWrapper();
     this.registerListeners();
   }
+  disconnectedCallback() {
+    this.removeContent();
+  }
   createContentWrapper() {
     var _a;
     const hasContentInside = this.host.querySelector(TooltipContentClass.root);
@@ -41,84 +48,103 @@ export class GovTooltip {
       this.content.innerHTML = this.message;
       this.host.appendChild(this.content);
     }
-    this.content.setAttribute('id', (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipId);
+    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);
   }
   registerListeners() {
-    this.host.addEventListener('focus', e => {
+    this.host.addEventListener("click", e => {
       e.preventDefault();
+      this.persist = true;
       this.showTooltip();
     });
-    this.host.addEventListener('blur', e => {
+    this.host.addEventListener("focus", e => {
       e.preventDefault();
-      this.hideTooltip();
+      this.showTooltip();
+    });
+    this.host.addEventListener("blur", e => {
+      e.preventDefault();
+      if (this.persist === false) {
+        this.hideTooltip();
+      }
     });
-    this.host.addEventListener('mouseenter', e => {
+    this.host.addEventListener("mouseenter", e => {
       e.preventDefault();
       this.showTooltip();
     });
-    this.host.addEventListener('mouseleave', e => {
+    this.host.addEventListener("mouseleave", e => {
       e.preventDefault();
-      this.hideTooltip();
+      if (this.persist === false) {
+        this.hideTooltip();
+      }
     });
   }
   verifyPositionSpace() {
-    // @TODO Improve positioning of broken lines
     const offset = 12;
-    const windowWidth = window.innerWidth;
     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 triggerPos = {
       left: trigger.left + document.documentElement.scrollLeft,
       top: trigger.top + document.documentElement.scrollTop,
     };
-    const tltWidth = this.content.offsetWidth;
-    if (this.position === TooltipPosition.LEFT) {
-      if (offset + triggerPos.left < tltWidth) {
-        this.position = TooltipPosition.TOP;
-        this.content.style.left = '0px';
-        this.content.style.width = window.innerWidth - triggerPos.left - offset + 'px';
-        this.content.style.transform = 'none';
-      }
+    // @TODO check space for displaying tooltip
+    if (this.position === TooltipPosition.LEFT || this.position === TooltipPosition.RIGHT) {
+      this.content.style.top = (triggerPos.top - ((contentHeight - trgHeight) / 2)) + "px";
     }
-    else if (this.position === TooltipPosition.RIGHT) {
-      if (windowWidth - (triggerPos.left + trgWidth) < tltWidth) {
-        this.position = TooltipPosition.TOP;
-        this.content.style.right = '0px';
-        this.content.style.left = 'auto';
-        this.content.style.width = trgWidth + triggerPos.left + offset + 'px';
-        this.content.style.transform = 'none';
-      }
+    if (this.position === TooltipPosition.RIGHT) {
+      this.content.setAttribute("position", TooltipPosition.RIGHT);
+      this.content.style.left = (triggerPos.left + offset + trigger.width) + "px";
     }
-    else {
-      // doesn't fit from the left
-      if (tltWidth / 2 > triggerPos.left) {
-        this.content.style.left = '0px';
-        this.content.style.width = window.innerWidth - triggerPos.left - offset + 'px';
-        this.content.style.transform = 'none';
+    if (this.position === TooltipPosition.LEFT) {
+      this.content.setAttribute("position", TooltipPosition.LEFT);
+      this.content.style.left = (triggerPos.left - (contentWidth + offset)) + "px";
+    }
+    if (this.position === TooltipPosition.TOP || this.position === TooltipPosition.BOTTOM) {
+      if (contentWidth > trgWidth) {
+        this.content.style.left = (triggerPos.left - ((contentWidth - trgWidth) / 2)) + "px";
       }
-      // doesn't fit from the right
-      else if (tltWidth / 2 > windowWidth - (triggerPos.left + tltWidth)) {
-        this.content.style.right = '0px';
-        this.content.style.left = 'auto';
-        this.content.style.width = trgWidth + triggerPos.left + offset + 'px';
-        this.content.style.transform = 'none';
+      else {
+        this.content.style.left = (triggerPos.left + ((trgWidth - contentWidth) / 2)) + "px";
       }
     }
+    if (this.position === TooltipPosition.TOP) {
+      this.content.setAttribute("position", TooltipPosition.TOP);
+      this.content.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";
+    }
   }
   showTooltip() {
     if (this.content) {
       this.verifyPositionSpace();
-      this.content.setAttribute('is-visible', 'true');
+      this.content.setAttribute("is-visible", "true");
+      if (this.persist) {
+        this.content.setAttribute("persist", "true");
+      }
     }
   }
   hideTooltip() {
     if (this.content) {
-      this.content.setAttribute('is-visible', 'false');
+      this.content.setAttribute("is-visible", "false");
+      this.content.setAttribute("persist", "false");
+    }
+  }
+  removeContent() {
+    const contentEl = document.getElementById(this.tooltipContentId);
+    if (contentEl) {
+      contentEl.remove();
     }
   }
   render() {
     var _a;
-    return (h(Host, { class: this.h.classes(TooltipClass.root), position: this.position, size: this.size, tabindex: 0, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipId, variant: this.variant }, h("slot", null)));
+    return (h(Host, { id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position, tabindex: 0, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, h("slot", null)));
   }
   /**
    * Showing the modal
@@ -127,9 +153,10 @@ export class GovTooltip {
     this.showTooltip();
   }
   /**
-   * Hidding the modal
+   * Hiding the modal
    */
   async hide() {
+    this.persist = false;
     this.hideTooltip();
   }
   static get is() { return "gov-tooltip"; }
@@ -167,7 +194,7 @@ export class GovTooltip {
         },
         "attribute": "variant",
         "reflect": false,
-        "defaultValue": "'primary'"
+        "defaultValue": "TooltipVariant.PRIMARY"
       },
       "size": {
         "type": "string",
@@ -191,7 +218,7 @@ export class GovTooltip {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "'m'"
+        "defaultValue": "TooltipSize._M"
       },
       "position": {
         "type": "string",
@@ -215,7 +242,7 @@ export class GovTooltip {
         },
         "attribute": "position",
         "reflect": false,
-        "defaultValue": "'right'"
+        "defaultValue": "\"right\""
       },
       "message": {
         "type": "string",
@@ -229,7 +256,7 @@ export class GovTooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Information contained in the tolltip"
+          "text": "Information contained in the tooltip"
         },
         "attribute": "message",
         "reflect": false,
@@ -272,6 +299,11 @@ export class GovTooltip {
       }
     };
   }
+  static get states() {
+    return {
+      "persist": {}
+    };
+  }
   static get methods() {
     return {
       "show": {
@@ -304,7 +336,7 @@ export class GovTooltip {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Hidding the modal",
+          "text": "Hiding the modal",
           "tags": []
         }
       }

package/dist/collection/components/gov-tooltip/gov-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"gov-tooltip.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tooltip/gov-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Method, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport {\n\tTooltipPosition,\n\tTooltipPositionType,\n\tTooltipSize,\n\tTooltipSizeType,\n\tTooltipClass,\n\tTooltipContentClass,\n\tTooltipVariant,\n\tTooltipVariantType,\n} from './constants'\nimport { createID } from '../../utils/string.utils'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-tooltip',\n\tstyleUrl: 'gov-tooltip.scss',\n})\nexport class GovTooltip {\n\tprivate h: GovHost\n\tprivate content: HTMLGovTooltipContentElement\n\tprivate readonly tooltipId\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.tooltipId = createID('GovTooltip')\n\t}\n\n\t@Element() host: HTMLGovTooltipElement\n\t/**\n\t * Style variation of the tooltip\n\t */\n\t@Prop() readonly variant?: TooltipVariantType = 'primary'\n\t/**\n\t * Tooltip’s size.\n\t */\n\t@Prop() readonly size?: TooltipSizeType = 'm'\n\t/**\n\t * Tooltip display position\n\t */\n\t@Prop() position: TooltipPositionType = 'right'\n\t/**\n\t * Information contained in the tolltip\n\t */\n\t@Prop() readonly message: string = undefined\n\t/**\n\t * Custom tooltip identifier.\n\t */\n\t@Prop({ attribute: 'identifier' }) readonly identifier: string\n\t/**\n\t * Trigger is just an icon\n\t */\n\t@Prop({ attribute: 'icon' }) readonly icon: boolean = undefined\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(TooltipVariant, newValue, TooltipClass.root)\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(TooltipSize, newValue, TooltipClass.root)\n\t}\n\n\t@Watch('position')\n\tvalidatePosition(newValue: string): void {\n\t\tvalidateProp(TooltipPosition, newValue, TooltipClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t\tthis.validatePosition(this.position)\n\n\t\tthis.createContentWrapper()\n\t\tthis.registerListeners()\n\t}\n\n\tprivate createContentWrapper() {\n\t\tconst hasContentInside = this.host.querySelector(TooltipContentClass.root) as HTMLGovTooltipContentElement\n\t\tif (hasContentInside) {\n\t\t\tthis.content = hasContentInside\n\t\t} else {\n\t\t\tthis.content = document.createElement(TooltipContentClass.root) as HTMLGovTooltipContentElement\n\t\t\tthis.content.innerHTML = this.message\n\t\t\tthis.host.appendChild(this.content)\n\t\t}\n\n\t\tthis.content.setAttribute('id', this.identifier ?? this.tooltipId)\n\t}\n\n\tprivate registerListeners() {\n\t\tthis.host.addEventListener('focus', e => {\n\t\t\te.preventDefault()\n\t\t\tthis.showTooltip()\n\t\t})\n\t\tthis.host.addEventListener('blur', e => {\n\t\t\te.preventDefault()\n\t\t\tthis.hideTooltip()\n\t\t})\n\t\tthis.host.addEventListener('mouseenter', e => {\n\t\t\te.preventDefault()\n\t\t\tthis.showTooltip()\n\t\t})\n\t\tthis.host.addEventListener('mouseleave', e => {\n\t\t\te.preventDefault()\n\t\t\tthis.hideTooltip()\n\t\t})\n\t}\n\n\tprivate verifyPositionSpace() {\n\t\t// @TODO Improve positioning of broken lines\n\t\tconst offset = 12\n\t\tconst windowWidth = window.innerWidth\n\t\tconst trigger = this.host.getBoundingClientRect()\n\t\tconst trgWidth = this.host.offsetWidth\n\t\tconst triggerPos = {\n\t\t\tleft: trigger.left + document.documentElement.scrollLeft,\n\t\t\ttop: trigger.top + document.documentElement.scrollTop,\n\t\t}\n\t\tconst tltWidth = this.content.offsetWidth\n\t\tif (this.position === TooltipPosition.LEFT) {\n\t\t\tif (offset + triggerPos.left < tltWidth) {\n\t\t\t\tthis.position = TooltipPosition.TOP\n\t\t\t\tthis.content.style.left = '0px'\n\t\t\t\tthis.content.style.width = window.innerWidth - triggerPos.left - offset + 'px'\n\t\t\t\tthis.content.style.transform = 'none'\n\t\t\t}\n\t\t} else if (this.position === TooltipPosition.RIGHT) {\n\t\t\tif (windowWidth - (triggerPos.left + trgWidth) < tltWidth) {\n\t\t\t\tthis.position = TooltipPosition.TOP\n\t\t\t\tthis.content.style.right = '0px'\n\t\t\t\tthis.content.style.left = 'auto'\n\t\t\t\tthis.content.style.width = trgWidth + triggerPos.left + offset + 'px'\n\t\t\t\tthis.content.style.transform = 'none'\n\t\t\t}\n\t\t} else {\n\t\t\t// doesn't fit from the left\n\t\t\tif (tltWidth / 2 > triggerPos.left) {\n\t\t\t\tthis.content.style.left = '0px'\n\t\t\t\tthis.content.style.width = window.innerWidth - triggerPos.left - offset + 'px'\n\t\t\t\tthis.content.style.transform = 'none'\n\t\t\t}\n\t\t\t// doesn't fit from the right\n\t\t\telse if (tltWidth / 2 > windowWidth - (triggerPos.left + tltWidth)) {\n\t\t\t\tthis.content.style.right = '0px'\n\t\t\t\tthis.content.style.left = 'auto'\n\t\t\t\tthis.content.style.width = trgWidth + triggerPos.left + offset + 'px'\n\t\t\t\tthis.content.style.transform = 'none'\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate showTooltip() {\n\t\tif (this.content) {\n\t\t\tthis.verifyPositionSpace()\n\t\t\tthis.content.setAttribute('is-visible', 'true')\n\t\t}\n\t}\n\n\tprivate hideTooltip() {\n\t\tif (this.content) {\n\t\t\tthis.content.setAttribute('is-visible', 'false')\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(TooltipClass.root)}\n\t\t\t\tposition={this.position}\n\t\t\t\tsize={this.size}\n\t\t\t\ttabindex={0}\n\t\t\t\taria-describedby={this.identifier ?? this.tooltipId}\n\t\t\t\tvariant={this.variant}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Showing the modal\n\t */\n\t@Method()\n\tasync show(): Promise<void> {\n\t\tthis.showTooltip()\n\t}\n\n\t/**\n\t * Hidding the modal\n\t */\n\t@Method()\n\tasync hide(): Promise<void> {\n\t\tthis.hideTooltip()\n\t}\n}\n"]}
+{"version":3,"file":"gov-tooltip.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tooltip/gov-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport {\n\tTooltipClass,\n\tTooltipContentClass,\n\tTooltipPosition,\n\tTooltipPositionType,\n\tTooltipSize,\n\tTooltipSizeType,\n\tTooltipVariant,\n\tTooltipVariantType,\n} from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\n\n@Component({\n\ttag: \"gov-tooltip\",\n\tstyleUrl: \"gov-tooltip.scss\",\n})\nexport class GovTooltip {\n\tprivate h: GovHost\n\tprivate content: HTMLGovTooltipContentElement\n\tprivate readonly tooltipContentId = undefined\n\tprivate readonly tooltipId = undefined\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.tooltipId = createID(\"GovTooltip\")\n\t\tthis.tooltipContentId = createID(\"GovContentTooltip\")\n\t}\n\n\t@Element() host: HTMLGovTooltipElement\n\t/**\n\t * Style variation of the tooltip\n\t */\n\t@Prop() readonly variant?: TooltipVariantType = TooltipVariant.PRIMARY\n\t/**\n\t * Tooltip’s size.\n\t */\n\t@Prop() readonly size?: TooltipSizeType = TooltipSize._M\n\t/**\n\t * Tooltip display position\n\t */\n\t@Prop() position: TooltipPositionType = \"right\"\n\t/**\n\t * Information contained in the tooltip\n\t */\n\t@Prop() readonly message: string = undefined\n\t/**\n\t * Custom tooltip identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Trigger is just an icon\n\t */\n\t@Prop({ attribute: \"icon\" }) readonly icon: boolean = undefined\n\n\t@State() persist = false\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(TooltipVariant, newValue, TooltipClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(TooltipSize, newValue, TooltipClass.root)\n\t}\n\n\t@Watch(\"position\")\n\tvalidatePosition(newValue: string): void {\n\t\tvalidateProp(TooltipPosition, newValue, TooltipClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t\tthis.validatePosition(this.position)\n\n\t\tthis.createContentWrapper()\n\t\tthis.registerListeners()\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.removeContent()\n\t}\n\n\tprivate createContentWrapper() {\n\t\tconst hasContentInside = this.host.querySelector(TooltipContentClass.root) as HTMLGovTooltipContentElement\n\t\tif (hasContentInside) {\n\t\t\tthis.content = hasContentInside\n\t\t} else {\n\t\t\tthis.content = document.createElement(TooltipContentClass.root) as HTMLGovTooltipContentElement\n\t\t\tthis.content.innerHTML = this.message\n\t\t\tthis.host.appendChild(this.content)\n\t\t}\n\n\t\tthis.content.setAttribute(\"id\", this.identifier ?? this.tooltipContentId)\n\t\tthis.content.setAttribute(\"parent-id\", this.tooltipId)\n\t\tthis.content.setAttribute(\"variant\", this.variant)\n\t\tthis.content.setAttribute(\"size\", this.size)\n\t\tdocument.body.appendChild(this.content)\n\t}\n\n\tprivate registerListeners() {\n\t\tthis.host.addEventListener(\"click\", e => {\n\t\t\te.preventDefault()\n\t\t\tthis.persist = true\n\t\t\tthis.showTooltip()\n\t\t})\n\t\tthis.host.addEventListener(\"focus\", e => {\n\t\t\te.preventDefault()\n\t\t\tthis.showTooltip()\n\t\t})\n\t\tthis.host.addEventListener(\"blur\", e => {\n\t\t\te.preventDefault()\n\t\t\tif (this.persist === false) {\n\t\t\t\tthis.hideTooltip()\n\t\t\t}\n\t\t})\n\t\tthis.host.addEventListener(\"mouseenter\", e => {\n\t\t\te.preventDefault()\n\t\t\tthis.showTooltip()\n\t\t})\n\t\tthis.host.addEventListener(\"mouseleave\", e => {\n\t\t\te.preventDefault()\n\t\t\tif (this.persist === false) {\n\t\t\t\tthis.hideTooltip()\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate verifyPositionSpace() {\n\t\tconst offset = 12\n\t\tconst trigger = this.host.getBoundingClientRect()\n\t\tconst trgWidth = this.host.offsetWidth\n\t\tconst trgHeight = this.host.offsetHeight\n\t\tconst contentWidth = this.content.offsetWidth\n\t\tconst contentHeight = this.content.offsetHeight\n\t\tconst triggerPos = {\n\t\t\tleft: trigger.left + document.documentElement.scrollLeft,\n\t\t\ttop: trigger.top + document.documentElement.scrollTop,\n\t\t}\n\t\t// @TODO check space for displaying tooltip\n\t\tif (this.position === TooltipPosition.LEFT || this.position === TooltipPosition.RIGHT) {\n\t\t\tthis.content.style.top = (triggerPos.top - ((contentHeight - trgHeight) / 2)) + \"px\"\n\t\t}\n\t\tif (this.position === TooltipPosition.RIGHT) {\n\t\t\tthis.content.setAttribute(\"position\", TooltipPosition.RIGHT)\n\t\t\tthis.content.style.left = (triggerPos.left + offset + trigger.width) + \"px\"\n\t\t}\n\t\tif (this.position === TooltipPosition.LEFT) {\n\t\t\tthis.content.setAttribute(\"position\", TooltipPosition.LEFT)\n\t\t\tthis.content.style.left = (triggerPos.left - (contentWidth + offset)) + \"px\"\n\t\t}\n\t\tif (this.position === TooltipPosition.TOP || this.position === TooltipPosition.BOTTOM) {\n\t\t\tif (contentWidth > trgWidth) {\n\t\t\t\tthis.content.style.left = (triggerPos.left - ((contentWidth - trgWidth) / 2)) + \"px\"\n\t\t\t} else {\n\t\t\t\tthis.content.style.left = (triggerPos.left + ((trgWidth - contentWidth) / 2)) + \"px\"\n\t\t\t}\n\t\t}\n\t\tif (this.position === TooltipPosition.TOP) {\n\t\t\tthis.content.setAttribute(\"position\", TooltipPosition.TOP)\n\t\t\tthis.content.style.top = (triggerPos.top - (contentHeight + offset)) + \"px\"\n\t\t}\n\t\tif (this.position === TooltipPosition.BOTTOM) {\n\t\t\tthis.content.setAttribute(\"position\", TooltipPosition.BOTTOM)\n\t\t\tthis.content.style.top = (triggerPos.top + (trgHeight + offset)) + \"px\"\n\t\t}\n\t}\n\n\tprivate showTooltip() {\n\t\tif (this.content) {\n\t\t\tthis.verifyPositionSpace()\n\t\t\tthis.content.setAttribute(\"is-visible\", \"true\")\n\t\t\tif (this.persist) {\n\t\t\t\tthis.content.setAttribute(\"persist\", \"true\")\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate hideTooltip() {\n\t\tif (this.content) {\n\t\t\tthis.content.setAttribute(\"is-visible\", \"false\")\n\t\t\tthis.content.setAttribute(\"persist\", \"false\")\n\t\t}\n\t}\n\n\tprivate removeContent() {\n\t\tconst contentEl = document.getElementById(this.tooltipContentId)\n\t\tif (contentEl) {\n\t\t\tcontentEl.remove()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tid={this.tooltipId}\n\t\t\t\tclass={this.h.classes(TooltipClass.root)}\n\t\t\t\tposition={this.position}\n\t\t\t\ttabindex={0}\n\t\t\t\taria-describedby={this.identifier ?? this.tooltipContentId}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Showing the modal\n\t */\n\t@Method()\n\tasync show(): Promise<void> {\n\t\tthis.showTooltip()\n\t}\n\n\t/**\n\t * Hiding the modal\n\t */\n\t@Method()\n\tasync hide(): Promise<void> {\n\t\tthis.persist = false\n\t\tthis.hideTooltip()\n\t}\n}\n"]}

package/dist/collection/components/gov-wizard/gov-wizard-item.css

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop
@@ -283,6 +283,7 @@
   display: flex;
   gap: 0.5rem;
   align-items: center;
+  font-weight: var(--gov-wizard-title-font-weight, 700);
 }
 .gov-wizard-item__annot {
   color: var(--gov-color-secondary);
@@ -344,9 +345,6 @@
   position: absolute;
   left: 1rem;
 }
-.gov-wizard-item__label {
-  font-weight: var(--gov-wizard-title-font-weight, 700);
-}
 .gov-wizard-item__header[aria-expanded=true] .gov-wizard-item__label .gov-icon {
   transform: scale(-1);
 }

package/dist/collection/components/gov-wizard/gov-wizard.css

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop

package/dist/collection/data/color-definitions.js

@@ -0,0 +1,307 @@
+export const primaryColors = [
+	{
+		name: "Primary 100",
+		description: null,
+
+		hex: "#ecf7ff",
+		tokens: ["var(--gov-color-primary-100)", ".gov-color--primary-100"],
+	},
+	{
+		name: "Primary 200",
+		description: null,
+
+		hex: "#d9efff",
+		tokens: ["var(--gov-color-primary-200)", ".gov-color--primary-200"],
+	},
+	{
+		name: "Primary 300",
+		description: null,
+
+		hex: "#b5d9f3",
+		tokens: ["var(--gov-color-primary-300)", ".gov-color--primary-300"],
+	},
+	{
+		name: "Primary 400",
+		description: null,
+
+		hex: "#66a1d8",
+		tokens: ["var(--gov-color-primary-400)", ".gov-color--primary-400"],
+	},
+	{
+		name: "Primary 500",
+		description: null,
+
+		hex: "#3077b7",
+		tokens: ["var(--gov-color-primary-500)", ".gov-color--primary"],
+	},
+	{
+		name: "Primary 600",
+		description: null,
+
+		hex: "#2362a2",
+		tokens: ["var(--gov-color-primary-600)", ".gov-color--primary-600"],
+	},
+	{
+		name: "Primary 700",
+		description: null,
+
+		hex: "#254e80",
+		tokens: ["var(--gov-color-primary-700)", ".gov-color--primary-700"],
+	},
+	{
+		name: "Primary 800",
+		description: null,
+
+		hex: "#15355e",
+		tokens: ["var(--gov-color-primary-800)", ".gov-color--primary-800"],
+	},
+	{
+		name: "Primary 900",
+		description: null,
+
+		hex: "#0d213a",
+		tokens: ["var(--gov-color-primary-900)", ".gov-color--primary-900"],
+	},
+]
+
+export const secondaryColors = [
+	{
+		name: "Secondary 100",
+		description: null,
+
+		hex: "#FCFCFC",
+		tokens: ["var(--gov-color-secondary-100)", ".gov-color--secondary-100"],
+	},
+	{
+		name: "Secondary 200",
+		description: null,
+
+		hex: "#fafafa",
+		tokens: ["var(--gov-color-secondary-200)", ".gov-color--secondary-200"],
+	},
+	{
+		name: "Secondary 300",
+		description: null,
+
+		hex: "#f5f5f5",
+		tokens: ["var(--gov-color-secondary-300)", ".gov-color--secondary-300"],
+	},
+	{
+		name: "Secondary 400",
+		description: null,
+
+		hex: "#eaeaea",
+		tokens: ["var(--gov-color-secondary-400)", ".gov-color--secondary-400"],
+	},
+	{
+		name: "Secondary 500",
+		description: null,
+
+		hex: "#ddd",
+		tokens: ["var(--gov-color-secondary-500)", ".gov-color--secondary"],
+	},
+	{
+		name: "Secondary 600",
+		description: null,
+
+		hex: "#a8a8a8",
+		tokens: ["var(--gov-color-secondary-600)", ".gov-color--secondary-600"],
+	},
+	{
+		name: "Secondary 700",
+		description: null,
+
+		hex: "#686868",
+		tokens: ["var(--gov-color-secondary-700)", ".gov-color--secondary-700"],
+	},
+	{
+		name: "Secondary 800",
+		description: null,
+
+		hex: "#3b3b3b",
+		tokens: ["var(--gov-color-secondary-800)", ".gov-color--secondary-800"],
+	},
+	{
+		name: "Secondary 900",
+		description: null,
+
+		hex: "#232323",
+		tokens: ["var(--gov-color-secondary-900)", ".gov-color--secondary-900"],
+	},
+]
+
+export const successColors = [
+	{
+		name: "Success 100",
+		description: null,
+
+		hex: "#f5faf0",
+		tokens: ["var(--gov-color-success-100)", ".gov-color--success-100"],
+	},
+	{
+		name: "Success 200",
+		description: null,
+
+		hex: "#dcefcc",
+		tokens: ["var(--gov-color-success-200)", ".gov-color--success-200"],
+	},
+	{
+		name: "Success 300",
+		description: null,
+
+		hex: "#a3d578",
+		tokens: ["var(--gov-color-success-300)", ".gov-color--success-300"],
+	},
+	{
+		name: "Success 400",
+		description: null,
+
+		hex: "#6fbd2c",
+		tokens: ["var(--gov-color-success-400)", ".gov-color--success-400"],
+	},
+	{
+		name: "Success 500",
+		description: null,
+
+		hex: "#488515",
+		tokens: ["var(--gov-color-success-500)", ".gov-color--success"],
+	},
+	{
+		name: "Success 600",
+		description: null,
+
+		hex: "#3a6217",
+		tokens: ["var(--gov-color-success-600)", ".gov-color--success-600"],
+	},
+	{
+		name: "Success 700",
+		description: null,
+
+		hex: "#2c4f0d",
+		tokens: ["var(--gov-color-success-700)", ".gov-color--success-700"],
+	},
+]
+
+export const warningColors = [
+	{
+		name: "Warning 100",
+		description: null,
+
+		hex: "#fef9ef",
+		tokens: ["var(--gov-color-warning-100)", ".gov-color--warning-100"],
+	},
+	{
+		name: "Warning 200",
+		description: null,
+
+		hex: "#faecc8",
+		tokens: ["var(--gov-color-warning-200)", ".gov-color--warning-200"],
+	},
+	{
+		name: "Warning 300",
+		description: null,
+
+		hex: "#fad47b",
+		tokens: ["var(--gov-color-warning-300)", ".gov-color--warning-300"],
+	},
+	{
+		name: "Warning 400",
+		description: null,
+
+		hex: "#f9c13c",
+		tokens: ["var(--gov-color-warning-400)", ".gov-color--warning-400"],
+	},
+	{
+		name: "Warning 500",
+		description: null,
+
+		hex: "#c78300",
+		tokens: ["var(--gov-color-warning-500)", ".gov-color--warning"],
+	},
+	{
+		name: "Warning 600",
+		description: null,
+
+		hex: "#99620f",
+		tokens: ["var(--gov-color-warning-600)", ".gov-color--warning-600"],
+	},
+	{
+		name: "Warning 700",
+		description: null,
+
+		hex: "#865102",
+		tokens: ["var(--gov-color-warning-700)", ".gov-color--warning-700"],
+	},
+]
+
+export const errorColors = [
+	{
+		name: "Error 100",
+		description: null,
+
+		hex: "#ffe8ea",
+		tokens: ["var(--gov-color-error-100)", ".gov-color--error-100"],
+	},
+	{
+		name: "Error 200",
+		description: null,
+
+		hex: "#f7cdd2",
+		tokens: ["var(--gov-color-error-200)", ".gov-color--error-200"],
+	},
+	{
+		name: "Error 300",
+		description: null,
+
+		hex: "#d96671",
+		tokens: ["var(--gov-color-error-300)", ".gov-color--error-300"],
+	},
+	{
+		name: "Error 400",
+		description: null,
+
+		hex: "#c52a3a",
+		tokens: ["var(--gov-color-error-400)", ".gov-color--error-400"],
+	},
+	{
+		name: "Error 500",
+		description: null,
+
+		hex: "#9e0615",
+		tokens: ["var(--gov-color-error-500)", ".gov-color--error"],
+	},
+	{
+		name: "Error 600",
+		description: null,
+
+		hex: "#830713",
+		tokens: ["var(--gov-color-error-600)", ".gov-color--error-600"],
+	},
+]
+
+export const focusColors = [
+	{
+		name: "Focus Base",
+		description: null,
+
+		hex: "#007bff",
+		tokens: ["var(--gov-color-focus-base)", ".gov-color--focus-base"],
+	},
+]
+
+export const neutralColors = [
+	{
+		name: "Neutral Black",
+		description: null,
+
+		hex: "#000",
+		tokens: ["var(--gov-color-neutral-black)", ".gov-color--neutral-black"],
+	},
+	{
+		name: "Neutral White",
+		description: null,
+
+		hex: "#FFF",
+		tokens: ["var(--gov-color-neutral-white)", ".gov-color--neutral-white"],
+	},
+]