q2-tecton-elements 1.18.0 → 1.19.1

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

@@ -1,16 +1,19 @@
-import { Component, Prop, Element, h, State, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import icons from '../q2-icon/icons';
 export class Q2Avatar {
   constructor() {
-    this.icon = 'person';
-    this.badSrc = false;
-    this.isLoaded = false;
     this.onError = () => {
       this.badSrc = true;
     };
     this.onLoad = () => {
       this.isLoaded = true;
     };
+    this.name = undefined;
+    this.initials = undefined;
+    this.src = undefined;
+    this.icon = 'person';
+    this.badSrc = false;
+    this.isLoaded = false;
   }
   srcDidUpdate() {
     this.badSrc = false;
@@ -43,99 +46,104 @@ export class Q2Avatar {
     const isLoaded = this.isLoaded;
     const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
     const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
-    return (h("div", null,
-      showImg && (h("img", { class: isLoaded ? 'avatar-img' : 'avatar-img-default', "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })),
-      showInitials && (h("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' },
-        h("text", { x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))),
-      showFallback && (h("div", { "test-id": "fallbackIcon", class: "fallback" },
-        h("q2-icon", { type: this.icon })))));
+    return (h("div", null, showImg && (h("img", { class: isLoaded ? 'avatar-img' : 'avatar-img-default', "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { type: this.icon })))));
   }
   static get is() { return "q2-avatar"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": true
-    },
-    "initials": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "initials",
-      "reflect": true
-    },
-    "src": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": true
       },
-      "attribute": "src",
-      "reflect": true
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "initials": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "initials",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "src",
+        "reflect": true
       },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "'person'"
-    }
-  }; }
-  static get states() { return {
-    "badSrc": {},
-    "isLoaded": {}
-  }; }
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "'person'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "badSrc": {},
+      "isLoaded": {}
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "src",
-      "methodName": "srcDidUpdate"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "src",
+        "methodName": "srcDidUpdate"
+      }];
+  }
 }

package/dist/collection/components/q2-avatar/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-badge/index.js

@@ -1,7 +1,12 @@
-import { Component, Prop, h, Element } from '@stencil/core';
+import { h } from '@stencil/core';
 export class Q2Badge {
   constructor() {
     this.value = 0;
+    this.maxLength = undefined;
+    this.position = undefined;
+    this.size = undefined;
+    this.theme = undefined;
+    this.status = undefined;
   }
   get badgeText() {
     const maxValue = Math.pow(10, this.maxLength || 2) - 1;
@@ -21,123 +26,126 @@ export class Q2Badge {
     const badgeClass = ['badge'];
     if (this.size === 'large')
       badgeClass.push('size-large');
-    return (h("div", { class: "badge-wrapper" },
-      h("div", { class: badgeClass.join(' ') },
-        h("span", { class: "badge-text" },
-          h("slot", null, this.badgeText)))));
+    return (h("div", { class: "badge-wrapper" }, h("div", { class: badgeClass.join(' ') }, h("span", { class: "badge-text" }, h("slot", null, this.badgeText)))));
   }
   static get is() { return "q2-badge"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "maxLength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number | undefined",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max-length",
-      "reflect": true
-    },
-    "position": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'right' | 'left' | undefined",
-        "resolved": "\"left\" | \"right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "position",
-      "reflect": true
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'default' | 'large' | undefined",
-        "resolved": "\"default\" | \"large\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "0"
       },
-      "attribute": "size",
-      "reflect": true
-    },
-    "theme": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'primary' | 'secondary' | 'tertiary' | undefined",
-        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
-        "references": {}
+      "maxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number | undefined",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-length",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'right' | 'left' | undefined",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "position",
+        "reflect": true
       },
-      "attribute": "theme",
-      "reflect": true
-    },
-    "status": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'info' | 'alert' | 'warning' | 'success' | undefined",
-        "resolved": "\"alert\" | \"info\" | \"success\" | \"warning\"",
-        "references": {}
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'large' | undefined",
+          "resolved": "\"default\" | \"large\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary' | 'tertiary' | undefined",
+          "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "theme",
+        "reflect": true
       },
-      "attribute": "status",
-      "reflect": true
-    }
-  }; }
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'info' | 'alert' | 'warning' | 'success' | undefined",
+          "resolved": "\"alert\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "status",
+        "reflect": true
+      }
+    };
+  }
   static get elementRef() { return "hostElement"; }
 }

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