q2-tecton-elements 1.10.4 → 1.10.7

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();
@@ -102,12 +103,6 @@ export class Q2Section {
     const animateClass = this.animating ? ' animate' : '';
     return `q2-section-wrapper${collapsibleClass}${stateClass}${headerClass}${animateClass}`;
   }
-  get btnLabel() {
-    const label = loc(this.label);
-    return this.expanded
-      ? `${loc('tecton.element.section.collapse')} ${label}`
-      : `${loc('tecton.element.section.expand')} ${label}`;
-  }
   get slottedContentHeight() {
     const content = this.contentContainer;
     return `${content.offsetHeight || 0}px`;
@@ -133,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) {
@@ -158,16 +158,16 @@ export class Q2Section {
           !this.hasYieldedHeader && !!this.label ? (h("h2", { class: "title" }, loc(this.label))) : (''),
           h("div", { class: "q2-section-header-slot-wrapper" },
             h("slot", { name: "q2-section-header" }))),
-        this.collapsible && !this.noCollapseIcon ? (h("q2-btn", { class: `q2-section-content-toggle ${this.expanded ? 'expanded' : 'collapsed'}`, label: this.btnLabel, ariaExpanded: !!this.expanded, ariaControls: this.contentId, ariaHasPopup: true, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick },
+        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"]
@@ -276,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;
+}