q2-tecton-elements 1.10.5 → 1.10.8

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

@@ -1,138 +1,133 @@
 * {
-    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 {
-    margin-top: var(--tct-scale-2, var(--app-scale-2, 10px));
+  margin-top: var(--tct-scale-2, var(--app-scale-2, 10px));
 }
 
 fieldset {
-    padding: 0;
-    margin: 0;
-    border: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
 }
 
 fieldset.has-error {
-    border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));
-    border-width: 1px;
-    border-style: solid;
-    border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));
-    position: relative;
+  border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));
+  position: relative;
 }
 
 fieldset.has-error .error-icon-container {
-    top: 8px;
-    right: 8px;
-    position: absolute;
-    width: 40%;
-    text-align: right;
-    background: linear-gradient(to right, transparent, white);
+  top: 8px;
+  right: 8px;
+  position: absolute;
+  width: 40%;
+  text-align: right;
+  background: linear-gradient(to right, transparent, white);
 }
 
 fieldset.has-error legend + div.error-icon-container.no-label {
-    top: 28px;
+  top: 28px;
 }
 
 .group-legend {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 legend.sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    border: 0;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  border: 0;
 }
 
 .optional-tag {
-    margin-left: var(
-        --tct-input-label-optional-margin-left,
-        var(--tct-scale-1, var(--app-scale-1, 5px))
-    );
-    color: var(
-        --tct-input-label-optional-font-color,
-        var(--tct-a11y-color, var(--t-a11y-gray-color, #767676))
-    );
-    font-size: var(--tct-input-label-optional-font-size, 12px);
-    font-weight: var(--tct-input-label-optional-font-weight, 400);
+  margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px)));
+  color: var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, #767676)));
+  font-size: var(--tct-input-label-optional-font-size, 12px);
+  font-weight: var(--tct-input-label-optional-font-weight, 400);
 }
 
 .flexed {
-    margin: 0;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
 }
+
 .flexed.left {
-    justify-content: left;
+  justify-content: left;
 }
+
 .flexed.right {
-    justify-content: right;
-}
+  justify-content: right;
+}

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

@@ -1,5 +1,5 @@
 import { Component, Prop, Element, Listen, State, Watch, h, Event } from '@stencil/core';
