@gov-design-system-ce/components 0.0.1 → 0.0.3

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

@@ -48,15 +48,15 @@
  -  Variables - Typography
  */
 /*
- -  Variables - Sizes
+ -  Variables - Variants
  */
-/* "Constants" for general usage */
 /*
- -  Variables - Variants
+ -  Variables - Container
  */
 /*
- -  Variables - Layout
+ -  Variables - Sizes
  */
+/* "Constants" for general usage */
 /*
  -  Variables - Accordion
  */
@@ -72,6 +72,9 @@
 /*
  -  Variables - Buttons (&& Badges)
  */
+/*
+ -  Variables - Breadcrumbs
+ */
 /*
  -  Variables - Classes
  */
@@ -84,9 +87,6 @@
 /*
  -  Variables - Card
  */
-/*
- -  Variables - Container
- */
 /*
  -  Variables - Message
  */
@@ -99,6 +99,9 @@
 /*
  -  Variables - Grid
  */
+/*
+ -  Variables - Tiles
+ */
 /*
  -  Variables - Modal & Prompt
  */
@@ -118,6 +121,9 @@
 /*
  -  Variables - Tooltip
  */
+/*
+ -  Variables - Loading
+ */
 /*
  -	Variables - Forms
  */
@@ -145,6 +151,9 @@
 /*
  -	Variables - Form checkbox & radio
  */
+/*
+ -  Variables - Form group
+ */
 /*
  -	Variables - Form file
  */
@@ -157,12 +166,21 @@
 /*
  -  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;
@@ -173,9 +191,17 @@
     transform: rotate(360deg);
   }
 }
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
 /*
 *   Alert
 */
+/*
+ *   Toast Message & Message Shared Definitions
+ */
 .gov-toast {
   position: relative;
   display: flex;
@@ -183,10 +209,12 @@
   flex-direction: column;
   padding: 0.75rem 1rem;
   border-left: 0.25rem solid transparent;
-  background: var(--gov-toast-message-bg, var(--gov-color-secondary-100));
+  background: var(--gov-toast-message-bg, var(--gov-color-neutral-white));
   z-index: 201;
+  position: relative;
   position: fixed;
   max-width: 23.4375rem;
+  padding-right: 3.125rem;
   opacity: 1;
   transition: opacity 300ms ease-in-out;
 }
@@ -198,15 +226,15 @@
 .gov-toast__content {
   flex: 1 1 auto;
 }
+.gov-toast__content > *:last-child {
+  margin-bottom: 0;
+}
 .gov-toast__content p {
   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);
 }
-.gov-toast__content p:last-child {
-  margin: 0;
-}
 @media (min-width: 30em) {
   .gov-toast {
     flex-direction: row;
@@ -217,12 +245,16 @@
 }
 .gov-toast__close {
   position: absolute;
-  top: 0.625rem;
-  right: 1rem;
+  top: 0.5rem;
+  right: 0.75rem;
 }
-.gov-toast__close .element {
-  min-height: 0 !important;
-  padding: 0.3125rem !important;
+.gov-toast__timer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
 }
 .gov-toast--hidden {
   opacity: 0;
@@ -243,35 +275,95 @@
 .gov-toast[position=right i] {
   right: 1rem;
 }
+.gov-toast[type=solid i] {
+  border: none;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  box-shadow: none;
+}
+.gov-toast[type=solid i].is-initialized .gov-toast__timer {
+  transform-origin: left;
+  animation: countdown linear forwards var(--toast-duration, 0);
+}
 .gov-toast[variant=warning] {
-  border-left-color: var(--gov-toast-warning-color, var(--gov-color-warning));
+  border-left-color: var(--gov-toast-warning-codecor-lor, var(--gov-color-warning));
 }
 .gov-toast[variant=warning] .gov-toast__icon {
-  color: var(--gov-toast-warning-color, var(--gov-color-warning));
+  color: var(--gov-toast-warning-codecor-lor, var(--gov-color-warning));
+}
+.gov-toast[variant=warning][type=solid i] {
+  background-color: var(--gov-toast-warning-background, var(--gov-color-warning));
+  color: var(--gov-toast-warning-color, var(--gov-color-secondary));
+}
+.gov-toast[variant=warning][type=solid i] .gov-toast__icon {
+  color: var(--gov-toast-warning-color, var(--gov-color-secondary));
+}
+.gov-toast[variant=warning][type=solid i] .gov-toast__timer {
+  background-color: var(--gov-toast-warning-timer-background, rgba(var(--gov-color-warning-500-rgb), 0.3));
 }
 .gov-toast[variant=error] {
-  border-left-color: var(--gov-toast-error-color, var(--gov-color-error));
+  border-left-color: var(--gov-toast-error-colodecor-r, var(--gov-color-error));
 }
 .gov-toast[variant=error] .gov-toast__icon {
-  color: var(--gov-toast-error-color, var(--gov-color-error));
+  color: var(--gov-toast-error-colodecor-r, var(--gov-color-error));
+}
+.gov-toast[variant=error][type=solid i] {
+  background-color: var(--gov-toast-error-background, var(--gov-color-error));
+  color: var(--gov-toast-error-color, var(--gov-color-neutral-white));
+}
+.gov-toast[variant=error][type=solid i] .gov-toast__icon {
+  color: var(--gov-toast-error-color, var(--gov-color-neutral-white));
+}
+.gov-toast[variant=error][type=solid i] .gov-toast__timer {
+  background-color: var(--gov-toast-error-timer-background, rgba(var(--gov-color-error-500-rgb), 0.5));
 }
 .gov-toast[variant=success] {
-  border-left-color: var(--gov-toast-success-color, var(--gov-color-success));
+  border-left-color: var(--gov-toast-success-codecor-lor, var(--gov-color-success));
 }
 .gov-toast[variant=success] .gov-toast__icon {
-  color: var(--gov-toast-success-color, var(--gov-color-success));
+  color: var(--gov-toast-success-codecor-lor, var(--gov-color-success));
+}
+.gov-toast[variant=success][type=solid i] {
+  background-color: var(--gov-toast-success-background, var(--gov-color-success-500));
+  color: var(--gov-toast-success-color, var(--gov-color-neutral-white));
+}
+.gov-toast[variant=success][type=solid i] .gov-toast__icon {
+  color: var(--gov-toast-success-color, var(--gov-color-neutral-white));
+}
+.gov-toast[variant=success][type=solid i] .gov-toast__timer {
+  background-color: var(--gov-toast-success-timer-background, rgba(var(--gov-color-success-600-rgb), 0.5));
 }
 .gov-toast[variant=primary] {
-  border-left-color: var(--gov-toast-primary-color, var(--gov-color-primary));
+  border-left-color: var(--gov-toast-primary-codecor-lor, var(--gov-color-primary));
 }
 .gov-toast[variant=primary] .gov-toast__icon {
-  color: var(--gov-toast-primary-color, var(--gov-color-primary));
+  color: var(--gov-toast-primary-codecor-lor, var(--gov-color-primary));
+}
+.gov-toast[variant=primary][type=solid i] {
+  background-color: var(--gov-toast-primary-background, var(--gov-color-primary));
+  color: var(--gov-toast-primary-color, var(--gov-color-neutral-white));
+}
+.gov-toast[variant=primary][type=solid i] .gov-toast__icon {
+  color: var(--gov-toast-primary-color, var(--gov-color-neutral-white));
+}
+.gov-toast[variant=primary][type=solid i] .gov-toast__timer {
+  background-color: var(--gov-toast-primary-timer-background, rgba(var(--gov-color-primary-700-rgb), 0.5));
 }
 .gov-toast[variant=secondary] {
-  border-left-color: var(--gov-toast-secondary-color, var(--gov-color-secondary));
+  border-left-color: var(--gov-toast-secondary-decor-color, var(--gov-color-secondary));
 }
 .gov-toast[variant=secondary] .gov-toast__icon {
-  color: var(--gov-toast-secondary-color, var(--gov-color-secondary));
+  color: var(--gov-toast-secondary-decor-color, var(--gov-color-secondary));
+}
+.gov-toast[variant=secondary][type=solid i] {
+  background-color: var(--gov-toast-secondary-background, var(--gov-color-secondary));
+  color: var(--gov-toast-secondary-color, var(--gov-color-neutral-white));
+}
+.gov-toast[variant=secondary][type=solid i] .gov-toast__icon {
+  color: var(--gov-toast-secondary-color, var(--gov-color-neutral-white));
+}
+.gov-toast[variant=secondary][type=solid i] .gov-toast__timer {
+  background-color: var(--gov-toast-secondary-timer-background, rgba(var(--gov-color-secondary-900-rgb), 0.5));
 }
 @media (min-width: 30em) {
   .gov-toast__content {

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

@@ -9,7 +9,9 @@ export class GovToast {
     this.variant = Variants.PRIMARY;
     this.gravity = "top";
     this.position = "right";
-    this.time = 10000;
+    this.type = "classic";
+    this.time = 0;
+    this.closeLabel = undefined;
     this.wcagCloseLabel = undefined;
     this.h = govHost(this.host);
     this.toastId = createID("GovToast");
@@ -19,43 +21,52 @@ export class GovToast {
   }
   componentWillLoad() {
     this.validateVariant(this.variant);
-    this.timeout = setTimeout(() => {
-      this.host.classList.add(ToastClass.hidden);
-      setTimeout(this.destroy.bind(this), 600);
-    }, this.time);
+    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(true).then());
+      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 }, 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: "secondary", type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, h("gov-icon", { name: "cross" })))));
+    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: "cross" })))), h("div", { class: ToastClass.timer })));
   }
   onCloseHandler() {
-    this.destroy().then(() => {
-      this.govClose.emit(this.toastId);
-    }).catch();
+    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(force = false) {
+  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") {
-        if (force) {
-          toast.remove();
-        }
-        else {
-          setTimeout(() => toast.remove(), 600);
-        }
+        toast.remove();
       }
     }
   }
@@ -107,7 +118,7 @@ export class GovToast {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Toast\u2019s gravity"
         },
         "attribute": "gravity",
         "reflect": false,
@@ -125,12 +136,30 @@ export class GovToast {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Toast\u2019s position"
         },
         "attribute": "position",
         "reflect": false,
         "defaultValue": "\"right\""
       },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"solid\" | \"classic\"",
+          "resolved": "\"classic\" | \"solid\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Toast type"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"classic\""
+      },
       "time": {
         "type": "number",
         "mutable": false,
@@ -143,11 +172,28 @@ export class GovToast {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Number of milliseconds to wait before Toast disappear"
         },
         "attribute": "time",
         "reflect": false,
-        "defaultValue": "10000"
+        "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",
@@ -180,8 +226,8 @@ export class GovToast {
           "text": "Called when the close button is clicked"
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         }
       }];
@@ -190,11 +236,8 @@ export class GovToast {
     return {
       "destroy": {
         "complexType": {
-          "signature": "(force?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"

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

@@ -1 +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 } from \"./constants\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\nimport { Variants } from \"../../core/constants/variants\"\nimport { VariantType } 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\n\t/**\n\t * Style variation of the toast message.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\n\t@Prop() readonly gravity: \"top\" | \"bottom\" = \"top\"\n\t@Prop() readonly position: \"left\" | \"center\" | \"right\" = \"right\"\n\n\t@Prop() readonly time: number = 10000\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\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, ToastClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.timeout = setTimeout(() => {\n\t\t\tthis.host.classList.add(ToastClass.hidden)\n\t\t\tsetTimeout(this.destroy.bind(this), 600)\n\t\t}, this.time)\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(true).then())\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tclearTimeout(this.timeout)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes([ToastClass.root, \"gov-box-shadow--m\"])}\n\t\t\t      data-toast-id={this.toastId}\n\t\t\t      gravity={this.gravity}\n\t\t\t      position={this.position}\n\t\t\t      variant={this.variant}>\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 size=\"s\"\n\t\t\t\t\t            wcag-label={this.wcagCloseLabel}\n\t\t\t\t\t            variant=\"secondary\"\n\t\t\t\t\t            type=\"base\"\n\t\t\t\t\t            on-gov-click={this.onCloseHandler.bind(this)}>\n\t\t\t\t\t\t<gov-icon name=\"cross\"></gov-icon>\n\t\t\t\t\t</gov-button>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onCloseHandler() {\n\t\tthis.destroy().then(() => {\n\t\t\tthis.govClose.emit(this.toastId)\n\t\t}).catch()\n\t}\n\n\n\t/**\n\t * Remove toast from dom\n\t */\n\t@Method()\n\tasync destroy(force = false): 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\tif (force) {\n\t\t\t\t\ttoast.remove()\n\t\t\t\t} else {\n\t\t\t\t\tsetTimeout(() => toast.remove(), 600)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n"]}
+{"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 } from \"./constants\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\nimport { Variants } from \"../../core/constants/variants\"\nimport { VariantType } 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: VariantType = Variants.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: \"solid\" | \"classic\" = \"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(Variants, 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\t{this.closeLabel ? (this.closeLabel) : (<gov-icon name=\"cross\"></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

@@ -1,5 +1,5 @@
-import { Variants as GlobalVariants } from "../../core/constants/variants";
-import { Sizes as GlobalSizes } from "../../core/constants/sizes";
+import { Variants as GlobalVariants } from '../../core/constants/variants';
+import { Sizes as GlobalSizes } from '../../core/constants/sizes';
 export const Variant = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY];
 export const Size = [undefined, GlobalSizes._S, GlobalSizes._M, GlobalSizes._L];
 export var Positions;

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tooltip/constants.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,IAAI,cAAc,EAAC,MAAM,+BAA+B,CAAA;AACxE,OAAO,EAAC,KAAK,IAAI,WAAW,EAAC,MAAM,4BAA4B,CAAA;AAE/D,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,SAAS,CAAU,CAAA;AAG7F,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,CAAU,CAAA;AAGxF,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;EACpB,wBAAW,CAAA;EACX,4BAAe,CAAA;EACf,8BAAiB,CAAA;EACjB,0BAAa,CAAA;AACd,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AACD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAU,CAAA;AAGnG,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 as GlobalVariants} from \"../../core/constants/variants\"\nimport {Sizes as GlobalSizes} from \"../../core/constants/sizes\"\n\nexport const Variant = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY] as const\nexport type VariantType = typeof Variant[number]\n\nexport const Size = [undefined, GlobalSizes._S, GlobalSizes._M, GlobalSizes._L] as const\nexport type SizeType = typeof Size[number]\n\nexport enum Positions {\n\tTOP = \"top\",\n\tRIGHT = \"right\",\n\tBOTTOM = \"bottom\",\n\tLEFT = \"left\",\n}\nexport const Position = [Positions.TOP, Positions.RIGHT, Positions.BOTTOM, Positions.LEFT] as const\nexport type PositionType = typeof Position[number]\n\nexport const TooltipClass = {\n\troot: 'gov-tooltip',\n}\n\nexport const TooltipContentClass = {\n\troot: 'gov-tooltip-content',\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tooltip/constants.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAC1E,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAEjE,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,SAAS,CAAU,CAAA;AAG7F,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,CAAU,CAAA;AAGxF,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;EACpB,wBAAW,CAAA;EACX,4BAAe,CAAA;EACf,8BAAiB,CAAA;EACjB,0BAAa,CAAA;AACd,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AACD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAU,CAAA;AAGnG,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 as GlobalVariants } from '../../core/constants/variants'\nimport { Sizes as GlobalSizes } from '../../core/constants/sizes'\n\nexport const Variant = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY] as const\nexport type VariantType = (typeof Variant)[number]\n\nexport const Size = [undefined, GlobalSizes._S, GlobalSizes._M, GlobalSizes._L] as const\nexport type SizeType = (typeof Size)[number]\n\nexport enum Positions {\n\tTOP = 'top',\n\tRIGHT = 'right',\n\tBOTTOM = 'bottom',\n\tLEFT = 'left',\n}\nexport const Position = [Positions.TOP, Positions.RIGHT, Positions.BOTTOM, Positions.LEFT] as const\nexport type PositionType = (typeof Position)[number]\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

