q2-tecton-elements 1.17.1 → 1.19.0

package/dist/collection/components/q2-textarea/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
 }
 
 :host {
@@ -168,7 +168,7 @@ textarea:not([cols]) {
 textarea:focus {
   border-width: var(--comp-textarea-focus-border-width, 1px);
   border-color: var(--tct-textarea-focus-border-color, var(--t-textarea-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999)))));
-  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-textarea-focus-box-shadow, var(--t-textarea-focus-box-shadow, 0 0 transparent));
+  box-shadow: var(--const-double-focus-ring), var(--tct-textarea-focus-box-shadow, var(--t-textarea-focus-box-shadow, 0 0 transparent));
 }
 textarea::placeholder {
   color: var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));

package/dist/collection/components/q2-tooltip/index.js

@@ -1,120 +1,223 @@
-import { Component, Prop, h, Element, Fragment } from '@stencil/core';
+import { h, Fragment } from '@stencil/core';
 export class Q2Tooltip {
   constructor() {
+    this.animationEndCount = 0;
+    this.label = undefined;
+    this.block = undefined;
+    this.multiline = undefined;
+    this.persistent = undefined;
+    this.immediate = undefined;
     this.position = 'n';
+    this.focusClass = undefined;
   }
-  render() {
-    const classList = ['q2-tooltip-container', 'tooltipped'];
-    classList.push(`tooltipped-${this.position}`);
-    if (this.block) {
-      classList.push('block');
-      this.hostElement.style.display = 'block';
-    }
-    if (this.multiline) {
-      classList.push('tooltipped-multiline');
+  /// Getters ///
+  get shouldBeVisible() {
+    if (this.persistent)
+      return true;
+    return this.hostElement.matches(':hover, :focus-within');
+  }
+  /// Helpers //
+  checkFocusClass() {
+    if (!this.shouldBeVisible)
+      return;
+    const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);
+    this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';
+    if (isKeyboardFocus)
+      return;
+  }
+  hideTooltip() {
+    if (this.focusClass === 'has-generic-focus')
+      this.focusClass = 'has-generic-focus-out';
+    else
+      this.focusClass = null;
+  }
+  animationEndHandler() {
+    this.animationEndCount = this.animationEndCount + 1;
+    const { focusClass, animationEndCount } = this;
+    // animationEnd is fired once for :before and once for :after pseudo elements
+    // there are multiple animations defined for .has-generic-focus
+    // so we need to wait for all of them to finish before we can remove the class
+    if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {
+      this.focusClass = null;
+      this.animationEndCount = 0;
     }
-    if (this.persistent) {
-      classList.push('persistent');
+  }
+  findFocusVisibleElement(element) {
+    if (!element)
+      return;
+    if (element.shadowRoot)
+      element = this.findFocusVisibleElement(element.shadowRoot.activeElement);
+    return (element === null || element === void 0 ? void 0 : element.matches(':focus-visible')) ? element : null;
+  }
+  /// Listeners ///
+  keyUpHandler(event) {
+    switch (event.key) {
+      case 'Esc':
+      case 'Escape':
+        this.hideTooltip();
+        break;
     }
-    return this.label ? (h(Fragment, null,
-      h("div", { class: classList.join(' '), "aria-label": this.label },
-        h("slot", null)))) : (h("slot", null));
+  }
+  focusHandler() {
+    this.checkFocusClass();
+  }
+  focusOutHandler() {
+    if (this.shouldBeVisible)
+      return;
+    if (this.focusClass === 'has-generic-focus')
+      this.focusClass = 'has-generic-focus-out';
+  }
+  render() {
+    const { focusClass } = this;
+    const classes = ['tooltip'];
+    if (focusClass)
+      classes.push(focusClass);
+    return this.label ? (h(Fragment, null, h("div", { ref: el => (this.tooltipElement = el), class: classes.join(' '), "aria-label": this.label, onAnimationEnd: () => this.animationEndHandler(), role: "tooltip" }, h("slot", null)))) : (h("slot", null));
   }
   static get is() { return "q2-tooltip"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "block": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "block",
-      "reflect": true
-    },
-    "multiline": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "attribute": "multiline",
-      "reflect": true
-    },
-    "persistent": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "block": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "multiline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiline",
+        "reflect": true
       },
-      "attribute": "persistent",
-      "reflect": true
-    },
-    "position": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se'",
-        "resolved": "\"e\" | \"n\" | \"ne\" | \"nw\" | \"s\" | \"se\" | \"sw\" | \"w\"",
-        "references": {}
+      "persistent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "persistent",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "immediate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "immediate",
+        "reflect": true
       },
