q2-tecton-elements 1.10.4 → 1.10.7

package/dist/collection/components/q2-stepper/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 {
@@ -88,9 +88,9 @@ ul {
   padding: var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));
   margin: 0;
   gap: var(--comp-step-gap);
-  --comp-scrollbar-size: var(--tct-scrollbar-size, var(--app-scale-1x, 5px));
-  --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--app-border-radius-1, 3px));
-  --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-a11y-gray-color, #747474));
+  --comp-scrollbar-size: var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));
+  --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));
+  --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));
   scrollbar-width: thin;
   scrollbar-color: var(--comp-scrollbar-color) transparent;
 }

package/dist/collection/components/q2-stepper-pane/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-tab-container/index.js

@@ -1,8 +1,6 @@
 import { Component, Prop, Element, Event, State, Listen, Watch, h, Fragment } from '@stencil/core';
-import { createGuid, loc, addSmoothScrollPolyfill } from 'src/utils';
+import { createGuid, loc, addSmoothScrollPolyfill, overrideFocus, isEventFromElement } from 'src/utils';
 addSmoothScrollPolyfill();
-const userAgent = navigator.userAgent.toLowerCase();
-const isFirefox = userAgent.includes('firefox');
 export class Q2TabContainer {
   constructor() {
     this.noPrint = false;
@@ -141,12 +139,11 @@ export class Q2TabContainer {
   onResize() {
     this.checkScrollState();
   }
-  onFocus() {
-    // firefox receives focus on overflowed element even if it's not interactive element
-    if (isFirefox) {
-      const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);
-      this.moveFocus(index);
-    }
+  onFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);
+    this.moveFocus(index);
   }
   ///////// Lifecycle Hooks /////////
   componentWillLoad() {
@@ -164,6 +161,7 @@ export class Q2TabContainer {
   componentDidLoad() {
     this.resizeObserver.observe(this.listElement);
     this.checkScrollState();
+    overrideFocus(this.hostElement);
     const index = this.tabs.findIndex(el => el.value === this.value);
     this.scheduledAfterRender.push(() => {
       const tab = this.moveFocus(Math.max(index, 0), false);

package/dist/collection/components/q2-tab-container/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-tab-pane/index.js

@@ -1,13 +1,13 @@
 import { Component, Prop, h } from '@stencil/core';
 export class Q2TabPane {
   render() {
-    return (h("div", { id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-expanded": `${!!this.selected}`, "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` },
+    return (h("div", { id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` },
       h("slot", null)));
   }
   static get is() { return "q2-tab-pane"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]

package/dist/collection/components/q2-tab-pane/styles.css

@@ -1,76 +1,74 @@
 * {
-    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;
 }
 
-
-.tab-pane[aria-hidden='true'] {
-    display: none;
+.tab-pane[aria-hidden=true] {
+  display: none;
 }
 
 .tab-pane:focus {
-    outline: none;
-    box-shadow: none;
-}
-
+  outline: none;
+  box-shadow: none;
+}

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

@@ -1,5 +1,5 @@
 import { Component, Prop, Event, Element, State, h, Watch, Listen } from '@stencil/core';
-import { createGuid, labelDOM, loc, messagesDOM, setMessageHeight } from 'src/utils';
+import { createGuid, isEventFromElement, labelDOM, loc, messagesDOM, overrideFocus, setMessageHeight } from 'src/utils';
 export class Q2Textarea {
   constructor() {
     this.scheduledAfterRender = [];
@@ -92,6 +92,9 @@ export class Q2Textarea {
     this.scheduledAfterRender.forEach(fn => fn());
     this.scheduledAfterRender = [];
   }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
   get hasError() {
     return Array.isArray(this.errors) && this.errors.length > 0;
   }
@@ -142,9 +145,10 @@ export class Q2Textarea {
     this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));
   }
   ///////// HOST ELEMENT EVENTS //////
-  onHostElementFocus() {
+  onHostElementFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
     this.textareaField.focus();
-    this.textareaField.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
   }
   onHostElementChange(event) {
     if (event.target === this.hostElement && !this.hostElement.onchange) {
@@ -198,7 +202,7 @@ export class Q2Textarea {
   static get is() { return "q2-textarea"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]