q2-tecton-elements 1.11.0-alpha.0 → 1.11.0

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

@@ -7,7 +7,7 @@ export class Q2Checkbox {
     ///// Actions ////////
     this.onInputChange = (event) => {
       event.stopPropagation();
-      if (this.disabled)
+      if (this.disabled || this.readonly)
         return;
       if (!(event.target instanceof HTMLInputElement))
         return;
@@ -19,8 +19,15 @@ export class Q2Checkbox {
     };
     this.onControlClick = (event) => {
       event.stopPropagation();
+      if (this.readonly)
+        return;
       this.inputElement.click();
     };
+    this.onKeyDown = (event) => {
+      if (this.readonly && event.code === 'Space') {
+        event.preventDefault();
+      }
+    };
   }
   ////////// LIFECYCLE HOOKS ////////
   componentWillLoad() {
@@ -31,7 +38,10 @@ export class Q2Checkbox {
   }
   //////// Host Element Events ////////
   defaultChangeHandler(event) {
-    if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {
+    if (!this.readonly &&
+      event.target === this.hostElement &&
+      !this.hostElement.onchange &&
+      !!event.detail) {
       this.checked = event.detail.checked;
     }
   }
@@ -47,7 +57,7 @@ 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", onChange: this.onInputChange }),
+      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, onChange: this.onInputChange }),
       h("label", { "test-id": "checkboxButton" },
         this.generateCheckboxSVG(),
         !this.hideLabel && (h("div", { class: "q2-checkbox-label-content" },
@@ -210,6 +220,23 @@ export class Q2Checkbox {
       "attribute": "disabled",
       "reflect": true
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true
+    },
     "value": {
       "type": "string",
       "mutable": false,

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

@@ -138,7 +138,7 @@ input:focus + label .checkbox-icon {
 
 .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)));
+  width: calc( 100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px)) );
   cursor: inherit;
 }
 

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

@@ -3,6 +3,7 @@ import { createGuid, loc } from 'src/utils';
 export class Q2CheckboxGroup {
   constructor() {
     this.disabled = false;
+    this.readonly = false;
     this.optional = false;
     this.hasError = false;
     this.id = `checkbox-group-${createGuid()}`;
@@ -39,6 +40,8 @@ export class Q2CheckboxGroup {
     }
   }
   valueUpdated() {
+    if (this.readonly)
+      return;
     this.checkboxElements.forEach(check => {
       if (this.protectedValue.hasOwnProperty(check.value)) {
         check.checked = this.value[check.value];
@@ -130,6 +133,24 @@ export class Q2CheckboxGroup {
       "reflect": true,
       "defaultValue": "false"
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "optional": {
       "type": "boolean",
       "mutable": false,

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

@@ -146,14 +146,14 @@ button {
 
 q2-btn[color=primary] ~ .q2-element-dropdown.dropup,
 q2-btn[intent=workflow-primary] ~ .q2-element-dropdown.dropup {
-  bottom: calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0)));
+  bottom: calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-primary-border-width), 0) );
 }
 
 q2-btn[color=secondary] ~ .q2-element-dropdown.dropup,
 q2-btn[intent=workflow-secondary] ~ .q2-element-dropdown.dropup {
-  bottom: calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0)));
+  bottom: calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-secondary-border-width), 0) );
 }
 
 q2-btn[intent=neutral] ~ .q2-element-dropdown.dropup {
-  bottom: calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0)));
+  bottom: calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-neutral-border-width), 0) );
 }

package/dist/collection/components/q2-icon/icons.js

@@ -163,6 +163,16 @@ const icons = {
     markup: () => (h("g", null,
       h("path", { d: "M13 2C6.986 2 2.11 6.559 2.11 12.182c0 3.2 1.579 6.054 4.046 7.92V24l3.716-2.062c.991.278 2.04.427 3.128.427 6.014 0 10.89-4.559 10.89-10.183C23.89 6.56 19.013 2 13 2zm1.147 13.655l-2.816-2.926-5.424 2.999 5.946-6.31 2.816 2.926 5.424-3-5.946 6.31z", class: "filled" })))
   },
