q2-tecton-elements 1.13.0 → 1.14.0

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

@@ -0,0 +1,140 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-global-focus);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.sr,
+.sr button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+:host {
+  position: relative;
+  aspect-ratio: 1/1;
+  width: 100%;
+}
+
+.chart-container {
+  aspect-ratio: 1/1;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  --comp-color-1: var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));
+  --comp-color-2: var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));
+  --comp-color-3: var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));
+  --comp-color-4: var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));
+  --comp-color-5: var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));
+  --comp-color-6: var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));
+  --comp-color-7: var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));
+  --comp-color-8: var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));
+  --comp-color-9: var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));
+  --comp-color-10: var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));
+  --comp-color-11: var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));
+  --comp-color-12: var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)));
+}
+
+.chart-container,
+.center-card {
+  --comp-background-color: var(--tct-chart-donut-border-color, var(--t-chart-donut-border-color, var(--t-base, #ffffff)));
+}
+
+button {
+  --comp-button-vertical-padding: var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1, 5px)));
+  transition: box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));
+  padding: var(--comp-button-vertical-padding) 0;
+}
+button:active {
+  box-shadow: var(--const-global-focus), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
+}
+button:hover {
+  box-shadow: var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
+}
+button:focus {
+  box-shadow: var(--const-global-focus), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
+}
+
+.center-card {
+  width: 60%;
+  text-align: center;
+  color: var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));
+  margin-inline: auto;
+  display: block;
+  margin-top: 50%;
+  position: relative;
+  transform: translateY(-50%);
+}
+.center-card:is(button) {
+  cursor: pointer;
+  background: var(--comp-background-color);
+  border: 0;
+  border-radius: var(--tct-chart-donut-button-border-radius, var(--t-chart-donut-button-border-radius, var(--app-border-radius-1, 3px)));
+}
+
+q2-icon {
+  --t-icon-size: var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));
+  margin-bottom: var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px)));
+}
+
+.name {
+  font-size: var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px));
+}
+
+.value {
+  font-size: var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px));
+}

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

@@ -18,12 +18,6 @@ export class Q2Checkbox {
       });
       this.inputElement.focus();
     };
-    this.onControlClick = (event) => {
-      event.stopPropagation();
-      if (this.readonly)
-        return;
-      this.inputElement.click();
-    };
     this.onKeyDown = (event) => {
       if (this.readonly && event.code === 'Space') {
         event.preventDefault();
@@ -54,22 +48,26 @@ export class Q2Checkbox {
   }
   /////// View Methods ///////
   render() {
-    return (h("div", { class: "checkbox-container" },
-      h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, "test-id": "q2CheckboxInnerCheckBox", onKeyDown: this.onKeyDown, onClick: this.onInputClick }),
-      h("label", { htmlFor: this.id, "test-id": "checkboxButton" },
-        this.generateCheckboxSVG(),
-        !this.hideLabel && (h("div", { class: "q2-checkbox-label-content" },
-          h("span", { class: "label-text", onClick: this.onControlClick }, loc(this.label)),
-          h("slot", null))))));
+    const textLabelClasses = ['label-text'];
+    if (this.hideLabel)
+      textLabelClasses.push('sr');
+    return (h("div", { class: "container" },
+      h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-label": this.label ? loc(this.label) : undefined, "aria-describedby": this.description ? 'description' : undefined, "test-id": "q2CheckboxInnerCheckBox", onKeyDown: this.onKeyDown, onClick: this.onInputClick }),
+      h("label", { htmlFor: this.id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()),
+      h("div", { class: textLabelClasses.join(' ') },
+        h("label", { "test-id": "checkboxLabel", htmlFor: this.id },
+          loc(this.label),
+          h("slot", null))),
+      this.description && (h("div", { class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
   }
   generateCheckboxSVG() {
     if (this.type === 'favorite') {
-      return (h("q2-icon", { type: "star", class: "checkbox-icon", onClick: this.onControlClick }));
+      return (h("q2-icon", { type: "star", class: "checkbox-icon" }));
     }
     if (this.type === 'toggle') {
       return this.generateToggleSVG();
     }
-    return (h("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 20 20", class: "checkbox-icon", focusable: "false", onClick: this.onControlClick },
+    return (h("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 20 20", class: "checkbox-icon", focusable: "false" },
       h("rect", { x: "1", y: "1", width: "18", height: "18", rx: "3" }),
       (this.checked || this.indeterminate) && this.generateCheckBoxSVGFill()));
   }
@@ -80,7 +78,7 @@ export class Q2Checkbox {
     return (h("polyline", { class: "checkbox-fill checked-fill", points: "5 11 8.5 14.5 15 6" }));
   }
   generateToggleSVG() {
-    return (h("div", { class: "toggle-svg", onClick: this.onControlClick },
+    return (h("div", { class: "toggle-svg" },
       h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 46 14", class: "toggle-track" },
         h("rect", { width: "36", height: "14", rx: "7", x: "5" })),
       h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 30 30", class: "toggle-indicator" },
@@ -319,6 +317,23 @@ export class Q2Checkbox {
       },
       "attribute": "alignment",
       "reflect": true
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": true
     }
   }; }
   static get events() { return [{

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

@@ -66,205 +66,177 @@ button {
 
 :host {
   display: block;
-  padding: var(--tct-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px))) 0;
-}
-
-label {
-  display: flex;
+  position: relative;
+  padding: var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))) 0;
+}
+
+.container {
+  --comp-checkbox-size: var(--tct-checkbox-size, var(--t-checkbox-size, 20px));
+  --comp-checkbox-default-gap: 0 var(--app-scale-2x, 10px);
+  --comp-checkbox-tween: var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+  --comp-checkbox-toggle-width: var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));
+  --comp-checkbox-gap: var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));
+  --comp-checkbox-outer-stroke-color: var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
+  --comp-checkbox-outer-fill-color: var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));
+  --comp-checkbox-checked-color: var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040)))))));
+  --comp-control-width: var(--comp-checkbox-size);
+  display: grid;
+  grid-template-areas: "svg label" "svg description";
   align-items: center;
-  --comp-checkbox-outer-stroke-color: var(
-      --tct-checkbox-outer-stroke-color,
-      var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))
-  );
-  --comp-checkbox-outer-fill-color: var(
-      --tct-checkbox-outer-fill-color,
-      var(--tct-white, var(--app-white, #ffffff))
-  );
-  --comp-checkbox-checked-color: var(
-      --tct-checkbox-check-stroke-color,
-      var(
-          --t-checkbox-fill,
-          var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))
-      )
-  );
+  gap: var(--comp-checkbox-gap);
+  grid-template-columns: var(--comp-control-width) 1fr;
 }
-
-input:disabled + label {
-  opacity: var(--tct-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
+:host([type=favorite]) .container {
+  --comp-checkbox-favorite-stroke-color: var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
+  --comp-checkbox-favorite-fill-color: var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))));
 }
-
-.checkbox-icon {
-  height: var(--tct-checkbox-size, 20px);
-  width: var(--tct-checkbox-size, 20px);
-  border-radius: var(--tct-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));
-  stroke: var(--comp-checkbox-outer-stroke-color);
-  color: var(--comp-checkbox-outer-stroke-color);
-  --t-icon-stroke-primary: var(--comp-checkbox-outer-stroke-color);
-  stroke-width: var(--tct-checkbox-outer-stroke-width, 2);
-  fill: var(--comp-checkbox-outer-fill-color);
-  flex-shrink: 0;
+:host([type=toggle]) .container {
+  --comp-control-width: var(--comp-checkbox-toggle-width);
 }
-
-.checkbox-icon, .label-text {
-  cursor: pointer;
+:host([alignment=right]) .container, :host([type=toggle]:not([alignment])) .container {
+  grid-template-areas: "label svg" "description svg";
+  grid-template-columns: 1fr var(--comp-control-width);
 }
 
-input:focus + label .checkbox-icon {
-  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));
+.label-control {
+  align-items: center;
+  display: flex;
 }
 
-.checkbox-fill {
-  stroke: var(--comp-checkbox-checked-color);
+.label-text {
+  grid-area: label;
 }
-
-input:checked + label .checkbox-icon {
-  fill: var(--tct-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color));
-  stroke: var(--tct-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));
+:host([description]) .label-text {
+  font-weight: var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600));
 }
-
-input:focus + label .checkbox-icon {
-  stroke: var(--tct-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color));
+:host([checked]) .label-text {
+  font-weight: var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600));
 }
 
-.checked-fill {
-  stroke-width: var(--tct-checkbox-check-stroke-width, 2.5);
-  stroke-linecap: round;
-  stroke-linejoin: round;
+.description-text {
+  grid-area: description;
+  font-weight: var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400));
 }
 
-.indeterminate-fill {
-  stroke-width: var(--tct-checkbox-indeterminate-stroke-width, 3.5);
+label {
+  cursor: pointer;
 }
 
-.q2-checkbox-label-content {
-  font-weight: var(--tct-checkbox-font-weight, 400);
-  width: calc(100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px)));
-  cursor: inherit;
+:host([disabled]),
+:host([group-disabled]) {
+  opacity: var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
 }
 
