q2-tecton-elements 1.10.4 → 1.10.7

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

@@ -1,132 +1,194 @@
-.q2-carousel-pagination-navigation-wrapper {
-    display: flex;
-    justify-content: center;
-    margin: .5rem 0;
+* {
+  box-sizing: border-box;
 }
 
-.q2-carousel-pagination-navigation-wrapper.evenly-space {
-  display: flex;
-  justify-content: space-between;
+*:active {
+  outline: none;
 }
 
-.q2-carousel-pagination-navigation-wrapper .q2-carousel-control-center-tray {
-  display: flex;
+*:focus {
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
-q2-carousel button {
-  border: 0;
-  background: transparent;
-  transition: all .2s;
-  opacity: 0.3;
+:host {
+  box-shadow: none !important;
 }
 
-q2-carousel button:hover {
-    opacity: 0.7;
-    cursor: pointer;
+::-moz-focus-inner {
+  border: none;
 }
 
-.q2-carousel-navigation-button {
-    border: 0;
-    background: transparent;
-    transition: all .2s;
-    opacity: 0.3;
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
 }
 
-.q2-carousel-navigation-button.hide-carousel-navigation-button {
-  opacity: 0;
-  pointer-events: none;
+: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;
 }
 
-.q2-carousel-navigation-button.hide-carousel-navigation-button:hover {
-  cursor: default;
+.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;
 }
 
-.q2-carousel-content-staging {
+.hidden {
   display: none;
 }
 
-.q2-carousel-swiper-wrapper.compact {
-  overflow: visible;
+:host([hidden]) {
+  display: none;
 }
 
-.q2-carousel-swiper-container.compact q2-btn {
-  margin-top: 4px;
+.invisible {
+  visibility: hidden;
 }
 
-.q2-carousel-pagination {
-    margin-top: 10px;
-    height: 12px;
-    display: flex;
-    align-content: center;
-    justify-content: center;
+button {
+  border: 0;
+  background: transparent;
+  transition: all 0.2s;
+  opacity: 0.3;
+  cursor: pointer;
+}
+button:hover {
+  opacity: 0.7;
 }
 
-.q2-carousel-pagination.dynamic .q2-carousel-page-indicator {
-  display: none;
+q2-carousel {
+  display: flex;
+  flex-direction: column-reverse;
 }
 
-.q2-carousel-pagination .q2-carousel-page-indicator {
-    display: inline-block;
-    height: 12px;
-    width: 12px;
-    border-radius: 50%;
-    background-color: var(---tct-carousel-pagination-inactive-color, var(--tct-gray-11, var(--t-gray-11,  var(--tct-grayl1, var(--app-gray-l1,#CCCCCC)))));
-    margin-right: .5rem;
-    padding: 0;
-    border: 0;
-    transition: all .5s;
-    opacity: 0.7;
+.swiper-container {
+  --comp-container-padding: var(--app-scale-1x, 5px) 0 var(--app-scale-2x, 10px);
+  display: block;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: hidden;
+  padding: var(--tct-carousel-container-padding, var(--t-carousel-container-padding, var(--comp-container-padding, 5px 0 10px)));
 }
 
-.q2-carousel-pagination .q2-carousel-page-indicator:hover {
-    cursor: pointer;
-    background-color: var(---tct-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2)));
-    opacity: 1;
+.insufficient-pane-feedback {
+  text-align: center;
+  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
+  background-color: var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff))));
+  border: var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 1px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
+  border-radius: var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));
+  padding: var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 0.5rem 0.5rem 0.5rem 0.5rem));
+  min-height: 10em;
+}
+.insufficient-pane-feedback.content-peek-display {
+  max-width: 395px;
+  margin: 0 auto;
+}
+.insufficient-pane-feedback .insufficient-panes-header,
+.insufficient-pane-feedback .insufficient-panes-body {
+  text-align: center;
+}
+.insufficient-pane-feedback .insufficient-panes-header strong {
+  font-weight: 600;
+}
+.insufficient-pane-feedback .insufficient-panes-body {
+  margin: 0 auto 2rem auto;
+  max-width: 75%;
+}
+.insufficient-pane-feedback .insufficient-panes-icon-wrapper {
+  display: flex;
+  justify-content: center;
+  margin: 1rem 0 2rem 0;
+}
+.insufficient-pane-feedback .insufficient-panes-icon-wrapper q2-icon {
+  width: 38px;
 }
 
-.q2-carousel-pagination .q2-carousel-page-indicator.active-page {
-    display: inline-block;
-    background-color: var(---tct-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2)));
+.q2-carousel-pagination-navigation-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.q2-carousel-pagination-navigation-wrapper.evenly-space {
+  justify-content: space-between;
 }
 
-.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent {
-    display: inline-block;
-    height: 10px;
-    width: 10px;
+.q2-carousel-control-center-tray {
+  display: flex;
+  align-items: center;
 }
 
-.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent-adjacent {
-    display: inline-block;
-    height: 8px;
-    width: 8px;
+.q2-carousel-swiper-wrapper.compact {
+  overflow: visible;
+}
+.q2-carousel-swiper-wrapper.compact q2-btn {
+  margin-top: 4px;
 }
 
-.q2-carousel-swiper-container .sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
+.q2-carousel-pagination {
+  height: 12px;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.q2-carousel-pagination .q2-carousel-page-indicator {
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  border-radius: 50%;
+  background-color: var(--tct-carousel-pagination-inactive-color, var(--t-carousel-pagination-inactive-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
   padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  transition: all 0.5s;
+  opacity: 0.7;
 }
-
-q2-carousel .swiper-container {
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-  overflow: hidden;
-  list-style: none;
-  padding: 5px 0 0 0;
-  /* Fix of Webkit flickering */
-  z-index: 1;
+.q2-carousel-pagination .q2-carousel-page-indicator:hover {
+  background-color: var(--tct-carousel-pagination-active-color, var(--t-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2))));
+  opacity: 1;
 }
-
-q2-carousel .swiper-container:focus {
-    box-shadow: none;
+.q2-carousel-pagination .q2-carousel-page-indicator.active-page {
+  display: inline-block;
+  background-color: var(--tct-carousel-pagination-active-color, var(--t-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2))));
+}
+.q2-carousel-pagination.dynamic .q2-carousel-page-indicator {
+  display: none;
+}
+.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent {
+  display: inline-block;
+  height: 10px;
+  width: 10px;
+}
+.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent-adjacent {
+  display: inline-block;
+  height: 8px;
+  width: 8px;
 }
 
+.q2-carousel-swiper-container {
+  /** CONTENT PEEKING **/
+  /** FULL-WIDTH PANES **/
+}
 .q2-carousel-swiper-container .swiper-wrapper {
   position: relative;
   width: 100%;
@@ -136,75 +198,10 @@ q2-carousel .swiper-container:focus {
   transition-property: transform;
   box-sizing: content-box;
 }
-
-q2-carousel .swiper-slide-invisible-blank {
-  visibility: hidden;
-}
-
-/* a11y */
-q2-carousel .swiper-container .swiper-notification {
-  position: absolute;
-  left: 0;
-  top: 0;
-  pointer-events: none;
-  opacity: 0;
-  z-index: -1000;
-}
-
-/** CONTENT PEEKING **/
 .q2-carousel-swiper-container.content-peek-display .q2-carousel-pane:not(.swiper-slide-active) {
   transform: scale(0.9);
 }
-
-/** FULL-WIDTH PANES **/
-.q2-carousel-swiper-container.full-width-display  {
-  padding: 5px;
-}
-
-/** INSUFFICIENT CONTENT **/
-.q2-carousel-swiper-container.swiper-container.insufficient-panes .q2-carousel-swiper-wrapper,
-.q2-carousel-swiper-container.swiper-container.insufficient-panes .q2-carousel-pagination-navigation-wrapper {
-  display: none;
-}
-
-q2-carousel .insufficient-pane-feedback { 
-  text-align: center; 
-} 
-  
-q2-carousel .insufficient-pane-feedback.content-peek-display {  
-  max-width: 395px; 
-  margin: 0 auto; 
-} 
-  
-q2-carousel .insufficient-panes-header, 
-q2-carousel .insufficient-panes-body {  
-  text-align: center; 
-} 
-  
-q2-carousel .insufficient-panes-header strong { 
-  font-weight: 600; 
-} 
-  
-q2-carousel .insufficient-pane-feedback { 
-  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);  
-  background-color: var(---tct-carousel-background-color, var(--tct-white, var(--app-white, #ffffff))); 
-  border: var(--tct-carousel-pane-border-width, 1px) solid var(--tct-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-grayl1, #CCCCCC)))));  
-  border-radius: var(--tct-carousel-pane-border-radius, 8px); 
-  padding: var(--tct-carousel-pane-padding, .5rem .5rem .5rem .5rem); 
-  min-height: 10em; 
-} 
-  
-q2-carousel .insufficient-panes-icon-wrapper {  
-  display: flex;  
-  justify-content: center;  
-  margin: 1rem 0 2rem 0;  
-} 
-  
-q2-carousel .insufficient-panes-icon-wrapper q2-icon {  
-  width: 38px;  
-} 
-  
-q2-carousel .insufficient-pane-feedback .insufficient-panes-body {  
-  margin: 0 auto 2rem auto; 
-  max-width: 75%; 
-}
+.q2-carousel-swiper-container.full-width-display {
+  --comp-container-padding: var(--app-scale-1x, 5px) var(--app-scale-2x, 10px) var(--app-scale-2x, 10px);
+  padding: var(--tct-carousel-full-width-container-padding, var(--t-carousel-full-width-container-padding, var(--comp-container-padding, 5px 10px 10px)));
+}

package/dist/collection/components/q2-carousel-pane/index.js

@@ -1,29 +1,65 @@
-import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { Component, Event, Element, Host, Watch, Prop, h } from '@stencil/core';
 import { loc } from 'src/utils';
 export class Q2Carousel {
   constructor() {
     this.generatePaneClass = (currentIndex) => {
       return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;
     };
+    this.paneClicked = event => {
+      if (this.isActivePane)
+        return;
+      event.preventDefault();
+      this.clickCarouselPane.emit({
+        paneIndex: this.index,
+        pane: this.hostElement
+      });
+    };
   }
   get currentPaneIndex() {
     return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);
   }
+  componentDidLoad() {
+    this.determineDisabledContent();
+  }
+  determineDisabledContent() {
+    const { isActivePane } = this;
+    const focusableElements = this.hostElement.querySelectorAll('q2-btn, a[href], button, [tabindex]:not([tabindex="-1"])');
+    focusableElements.forEach(element => {
+      const hasValidTabIndex = element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;
+      if (hasValidTabIndex) {
+        element.dataset.q2Tabindex = `${element.tabIndex}`;
+      }
+      if (isActivePane) {
+        if (element.hasAttribute('data-q2-tabindex')) {
+          element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));
+          element.removeAttribute('data-q2-tabindex');
+        }
+        else if (element.tagName.startsWith('Q2-')) {
+          element.tabIndex = undefined;
+        }
+        else {
+          element.removeAttribute('tabindex');
+        }
+      }
+      else {
+        element.tabIndex = -1;
+      }
+    });
+  }
   render() {
-    return (h(Host, { class: this.generatePaneClass(this.currentPaneIndex), tabIndex: "0", "aria-hidden": this.hideFromScreenReader, "aria-label": this.label },
+    const { label } = this;
+    return (h(Host, { class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        ? loc(label)
+        : loc('tecton.element.carousel.itemDescription', [
+          (this.currentPaneIndex + 1).toString(),
+          (this.siblingCount || 0).toString()
+        ]), onClick: this.paneClicked },
       h("article", { class: "q2-carousel-pane-main-content" },
-        h("slot", null),
-        h("span", { class: "sr-only item-count" },
-          loc('tecton.element.carousel.itemDescription', [
-            (this.currentPaneIndex + 1).toString()
-          ]),
-          loc('tecton.element.carousel.collectionDescription', [
-            (this.siblingCount || 0).toString()
-          ])))));
+        h("slot", null))));
   }
   static get is() { return "q2-carousel-pane"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]
@@ -63,23 +99,6 @@ export class Q2Carousel {
       "attribute": "sibling-count",
       "reflect": false
     },
-    "hideFromScreenReader": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hide-from-screen-reader",
-      "reflect": true
-    },
     "isActivePane": {
       "type": "boolean",
       "mutable": false,
@@ -115,5 +134,25 @@ export class Q2Carousel {
       "reflect": true
     }
   }; }
+  static get events() { return [{
+      "method": "clickCarouselPane",
+      "name": "clickCarouselPane",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "isActivePane",
+      "methodName": "determineDisabledContent"
+    }]; }
 }

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

@@ -1,30 +1,96 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-global-focus);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  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;
+}
+
+.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;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
 q2-carousel .swiper-slide {
   flex-shrink: 0;
   width: 100%;
   height: 100%;
   position: relative;
   transition-property: transform;
-  transition: all .2s;
+  transition: all 0.2s;
 }
 
-.q2-carousel-pane .q2-carousel-pane-main-content {
-  box-shadow: 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25));
-  background-color: var(---tct-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)));
-  border: var(--tct-carousel-pane-border-width, 1px) solid var(--tct-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1,#cccccc)))));
-  border-radius: var(--tct-carousel-pane-border-radius, 8px);
-  padding: var(--tct-carousel-pane-padding, .5rem .5rem .5rem .5rem);
-  min-height: 10em;
+q2-carousel-pane.q2-carousel-pane {
+  cursor: grab;
+}
+q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) * {
+  cursor: pointer;
 }
-
 q2-carousel-pane.q2-carousel-pane:focus {
   box-shadow: none;
 }
-
-.q2-carousel-pane:focus .q2-carousel-pane-main-content {
+q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content {
   outline: none;
-  box-shadow: 0 0 0 2px #33B4FF; /** Tecton focus styling **/
+  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));
 }
-
-.q2-carousel-pane .q2-carousel-pane-main-content:hover {
-  cursor: grab;
-} 
+q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content {
+  box-shadow: 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25));
+  background-color: var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff))));
+  border: var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 1px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
+  border-radius: var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));
+  padding: var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 0.5rem 0.5rem 0.5rem 0.5rem));
+  min-height: 10em;
+}

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

@@ -1,5 +1,5 @@
 import { Component, Prop, Element, Listen, Watch, Event, h } from '@stencil/core';
-import { createGuid, handleAriaLabel, loc } from 'src/utils';
+import { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2Checkbox {
   constructor() {
     this.checked = false;
@@ -17,12 +17,20 @@ export class Q2Checkbox {
   componentWillLoad() {
     handleAriaLabel(this);
   }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
   //////// Host Element Events ////////
   defaultChangeHandler(event) {
     if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {
       this.checked = event.detail.checked;
     }
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.hostElement.shadowRoot.querySelector('input').focus();
+  }
   ////////// OBSERVERS //////////
   ariaLabelObserver() {
     handleAriaLabel(this);
@@ -67,7 +75,7 @@ export class Q2Checkbox {
   static get is() { return "q2-checkbox"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]
@@ -306,5 +314,11 @@ export class Q2Checkbox {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }