q2-tecton-elements 1.18.0 → 1.19.0

package/dist/collection/components/q2-input/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 {
@@ -206,7 +206,7 @@ label {
 .input-container:focus-within {
   border-width: var(--comp-input-focus-border-width, 1px);
   border-color: var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--tct-gray-9, var(--t-gray-9, #999999))));
-  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-input-focus-box-shadow, var(--t-input-focus-box-shadow, 0 0 transparent));
+  box-shadow: var(--const-double-focus-ring), var(--tct-input-focus-box-shadow, var(--t-input-focus-box-shadow, 0 0 transparent));
 }
 
 .input-field::placeholder,

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

@@ -1,21 +1,24 @@
-import { Component, Prop, h, Element, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import { handleAriaLabel, loc } from 'src/utils';
 import skeletonShapes from './skeleton/shapes';
 export class Q2Loading {
   constructor() {
     this.halfCircleSpinner = () => {
-      return (h("div", { class: "q2-loading-animation half-circle-spinner", "aria-label": this.localizedLabel },
-        h("div", { class: "circle circle-1" }),
-        h("div", { class: "circle circle-2" })));
+      return (h("div", { class: "q2-loading-animation half-circle-spinner", "aria-label": this.localizedLabel }, h("div", { class: "circle circle-1" }), h("div", { class: "circle circle-2" })));
     };
     this.spinner = () => {
       return this.halfCircleSpinner();
     };
     this.skeletonLoader = () => {
-      return (h("div", { class: "q2-loading-skeleton", "aria-label": this.localizedLabel },
-        this.shape === 'custom' ? h("slot", null) : this.skeletonShape,
-        h("div", { class: "q2-loading-skeleton-shimmer" })));
+      return (h("div", { class: "q2-loading-skeleton", "aria-label": this.localizedLabel }, this.shape === 'custom' ? h("slot", null) : this.skeletonShape, h("div", { class: "q2-loading-skeleton-shimmer" })));
     };
+    this.type = undefined;
+    this.shape = undefined;
+    this.modifiers = undefined;
+    this.counts = undefined;
+    this.label = undefined;
+    this.ariaLabel = undefined;
+    this.inline = undefined;
   }
   get loader() {
     const loaderMap = {
@@ -62,136 +65,144 @@ export class Q2Loading {
   }
   static get is() { return "q2-loading"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": true
-    },
-    "shape": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "shape",
-      "reflect": true
-    },
-    "modifiers": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "modifiers",
-      "reflect": true
-    },
-    "counts": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "counts",
-      "reflect": true
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shape",
+        "reflect": true
       },
-      "attribute": "label",
-      "reflect": true
-    },
-    "ariaLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "modifiers": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "modifiers",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "counts": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "counts",
+        "reflect": true
       },
-      "attribute": "aria-label",
-      "reflect": true
-    },
-    "inline": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "ariaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": true
       },
-      "attribute": "inline",
-      "reflect": true
-    }
-  }; }
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inline",
+        "reflect": true
+      }
+    };
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "ariaLabel",
-      "methodName": "ariaLabelObserver"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "ariaLabel",
+        "methodName": "ariaLabelObserver"
+      }];
+  }
 }

package/dist/collection/components/q2-loading/skeleton/q2-loading-element/index.js

@@ -1,6 +1,11 @@
-import { Component, Prop } from '@stencil/core';
 import { atoms } from './../shapes';
 export class Q2Loading {
+  constructor() {
+    this.shape = undefined;
+    this.width = undefined;
+    this.height = undefined;
+    this.borderRadius = undefined;
+  }
   get shapeMarkup() {
     return atoms[this.shape]
       ? atoms[this.shape]({
@@ -14,80 +19,86 @@ export class Q2Loading {
     return this.shapeMarkup;
   }
   static get is() { return "q2-loading-element"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "shape": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "shape",
-      "reflect": true
-    },
-    "width": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "width",
-      "reflect": true
-    },
-    "height": {
-      "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 {
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shape",
+        "reflect": true
       },
-      "attribute": "height",
-      "reflect": true
-    },
-    "borderRadius": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "width",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "height",
+        "reflect": true
       },
-      "attribute": "border-radius",
-      "reflect": true
-    }
-  }; }
+      "borderRadius": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "border-radius",
+        "reflect": true
+      }
+    };
+  }
 }

package/dist/collection/components/q2-loading/skeleton/shapes.js

