@gov-design-system-ce/components 0.0.57 → 0.0.59

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

@@ -1,23 +1,35 @@
 import { h, Host } from "@stencil/core";
-import { TooltipContentClass } from "./constants";
+import { TooltipContentClass, TooltipSize, TooltipVariant } from "./constants";
 import { toBoolAttr } from "../../helpers/Dom/template";
 export class GovTooltipContent {
   constructor() {
+    this.variant = TooltipVariant.PRIMARY;
+    this.size = TooltipSize._M;
+    this.persist = false;
     this.isVisible = false;
+    this.parentId = null;
   }
   visibleContent(newValue) {
     clearTimeout(this.timeout);
     if (newValue === false) {
       this.timeout = setTimeout(() => {
-        this.host.style.visibility = 'hidden';
+        this.host.style.visibility = "hidden";
       }, 250);
     }
     else {
-      this.host.style.visibility = 'visible';
+      this.host.style.visibility = "visible";
+    }
+  }
+  hideContent() {
+    this.isVisible = false;
+    this.persist = false;
+    const parentEl = document.getElementById(this.parentId);
+    if (parentEl) {
+      parentEl.hide().catch();
     }
   }
   render() {
-    return (h(Host, { class: TooltipContentClass.root, role: 'tooltip', hidden: !this.isVisible, "aria-hidden": !toBoolAttr(this.isVisible), "is-visible": this.isVisible }, h("slot", null)));
+    return (h(Host, { class: TooltipContentClass.root, role: "tooltip", hidden: !this.isVisible, "aria-hidden": !toBoolAttr(this.isVisible), "is-visible": this.isVisible }, h("slot", null), this.persist ? (h("gov-button", { "on-gov-click": this.hideContent.bind(this), variant: this.variant, size: this.size, type: "base", inverse: this.variant === TooltipVariant.SECONDARY }, h("gov-icon", { slot: "left-icon", name: "x-lg", type: "basic" }))) : null));
   }
   static get is() { return "gov-tooltip-content"; }
   static get originalStyleUrls() {
@@ -32,7 +44,55 @@ export class GovTooltipContent {
   }
   static get properties() {
     return {
-      "isVisible": {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TooltipVariantType",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {
+            "TooltipVariantType": {
+              "location": "import",
+              "path": "./constants",
+              "id": "../../../packages/core/src/components/gov-tooltip/constants.tsx::TooltipVariantType"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Style variation of the tooltip"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "TooltipVariant.PRIMARY"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TooltipSizeType",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "TooltipSizeType": {
+              "location": "import",
+              "path": "./constants",
+              "id": "../../../packages/core/src/components/gov-tooltip/constants.tsx::TooltipSizeType"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip\u2019s size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "TooltipSize._M"
+      },
+      "persist": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -41,6 +101,24 @@ export class GovTooltipContent {
           "references": {}
         },
         "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip is still visible."
+        },
+        "attribute": "persist",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isVisible": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
@@ -49,6 +127,24 @@ export class GovTooltipContent {
         "attribute": "is-visible",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "parentId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates display of tooltip content"
+        },
+        "attribute": "parent-id",
+        "reflect": false,
+        "defaultValue": "null"
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"gov-tooltip-content.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tooltip/gov-tooltip-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAMvD,MAAM,OAAO,iBAAiB;;qBAOoC,KAAK;;EAGtE,cAAc,CAAC,QAAiB;IAC/B,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC1B,IAAI,QAAQ,KAAK,KAAK,EAAE;MACvB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;QAC9B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAA;MACtC,CAAC,EAAE,GAAG,CAAC,CAAA;KACP;SAAM;MACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAA;KACtC;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,mBAAmB,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,SAAS,iBAAe,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAc,IAAI,CAAC,SAAS;MACpJ,eAAa,CACP,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { TooltipContentClass } from './constants'\nimport { toBoolAttr } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-tooltip-content',\n\tstyleUrl: 'gov-tooltip-content.scss',\n})\nexport class GovTooltipContent {\n\tprivate timeout\n\n\t@Element() host: HTMLGovTooltipContentElement\n\t/**\n\t * Indicates display of tooltip content\n\t */\n\t@Prop({ attribute: 'is-visible' }) readonly isVisible: boolean = false\n\n\t@Watch('isVisible')\n\tvisibleContent(newValue: boolean): void {\n\t\tclearTimeout(this.timeout)\n\t\tif (newValue === false) {\n\t\t\tthis.timeout = setTimeout(() => {\n\t\t\t\tthis.host.style.visibility = 'hidden'\n\t\t\t}, 250)\n\t\t} else {\n\t\t\tthis.host.style.visibility = 'visible'\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={TooltipContentClass.root} role={'tooltip'} hidden={!this.isVisible} aria-hidden={!toBoolAttr(this.isVisible)} is-visible={this.isVisible}>\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"gov-tooltip-content.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tooltip/gov-tooltip-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAmB,cAAc,EAAsB,MAAM,aAAa,CAAA;AACnH,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAMvD,MAAM,OAAO,iBAAiB;;mBAOmB,cAAc,CAAC,OAAO;gBAI5B,WAAW,CAAC,EAAE;mBAI5B,KAAK;qBAI6B,KAAK;oBAId,IAAI;;EAGzD,cAAc,CAAC,QAAiB;IAC/B,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC1B,IAAI,QAAQ,KAAK,KAAK,EAAE;MACvB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;QAC9B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAA;MACtC,CAAC,EAAE,GAAG,CAAC,CAAA;KACP;SAAM;MACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAA;KACtC;EACF,CAAC;EAED,WAAW;IACV,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;IACtB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;IACpB,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAA0B,CAAA;IAChF,IAAI,QAAQ,EAAE;MACb,QAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAA;KACvB;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,mBAAmB,CAAC,IAAI,EAC/B,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,CAAC,IAAI,CAAC,SAAS,iBACV,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,gBAC5B,IAAI,CAAC,SAAS;MAC1B,eAAa;MACZ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACf,kCACe,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,cAAc,CAAC,SAAS;QAClD,gBAAU,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAa,CACzD,CACb,CAAC,CAAC,CAAC,IAAI,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\"\nimport { TooltipContentClass, TooltipSize, TooltipSizeType, TooltipVariant, TooltipVariantType } from \"./constants\"\nimport { toBoolAttr } from \"../../helpers/Dom/template\"\n\n@Component({\n\ttag: \"gov-tooltip-content\",\n\tstyleUrl: \"gov-tooltip-content.scss\",\n})\nexport class GovTooltipContent {\n\tprivate timeout\n\n\t@Element() host: HTMLGovTooltipContentElement\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 is still visible.\n\t */\n\t@Prop() persist?: boolean = false\n\t/**\n\t * Indicates display of tooltip content\n\t */\n\t@Prop({ attribute: \"is-visible\", mutable: true }) isVisible = false\n\t/**\n\t * Indicates display of tooltip content\n\t */\n\t@Prop({ attribute: \"parent-id\" }) parentId: string = null\n\n\t@Watch(\"isVisible\")\n\tvisibleContent(newValue: boolean): void {\n\t\tclearTimeout(this.timeout)\n\t\tif (newValue === false) {\n\t\t\tthis.timeout = setTimeout(() => {\n\t\t\t\tthis.host.style.visibility = \"hidden\"\n\t\t\t}, 250)\n\t\t} else {\n\t\t\tthis.host.style.visibility = \"visible\"\n\t\t}\n\t}\n\n\thideContent() {\n\t\tthis.isVisible = false\n\t\tthis.persist = false\n\t\tconst parentEl = document.getElementById(this.parentId) as HTMLGovTooltipElement\n\t\tif (parentEl) {\n\t\t\tparentEl.hide().catch()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={TooltipContentClass.root}\n\t\t\t\trole={\"tooltip\"}\n\t\t\t\thidden={!this.isVisible}\n\t\t\t\taria-hidden={!toBoolAttr(this.isVisible)}\n\t\t\t\tis-visible={this.isVisible}>\n\t\t\t\t<slot></slot>\n\t\t\t\t{this.persist ? (\n\t\t\t\t\t<gov-button\n\t\t\t\t\t\ton-gov-click={this.hideContent.bind(this)}\n\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\ttype={\"base\"}\n\t\t\t\t\t\tinverse={this.variant === TooltipVariant.SECONDARY}>\n\t\t\t\t\t\t<gov-icon slot={\"left-icon\"} name={\"x-lg\"} type={\"basic\"}></gov-icon>\n\t\t\t\t\t</gov-button>\n\t\t\t\t) : null}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop
@@ -237,20 +237,4 @@
 .gov-tooltip[icon=""], .gov-tooltip[icon=true i], .gov-tooltip[icon="1"] {
   display: inline-flex;
   border-bottom: 0;
-}
-.gov-tooltip[variant=secondary] {
-  --gov-tooltip-content-bg-color: var(--gov-tooltip-secondary-bg-color, var(--gov-color-secondary));
-  --gov-tooltip-content-text-color: var(--gov-tooltip-secondary-text-color, var(--gov-color-neutral-white));
-}
-.gov-tooltip[variant=secondary][inverse=""], .gov-tooltip[variant=secondary][inverse=true i], .gov-tooltip[variant=secondary][inverse="1"] {
-  --gov-tooltip-content-bg-color: var(--gov-color-neutral-white);
-  --gov-tooltip-content-text-color: var(--gov-tooltip-secondary-text-color-inverse, var(--gov-color-secondary));
-}
-.gov-tooltip[variant=primary] {
-  --gov-tooltip-content-bg-color: var(--gov-tooltip-primary-bg-color, var(--gov-color-primary-300));
-  --gov-tooltip-content-text-color: var(--gov-tooltip-primary-text-color, var(--gov-color-secondary));
-}
-.gov-tooltip[variant=primary][inverse=""], .gov-tooltip[variant=primary][inverse=true i], .gov-tooltip[variant=primary][inverse="1"] {
-  --gov-tooltip-content-bg-color: var(--gov-color-neutral-white);
-  --gov-tooltip-content-text-color: var(--gov-tooltip-primary-text-color-inverse, var(--gov-color-primary));
 }

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

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

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

package/dist/collection/pages/Card.js

@@ -15,15 +15,17 @@ class CardPage extends HTMLElement {
 
 			<div style="height: 400px">
 				<gov-card label="Fusce tellus odio, dapibus id fermentum quis" expanded collapsible>
-					<p class="gov-color--secondary-700">
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
-					</p>
-					<gov-button variant="primary" size="s" href="http://localhost:3333/button">
-						Button
-					</gov-button>
-					<p slot="footer" class="gov-color--primary-700">
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
-					</p>
+					<div class="gov-content">
+						<p class="gov-color--secondary-700">
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
+						</p>
+						<gov-button variant="primary" size="s" href="http://localhost:3333/button">
+							Button
+						</gov-button>
+						<p slot="footer" class="gov-color--primary-700">
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
+						</p>
+					</div>
 				</gov-card>
 			</div>
 			<br>

package/dist/collection/pages/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/pages/Card.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;EACjC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE;EAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;CAC5C","sourcesContent":["class CardPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\n\t\t<div style=\"max-width: 650px\">\n\t\t\t<h2>Card</h2>\n\n\t\t\t<gov-card label=\"Fusce tellus odio, dapibus id fermentum quis\" expanded collapsible class=\"gov-bg--success-100\">\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t</p>\n\t\t\t</gov-card>\n\n\t\t\t<br>\n\n\t\t\t<div style=\"height: 400px\">\n\t\t\t\t<gov-card label=\"Fusce tellus odio, dapibus id fermentum quis\" expanded collapsible>\n\t\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t\t</p>\n\t\t\t\t\t<gov-button variant=\"primary\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\t\tButton\n\t\t\t\t\t</gov-button>\n\t\t\t\t\t<p slot=\"footer\" class=\"gov-color--primary-700\">\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-card>\n\t\t\t</div>\n\t\t\t<br>\n\t\t\t<gov-card label=\"Fusce tellus odio, dapibus id fermentum quis\">\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t</p>\n\t\t\t\t<gov-button variant=\"primary\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tButton\n\t\t\t\t</gov-button>\n\t\t\t\t<p slot=\"footer\" color=\"gov-color--primary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t</p>\n\t\t\t</gov-card>\n\t\t\t<h3>Image slot</h3>\n\t\t\t<gov-card expanded>\n\t\t\t\t<img slot=\"img\" src=\"https://picsum.photos/536/354\" src=\"\" alt=\"Obárzek\" width=\"536\" height=\"354\">\n\t\t\t\t<p class=\"gov-text--l gov-color--secondary-800\">\n\t\t\t\t\t<b>\n\t\t\t\t\t\tCommodo consequat.\n\t\t\t\t\t</b>\n\t\t\t\t</p>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tCommodo consequat. Nullam rhoncus aliquam metus.\n\t\t\t\t</p>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\t<a href=\"#\">Chci vědět více</a>\n\t\t\t\t</p>\n\t\t\t</gov-card>\n\t\t\t<h3>Shadow variant</h3>\n\t\t\t<gov-card expanded class=\"gov-box-shadow--m\">\n\t\t\t\t<img slot=\"img\" src=\"https://picsum.photos/536/354\" src=\"\" alt=\"Obárzek\" width=\"536\" height=\"354\">\n\t\t\t\t<p class=\"gov-text--l gov-color--secondary-800\">\n\t\t\t\t\t<b>\n\t\t\t\t\t\tCommodo consequat.\n\t\t\t\t\t</b>\n\t\t\t\t</p>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tCommodo consequat. Nullam rhoncus aliquam metus.\n\t\t\t\t</p>\n\t\t\t\t<gov-button variant=\"primary\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tJak založit\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tZjistit více\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<h3>With icon</h3>\n\t\t\t<gov-card>\n\t\t\t\t<gov-icon name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.\n\t\t\t\t</p>\n\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<h3>Horizontal orientation</h3>\n\t\t\t<gov-card promotion>\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.\n\t\t\t\t</p>\n\t\t\t\t<gov-button slot=\"btn\" variant=\"primary\" type=\"outlined\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t</div>\n\n\t\t`\n\t}\n}\n\nif (customElements.get('card-page') === undefined) {\n\tcustomElements.define('card-page', CardPage)\n}\n"]}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/pages/Card.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;EACjC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE;EAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;CAC5C","sourcesContent":["class CardPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\n\t\t<div style=\"max-width: 650px\">\n\t\t\t<h2>Card</h2>\n\n\t\t\t<gov-card label=\"Fusce tellus odio, dapibus id fermentum quis\" expanded collapsible class=\"gov-bg--success-100\">\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t</p>\n\t\t\t</gov-card>\n\n\t\t\t<br>\n\n\t\t\t<div style=\"height: 400px\">\n\t\t\t\t<gov-card label=\"Fusce tellus odio, dapibus id fermentum quis\" expanded collapsible>\n\t\t\t\t\t<div class=\"gov-content\">\n\t\t\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<gov-button variant=\"primary\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\t\t\tButton\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t<p slot=\"footer\" class=\"gov-color--primary-700\">\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-card>\n\t\t\t</div>\n\t\t\t<br>\n\t\t\t<gov-card label=\"Fusce tellus odio, dapibus id fermentum quis\">\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t</p>\n\t\t\t\t<gov-button variant=\"primary\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tButton\n\t\t\t\t</gov-button>\n\t\t\t\t<p slot=\"footer\" color=\"gov-color--primary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t</p>\n\t\t\t</gov-card>\n\t\t\t<h3>Image slot</h3>\n\t\t\t<gov-card expanded>\n\t\t\t\t<img slot=\"img\" src=\"https://picsum.photos/536/354\" src=\"\" alt=\"Obárzek\" width=\"536\" height=\"354\">\n\t\t\t\t<p class=\"gov-text--l gov-color--secondary-800\">\n\t\t\t\t\t<b>\n\t\t\t\t\t\tCommodo consequat.\n\t\t\t\t\t</b>\n\t\t\t\t</p>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tCommodo consequat. Nullam rhoncus aliquam metus.\n\t\t\t\t</p>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\t<a href=\"#\">Chci vědět více</a>\n\t\t\t\t</p>\n\t\t\t</gov-card>\n\t\t\t<h3>Shadow variant</h3>\n\t\t\t<gov-card expanded class=\"gov-box-shadow--m\">\n\t\t\t\t<img slot=\"img\" src=\"https://picsum.photos/536/354\" src=\"\" alt=\"Obárzek\" width=\"536\" height=\"354\">\n\t\t\t\t<p class=\"gov-text--l gov-color--secondary-800\">\n\t\t\t\t\t<b>\n\t\t\t\t\t\tCommodo consequat.\n\t\t\t\t\t</b>\n\t\t\t\t</p>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tCommodo consequat. Nullam rhoncus aliquam metus.\n\t\t\t\t</p>\n\t\t\t\t<gov-button variant=\"primary\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tJak založit\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tZjistit více\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<h3>With icon</h3>\n\t\t\t<gov-card>\n\t\t\t\t<gov-icon name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.\n\t\t\t\t</p>\n\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<h3>Horizontal orientation</h3>\n\t\t\t<gov-card promotion>\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.\n\t\t\t\t</p>\n\t\t\t\t<gov-button slot=\"btn\" variant=\"primary\" type=\"outlined\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t</div>\n\n\t\t`\n\t}\n}\n\nif (customElements.get('card-page') === undefined) {\n\tcustomElements.define('card-page', CardPage)\n}\n"]}

package/dist/collection/pages/Home.js

@@ -1,6 +1,48 @@
 class HomePage extends HTMLElement {
   connectedCallback() {
-    this.innerHTML = ``;
+    this.innerHTML = `
+		<form style="padding: 20px;">
+			<gov-form-label legend>
+				Form Label legend
+			</gov-form-label>
+			<gov-form-control type="input">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<br><br>
+			<legend>Legend</legend>
+			<gov-form-control type="input">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<br><br>
+			<gov-form-control type="input" fieldset>
+				<gov-form-label size="s" slot="top">Form control fieldset</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<br><br>
+			<fieldset>
+				<gov-form-label size="s" slot="top">Fieldset</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+				</gov-form-group>
+			</fieldset>
+			<br><br>
+			<fieldset>
+				<legend>Fieldset & Legend</legend>
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+				</gov-form-group>
+			</fieldset>
+		</form>
+		`;
   }
 }
 if (customElements.get('home-page') === undefined) {

package/dist/collection/pages/Home.js.map

@@ -1 +1 @@
-{"version":3,"file":"Home.js","sourceRoot":"","sources":["../../../../../src/pages/Home.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;EACjC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;EACpB,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE;EAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;CAC5C","sourcesContent":["class HomePage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = ``\n\t}\n}\n\nif (customElements.get('home-page') === undefined) {\n\tcustomElements.define('home-page', HomePage)\n}\n"]}
+{"version":3,"file":"Home.js","sourceRoot":"","sources":["../../../../../src/pages/Home.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;EACjC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0ChB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE;EAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;CAC5C","sourcesContent":["class HomePage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<form style=\"padding: 20px;\">\n\t\t\t<gov-form-label legend>\n\t\t\t\tForm Label legend\n\t\t\t</gov-form-label>\n\t\t\t<gov-form-control type=\"input\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Label of input</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type=\"number\" name=\"test-me\" placeholder=\"Placeholder\" variant=\"primary\" size=\"s\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br><br>\n\t\t\t<legend>Legend</legend>\n\t\t\t<gov-form-control type=\"input\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Label of input</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type=\"number\" name=\"test-me\" placeholder=\"Placeholder\" variant=\"primary\" size=\"s\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br><br>\n\t\t\t<gov-form-control type=\"input\" fieldset>\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Form control fieldset</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type=\"number\" name=\"test-me\" placeholder=\"Placeholder\" variant=\"primary\" size=\"s\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br><br>\n\t\t\t<fieldset>\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Fieldset</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type=\"number\" name=\"test-me\" placeholder=\"Placeholder\" variant=\"primary\" size=\"s\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</fieldset>\n\t\t\t<br><br>\n\t\t\t<fieldset>\n\t\t\t\t<legend>Fieldset & Legend</legend>\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Label of input</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type=\"number\" name=\"test-me\" placeholder=\"Placeholder\" variant=\"primary\" size=\"s\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</fieldset>\n\t\t</form>\n\t\t`\n\t}\n}\n\nif (customElements.get('home-page') === undefined) {\n\tcustomElements.define('home-page', HomePage)\n}\n"]}