q2-tecton-elements 1.18.0 → 1.19.0

package/dist/collection/components/q2-select/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 {

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

@@ -1,12 +1,8 @@
-import { Component, Prop, h, Element, State, Watch, Listen, Event, Fragment, } from '@stencil/core';
+import { h, Fragment, } from '@stencil/core';
 import { loc, addSmoothScrollPolyfill, overrideFocus, isEventFromElement } from 'src/utils';
 addSmoothScrollPolyfill();
 export class Q2Stepper {
   constructor() {
-    this.currentStep = 1;
-    this.scrollEnabled = false;
-    this.showScrollLeft = false;
-    this.showScrollRight = false;
     this.scheduledAfterRender = [];
     ////////// EVENT HANDLERS ////////
     this.onSlotChange = () => {
@@ -72,6 +68,12 @@ export class Q2Stepper {
       this.showScrollLeft = !!scrollLeft;
       this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;
     };
+    this.currentStep = 1;
+    this.stepCount = undefined;
+    this.lastEnabledStep = undefined;
+    this.scrollEnabled = false;
+    this.showScrollLeft = false;
+    this.showScrollRight = false;
   }
   ////////// LIFECYCLE HOOKS ////////
   componentWillLoad() {
@@ -182,138 +184,134 @@ export class Q2Stepper {
       stepClasses.push(`status-${status}`);
     const isLocked = status === 'locked';
     const disabled = isLocked || stepNumber > lastEnabledStep;
-    return (h("li", { role: "presentation" },
-      h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": isCurrentStep, "aria-controls": id, "aria-disabled": disabled ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isLocked && this.onStepClick(ev, stepNumber) },
-        h(Fragment, null,
-          statusIcon ? (h("div", { class: "step-icon" },
-            h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)),
-          label && (h("div", { class: "step-label", id: labelId }, loc(label))),
-          label && description && (h("div", { class: "step-description", id: descriptionId }, loc(description))))),
-      stepIndex ? h("hr", null) : ''));
+    return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": isCurrentStep, "aria-controls": id, "aria-disabled": disabled ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isLocked && this.onStepClick(ev, stepNumber) }, h(Fragment, null, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", { class: "step-label", id: labelId }, loc(label))), label && description && (h("div", { class: "step-description", id: descriptionId }, loc(description))))), stepIndex ? h("hr", null) : ''));
   }
   render() {
     const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;
     const containerClasses = ['step-container'];
     if (scrollEnabled)
       containerClasses.push('has-scroll');
-    return (h(Fragment, null,
-      h("div", { class: containerClasses.join(' ') },
-        scrollEnabled && (h(Fragment, null,
-          h("div", { class: "gradient-left", hidden: !showScrollLeft }),
-          h("div", { class: "gradient-right", hidden: !showScrollRight }),
-          h("q2-btn", { class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') },
-            h("q2-icon", { type: "chevron-left" })),
-          h("q2-btn", { class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') },
-            h("q2-icon", { type: "chevron-right" })))),
-        h("ul", { onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))),
-      h("div", null,
-        h("slot", { onSlotchange: () => this.onSlotChange() }))));
+    return (h(Fragment, null, h("div", { class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, null, h("div", { class: "gradient-left", hidden: !showScrollLeft }), h("div", { class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { type: "chevron-left" })), h("q2-btn", { class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { type: "chevron-right" })))), h("ul", { onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", null, h("slot", { onSlotchange: () => this.onSlotChange() }))));
   }
   static get is() { return "q2-stepper"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "currentStep": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "current-step",
-      "reflect": true,
-      "defaultValue": "1"
-    },
-    "stepCount": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "step-count",
-      "reflect": false
-    },
-    "lastEnabledStep": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "currentStep": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "current-step",
+        "reflect": true,
+        "defaultValue": "1"
       },
-      "attribute": "last-enabled-step",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "scrollEnabled": {},
-    "showScrollLeft": {},
-    "showScrollRight": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "stepCount": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "step-count",
+        "reflect": false
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "lastEnabledStep": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "last-enabled-step",
+        "reflect": false
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "scrollEnabled": {},
+      "showScrollLeft": {},
+      "showScrollRight": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "currentStep",
-      "methodName": "currentStepChanged"
-    }]; }
-  static get listeners() { return [{
-      "name": "change",
-      "method": "defaultChangeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "focus",
-      "method": "delegateFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "statusChange",
-      "method": "statusChangeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "currentStep",
+        "methodName": "currentStepChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "change",
+        "method": "defaultChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focus",
+        "method": "delegateFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "statusChange",
+        "method": "statusChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/q2-stepper/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 {
@@ -141,6 +141,7 @@ li {
   padding: 0;
   transition-property: box-shadow;
   outline: none;
+  margin-top: 2px;
   --comp-active-color: var(--t-primary, #0079c1);
 }
 .step-btn.status-complete {

package/dist/collection/components/q2-stepper-pane/index.js

@@ -1,7 +1,12 @@
-import { Component, Prop, h, Element, Fragment, Event, Watch, Listen, State, } from '@stencil/core';
+import { h, Fragment, } from '@stencil/core';
 import { createGuid, loc, nextPaint } from 'src/utils';
 export class Q2StepperPane {
   constructor() {
+    this.label = undefined;
+    this.description = undefined;
+    this.isActive = undefined;
+    this.showWithChildren = undefined;
+    this.status = undefined;
     this.isChildActive = false;
   }
   /// LifeCycle Hooks ///
@@ -41,164 +46,175 @@ export class Q2StepperPane {
   /// DOM ///
   render() {
     const { label, description, isActive } = this;
-    return (h(Fragment, null,
-      h("div", { role: "tabpanel", "aria-label": label && loc(label), "aria-description": description && loc(description), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) },
-        h("slot", null)),
-      h("slot", { name: "children" })));
+    return (h(Fragment, null, h("div", { role: "tabpanel", "aria-label": label && loc(label), "aria-description": description && loc(description), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", null)), h("slot", { name: "children" })));
   }
   static get is() { return "q2-stepper-pane"; }
   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
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "description",
-      "reflect": true
-    },
-    "isActive": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-active",
-      "reflect": true
-    },
-    "showWithChildren": {
-      "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": "show-with-children",
-      "reflect": true
-    },
-    "status": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'complete' | 'error' | 'locked'",
-        "resolved": "\"complete\" | \"error\" | \"locked\"",
-        "references": {}
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "isActive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-active",
+        "reflect": true
       },
-      "attribute": "status",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "isChildActive": {}
-  }; }
-  static get events() { return [{
-      "method": "statusChange",
-      "name": "statusChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "showWithChildren": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-with-children",
+        "reflect": true
       },
-      "complexType": {
-        "original": "IStepperPaneEvent",
-        "resolved": "IStepperPaneEvent",
-        "references": {
-          "IStepperPaneEvent": {
-            "location": "local"
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'complete' | 'error' | 'locked'",
+          "resolved": "\"complete\" | \"error\" | \"locked\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "status",
+        "reflect": true
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isChildActive": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "statusChange",
+        "name": "statusChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IStepperPaneEvent",
+          "resolved": "IStepperPaneEvent",
+          "references": {
+            "IStepperPaneEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "method": "activeChange",
-      "name": "activeChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "IStepperPaneEvent",
-        "resolved": "IStepperPaneEvent",
-        "references": {
-          "IStepperPaneEvent": {
-            "location": "local"
+      }, {
+        "method": "activeChange",
+        "name": "activeChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IStepperPaneEvent",
+          "resolved": "IStepperPaneEvent",
+          "references": {
+            "IStepperPaneEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "status",
-      "methodName": "statusChanged"
-    }, {
-      "propName": "isActive",
-      "methodName": "isActiveChanged"
-    }, {
-      "propName": "showWithChildren",
-      "methodName": "checkForActiveChildren"
-    }]; }
-  static get listeners() { return [{
-      "name": "activeChange",
-      "method": "checkForActiveChildren",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "status",
+        "methodName": "statusChanged"
+      }, {
+        "propName": "isActive",
+        "methodName": "isActiveChanged"
+      }, {
+        "propName": "showWithChildren",
+        "methodName": "checkForActiveChildren"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "activeChange",
+        "method": "checkForActiveChildren",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/q2-stepper-pane/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 {