q2-tecton-elements 1.23.0-alpha.0 → 1.24.0

package/dist/collection/components/q2-chart-bar/index.js

@@ -28,14 +28,14 @@ export class Q2ChartBar {
   componentDidLoad() {
     const chart = echarts.init(this.chartContainer);
     this.chart = chart;
-    this.resizeObserver = new ResizeObserver(() => this.resizeChart());
-    this.resizeObserver.observe(this.hostElement);
+    this.resizeEventListener = () => this.resizeChart();
+    window.addEventListener('resize', this.resizeEventListener);
     this.cacheComputedStyles();
     this.updateChart(chart);
     overrideFocus(this.hostElement);
   }
-  willDestroyElement() {
-    this.resizeObserver = null;
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.resizeEventListener);
   }
   cacheComputedStyles() {
     this.chartContainerStyles = getComputedStyle(this.chartContainer);

package/dist/collection/components/q2-chart-bar/styles.css

@@ -66,17 +66,14 @@ button {
 }
 
 :host {
-  position: relative;
-  width: 100%;
+  width: var(--tct-bar-chart-width, 100%);
+  height: var(--tct-bar-chart-height, 100%);
   display: block;
 }
 
 .container {
-  aspect-ratio: 1/1;
   width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  height: 100%;
 }
 
 .chart-container {

package/dist/collection/components/q2-chart-donut/index.js

@@ -87,7 +87,7 @@ export class Q2ChartDonut {
     this.chart = chart;
     overrideFocus(this.hostElement);
   }
-  willDestroyElement() {
+  disconnectedCallback() {
     this.resizeObserver = null;
   }
   /// Getters ///

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

@@ -350,8 +350,8 @@ export class Q2Checkbox {
           "text": ""
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "{ value: string; checked: boolean }",
+          "resolved": "{ value: string; checked: boolean; }",
           "references": {}
         }
       }];

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

@@ -198,6 +198,7 @@ label {
   height: 30px;
   width: var(--comp-checkbox-toggle-width);
   position: relative;
+  text-align: initial;
 }
 
 .toggle-track,

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

@@ -349,7 +349,7 @@ export class Q2Dropdown {
       },
       "ariaLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",

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

@@ -147,7 +147,7 @@ export class Q2Loading {
       },
       "label": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",

package/dist/collection/components/q2-loading/skeleton/q2-loading-element/styles.css

@@ -12,6 +12,10 @@ q2-loading-element {
   background-color: var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)));
 }
 
+.skeleton-shape.rectangle {
+  min-height: var(--tct-loading-skeleton-rectangle-min-height, 20px);
+}
+
 .skeleton-shape.circle {
   border-radius: 50%;
   padding-top: 100%;

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

@@ -179,6 +179,10 @@ button {
   background-color: var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)));
 }
 
+.skeleton-shape.rectangle {
+  min-height: var(--tct-loading-skeleton-rectangle-min-height, 20px);
+}
+
 .skeleton-shape.circle {
   border-radius: 50%;
   padding-top: 100%;

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

@@ -76,6 +76,6 @@ button {
   font-weight: var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));
   text-transform: var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));
   position: sticky;
-  top: var(--comp-multi-select-header-height, 0);
-  z-index: 1;
+  top: calc(var(--comp-multi-select-header-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));
+  z-index: 5;
 }

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

@@ -2,17 +2,14 @@ import { h, Host } from '@stencil/core';
 export class Q2Option {
   constructor() {
     this.role = 'option';
-    this.tabindex = '-1';
     this.display = undefined;
     this.value = undefined;
     this.disabled = undefined;
-    this.optionId = undefined;
     this.disabledGroup = undefined;
     this.selected = undefined;
     this.hidden = undefined;
     this.multiline = undefined;
     this.active = undefined;
-    this.noSelect = undefined;
     this._multiSelectHidden = false;
   }
   componentWillLoad() {
@@ -26,7 +23,7 @@ export class Q2Option {
   render() {
     const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
     const isDisabled = disabled || disabledGroup;
-    return (h(Host, { "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
+    return (h(Host, { tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
   }
   static get is() { return "q2-option"; }
   static get encapsulation() { return "shadow"; }
@@ -60,24 +57,6 @@ export class Q2Option {
         "reflect": true,
         "defaultValue": "'option'"
       },
-      "tabindex": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "tabindex",
-        "reflect": true,
-        "defaultValue": "'-1'"
-      },
       "display": {
         "type": "string",
         "mutable": true,
@@ -129,23 +108,6 @@ export class Q2Option {
         "attribute": "disabled",
         "reflect": true
       },
-      "optionId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "option-id",
-        "reflect": true
-      },
       "disabledGroup": {
         "type": "boolean",
         "mutable": false,
@@ -231,23 +193,6 @@ export class Q2Option {
         "attribute": "active",
         "reflect": true
       },
-      "noSelect": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "_no-select",
-        "reflect": true
-      },
       "_multiSelectHidden": {
         "type": "boolean",
         "mutable": false,

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

@@ -78,6 +78,13 @@ button {
   gap: var(--tct-scale-1, var(--app-scale-1x, 5px));
 }
 
+:host(:focus),
+:host(:hover),
+:host([active]) {
+  position: relative;
+  z-index: 1;
+}
+
 :host([multiline]) {
   --comp-padding: var(--app-scale-2, 10px) var(--app-scale-2, 10px);
   --comp-selected-icon-size: var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px));