@@ -4,12 +4,10 @@ export const atoms = {
   rectangle: ({ width, height, borderRadius, additionalClasses }) => (h("div", { class: `skeleton-shape rectangle ${additionalClasses || ''}`, style: { width, height, borderRadius } })),
 };
 export const molecules = {
-  field: () => (h("div", { class: "skeleton-shape field" },
-    h("div", { class: "skeleton-field-label" }, atoms.rectangle({ height: '1rem', width: '50%' })),
-    atoms.rectangle({
-      height: 'var(--tct-input-height, 42px)',
-      borderRadius: '3px',
-    }))),
+  field: () => (h("div", { class: "skeleton-shape field" }, h("div", { class: "skeleton-field-label" }, atoms.rectangle({ height: '1rem', width: '50%' })), atoms.rectangle({
+    height: 'var(--tct-input-height, 42px)',
+    borderRadius: '3px',
+  }))),
   text: (counts, modifiers) => {
     var _a;
     const rows = (_a = counts === null || counts === void 0 ? void 0 : counts[0]) !== null && _a !== void 0 ? _a : 1;
@@ -17,12 +15,10 @@ export const molecules = {
     const alignment = ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('center')) && 'center') || ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('right')) && 'right') || 'left';
     const smallHeaderClass = (modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('smallheader')) ? ' smaller' : '';
     const additionalClasses = hasHeader ? `header ${alignment}${smallHeaderClass}` : '';
-    return (h("div", { class: "skeleton-shape text" },
-      hasHeader && atoms.rectangle({ width: '60%', additionalClasses }),
-      !!rows &&
-        Array(rows)
-          .fill(undefined)
-          .map(() => atoms.rectangle({ height: '1rem' }))));
+    return (h("div", { class: "skeleton-shape text" }, hasHeader && atoms.rectangle({ width: '60%', additionalClasses }), !!rows &&
+      Array(rows)
+        .fill(undefined)
+        .map(() => atoms.rectangle({ height: '1rem' }))));
   },
 };
 export const shapes = {
@@ -38,25 +34,19 @@ export const shapes = {
     const rowCount = (_b = counts === null || counts === void 0 ? void 0 : counts[1]) !== null && _b !== void 0 ? _b : 5;
     const headless = modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('headless');
     const bordered = modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('bordered');
-    return (h("div", { class: "skeleton-shape table" },
-      !headless && (h("div", { class: "skeleton-table-head" },
-        h("div", { class: "skeleton-table-row skeleton-table-header flex" }, !!columnCount &&
-          Array(columnCount)
-            .fill(undefined)
-            .map(() => atoms.rectangle({ height: '1rem' }))),
-        h("div", { class: "skeleton-table-row-border" }, atoms.rectangle({ height: '3px' })))),
-      h("div", { class: "skeleton-table-body" }, !!rowCount &&
-        Array(rowCount)
+    return (h("div", { class: "skeleton-shape table" }, !headless && (h("div", { class: "skeleton-table-head" }, h("div", { class: "skeleton-table-row skeleton-table-header flex" }, !!columnCount &&
+      Array(columnCount)
+        .fill(undefined)
+        .map(() => atoms.rectangle({ height: '1rem' }))), h("div", { class: "skeleton-table-row-border" }, atoms.rectangle({ height: '3px' })))), h("div", { class: "skeleton-table-body" }, !!rowCount &&
+      Array(rowCount)
+        .fill(undefined)
+        .map(() => (h("div", { class: "skeleton-table-row-wrapper" }, h("div", { class: "skeleton-table-row flex" }, !!columnCount &&
+        Array(columnCount)
           .fill(undefined)
-          .map(() => (h("div", { class: "skeleton-table-row-wrapper" },
-          h("div", { class: "skeleton-table-row flex" }, !!columnCount &&
-            Array(columnCount)
-              .fill(undefined)
-              .map(() => atoms.rectangle({ height: '1.5rem' }))),
-          bordered && (h("div", { class: "skeleton-table-row-border" }, atoms.rectangle({
-            height: '1px',
-            additionalClasses: 'no-margin',
-          })))))))));
+          .map(() => atoms.rectangle({ height: '1.5rem' }))), bordered && (h("div", { class: "skeleton-table-row-border" }, atoms.rectangle({
+        height: '1px',
+        additionalClasses: 'no-margin',
+      })))))))));
   },
   field: molecules.field,
   form: (counts) => {
@@ -70,12 +60,9 @@ export const shapes = {
   'detailed-item': (counts, modifiers) => {
     const isSquare = modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('square');
     const alignment = ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('center')) && 'center') || ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('right')) && 'right') || 'left';
-    return (h("div", { class: `skeleton-shape detailed-item flex ${alignment}` },
-      h("div", { class: `detailed-item-image flex-${alignment}` }, isSquare
-        ? atoms.rectangle({ width: '1.5em', height: '1.5em', borderRadius: '3px' })
-        : atoms.circle({ width: '1.5em' })),
-      h("div", { class: `detailed-item-text flex flex-v-center flex-${alignment}` },
-        h("div", null, molecules.text(counts, modifiers)))));
+    return (h("div", { class: `skeleton-shape detailed-item flex ${alignment}` }, h("div", { class: `detailed-item-image flex-${alignment}` }, isSquare
+      ? atoms.rectangle({ width: '1.5em', height: '1.5em', borderRadius: '3px' })
+      : atoms.circle({ width: '1.5em' })), h("div", { class: `detailed-item-text flex flex-v-center flex-${alignment}` }, h("div", null, molecules.text(counts, modifiers)))));
   },
   'label-value': (counts) => {
     var _a;

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