-      "attribute": "position",
-      "reflect": true,
-      "defaultValue": "'n'"
-    }
-  }; }
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se'",
+          "resolved": "\"e\" | \"n\" | \"ne\" | \"nw\" | \"s\" | \"se\" | \"sw\" | \"w\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "position",
+        "reflect": true,
+        "defaultValue": "'n'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "focusClass": {}
+    };
+  }
   static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "keyup",
+        "method": "keyUpHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focus",
+        "method": "focusHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "focusout",
+        "method": "focusOutHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/q2-tooltip/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
 }
 
 :host {
@@ -69,28 +69,29 @@ button {
   display: inline-block;
 }
 
-.tooltipped {
+:host([block]) {
+  display: block;
+}
+
+.tooltip {
   --comp-background: var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85))));
   --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);
   --comp-offset: var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));
   --comp-position: var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));
   --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);
   --comp-body-offset: var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));
-  --comp-duration: var(--tct-tooltip-animation-duration, var(--t-tooltip-animation-duration, var(--app-duration-1, 0.2s)));
-  --comp-visible-duration: var(--tct-tooltip-animation-visible-duration, var(--t-tooltip-animation-visible-duration, 2s));
+  --comp-duration: var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));
+  --comp-visible-duration: var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));
+  --comp-delay: var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));
+  display: inline-block;
   position: relative;
 }
-@keyframes tooltippedFade {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+.tooltip:hover {
+  --comp-delay: var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s));
 }
-.tooltipped:before {
+.tooltip:before {
   position: absolute;
-  z-index: 1000001;
+  z-index: 2;
   width: 0;
   height: 0;
   color: var(--comp-background);
@@ -98,13 +99,13 @@ button {
   content: "";
   border: var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent;
 }
-.tooltipped:after {
+.tooltip:after {
   --comp-padding: var(--app-scale-1x, 5px) 8px;
   position: absolute;
-  z-index: 1000000;
+  z-index: 1;
   padding: var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));
-  font-weight: 600;
-  font-size: 12px;
+  font-weight: var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));
+  font-size: var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));
   line-height: 1.5;
   color: var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));
   text-align: center;
@@ -117,29 +118,34 @@ button {
   pointer-events: none;
   content: attr(aria-label);
   background: var(--comp-background);
-  border-radius: 3px;
-}
-.tooltipped[label][stencil-hydrated]:after {
-  content: attr(label);
+  border-radius: var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)));
 }