-input:checked + label .q2-checkbox-label-content {
-  font-weight: var(--tct-checkbox-selected-font-weight, 600);
-  letter-spacing: var(--tct-checkbox-selected-letter-spacing, 0.25);
+.checkbox-icon {
+  --t-icon-stroke-primary: var(--comp-checkbox-outer-stroke-color);
+  width: var(--comp-checkbox-size);
+  height: var(--comp-checkbox-size);
+  border-radius: var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
+  stroke: var(--comp-checkbox-outer-stroke-color);
+  color: var(--comp-checkbox-outer-stroke-color);
+  stroke-width: var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));
+  fill: var(--comp-checkbox-outer-fill-color);
+  flex-shrink: 0;
 }
-
-:host([type=favorite]) {
-  --scoped-checkbox-favorite-stroke-color: var(
-      --tct-checkbox-favorite-stroke-color,
-      var(--t-textA, rgba(77, 77, 77, 0.77))
-  );
-  --scoped-checkbox-favorite-fill-color: var(
-      --tct-checkbox-favorite-fill-color,
-      var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))
-  );
+:host([checked]) .checkbox-icon {
+  fill: var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));
+  stroke: var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));
+}
+:host(:focus-within) .checkbox-icon {
+  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));
+  stroke: var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));
 }
-
 :host([type=favorite]) .checkbox-icon {
-  --tct-icon-stroke-width: var(--tct-checkbox-favorite-stroke-width, 1);
-  --tct-icon-stroke-primary: var(--scoped-checkbox-favorite-stroke-color);
-  width: var(--tct-checkbox-size, 20px);
-  height: var(--tct-checkbox-size, 20px);
-  transition: fill var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), stroke var(--tct-tween-2, var(--app-tween-2, 0.4s ease));
+  --tct-icon-stroke-width: var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));
+  --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);
+  transition: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);
 }
-
-:host([type=favorite]:focus-within) input + label .checkbox-icon,
-:host([type=favorite]:hover) input + label .checkbox-icon {
-  --tct-icon-stroke-primary: var(--scoped-checkbox-favorite-fill-color);
-  --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, 2);
+:host([type=favorite]:focus-within) .checkbox-icon, :host([type=favorite]:hover) .checkbox-icon {
+  --tct-icon-stroke-primary: var(--comp-checkbox-favorite-fill-color);
+  --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2));
 }
-
-:host([type=favorite]) input:checked + label .checkbox-icon {
-  --tct-icon-stroke-primary: var(--scoped-checkbox-favorite-fill-color);
-  fill: var(--scoped-checkbox-favorite-fill-color);
-  transition: fill var(--tct-tween-1, var(--app-tween-1, 0.2s ease)), color var(--tct-tween-1, var(--app-tween-1, 0.2s ease)), stroke var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+:host([checked][type=favorite]) .checkbox-icon {
+  --tct-icon-stroke-primary: var(--comp-checkbox-favorite-fill-color);
+  fill: var(--comp-checkbox-favorite-fill-color);
+  transition: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);
 }
-
-:host([type=favorite]:focus-within) input:checked + label .checkbox-icon,
-:host([type=favorite]:hover) input:checked + label .checkbox-icon {
-  --tct-icon-stroke-primary: var(--scoped-checkbox-favorite-stroke-color);
+:host([checked][type=favorite]:focus-within) .checkbox-icon, :host([checked][type=favorite]:hover) .checkbox-icon {
+  --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);
+  --tct-icon-fill-primary: var(--comp-checkbox-favorite-fill-color);
+  --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2));
 }
 
-:host([alignment=right]) label,
-:host([type=toggle]:not([alignment=left])) label {
-  flex-flow: row-reverse;
+.checkbox-fill {
+  stroke: var(--comp-checkbox-checked-color);
 }
 
-.checkbox-icon,
-:host([type=toggle][alignment=left]) .toggle-svg {
-  margin-right: var(--tct-scale-2, var(--app-scale-2, 10px));
-  margin-left: 0;
+.checked-fill {
+  stroke-width: var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+:host([type=toggle]) .checked-fill {
+  stroke: var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));
+  transition: opacity var(--comp-checkbox-tween);
+}
+:host([type=toggle][checked]) .checked-fill {
+  stroke: var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))));
 }
 
-:host([alignment=right]) .checkbox-icon,
-.toggle-svg {
-  cursor: pointer;
-  margin-right: 0;
-  margin-left: var(--tct-scale-2, var(--app-scale-2, 10px));
+.indeterminate-fill {
+  stroke-width: var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5));
 }
 