+  'brand-payrecs-color': {
+    markup: () => (h("g", { "fill-rule": "evenodd" },
+      h("path", { fill: "#194879", d: "M9.27-347v-6.29h3.17c1.99 0 3.27.01 3.43.02.97.06 1.8.25 2.55.59 1.21.55 2.08 1.53 2.43 2.74.27.96.25 2.09-.06 2.99-.03.1-.12.3-.19.43-.38.78-1 1.42-1.81 1.86-.07.04-.12.07-.12.08 0 0 .59.88 1.31 1.93.72 1.06 1.31 1.93 1.31 1.94s-1.02.01-2.25.01h-2.25l-1.07-1.58-1.07-1.58H13.5v3.16H9.27v-6.3zm6.01-.08c.36-.03.64-.1.86-.23.06-.03.17-.12.25-.21.13-.13.16-.17.23-.31.09-.19.12-.3.15-.53.04-.38-.04-.77-.22-1.05-.17-.26-.39-.42-.72-.52-.29-.09-.32-.09-1.36-.1l-.96-.01v2.96h.79c.43.02.87.01.98 0z", transform: "translate(4 360)" }),
+      h("path", { fill: "#508dca", d: "M-3.3-383v-6.29h3.14c1.86 0 3.25.01 3.41.02 2.48.14 4.21 1.18 4.92 2.97.37.93.42 2.14.13 3.15-.27.92-.86 1.75-1.64 2.29-.67.47-1.49.79-2.44.94-.59.1-.96.12-2.25.12H.92v3.1H-3.3v-6.3zm6.26-.1c.48-.09.81-.28 1.02-.6.17-.25.23-.5.21-.91-.01-.3-.03-.44-.13-.63-.22-.47-.63-.71-1.31-.77-.1-.01-.55-.02-1.01-.02H.92v2.96l.95-.01c.8.01.96 0 1.09-.02z", transform: "translate(4 396)" })))
+  },
+  'brand-payrecs-filled': {
+    markup: () => (h("g", { class: "filled" },
+      h("path", { d: "M9.27-347v-6.29h3.17c1.99 0 3.27.01 3.43.02.97.06 1.8.25 2.55.59 1.21.55 2.08 1.53 2.43 2.74.27.96.25 2.09-.06 2.99-.03.1-.12.3-.19.43-.38.78-1 1.42-1.81 1.86-.07.04-.12.07-.12.08 0 0 .59.88 1.31 1.93.72 1.06 1.31 1.93 1.31 1.94s-1.02.01-2.25.01h-2.25l-1.07-1.58-1.07-1.58H13.5v3.16H9.27v-6.3zm6.01-.08c.36-.03.64-.1.86-.23.06-.03.17-.12.25-.21.13-.13.16-.17.23-.31.09-.19.12-.3.15-.53.04-.38-.04-.77-.22-1.05-.17-.26-.39-.42-.72-.52-.29-.09-.32-.09-1.36-.1l-.96-.01v2.96h.79c.43.02.87.01.98 0z", transform: "translate(4 360)" }),
+      h("path", { d: "M-3.3-383v-6.29h3.14c1.86 0 3.25.01 3.41.02 2.48.14 4.21 1.18 4.92 2.97.37.93.42 2.14.13 3.15-.27.92-.86 1.75-1.64 2.29-.67.47-1.49.79-2.44.94-.59.1-.96.12-2.25.12H.92v3.1H-3.3v-6.3zm6.26-.1c.48-.09.81-.28 1.02-.6.17-.25.23-.5.21-.91-.01-.3-.03-.44-.13-.63-.22-.47-.63-.71-1.31-.77-.1-.01-.55-.02-1.01-.02H.92v2.96l.95-.01c.8.01.96 0 1.09-.02z", transform: "translate(4 396)" })))
+  },
   'brand-snapchat-color': {
     markup: () => (h("g", { fill: "none", "fill-rule": "evenodd" },
       h("g", null,

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, "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, "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" }))),
@@ -299,10 +299,15 @@ export class Q2Input {
   }
   pseudoInputDOM() {
     const showPlaceholder = !this.value && !!this.placeholder;
-    return (h("button", { class: "pseudo-input input-field", type: "button", id: this.inputId, "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.value}, ${(this.label && loc(this.label)) || ''}${(this
-        .optional &&
-        loc('tecton.element.input.optional')) ||
-        ''}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" },
+    let ariaLabelSuffix = '';
+    if (this.optional) {
+      ariaLabelSuffix = loc('tecton.element.input.optional');
+    }
+    if (this.readonly) {
+      ariaLabelSuffix = loc('tecton.element.input.readonly');
+    }
+    return (h("button", { class: "pseudo-input input-field", type: "button", id: this.inputId, "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.value}, ${(this.label && loc(this.label)) ||
+        ''}${ariaLabelSuffix}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" },
       h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value)));
   }
   calculateCursorPositionOnInput() {
@@ -610,6 +615,40 @@ export class Q2Input {
       "attribute": "optional",
       "reflect": true
     },
+    "min": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min",
+      "reflect": true
+    },
+    "max": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max",
+      "reflect": true
+    },
     "formatModifier": {
       "type": "string",
       "mutable": false,
@@ -815,6 +854,23 @@ export class Q2Input {
       "attribute": "aria-activedescendant",
       "reflect": false
     },
+    "current": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'",
+        "resolved": "\"date\" | \"false\" | \"location\" | \"page\" | \"step\" | \"time\" | \"true\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current",
+      "reflect": false
+    },
     "errors": {
       "type": "unknown",
       "mutable": false,

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

@@ -128,7 +128,7 @@ label {
       3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)
   );
   --comp-input-icon-clearance: 34px;
-  --comp-input-min-height: 44px;
+  --comp-input-min-height: var(--tct-input-min-height, 44px);
   border-width: var(--comp-input-border-width);
   border-style: solid;
   border-color: var(--tct-input-border-color, var(--t-input-border-color, var(--tct-gray-11, var(--t-gray-11, #cccccc))));
@@ -153,6 +153,8 @@ label {
   padding: 0 var(--tct-input-horizontal-padding, var(--t-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));
   background-color: transparent;
   color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));
+  display: inline-block;
+  text-align: var(--tct-input-align, "start");
   /* To remove up/down arrow in number field for webkit based browser */
   /* For Firefox */
 }
@@ -167,6 +169,12 @@ label {
 .input-field[type=number] {
   -moz-appearance: textfield;
 }
+.input-field::-ms-clear {
+  display: none;
+}
+.input-field[type=search]::-webkit-search-decoration, .input-field[type=search]::-webkit-search-cancel-button, .input-field[type=search]::-webkit-search-results-button, .input-field[type=search]::-webkit-search-results-decoration {
+  display: none;
+}
 .input-field[disabled] {
   cursor: not-allowed;
 }
@@ -180,17 +188,7 @@ label {
   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));
 }
 
-input {
-  display: inline-block;
-}
-input::-ms-clear {
-  display: none;
-}
-input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
-  display: none;
-}
-
-input::placeholder,
+.input-field::placeholder,
 .placeholder-text {
   color: var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))));
 }