@@ -48,15 +48,15 @@
  -  Variables - Typography
  */
 /*
- -  Variables - Sizes
+ -  Variables - Variants
  */
-/* "Constants" for general usage */
 /*
- -  Variables - Variants
+ -  Variables - Container
  */
 /*
- -  Variables - Layout
+ -  Variables - Sizes
  */
+/* "Constants" for general usage */
 /*
  -  Variables - Accordion
  */
@@ -72,6 +72,9 @@
 /*
  -  Variables - Buttons (&& Badges)
  */
+/*
+ -  Variables - Breadcrumbs
+ */
 /*
  -  Variables - Classes
  */
@@ -84,9 +87,6 @@
 /*
  -  Variables - Card
  */
-/*
- -  Variables - Container
- */
 /*
  -  Variables - Message
  */
@@ -99,6 +99,9 @@
 /*
  -  Variables - Grid
  */
+/*
+ -  Variables - Tiles
+ */
 /*
  -  Variables - Modal & Prompt
  */
@@ -118,6 +121,9 @@
 /*
  -  Variables - Tooltip
  */
+/*
+ -  Variables - Loading
+ */
 /*
  -	Variables - Forms
  */
@@ -145,6 +151,9 @@
 /*
  -	Variables - Form checkbox & radio
  */
+/*
+ -  Variables - Form group
+ */
 /*
  -	Variables - Form file
  */
@@ -157,12 +166,21 @@
 /*
  -  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;
@@ -173,6 +191,11 @@
     transform: rotate(360deg);
   }
 }
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
 /*
 *   Tooltip - Content
 */
@@ -208,18 +231,18 @@
   opacity: 1;
 }
 .gov-tooltip[size=s] .gov-tooltip-content {
-  --gov-tooltip-content-padding: 0.5rem;
-  --gov-tooltip-content-arrow-size: 0.4375rem;
-  --gov-tooltip-content-letter-spacing: 0.0125rem;
+  --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: 1rem;
-  --gov-tooltip-content-arrow-size: 0.875rem;
-  --gov-tooltip-content-letter-spacing: 0.002rem;
+  --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);

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

@@ -1,6 +1,6 @@
-import { h, Host } from "@stencil/core";
-import { TooltipContentClass } from "./constants";
-import { toBoolAttr } from "../../helpers/Dom/template";
+import { h, Host } from '@stencil/core';
+import { TooltipContentClass } from './constants';
+import { toBoolAttr } from '../../helpers/Dom/template';
 export class GovTooltipContent {
   constructor() {
     this.isVisible = false;
@@ -9,15 +9,15 @@ export class GovTooltipContent {
     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';
     }
   }
   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)));
   }
   static get is() { return "gov-tooltip-content"; }
   static get originalStyleUrls() {