q2-tecton-elements 1.10.5 → 1.10.8

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

@@ -1,67 +1,67 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  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;
+  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;
+  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;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 :host {
@@ -83,6 +83,9 @@ button {
   box-shadow: var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));
   border-radius: var(--tct-message-border-radius, var(--t-message-border-radius, inherit));
 }
+.message:focus {
+  box-shadow: var(--const-global-focus);
+}
 
 .message-icon {
   width: 24px;

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

@@ -43,7 +43,7 @@ export class Q2Optgroup {
   static get is() { return "q2-optgroup"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]

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

@@ -1,89 +1,84 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  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;
+  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;
+  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;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
-
 :host {
-    display: block;
+  display: block;
 }
 
 .q2-optgroup-header {
-    background-color: var(
-        --tct-optgroup-header-bg,
-        var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6))))
-    );
-    padding: var(--tct-scale-1, var(--app-scale-1, 5px))
-        var(--tct-scale-2, var(--app-scale-2, 10px));
-    font-weight: var(--tct-optgroup-header-font-weight, 600);
-    text-transform: var(--tct-optgroup-header-text-transform, uppercase);
-    /*
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    z-index: 1;
+  background-color: var(--tct-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))));
+  padding: var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px));
+  font-weight: var(--tct-optgroup-header-font-weight, 600);
+  text-transform: var(--tct-optgroup-header-text-transform, uppercase);
+  /*
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1;
 
-    temp removal, will fix with TCT-804
-    */
-}
+  temp removal, will fix with TCT-804
+  */
+}

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

@@ -1,4 +1,4 @@
-import { Component, Prop, h, Event, Element, Watch, Fragment } from '@stencil/core';
+import { Component, Prop, h, Event, Element, Host } from '@stencil/core';
 export class Q2Option {
   constructor() {
     this.role = 'option';
@@ -12,35 +12,10 @@ export class Q2Option {
       this.click.emit();
     };
   }
-  connectedCallback() {
-    this.checkDisabledStatus();
-    this.checkSelectedStatus();
-    this.checkMultiSelectHiddenStatus();
-  }
-  checkDisabledStatus() {
-    const { disabled, disabledGroup, hostElement } = this;
-    const isDisabled = disabled || disabledGroup;
-    if (isDisabled)
-      hostElement.setAttribute('aria-disabled', 'true');
-    else
-      hostElement.removeAttribute('aria-disabled');
-  }
-  checkSelectedStatus() {
-    const { selected, hostElement } = this;
-    if (selected)
-      hostElement.setAttribute('aria-selected', 'true');
-    else
-      hostElement.removeAttribute('aria-selected');
-  }
-  checkMultiSelectHiddenStatus() {
-    const { _multiSelectHidden, hostElement } = this;
-    if (_multiSelectHidden)
-      hostElement.setAttribute('aria-hidden', 'true');
-    else
-      hostElement.removeAttribute('aria-hidden');
-  }
   render() {
-    return (h(Fragment, null,
+    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", onClick: this.onClick },
         h("slot", null))));
@@ -279,17 +254,4 @@ export class Q2Option {
       }
     }]; }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "disabled",
-      "methodName": "checkDisabledStatus"
-    }, {
-      "propName": "disabledGroup",
-      "methodName": "checkDisabledStatus"
-    }, {
-      "propName": "selected",
-      "methodName": "checkSelectedStatus"
-    }, {
-      "propName": "_multiSelectHidden",
-      "methodName": "checkMultiSelectHiddenStatus"
-    }]; }
 }

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

@@ -1,67 +1,67 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  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;
+  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;
+  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;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 :host {

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

@@ -1,5 +1,5 @@
 import { Component, Prop, h, Element, Listen, Watch, Event } from '@stencil/core';
-import { createGuid, handleAriaLabel, loc } from 'src/utils';
+import { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';
 export class Q2Radio {
   constructor() {
     this.disabled = false;
@@ -16,6 +16,9 @@ export class Q2Radio {
   componentWillLoad() {
     handleAriaLabel(this);
   }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
   ////////// OBSERVERS //////////
   ariaLabelObserver() {
     handleAriaLabel(this);
@@ -26,9 +29,14 @@ export class Q2Radio {
       event.stopImmediatePropagation();
     }
   }
+  delegateFocus(event) {
+    if (event.target === this.hostElement) {
+      this.inputField.focus();
+    }
+  }
   render() {
     return (h("div", { class: this.groupTileLayout ? 'radio-tile' : 'radio-container' },
-      h("input", { 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("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" }),
@@ -230,5 +238,11 @@ export class Q2Radio {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

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

@@ -1,67 +1,67 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  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;
+  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;
+  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;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 q2-radio {

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

@@ -1,5 +1,5 @@
 import { Component, Prop, Element, h, Listen, Event, Watch } from '@stencil/core';
-import { createGuid, loc } from 'src/utils';
+import { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2RadioGroup {
   constructor() {
     this.disabled = false;
@@ -26,6 +26,7 @@ export class Q2RadioGroup {
     observer.observe(this.hostElement, { childList: true });
     this.mutationObserver = observer;
     this.onMutationObserved();
+    overrideFocus(this.hostElement);
   }
   /////// OBSERVERS ///////
   valueUpdated() {
@@ -55,6 +56,13 @@ export class Q2RadioGroup {
       }
     }
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    const radio = this.hostElement.querySelector('q2-radio[checked]') ||
+      this.hostElement.querySelector('q2-radio');
+    radio === null || radio === void 0 ? void 0 : radio.dispatchEvent(new FocusEvent('focus'));
+  }
   render() {
     return (h("div", null,
       this.label || this.optional ? (h("div", { class: "group-legend" },
@@ -84,7 +92,7 @@ export class Q2RadioGroup {
   static get is() { return "q2-radio-group"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]
@@ -266,5 +274,11 @@ export class Q2RadioGroup {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }