@gov-design-system-ce/components 0.0.25 → 0.0.26

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

@@ -0,0 +1,267 @@
+import { h, Host } from '@stencil/core';
+import { validateProp } from '../../helpers/Validate/props';
+import { ToastClass, ToastVariants } from './constants';
+import { govHost } from '../../helpers/Dom/template';
+import { createID } from '../../utils/string.utils';
+export class GovToast {
+  constructor() {
+    this.variant = 'primary';
+    this.gravity = 'top';
+    this.position = 'right';
+    this.type = 'classic';
+    this.time = 0;
+    this.closeLabel = undefined;
+    this.wcagCloseLabel = undefined;
+    this.h = govHost(this.host);
+    this.toastId = createID('GovToast');
+  }
+  validateVariant(newValue) {
+    validateProp(ToastVariants, newValue, ToastClass.root);
+  }
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    this.runTimer();
+  }
+  componentDidLoad() {
+    const existedToasts = document.querySelectorAll(`gov-toast[gravity="${this.gravity}"][position="${this.position}"]:not([data-toast-id="${this.toastId}"])`);
+    if (existedToasts.length > 0) {
+      Array.from(existedToasts).map((toast) => toast.destroy().then());
+    }
+  }
+  disconnectedCallback() {
+    clearTimeout(this.timeout);
+  }
+  runTimer() {
+    if (this.isSolid) {
+      this.host.classList.add('is-initialized');
+    }
+    if (this.isTimer) {
+      this.timeout = setTimeout(() => {
+        this.host.classList.add(ToastClass.hidden);
+        setTimeout(this.destroy.bind(this), 600);
+      }, this.time);
+    }
+  }
+  render() {
+    return (h(Host, { class: this.h.classes([ToastClass.root, 'gov-box-shadow--m']), "data-toast-id": this.toastId, gravity: this.gravity, position: this.position, variant: this.variant, type: this.type, style: { '--toast-duration': this.time + 'ms' } }, this.h.hasSlot('icon') && (h("span", { class: ToastClass.icon }, h("slot", { name: "icon" }))), h("div", { class: ToastClass.content, "aria-live": "polite", role: "status" }, h("slot", null)), h("div", { class: ToastClass.close }, h("gov-button", { size: "s", "wcag-label": this.wcagCloseLabel, variant: this.isSolid ? this.variant : 'secondary', inverse: this.isSolid, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, this.closeLabel ? this.closeLabel : h("gov-icon", { name: "x-lg" }))), h("div", { class: ToastClass.timer })));
+  }
+  onCloseHandler() {
+    this.destroy()
+      .then(() => this.govClose.emit(this.toastId))
+      .catch();
+  }
+  get isSolid() {
+    return this.type === 'solid';
+  }
+  get isTimer() {
+    return Number.isInteger(this.time) && this.time > 0;
+  }
+  /**
+   * Remove toast from dom
+   */
+  async destroy() {
+    clearTimeout(this.timeout);
+    const toast = document.querySelector(`[data-toast-id="${this.toastId}"]`);
+    if (toast) {
+      toast.classList.add(ToastClass.hidden);
+      if (typeof toast.remove === 'function') {
+        toast.remove();
+      }
+    }
+  }
+  static get is() { return "gov-toast"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-toast.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-toast.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ToastVariantType",
+          "resolved": "\"error\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+          "references": {
+            "ToastVariantType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Style variation of the toast message."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "gravity": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'top' | 'bottom'",
+          "resolved": "\"bottom\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Toast\u2019s gravity"
+        },
+        "attribute": "gravity",
+        "reflect": false,
+        "defaultValue": "'top'"
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'center' | 'right'",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Toast\u2019s position"
+        },
+        "attribute": "position",
+        "reflect": false,
+        "defaultValue": "'right'"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ToastTypesType",
+          "resolved": "\"classic\" | \"solid\"",
+          "references": {
+            "ToastTypesType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Toast type"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'classic'"
+      },
+      "time": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Number of milliseconds to wait before Toast disappear"
+        },
+        "attribute": "time",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "closeLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Closing button texting instead of icons"
+        },
+        "attribute": "close-label",
+        "reflect": false
+      },
+      "wcagCloseLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria label for the closing button. It is mandatory if the alert is closable"
+        },
+        "attribute": "wcag-close-label",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "govClose",
+        "name": "gov-close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Called when the close button is clicked"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "destroy": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove toast from dom",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "variant",
+        "methodName": "validateVariant"
+      }];
+  }
+}
+//# sourceMappingURL=gov-toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-toast.js","sourceRoot":"","sources":["../../../../../../src/components/gov-toast/gov-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch, Method } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { ToastClass, ToastTypesType, ToastVariants } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { ToastVariantType } from './constants'\nimport { createID } from '../../utils/string.utils'\n\n@Component({\n\ttag: 'gov-toast',\n\tstyleUrl: 'gov-toast.scss',\n})\nexport class GovToast {\n\tprivate h: GovHost\n\tprivate timeout\n\tprivate readonly toastId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.toastId = createID('GovToast')\n\t}\n\n\t@Element() host: HTMLGovToastElement\n\t/**\n\t * Style variation of the toast message.\n\t */\n\t@Prop() readonly variant?: ToastVariantType = 'primary'\n\n\t/**\n\t * Toast’s gravity\n\t */\n\t@Prop() readonly gravity: 'top' | 'bottom' = 'top'\n\t/**\n\t * Toast’s position\n\t */\n\t@Prop() readonly position: 'left' | 'center' | 'right' = 'right'\n\t/**\n\t * Toast type\n\t */\n\t@Prop() readonly type?: ToastTypesType = 'classic'\n\t/**\n\t * Number of milliseconds to wait before Toast disappear\n\t */\n\t@Prop() readonly time: number = 0\n\t/**\n\t * Closing button texting instead of icons\n\t */\n\t@Prop({ attribute: 'close-label' }) readonly closeLabel: string\n\t/**\n\t * Aria label for the closing button. It is mandatory if the alert is closable\n\t */\n\t@Prop({ attribute: 'wcag-close-label' }) readonly wcagCloseLabel: string\n\t/**\n\t * Called when the close button is clicked\n\t */\n\t@Event({ eventName: 'gov-close' }) govClose: EventEmitter<string>\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(ToastVariants, newValue, ToastClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.runTimer()\n\t}\n\n\tcomponentDidLoad() {\n\t\tconst existedToasts = document.querySelectorAll(`gov-toast[gravity=\"${this.gravity}\"][position=\"${this.position}\"]:not([data-toast-id=\"${this.toastId}\"])`)\n\t\tif (existedToasts.length > 0) {\n\t\t\tArray.from(existedToasts).map((toast: HTMLGovToastElement) => toast.destroy().then())\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tclearTimeout(this.timeout)\n\t}\n\n\tprivate runTimer() {\n\t\tif (this.isSolid) {\n\t\t\tthis.host.classList.add('is-initialized')\n\t\t}\n\t\tif (this.isTimer) {\n\t\t\tthis.timeout = setTimeout(() => {\n\t\t\t\tthis.host.classList.add(ToastClass.hidden)\n\t\t\t\tsetTimeout(this.destroy.bind(this), 600)\n\t\t\t}, this.time)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([ToastClass.root, 'gov-box-shadow--m'])}\n\t\t\t\tdata-toast-id={this.toastId}\n\t\t\t\tgravity={this.gravity}\n\t\t\t\tposition={this.position}\n\t\t\t\tvariant={this.variant}\n\t\t\t\ttype={this.type}\n\t\t\t\tstyle={{ '--toast-duration': this.time + 'ms' }}\n\t\t\t>\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<span class={ToastClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\n\t\t\t\t<div class={ToastClass.content} aria-live=\"polite\" role=\"status\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\n\t\t\t\t<div class={ToastClass.close}>\n\t\t\t\t\t<gov-button\n\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\twcag-label={this.wcagCloseLabel}\n\t\t\t\t\t\tvariant={this.isSolid ? this.variant : 'secondary'}\n\t\t\t\t\t\tinverse={this.isSolid}\n\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.closeLabel ? this.closeLabel : <gov-icon name=\"x-lg\"></gov-icon>}\n\t\t\t\t\t</gov-button>\n\t\t\t\t</div>\n\n\t\t\t\t<div class={ToastClass.timer}></div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onCloseHandler(): void {\n\t\tthis.destroy()\n\t\t\t.then(() => this.govClose.emit(this.toastId))\n\t\t\t.catch()\n\t}\n\n\tget isSolid(): boolean {\n\t\treturn this.type === 'solid'\n\t}\n\n\tget isTimer(): boolean {\n\t\treturn Number.isInteger(this.time) && this.time > 0\n\t}\n\n\t/**\n\t * Remove toast from dom\n\t */\n\t@Method()\n\tasync destroy(): Promise<void> {\n\t\tclearTimeout(this.timeout)\n\t\tconst toast = document.querySelector(`[data-toast-id=\"${this.toastId}\"]`)\n\t\tif (toast) {\n\t\t\ttoast.classList.add(ToastClass.hidden)\n\t\t\tif (typeof toast.remove === 'function') {\n\t\t\t\ttoast.remove()\n\t\t\t}\n\t\t}\n\t}\n}\n"]}

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