@@ -249,13 +247,8 @@ q2-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: calc(
-        var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) -
-            var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px))
-    );
-  height: calc(
-        var(--tct-input-height, var(--t-input-height, 44px)) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px))
-    );
+  min-height: calc( var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px)) );
+  height: calc( var(--tct-input-height, var(--t-input-height, 44px)) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px)) );
   font-size: var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));
   color: var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));
   background-color: var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))));
@@ -263,23 +256,15 @@ q2-icon {
 }
 
 .input-prefix {
-  border-top-left-radius: calc(
-        var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))
-    );
-  border-bottom-left-radius: calc(
-        var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))
-    );
+  border-top-left-radius: calc( var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px)) );
+  border-bottom-left-radius: calc( var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px)) );
   pointer-events: none;
   /* used to allow iOS voiceover to display keyboard in input TCT-1194 */
 }
 
 .input-suffix {
-  border-top-right-radius: calc(
-        var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))
-    );
-  border-bottom-right-radius: calc(
-        var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))
-    );
+  border-top-right-radius: calc( var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px)) );
+  border-bottom-right-radius: calc( var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px)) );
 }
 
 .icon-error {

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

@@ -125,7 +125,7 @@ button {
   width: 100%;
   height: 100%;
   border-radius: 100%;
-  border: 0.0833333333em solid transparent;
+  border: calc(1em / 12) solid transparent;
 }
 
 .half-circle-spinner .circle.circle-1 {

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

@@ -0,0 +1,277 @@
+import { Component, State, Prop, h, Listen, Element, Event } from '@stencil/core';
+import { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';
+export class Q2Pagination {
+  constructor() {
+    this.handlePageChange = (page) => {
+      const { totalPages, inputField } = this;
+      if (page < 1) {
+        page = 1;
+      }
+      else if (page > totalPages) {
+        page = totalPages;
+      }
+      if (inputField.value !== `${page}`)
+        inputField.value = `${page}`;
+      if (!this.hostElement.onchange) {
+        this.page = page;
+      }
+      this.change.emit({ value: page });
+    };
+  }
+  ////////// LIFECYCLE HOOKS ////////
+  componentDidLoad() {
+    if (this.recordsOnly || this.pagesOnly)
+      return;
+    this.containerWidth = this.containerElement.clientWidth;
+    this.resizeObserver = new ResizeObserver(() => this.checkSize());
+    this.resizeObserver.observe(this.hostElement);
+    overrideFocus(this.hostElement);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  onHostElementFocus(event) {
+    var _a;
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    const { isFullViewHidden, containerElement, inputField } = this;
+    if (isFullViewHidden) {
+      (_a = containerElement.querySelector('q2-btn:not([disabled])')) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    else {
+      inputField.focus();
+    }
+  }
+  get isFullViewHidden() {
+    return this.isSmall || this.recordsOnly || this.pagesOnly;
+  }
+  get pageWithDefault() {
+    return this.page || 1;
+  }
+  get perPageWithDefault() {
+    return this.perPage || 10;
+  }
+  get totalWithDefault() {
+    return this.total || 0;
+  }
+  get recordTypeWithDefault() {
+    return this.recordType || loc('tecton.element.pagination.defaultRecordType');
+  }
+  get currentRange() {
+    const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;
+    const start = (page - 1) * perPage + 1;
+    const end = Math.min(page * perPage, total);
+    return `${start} - ${end}`;
+  }
+  get totalPages() {
+    const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;
+    if (pagesOnly && pages && !isNaN(parseInt(`${pages}`)))
+      return pages;
+    return Math.ceil(total / perPage);
+  }
+  checkSize() {
+    const { hostElement, containerElement } = this;
+    const isOverflowing = this.containerWidth > hostElement.clientWidth;
+    this.isSmall = isOverflowing;
+    if (isOverflowing)
+      return;
+    nextPaint(() => {
+      const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;
+      if (containerWidthHasNotChanged)
+        return;
+      this.containerWidth = containerElement.clientWidth;
+      this.checkSize();
+    });
+  }
+  ////////// OBSERVERS //////////
+  render() {
+    const { pagesOnly, isFullViewHidden, recordTypeWithDefault: recordType, totalPages, totalWithDefault: total, pageWithDefault: page, currentRange } = this;
+    const onFirstPage = page === 1;
+    const onLastPage = page === totalPages;
+    return (h("nav", { class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') },
+      h("div", { class: "description", "test-id": "description" }, pagesOnly
+        ? loc('tecton.element.pagination.pages', {
+          current: page,
+          total: totalPages
+        })
+        : loc('tecton.element.pagination.description', {
+          range: currentRange,
+          recordType: recordType.toLowerCase(),
+          total: total.toLocaleString()
+        })),
+      h("div", { class: "btn-group" },
+        h("q2-btn", { label: "tecton.element.pagination.goToFirstPage", disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true },
+          h("q2-icon", { type: "chevron-double-left" })),
+        h("q2-btn", { label: loc('tecton.element.pagination.goToPage', [page - 1]), disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true },
+          h("q2-icon", { type: "chevron-left" }))),
+      h("div", { class: "controls", hidden: isFullViewHidden, "test-id": "controls" },
+        h("span", { "aria-hidden": "true" }, loc('tecton.element.pagination.page')),
+        h("div", { class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) },
+          h("q2-input", { type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [
+              totalPages.toLocaleString()
+            ])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })),
+        h("span", { "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))),
+      h("div", { class: "btn-group" },
+        h("q2-btn", { label: loc('tecton.element.pagination.goToPage', [page + 1]), disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true },
+          h("q2-icon", { type: "chevron-right" })),
+        h("q2-btn", { label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true },
+          h("q2-icon", { type: "chevron-double-right" })))));
+  }
+  static get is() { return "q2-pagination"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "recordType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "record-type",
+      "reflect": false
+    },
+    "perPage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "per-page",
+      "reflect": false
+    },
+    "total": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "total",
+      "reflect": true
+    },
+    "page": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "page",
+      "reflect": true
+    },
+    "pages": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pages",
+      "reflect": true
+    },
+    "recordsOnly": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "records-only",
+      "reflect": true
+    },
+    "pagesOnly": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pages-only",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "isSmall": {}
+  }; }
+  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 listeners() { return [{
+      "name": "focus",
+      "method": "onHostElementFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}