-:host([type=toggle]) .toggle-svg {
+.toggle-svg {
   height: 30px;
-  width: 46px;
+  width: var(--comp-checkbox-toggle-width);
   position: relative;
 }
 
-:host([type=toggle]) .toggle-track,
-:host([type=toggle]) .toggle-indicator {
+.toggle-track,
+.toggle-indicator {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
 }
 
-:host([type=toggle]) .toggle-track {
-  fill: var(--tct-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
+.toggle-track {
+  fill: var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
   height: 14px;
   width: 46px;
 }
-
-:host([type=toggle]) input:checked + label .toggle-track {
-  fill: var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));
+:host([checked]) .toggle-track {
+  fill: var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));
   opacity: 0.5;
 }
 
-:host([type=toggle]) .toggle-indicator {
-  transition: left var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+.toggle-indicator {
+  transition: left var(--comp-checkbox-tween);
   height: 30px;
   width: 30px;
   left: 0;
   border-radius: 50%;
 }
-
-:host([type=toggle]) input:checked + label .toggle-indicator {
+:host([checked]) .toggle-indicator {
   left: 21px;
 }
 
-:host([type=toggle]) .toggle-circle {
-  fill: var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))));
-}
-
-:host([type=toggle]) input:checked + label .toggle-circle {
-  fill: var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));
+.toggle-circle {
+  fill: var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));
 }
-
-:host([type=toggle]) input:checked + label .off,
-:host([type=toggle]) input:not(:checked) + label .on {
-  opacity: 0;
+:host([checked]) .toggle-circle {
+  fill: var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));
 }
-
-:host([type=toggle]) input:focus + label .toggle-circle {
-  stroke: var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));
+:host(:focus-within) .toggle-circle {
+  stroke: var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));
   stroke-width: 10px;
   stroke-opacity: 0.5;
 }
-
-:host([type=toggle]) input:not(:checked):focus + label .toggle-circle {
-  stroke: var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))));
-}
-
-:host([type=toggle]) .checked-fill {
-  stroke: var(--tct-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff)));
-  transition: opacity var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+:host(:not([checked]):focus-within) .toggle-circle {
+  stroke: var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));
 }
 
-:host([type=toggle]) input:checked + label .checked-fill {
-  stroke: var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff))));
+:host([checked]) .off,
+:host(:not([checked])) .on {
+  opacity: 0;
 }

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

@@ -252,7 +252,7 @@ export class Q2Dropdown {
   render() {
     const btnProps = this.toggleButtonProps;
     return (h("click-elsewhere", { class: `dropdown-container${this.dropdownOpen ? ' dropdown-open' : ''}`, onChange: this.onClickElsewhere },
-      h("q2-btn", { ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton" }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' },
+      h("q2-btn", { ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' },
         h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null,
         this.icon ? h("q2-icon", { type: this.icon }) : ' ',
         this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))),
@@ -457,6 +457,23 @@ export class Q2Dropdown {
       },
       "attribute": "resolved-type",
       "reflect": true
+    },
+    "block": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "block",
+      "reflect": true
     }
   }; }
   static get states() { return {

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

@@ -118,6 +118,11 @@ button {
   right: 0;
 }
 
+:host([block]) q2-btn,
+:host([block]) {
+  display: block;
+}
+
 :host {
   display: inline-flex;
 }

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

@@ -288,7 +288,7 @@ export class Q2Input {
         this.computedIconLeft && (h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft })),
         this.showIconSeperator && h("div", { class: "vertical-separator" }),
         this.hasError && this.type === 'currency' && (h("q2-icon", { type: "error", class: "icon-error" }))),
-      this.pseudo ? (this.pseudoInputDOM()) : (h("input", { class: "input-field", id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, max: this.max, min: this.min, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": this.hideLabel && this.label ? loc(this.label) : undefined, autocomplete: this.autocomplete ? this.autocomplete : 'off', autocapitalize: this.autocapitalize === 'on' ? 'on' : 'off', autocorrect: this.autocorrect === 'on' ? 'on' : 'off', placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste })),
+      this.pseudo ? (this.pseudoInputDOM()) : (h("input", { class: "input-field", id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": this.hideLabel && this.label ? loc(this.label) : undefined, autocomplete: this.autocomplete ? this.autocomplete : 'off', autocapitalize: this.autocapitalize === 'on' ? 'on' : 'off', autocorrect: this.autocorrect === 'on' ? 'on' : 'off', placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste })),
       h("div", { class: "input-icons-container-right" },
         this.canClear && (h("q2-btn", { class: "btn-clear", ariaLabel: loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput },
           h("q2-icon", { type: "close", class: "icon-clear" }))),
@@ -649,6 +649,23 @@ export class Q2Input {
       "attribute": "max",
       "reflect": true
     },
+    "step": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "step",
+      "reflect": true
+    },
     "formatModifier": {
       "type": "string",
       "mutable": false,

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

@@ -15,7 +15,7 @@ export class Q2Pagination {
       if (!this.hostElement.onchange) {
         this.page = page;
       }
-      this.change.emit({ value: page });
+      this.change.emit({ page });
     };
   }
   ////////// LIFECYCLE HOOKS ////////