-import { createGuid, loc } from 'src/utils';
+import { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2Section {
   constructor() {
     this.hasYieldedHeader = false;
@@ -89,6 +89,7 @@ export class Q2Section {
   componentDidLoad() {
     this.addHeaderSlotListener();
     this.addContentSlotListener();
+    overrideFocus(this.hostElement);
   }
   disconnectedCallback() {
     this.removeHeaderSlotListener();
@@ -127,6 +128,11 @@ export class Q2Section {
       this.expanded = event.detail.expanded;
     }
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.contentContainer.focus();
+  }
   //////// Observers //////////
   expandedObserver() {
     if (this.collapsible) {
@@ -155,13 +161,13 @@ export class Q2Section {
         this.collapsible && !this.noCollapseIcon ? (h("q2-btn", { class: `q2-section-content-toggle ${this.expanded ? 'expanded' : 'collapsed'}`, label: this.label, ariaExpanded: !!this.expanded, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick },
           h("q2-icon", { type: "chevron-up", class: "toggle-icon" }))) : ('')),
       h("div", { class: "q2-section-content-wrapper", id: this.contentId, "aria-labelledby": this.titleId, role: "region", onAnimationStart: this.onAnimationStart, onAnimationEnd: this.onAnimationEnd },
-        h("div", { class: "q2-section-content" },
+        h("div", { class: "q2-section-content", tabindex: "-1" },
           h("slot", null)))));
   }
   static get is() { return "q2-section"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]
@@ -270,5 +276,11 @@ export class Q2Section {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

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

@@ -1,166 +1,166 @@
 * {
-    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;
 }
 
 @keyframes expandVertical {
-    0% {
-        height: 0;
-    }
+  0% {
+    height: 0;
+  }
 }
-
 @keyframes collapseVertical {
-    100% {
-        height: 0;
-    }
+  100% {
+    height: 0;
+  }
 }
-
 :host {
-    display: block;
-    background-color: var(--tct-section-bg, var(--t-section-bg, var(--tct-white, var(--app-white, #ffffff))));
-    color: var(--tct-section-font-color, var(--t-section-font-color, #2e2e2e));
-    border-radius: var(--tct-section-border-radius, var(--t-section-border-radius, 3px));
-    margin: var(--tct-scale-3, var(--app-scale-3, 15px));
+  display: block;
+  background-color: var(--tct-section-bg, var(--t-section-bg, var(--tct-white, var(--app-white, #ffffff))));
+  color: var(--tct-section-font-color, var(--t-section-font-color, #2e2e2e));
+  border-radius: var(--tct-section-border-radius, var(--t-section-border-radius, 3px));
+  margin: var(--tct-scale-3, var(--app-scale-3, 15px));
 }
 
 @media screen and (max-width: 767px) {
-    :host {
-        margin: var(--tct-scale-3, var(--app-scale-3, 15px)) 0;
-    }
+  :host {
+    margin: var(--tct-scale-3, var(--app-scale-3, 15px)) 0;
+  }
 }
-
 .q2-section-wrapper {
-    display: block;
-    padding: var(--tct-scale-1, var(--app-scale-1, 5px)) 0;
+  display: block;
+  padding: var(--tct-scale-1, var(--app-scale-1, 5px)) 0;
 }
 
 .q2-section-wrapper:hover {
-    box-shadow: var(--tct-section-wrapper-hover-box-shadow, inherit);
+  box-shadow: var(--tct-section-wrapper-hover-box-shadow, inherit);
 }
 
 .q2-section-header {
-    padding: 0 var(--tct-scale-3, var(--app-scale-3, 15px));
-    display: flex;
+  padding: 0 var(--tct-scale-3, var(--app-scale-3, 15px));
+  display: flex;
 }
 
 .has-header .q2-section-header {
-    min-height: 44px;
+  min-height: 44px;
 }
 
 .q2-section-header-content {
-    flex: 1 1 100%;
-    min-width: 0;
-    align-self: center;
+  flex: 1 1 100%;
+  min-width: 0;
+  align-self: center;
 }
 
 .collapsible .q2-section-header-content {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .title {
-    /* Need access to typography in elements */
-    margin: 0;
-    font-size: 20px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+  /* Need access to typography in elements */
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 .toggle-icon {
-    transition: transform var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+  transition: transform var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
 }
 
 .collapsed .toggle-icon {
-    transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 
 .q2-section-content-wrapper {
-    height: auto;
+  height: auto;
 }
 
 .q2-section-content {
-    padding: var(--tct-scale-2, var(--app-scale-2, 10px))
-        var(--tct-scale-3, var(--app-scale-3, 15px));
+  padding: var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-3, var(--app-scale-3, 15px));
+}
+
+.q2-section-content:focus {
+  box-shadow: none;
 }
 
 .expanded.animate .q2-section-content-wrapper {
-    animation: expandVertical var(--tct-tween-2, var(--app-tween-2, 0.4s ease)) forwards;
+  animation: expandVertical var(--tct-tween-2, var(--app-tween-2, 0.4s ease)) forwards;
 }
 
 .collapsed .q2-section-content-wrapper {
-    height: 0;
-    animation: collapseVertical 0s forwards;
-    animation-duration: 0;
-    padding-top: 0;
-    visibility: hidden;
-    overflow: hidden;
+  height: 0;
+  animation: collapseVertical 0s forwards;
+  animation-duration: 0;
+  padding-top: 0;
+  visibility: hidden;
+  overflow: hidden;
 }
 
 .collapsed.animate .q2-section-content-wrapper {
-    animation: collapseVertical var(--tct-tween-1, var(--app-tween-1, 0.2s ease)) forwards;
+  animation: collapseVertical var(--tct-tween-1, var(--app-tween-1, 0.2s ease)) forwards;
 }
 
 .animate .q2-section-content-wrapper {
-    overflow: hidden;
-}
+  overflow: hidden;
+}