-.tooltipped:before, .tooltipped:after {
+.tooltip:before, .tooltip:after {
   display: inline-block;
   visibility: hidden;
   opacity: 0;
-  transition: all var(--comp-duration) ease-in-out 0s;
+  transition: all var(--comp-duration) ease-in-out var(--comp-delay);
 }
-.tooltipped:hover:before, .tooltipped:hover:after, .tooltipped:active:before, .tooltipped:active:after, .tooltipped:focus:before, .tooltipped:focus:after, .tooltipped:focus-within:before, .tooltipped:focus-within:after {
+:host([block]) .tooltip {
+  display: block;
+}
+.tooltip:hover:before, .tooltip:hover:after, .tooltip.has-keyboard-focus:focus-within:before, .tooltip.has-keyboard-focus:focus-within:after, :host([persistent]) .tooltip:before, :host([persistent]) .tooltip:after {
   text-decoration: none;
   visibility: visible;
   opacity: 1;
 }
-.tooltipped:hover:before, .tooltipped:hover:after, .tooltipped:active:before, .tooltipped:active:after {
-  transition: all var(--comp-duration) ease-in-out;
-}
-.tooltipped:hover:before, .tooltipped:hover:after {
-  transition-delay: 1s;
+@keyframes tooltippedFade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
-.tooltipped:focus:before, .tooltipped:focus:after, .tooltipped:focus-within:before, .tooltipped:focus-within:after {
+.tooltip.has-generic-focus:focus-within:before, .tooltip.has-generic-focus:focus-within:after {
+  visibility: visible;
+  opacity: 0;
+  transition: none;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
   animation-name: tooltippedFade, tooltippedFade;
@@ -147,13 +153,17 @@ button {
   animation-duration: var(--comp-duration);
   animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));
 }
-.tooltipped[stencil-hydrated]:not([label]):not([aria-label]):hover:before, .tooltipped[stencil-hydrated]:not([label]):not([aria-label]):hover:after, .tooltipped[stencil-hydrated]:not([label]):not([aria-label]):active:before, .tooltipped[stencil-hydrated]:not([label]):not([aria-label]):active:after, .tooltipped[stencil-hydrated]:not([label]):not([aria-label]):focus:before, .tooltipped[stencil-hydrated]:not([label]):not([aria-label]):focus:after, .tooltipped:not([stencil-hydrated])[aria-label=""]:hover:before, .tooltipped:not([stencil-hydrated])[aria-label=""]:hover:after, .tooltipped:not([stencil-hydrated])[aria-label=""]:active:before, .tooltipped:not([stencil-hydrated])[aria-label=""]:active:after, .tooltipped:not([stencil-hydrated])[aria-label=""]:focus:before, .tooltipped:not([stencil-hydrated])[aria-label=""]:focus:after, .tooltipped:not([stencil-hydrated]):not([aria-label]):hover:before, .tooltipped:not([stencil-hydrated]):not([aria-label]):hover:after, .tooltipped:not([stencil-hydrated]):not([aria-label]):active:before, .tooltipped:not([stencil-hydrated]):not([aria-label]):active:after, .tooltipped:not([stencil-hydrated]):not([aria-label]):focus:before, .tooltipped:not([stencil-hydrated]):not([aria-label]):focus:after {
-  display: none;
-}
-.tooltipped[stencil-hydrated]:not([label]):not([aria-label]):focus-within:before, .tooltipped[stencil-hydrated]:not([label]):not([aria-label]):focus-within:after, .tooltipped:not([stencil-hydrated])[aria-label=""]:focus-within:before, .tooltipped:not([stencil-hydrated])[aria-label=""]:focus-within:after, .tooltipped:not([stencil-hydrated]):not([aria-label]):focus-within:before, .tooltipped:not([stencil-hydrated]):not([aria-label]):focus-within:after {
-  display: none;
+.tooltip.has-generic-focus-out:before, .tooltip.has-generic-focus-out:after {
+  visibility: visible;
+  opacity: 0;
+  transition: none;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+  animation-name: tooltippedFade;
+  animation-direction: reverse;
+  animation-duration: var(--comp-duration);
 }
-.tooltipped-multiline:after {
+:host([multiline]) .tooltip:after {
   width: max-content;
   max-width: var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));
   word-break: break-word;
@@ -162,116 +172,86 @@ button {
   border-collapse: separate;
   text-align: left;
 }
-.tooltipped-multiline.tooltipped-s:after, .tooltipped-multiline.tooltipped-n:after {
+:host([position=s]) :host([multiline]) .tooltip:after, :host([position=n]) :host([multiline]) .tooltip:after {
   right: auto;
   left: 50%;
   transform: translateX(-50%);
 }
-.tooltipped-multiline.tooltipped-w:after, .tooltipped-multiline.tooltipped-e:after {
+:host([position=w]) :host([multiline]) .tooltip:after, :host([position=e]) :host([multiline]) .tooltip:after {
   right: 100%;
 }
-.tooltipped-multiline:hover:after, .tooltipped-multiline:active:after, .tooltipped-multiline:focus:after {
-  display: table-cell;
-}
-.tooltipped-multiline:focus-within:after {
+:host([multiline]) .tooltip:hover:after, :host([multiline]) .tooltip:active:after, :host([multiline]) .tooltip:focus:after {
   display: table-cell;
 }
-.tooltipped-sticky:before, .tooltipped-sticky:after {
-  display: inline-block;
-}
-.tooltipped-sticky.tooltipped-multiline:after {
+:host([multiline]) .tooltip:focus-within:after {
   display: table-cell;
 }
-.tooltipped-s:after, .tooltipped-se:after, .tooltipped-sw:after {
+:host([position=s]) .tooltip:after, :host([position=se]) .tooltip:after, :host([position=sw]) .tooltip:after {
   top: 100%;
   right: 50%;
   margin-top: var(--comp-position);
 }
-.tooltipped-s:before, .tooltipped-se:before, .tooltipped-sw:before {
+:host([position=s]) .tooltip:before, :host([position=se]) .tooltip:before, :host([position=sw]) .tooltip:before {
   top: auto;
   right: 50%;
   bottom: var(--comp-offset);
   margin-right: var(--comp-offset);
   border-bottom-color: var(--comp-background);
 }
-.tooltipped-se:after {
+:host([position=se]) .tooltip:after {
   right: auto;
   left: 50%;
   margin-left: var(--comp-body-offset);
 }
-.tooltipped-sw:after {
+:host([position=sw]) .tooltip:after {
   margin-right: var(--comp-body-offset);
 }
-.tooltipped-n:after, .tooltipped-ne:after, .tooltipped-nw:after {
+:host([position=n]) .tooltip:after, :host([position=ne]) .tooltip:after, :host([position=nw]) .tooltip:after {
   right: 50%;
   bottom: 100%;
   margin-bottom: var(--comp-position);
 }
-.tooltipped-n:before, .tooltipped-ne:before, .tooltipped-nw:before {
+:host([position=n]) .tooltip:before, :host([position=ne]) .tooltip:before, :host([position=nw]) .tooltip:before {
   top: var(--comp-offset);
   right: 50%;
   bottom: auto;
   margin-right: var(--comp-offset);
   border-top-color: var(--comp-background);
 }
-.tooltipped-ne:after {
+:host([position=ne]) .tooltip:after {
   right: auto;
   left: 50%;
   margin-left: var(--comp-body-offset);
 }
-.tooltipped-nw:after {
+:host([position=nw]) .tooltip:after {
   margin-right: var(--comp-body-offset);
 }
-.tooltipped-s:after, .tooltipped-n:after {
+:host([position=s]) .tooltip:after, :host([position=n]) .tooltip:after {
   transform: translateX(50%);
 }
-.tooltipped-w:after {
+:host([position=w]) .tooltip:after {
   right: 100%;
   bottom: 50%;
   margin-right: var(--comp-position);
   transform: translateY(50%);
 }
-.tooltipped-w:before {
+:host([position=w]) .tooltip:before {
   top: 50%;
   bottom: 50%;
   left: var(--comp-offset);
   margin-top: var(--comp-offset);
   border-left-color: var(--comp-background);
 }
-.tooltipped-e:after {
+:host([position=e]) .tooltip:after {
   bottom: 50%;
   left: 100%;
   margin-left: var(--comp-position);
   transform: translateY(50%);
 }
-.tooltipped-e:before {
+:host([position=e]) .tooltip:before {
   top: 50%;
   right: var(--comp-offset);
   bottom: 50%;
   margin-top: var(--comp-offset);
   border-right-color: var(--comp-background);
-}
-
-.phone .tooltipped:not(.tooltip-popover):hover:before, .phone .tooltipped:not(.tooltip-popover):hover:after, .phone .tooltipped:not(.tooltip-popover):active:before, .phone .tooltipped:not(.tooltip-popover):active:after, .phone .tooltipped:not(.tooltip-popover):focus:before, .phone .tooltipped:not(.tooltip-popover):focus:after, .phone .tooltipped:not(.tooltip-popover):focus-within:before, .phone .tooltipped:not(.tooltip-popover):focus-within:after,
-.tablet .tooltipped:not(.tooltip-popover):hover:before,
-.tablet .tooltipped:not(.tooltip-popover):hover:after,
-.tablet .tooltipped:not(.tooltip-popover):active:before,
-.tablet .tooltipped:not(.tooltip-popover):active:after,
-.tablet .tooltipped:not(.tooltip-popover):focus:before,
-.tablet .tooltipped:not(.tooltip-popover):focus:after,
-.tablet .tooltipped:not(.tooltip-popover):focus-within:before,
-.tablet .tooltipped:not(.tooltip-popover):focus-within:after {
-  display: none;
-}
-
-.q2-tooltip-container {
-  display: inline-block;
-  transition: all var(--comp-duration) ease-in-out 0s;
-}
-.q2-tooltip-container.block {
-  display: block;
-}
-.q2-tooltip-container.persistent.tooltipped:before, .q2-tooltip-container.persistent.tooltipped:after {
-  visibility: visible;
-  opacity: 1;
 }