@@ -0,0 +1,19 @@
+import { Variants } from '../../core/constants/variants';
+import { Sizes } from '../../core/constants/sizes';
+import { pick } from '../../utils/utils';
+export const TooltipVariant = pick(Variants, ['PRIMARY', 'SECONDARY']);
+export const TooltipSize = pick(Sizes, ['_S', '_M', '_L']);
+export var TooltipPosition;
+(function (TooltipPosition) {
+  TooltipPosition["TOP"] = "top";
+  TooltipPosition["RIGHT"] = "right";
+  TooltipPosition["BOTTOM"] = "bottom";
+  TooltipPosition["LEFT"] = "left";
+})(TooltipPosition || (TooltipPosition = {}));
+export const TooltipClass = {
+  root: 'gov-tooltip',
+};
+export const TooltipContentClass = {
+  root: 'gov-tooltip-content',
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tooltip/constants.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAExC,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAA;AAGtE,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;AAG1D,MAAM,CAAN,IAAY,eAKX;AALD,WAAY,eAAe;EAC1B,8BAAW,CAAA;EACX,kCAAe,CAAA;EACf,oCAAiB,CAAA;EACjB,gCAAa,CAAA;AACd,CAAC,EALW,eAAe,KAAf,eAAe,QAK1B;AAGD,MAAM,CAAC,MAAM,YAAY,GAAG;EAC3B,IAAI,EAAE,aAAa;CACnB,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG;EAClC,IAAI,EAAE,qBAAqB;CAC3B,CAAA","sourcesContent":["import { Variants } from '../../core/constants/variants'\nimport { Sizes } from '../../core/constants/sizes'\nimport { ValueOf } from '../../types/interfaces'\nimport { pick } from '../../utils/utils'\n\nexport const TooltipVariant = pick(Variants, ['PRIMARY', 'SECONDARY'])\nexport type TooltipVariantType = `${ValueOf<typeof TooltipVariant>}`\n\nexport const TooltipSize = pick(Sizes, ['_S', '_M', '_L'])\nexport type TooltipSizeType = `${ValueOf<typeof TooltipSize>}`\n\nexport enum TooltipPosition {\n\tTOP = 'top',\n\tRIGHT = 'right',\n\tBOTTOM = 'bottom',\n\tLEFT = 'left',\n}\nexport type TooltipPositionType = `${ValueOf<typeof TooltipPosition>}`\n\nexport const TooltipClass = {\n\troot: 'gov-tooltip',\n}\n\nexport const TooltipContentClass = {\n\troot: 'gov-tooltip-content',\n}\n"]}

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

@@ -0,0 +1,324 @@
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* [Core] - Buttons
+------------------------------------------------------------------ */
+/*
+ * Gets color from theme-colors or from palette-colors
+ */
+/*
+ * Converts hex value to rgb colors value
+ */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/*
+ * Generates list of utility classes for margin, padding
+ *
+ * Make sure $list of definitions is sorted so that last item is defined last
+ * So largest views are mentioned last.
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Layout
+ */
+/**
+* Utilities - Offset
+*/
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/**
+* Generates CSS3 var with default value
+*/
+/*
+ -  Variables - General
+ */
+/*
+ -  Variables - Typography
+ */
+/*
+ -  Variables - Variants
+ */
+/*
+ -  Variables - Container
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Accordion
+ */
+/*
+ -  Variables - Attachments
+ */
+/*
+ -  Variables - Alert
+ */
+/*
+ -  Variables - Backdrop
+ */
+/*
+ -  Variables - Buttons (&& Badges)
+ */
+/*
+ -  Variables - Breadcrumbs
+ */
+/*
+ -  Variables - Classes
+ */
+/*
+ -  Variables - Colors
+ */
+/*
+ -  Variables - Cookiebar
+ */
+/*
+ -  Variables - Card
+ */
+/*
+ -  Variables - Message
+ */
+/*
+ -  Variables - Empty
+ */
+/*
+ -  Variables - Error code
+ */
+/*
+ -  Variables - Grid
+ */
+/*
+ -  Variables - Tiles
+ */
+/*
+ -  Variables - Modal & Prompt
+ */
+/**
+* Utilities - Offset
+*/
+/*
+ -  Variables - shadows
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Statsbar
+ */
+/*
+ -  Variables - Tabs
+ */
+/*
+ -  Variables - Tooltip
+ */
+/*
+ -  Variables - Loading
+ */
+/*
+ -	Variables - Forms
+ */
+/*
+ -  Variables - Form Autocomplete
+ */
+/*
+ -  Variables - Form Message
+ */
+/*
+ -	Variables - Form label
+ */
+/*
+ -	Variables - Form switch
+ */
+/*
+ -	Variables - Form select
+ */
+/*
+ -	Variables - Form input
+ */
+/*
+ -	Variables - Form multiselect
+ */
+/*
+ -	Variables - Form password power
+ */
+/*
+ -	Variables - Form checkbox & radio
+ */
+/*
+ -  Variables - Form group
+ */
+/*
+ -	Variables - Form file
+ */
+/*
+ -  Variables - Toast Message
+ */
+/*
+ -  Variables - Wizzard
+ */
+/*
+ -  Variables - Stepper
+ */
+/*
+ -  Variables - Side nav
+ */
+/*
+ -  Variables - Grid & Tile
+ */
+/*
+ -  Variables - Pagination
+ */
+/*
+ -  Variables - Nav
+ */
+/*
+ -  Variables - Layout
+ */
+.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;
+  }
+}
+/*
+*   Tooltip - Content
+*/
+.gov-tooltip-content {
+  z-index: 51;
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  position: absolute;
+  display: block;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: var(--gov-tooltip-content-max-width, 21rem);
+  padding: 1rem;
+  border-radius: 0.1875rem;
+  background-color: var(--gov-tooltip-content-bg-color, var(--gov-color-primary-300));
+  color: var(--gov-tooltip-content-text-color, var(--gov-color-secondary));
+  letter-spacing: 0.0125rem;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s ease-in;
+}
+.gov-tooltip-content::before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border: 0.625rem solid transparent;
+}
+.gov-tooltip-content[is-visible=""], .gov-tooltip-content[is-visible=true i], .gov-tooltip-content[is-visible="1"] {
+  opacity: 1;
+}
+.gov-tooltip[size=s] .gov-tooltip-content {
+  --gov-tooltip-content-padding: var(--gov-tooltip-s-padding, 0.5rem);
+  --gov-tooltip-content-arrow-size: var(--gov-tooltip-s-arrow-size, 0.4375rem);
+  --gov-tooltip-content-letter-spacing: var(--gov-tooltip-s-letter-spacing, 0.0125rem);
+  font-weight: var(--gov-text-s-font-weight);
+  font-size: var(--gov-text-s-font-size);
+  line-height: var(--gov-text-s-line-height);
+  letter-spacing: var(--gov-text-s-letter-spacing);
+}
+.gov-tooltip[size=l] .gov-tooltip-content {
+  --gov-tooltip-content-padding: var(--gov-tooltip-l-padding, 1rem);
+  --gov-tooltip-content-arrow-size: var(--gov-tooltip-l-arrow-size, 0.875rem);
+  --gov-tooltip-content-letter-spacing: var(--gov-tooltip-l-letter-spacing, 0.002rem);
+  font-weight: var(--gov-text-xl-font-weight);
+  font-size: var(--gov-text-xl-font-size);
+  line-height: var(--gov-text-xl-line-height);
+  letter-spacing: var(--gov-text-xl-letter-spacing);
+}
+.gov-tooltip[position=top] .gov-tooltip-content {
+  bottom: 100%;
+  margin-bottom: 0.625rem;
+}
+.gov-tooltip[position=top] .gov-tooltip-content, .gov-tooltip[position=top] .gov-tooltip-content::before {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.gov-tooltip[position=top] .gov-tooltip-content::before {
+  top: 100%;
+  border-bottom-width: 0;
+  border-top-color: var(--gov-tooltip-content-bg-color, var(--gov-color-primary-300));
+}
+.gov-tooltip[position=bottom] .gov-tooltip-content {
+  top: 100%;
+  margin-top: 0.625rem;
+}
+.gov-tooltip[position=bottom] .gov-tooltip-content, .gov-tooltip[position=bottom] .gov-tooltip-content::before {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.gov-tooltip[position=bottom] .gov-tooltip-content::before {
+  bottom: 100%;
+  border-top-width: 0;
+  border-bottom-color: var(--gov-tooltip-content-bg-color, var(--gov-color-primary-300));
+}
+.gov-tooltip[position=left] .gov-tooltip-content {
+  right: 100%;
+  margin-right: 0.625rem;
+}
+.gov-tooltip[position=left] .gov-tooltip-content, .gov-tooltip[position=left] .gov-tooltip-content::before {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.gov-tooltip[position=left] .gov-tooltip-content::before {
+  left: 100%;
+  border-right-width: 0;
+  border-left-color: var(--gov-tooltip-content-bg-color, var(--gov-color-primary-300));
+}
+.gov-tooltip[position=right] .gov-tooltip-content {
+  left: 100%;
+  margin-left: 0.625rem;
+}
+.gov-tooltip[position=right] .gov-tooltip-content, .gov-tooltip[position=right] .gov-tooltip-content::before {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.gov-tooltip[position=right] .gov-tooltip-content::before {
+  right: 100%;
+  border-left-width: 0;
+  border-right-color: var(--gov-tooltip-content-bg-color, var(--gov-color-primary-300));
+}

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

@@ -0,0 +1,63 @@
+import { h, Host } from '@stencil/core';
+import { TooltipContentClass } from './constants';
+import { toBoolAttr } from '../../helpers/Dom/template';
+export class GovTooltipContent {
+  constructor() {
+    this.isVisible = false;
+  }
+  visibleContent(newValue) {
+    clearTimeout(this.timeout);
+    if (newValue === false) {
+      this.timeout = setTimeout(() => {
+        this.host.style.visibility = 'hidden';
+      }, 250);
+    }
+    else {
+      this.host.style.visibility = 'visible';
+    }
+  }
+  render() {
+    return (h(Host, { class: TooltipContentClass.root, role: 'tooltip', hidden: !this.isVisible, "aria-hidden": !toBoolAttr(this.isVisible), "is-visible": this.isVisible }, h("slot", null)));
+  }
+  static get is() { return "gov-tooltip-content"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-tooltip-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-tooltip-content.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "isVisible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates display of tooltip content"
+        },
+        "attribute": "is-visible",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "isVisible",
+        "methodName": "visibleContent"
+      }];
+  }
+}
+//# sourceMappingURL=gov-tooltip-content.js.map