q2-tecton-elements 1.25.1 → 1.26.0

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

@@ -9,6 +9,25 @@ import formatNumeric, { formatPercentage } from './formatting/numeric';
 import formatPostalCode from './formatting/postal';
 import formatDate from './formatting/date';
 import formatCreditCard from './formatting/credit-card';
+const inputTypeMap = {
+  text: 'text',
+  tel: 'tel',
+  number: 'number',
+  password: 'text',
+  search: 'search',
+  url: 'url',
+  email: 'email',
+  currency: 'text',
+  phone: 'tel',
+  ssn: 'text',
+  alphanumeric: 'text',
+  alpha: 'text',
+  numeric: 'text',
+  percentage: 'text',
+  postal: 'text',
+  date: 'text',
+  'credit-card': 'text',
+};
 export class Q2Input {
   constructor() {
     this.scheduledAfterRender = [];
@@ -100,11 +119,11 @@ export class Q2Input {
     this.ariaControls = undefined;
     this.role = undefined;
     this.ariaOwns = undefined;
-    this.ariaLabel = undefined;
     this.ariaHaspopup = undefined;
     this.ariaExpanded = undefined;
     this.ariaActivedescendant = undefined;
     this.current = undefined;
+    this.ariaLabel = undefined;
     this.errors = undefined;
     this.hints = undefined;
     this.formattedValueObject = undefined;
@@ -225,25 +244,6 @@ export class Q2Input {
     return classNames.join(' ');
   }
   get computedType() {
-    const inputTypeMap = {
-      text: 'text',
-      tel: 'tel',
-      number: 'number',
-      password: 'text',
-      search: 'search',
-      url: 'url',
-      email: 'email',
-      currency: 'text',
-      phone: 'tel',
-      ssn: 'text',
-      alphanumeric: 'text',
-      alpha: 'text',
-      numeric: 'text',
-      percentage: 'text',
-      postal: 'text',
-      date: 'text',
-      'credit-card': 'text',
-    };
     if (['password', 'text', 'ssn'].includes(this.type) && this.textHidden) {
       return 'password';
     }
@@ -362,7 +362,7 @@ export class Q2Input {
   }
   /* tslint:disable:cyclomatic-complexity */
   inputContainerDOM() {
-    return (h("div", { class: "input-container" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("span", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft })), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("q2-icon", { type: "error", class: "icon-error" }))), this.pseudo ? this.pseudoInputDOM() : this.standardInputDOM(), 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" }))), ['password', 'text', 'ssn'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.iconRight && !this.formattedValueObject.suffix && (h("q2-icon", { type: this.iconRight, class: "icon-right" })), this.hasError && this.type !== 'currency' && (h("q2-icon", { type: "error", class: "icon-error" })))));
+    return (h("div", { class: "input-container", tabindex: -1 }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("span", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft })), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("q2-icon", { type: "error", class: "icon-error" }))), this.pseudo ? this.pseudoInputDOM() : this.standardInputDOM(), 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" }))), ['password', 'text', 'ssn'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.iconRight && !this.formattedValueObject.suffix && (h("q2-icon", { type: this.iconRight, class: "icon-right" })), this.hasError && this.type !== 'currency' && (h("q2-icon", { type: "error", class: "icon-error" })))));
   }
   /* tslint:enable:cyclomatic-complexity */
   /* tslint:disable:cyclomatic-complexity */
@@ -371,7 +371,7 @@ export class Q2Input {
     const inputClasses = ['input-field'];
     if (hasCustomDisplaySlot)
       inputClasses.push('sr');
-    return (h(Fragment, null, hasCustomDisplaySlot && (h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }))), h("input", { class: inputClasses.join(' '), 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.computedAutocomplete, 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, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode })));
+    return (h(Fragment, null, hasCustomDisplaySlot && (h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }))), h("input", { class: inputClasses.join(' '), 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.computedAutocomplete, autocapitalize: this.autocapitalize, 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, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode })));
   }
   /* tslint:enable:cyclomatic-complexity */
   pseudoInputDOM() {
@@ -497,9 +497,13 @@ export class Q2Input {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "InputType",
+          "resolved": "\"alpha\" | \"alphanumeric\" | \"credit-card\" | \"currency\" | \"date\" | \"email\" | \"number\" | \"numeric\" | \"password\" | \"percentage\" | \"phone\" | \"postal\" | \"search\" | \"ssn\" | \"tel\" | \"text\" | \"url\"",
+          "references": {
+            "InputType": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -567,8 +571,8 @@ export class Q2Input {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'on' | 'off'",
+          "resolved": "\"off\" | \"on\"",
           "references": {}
         },
         "required": false,
@@ -618,9 +622,14 @@ export class Q2Input {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
+          "original": "Q2Icon['type']",
           "resolved": "string",
-          "references": {}
+          "references": {
+            "Q2Icon": {
+              "location": "import",
+              "path": "../q2-icon"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -635,9 +644,14 @@ export class Q2Input {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
+          "original": "Q2Icon['type']",
           "resolved": "string",
-          "references": {}
+          "references": {
+            "Q2Icon": {
+              "location": "import",
+              "path": "../q2-icon"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -857,9 +871,14 @@ export class Q2Input {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'primary' | 'secondary' | 'tertiary'",
+          "original": "Q2Badge['theme']",
           "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
-          "references": {}
+          "references": {
+            "Q2Badge": {
+              "location": "import",
+              "path": "../q2-badge"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -921,23 +940,6 @@ export class Q2Input {
         "attribute": "aria-owns",
         "reflect": false
       },
-      "ariaLabel": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "aria-label",
-        "reflect": true
-      },
       "ariaHaspopup": {
         "type": "string",
         "mutable": false,
@@ -1006,6 +1008,26 @@ export class Q2Input {
         "attribute": "current",
         "reflect": false
       },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": true
+      },
       "errors": {
         "type": "unknown",
         "mutable": false,

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

@@ -17,8 +17,8 @@ export class Q2Loading {
     this.modifiers = undefined;
     this.counts = undefined;
     this.label = undefined;
-    this.ariaLabel = undefined;
     this.inline = undefined;
+    this.ariaLabel = undefined;
   }
   get loader() {
     const loaderMap = {
@@ -81,8 +81,8 @@ export class Q2Loading {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'spinner' | 'skeleton'",
+          "resolved": "\"skeleton\" | \"spinner\"",
           "references": {}
         },
         "required": false,
@@ -162,12 +162,12 @@ export class Q2Loading {
         "attribute": "label",
         "reflect": true
       },
-      "ariaLabel": {
-        "type": "string",
+      "inline": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -176,24 +176,27 @@ export class Q2Loading {
           "tags": [],
           "text": ""
         },
-        "attribute": "aria-label",
+        "attribute": "inline",
         "reflect": true
       },
-      "inline": {
-        "type": "boolean",
-        "mutable": false,
+      "ariaLabel": {
+        "type": "string",
+        "mutable": true,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
           "text": ""
         },
-        "attribute": "inline",
+        "attribute": "aria-label",
         "reflect": true
       }
     };

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

@@ -156,7 +156,7 @@ q2-popover,
 .btn-primary {
   background: var(--comp-btn-background);
   border-width: var(--comp-pill-btn-border-width);
-  border-color: var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-gray-9, #999999)));
+  border-color: var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));
   padding-inline: var(--comp-btn-padding);
   padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));
   font-size: var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));

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

@@ -3,13 +3,19 @@ import { resizeIframe, waitForNextPaint } from 'src/utils';
 export class Q2Popover {
   constructor() {
     this.scheduledAfterRender = [];
+    /// Helpers ///
+    this.viewPortChanged = () => {
+      if (!this.open)
+        return;
+      this.determinePopDirection();
+    };
     this.direction = undefined;
     this.align = undefined;
     this.open = undefined;
     this.block = undefined;
     this.minHeight = undefined;
     this.controlElement = undefined;
-    this.privateDirection = 'down';
+    this.currentDirection = undefined;
     this.show = false;
   }
   /// Lifecycle hooks ///
@@ -23,6 +29,9 @@ export class Q2Popover {
       this.scheduledAfterRender = [];
     }, 25);
   }
+  disconnectedCallback() {
+    this.removeViewportListeners();
+  }
   /// Methods ///
   async toggle() {
     this.open = !this.open;
@@ -32,9 +41,18 @@ export class Q2Popover {
     this.popoverStateChanged.emit({ open });
     this.scheduledAfterRender.push(resizeIframe);
     if (open) {
+      this.addViewportListeners();
       this.determinePopDirection();
     }
     else {
+      this.removeViewportListeners();
+      // Reset currentDirection after close transition completes
+      this.containerElement.addEventListener('transitionend', () => {
+        if (this.open)
+          return;
+        this.currentDirection = undefined;
+        this.containerElement.style.removeProperty('--comp-pop-max-height');
+      }, { once: true });
       this.show = false;
     }
   }
@@ -46,17 +64,24 @@ export class Q2Popover {
     this.open = open;
     event.stopPropagation();
   }
+  addViewportListeners() {
+    // window.visualViewport.addEventListener('scroll', this.viewPortChanged);
+    window.visualViewport.addEventListener('resize', this.viewPortChanged);
+  }
+  removeViewportListeners() {
+    // window.visualViewport.removeEventListener('scroll', this.viewPortChanged);
+    window.visualViewport.removeEventListener('resize', this.viewPortChanged);
+  }
   async setDirectionAndShow(direction) {
     if (direction === 'up') {
       this.determinePopOffset();
     }
-    this.privateDirection = direction;
+    this.currentDirection = direction;
     this.show = true;
   }
-  /// Helpers ///
   async determinePopDirection() {
-    var _a, _b, _c, _d, _e;
-    const { containerElement, contentElement, direction, controlElement } = this;
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { containerElement, contentElement, direction, controlElement, currentDirection } = this;
     if (containerElement)
       containerElement.style.maxHeight = null;
     // If direction defined, use it
@@ -71,32 +96,46 @@ export class Q2Popover {
       height: 0,
     };
     const contentHeight = contentElement.clientHeight;
-    const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) || 0;
-    const innerHeight = ((_e = (_d = window.Tecton) === null || _d === void 0 ? void 0 : _d.platformDimensions) === null || _e === void 0 ? void 0 : _e.innerHeight) || window.innerHeight;
+    const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) ||
+      ((_d = window.visualViewport) === null || _d === void 0 ? void 0 : _d.offsetTop) || // Only Android Chrome provides this which we need when scrolled
+      0;
+    const innerHeight = ((_f = (_e = window.Tecton) === null || _e === void 0 ? void 0 : _e.platformDimensions) === null || _f === void 0 ? void 0 : _f.innerHeight) || ((_g = window.visualViewport) === null || _g === void 0 ? void 0 : _g.height) || window.innerHeight;
     const bottomOffset = scrollY + innerHeight - topOffset - height;
     const canShowFullSizeBelow = bottomOffset > contentHeight;
-    const canShowFullSizeAbove = contentHeight <= topOffset || !this.minHeight;
+    const canShowFullSizeAbove = contentHeight <= topOffset;
     let determinedDirection;
     // Show the full-size popover below or above if it will fit
-    if (canShowFullSizeBelow)
+    if (currentDirection === 'down' && canShowFullSizeBelow)
+      return this.setDirectionAndShow('down');
+    else if (currentDirection === 'up' && canShowFullSizeAbove)
+      return this.setDirectionAndShow('up');
+    else if (currentDirection === undefined && canShowFullSizeBelow)
       determinedDirection = 'down';
-    else if (canShowFullSizeAbove)
+    else if (currentDirection === undefined && canShowFullSizeAbove)
       determinedDirection = 'up';
     if (determinedDirection)
       return this.setDirectionAndShow(determinedDirection);
-    // If full size will not fit and minHeight is set, then make as tall as possible
+    // If full size will not fit then make it as tall as possible
     const { minHeight = 150 } = this;
     const displayBuffer = 5;
-    const canShowSmallBelow = bottomOffset >= minHeight + displayBuffer;
+    const canShowMinHeightBelow = bottomOffset >= minHeight + displayBuffer;
     let maxHeight;
-    if (canShowSmallBelow) {
+    if (currentDirection === 'down') {
       maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
       determinedDirection = 'down';
     }
-    else {
+    else if (currentDirection === 'up') {
       maxHeight = Math.max(topOffset - displayBuffer, minHeight);
       determinedDirection = 'up';
     }
+    else if (canShowMinHeightBelow) {
+      maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
+      determinedDirection = 'down';
+    }
+    else {
+      maxHeight = Math.max(topOffset - scrollY - displayBuffer, minHeight);
+      determinedDirection = 'up';
+    }
     containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);
     return this.setDirectionAndShow(determinedDirection);
   }
@@ -108,7 +147,7 @@ export class Q2Popover {
   }
   /// DOM ///
   render() {
-    const containerClasses = ['container', this.privateDirection];
+    const containerClasses = ['container', this.currentDirection];
     if (this.show)
       containerClasses.push('show');
     return (h("div", { ref: el => (this.containerElement = el), class: containerClasses.join(' '), role: "menu" }, h("div", { ref: el => (this.contentElement = el), class: "content" }, h("slot", null))));
@@ -235,7 +274,7 @@ export class Q2Popover {
   }
   static get states() {
     return {
-      "privateDirection": {},
+      "currentDirection": {},
       "show": {}
     };
   }

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

@@ -94,7 +94,7 @@ button {
   box-shadow: var(--tct-popover-box-shadow, var(--t-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
   text-align: start;
   left: 0;
-  transition: opacity var(--app-tween-1, 0.2s ease);
+  transition: opacity var(--app-tween-1, 0.2s ease), max-height var(--app-tween-1, 0.2s ease);
   border-radius: var(--tct-popover-border-radius, var(--t-popover-border-radius, 0));
   max-height: var(--comp-pop-max-height);
   --comp-scrollbar-size: var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));

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

@@ -2,7 +2,7 @@ import { h } from '@stencil/core';
 import { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';
 export class Q2Radio {
   constructor() {
-    this.id = `radio-${createGuid()}`;
+    this._id = `radio-${createGuid()}`;
     this.isLoaded = false;
     this.inputChange = (event) => {
       event.stopPropagation();
@@ -20,10 +20,10 @@ export class Q2Radio {
     this.disabled = false;
     this.checked = false;
     this.name = undefined;
-    this.ariaLabel = undefined;
     this.groupDisabled = false;
     this.groupReadonly = false;
     this.groupTileLayout = false;
+    this.ariaLabel = undefined;
   }
   ////////// LIFECYCLE HOOKS ////////
   componentWillLoad() {
@@ -57,7 +57,7 @@ export class Q2Radio {
     }
   }
   render() {
-    return (h("div", { class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { ref: el => (this.inputField = el), class: "sr", id: this.id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { htmlFor: this.id, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { viewBox: "0 0 18 18" }, h("circle", { stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", null))))));
+    return (h("div", { class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { htmlFor: this._id, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { viewBox: "0 0 18 18" }, h("circle", { stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", null))))));
   }
   static get is() { return "q2-radio"; }
   static get encapsulation() { return "shadow"; }
@@ -92,7 +92,7 @@ export class Q2Radio {
       },
       "hideLabel": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -177,23 +177,6 @@ export class Q2Radio {
         "attribute": "name",
         "reflect": true
       },
-      "ariaLabel": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "aria-label",
-        "reflect": true
-      },
       "groupDisabled": {
         "type": "boolean",
         "mutable": false,
@@ -247,6 +230,26 @@ export class Q2Radio {
         "attribute": "group-tile-layout",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": true
       }
     };
   }

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

@@ -91,7 +91,7 @@ button {
 }
 .radio-container circle:nth-child(1) {
   stroke-width: 2;
-  stroke: var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
+  stroke: var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));
 }
 .radio-container input:focus + label svg {
   box-shadow: var(--const-double-focus-ring);
@@ -101,7 +101,7 @@ button {
 }
 .radio-container input:checked + label circle:nth-child(1) {
   background-color: var(--tct-radio-checked-bg, transparent);
-  stroke: var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
+  stroke: var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));
 }
 .radio-container input:checked + label .label-content {
   font-weight: var(--tct-checkbox-selected-font-weight, 600);
@@ -119,7 +119,7 @@ button {
 .radio-tile label[for] {
   align-items: center;
   border-radius: 3px;
-  border: 2px solid var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
+  border: 2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));
   cursor: pointer;
   display: block;
   padding: 10px;
@@ -129,16 +129,16 @@ button {
   white-space: nowrap;
 }
 .radio-tile input:focus + label, .radio-tile input:focus:checked + label {
-  border-color: #0079c1;
+  border-color: var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));
   box-shadow: var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);
 }
 .radio-tile input:checked + label {
-  border-color: var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e));
+  border-color: var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));
   box-shadow: inset 0 0 0 2px #ffffff;
 }
 .radio-tile input:checked + label:after {
   border-bottom-width: 3px;
-  border-bottom: 5px solid #0079c1;
+  border-bottom: 5px solid var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));
   border-left-width: 5px;
   border-left: 8px solid transparent;
   border-right-width: 5px;