q2-tecton-elements 1.18.0 → 1.19.0

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

@@ -1,4 +1,4 @@
-import { Component, Event, Element, Host, Watch, Prop, h } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import { loc } from 'src/utils';
 export class Q2Carousel {
   constructor() {
@@ -14,6 +14,10 @@ export class Q2Carousel {
         pane: this.hostElement,
       });
     };
+    this.index = undefined;
+    this.siblingCount = undefined;
+    this.isActivePane = undefined;
+    this.label = undefined;
   }
   get currentPaneIndex() {
     return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);
@@ -53,106 +57,114 @@ export class Q2Carousel {
         : 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))));
+        ]), onClick: this.paneClicked }, h("article", { class: "q2-carousel-pane-main-content" }, h("slot", null))));
   }
   static get is() { return "q2-carousel-pane"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "index": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "index",
-      "reflect": false
-    },
-    "siblingCount": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "sibling-count",
-      "reflect": false
-    },
-    "isActivePane": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-active-pane",
-      "reflect": true
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "index": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "index",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "siblingCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sibling-count",
+        "reflect": false
       },
-      "attribute": "label",
-      "reflect": true
-    }
-  }; }
-  static get events() { return [{
-      "method": "clickCarouselPane",
-      "name": "clickCarouselPane",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "isActivePane": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-active-pane",
+        "reflect": true
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "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"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "isActivePane",
+        "methodName": "determineDisabledContent"
+      }];
+  }
 }

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
 }
 
 :host {
@@ -76,6 +76,7 @@ q2-carousel .swiper-slide {
 
 q2-carousel-pane.q2-carousel-pane {
   --comp-carousel-pane-tween: var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+  --comp-carousel-shadow: var(--app-shadow-2, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));
   cursor: grab;
 }
 q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) * {
@@ -86,10 +87,10 @@ q2-carousel-pane.q2-carousel-pane:focus {
 }
 q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content {
   outline: none;
-  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));
+  box-shadow: var(--const-double-focus-ring);
 }
 q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content {
-  box-shadow: var(--app-shadow-2, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));
+  box-shadow: var(--comp-carousel-shadow);
   transition: var(--comp-carousel-pane-tween);
   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, 0px)) 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))))));
@@ -98,5 +99,5 @@ q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content {
   height: var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em));
 }
 q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover {
-  box-shadow: var(--app-shadow-3, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));
+  box-shadow: var(--const-double-focus-ring), var(--comp-carousel-shadow);
 }