q2-tecton-elements 1.13.0-alpha.0 → 1.13.0

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

@@ -0,0 +1,347 @@
+import { Component, Prop, Event, h, Fragment, Listen, Element, State, Watch, } from '@stencil/core';
+import { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';
+const SUPPORTED_THEME_COLORS = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'accent-1',
+  'accent-2',
+  'accent-3',
+  'accent-4',
+  'accent-5',
+  'accent-6',
+  'accent-7',
+  'accent-8',
+  'accent-9',
+  'accent-10',
+  'accent-11',
+  'accent-12',
+];
+const STOPLIGHT_COLORS = ['info', 'success', 'warning', 'alert'];
+export class Q2Card {
+  constructor() {
+    this.isTouch = isTouchDevice();
+    this.isAutoTouch = false;
+    this.isAutoSmall = false;
+    this.handleClick = (event) => {
+      if (this.url)
+        return true;
+      event.preventDefault();
+      event.stopPropagation();
+      this.click.emit();
+    };
+  }
+  componentWillLoad() {
+    this.checkBar();
+  }
+  componentDidLoad() {
+    const { hostElement, clickableElement } = this;
+    hostElement.click = () => clickableElement.click();
+    overrideFocus(this.hostElement);
+    this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());
+    this.resizeObserver.observe(this.hostElement);
+  }
+  willDestroyElement() {
+    this.resizeObserver = null;
+  }
+  onHostElementFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.clickableElement.focus();
+  }
+  checkBar() {
+    const { bar } = this;
+    if (!bar)
+      return;
+    if (SUPPORTED_THEME_COLORS.includes(bar)) {
+      this.barColor = `var(--t-${bar})`;
+    }
+    else if (STOPLIGHT_COLORS.includes(bar)) {
+      this.barColor = `var(--const-stoplight-${bar})`;
+    }
+    else {
+      this.barColor = bar;
+    }
+  }
+  determineAutoTouch() {
+    if (this.hostElement.hasAttribute('is-touch'))
+      return;
+    this.isAutoTouch = isTouchDevice();
+  }
+  determineAutoSmall() {
+    var _a, _b;
+    if (this.hostElement.hasAttribute('is-small'))
+      return;
+    const { containerElement, avatarElement } = this;
+    const avatarWidth = (_a = avatarElement === null || avatarElement === void 0 ? void 0 : avatarElement.offsetWidth) !== null && _a !== void 0 ? _a : 0;
+    const containerWidth = (_b = containerElement === null || containerElement === void 0 ? void 0 : containerElement.offsetWidth) !== null && _b !== void 0 ? _b : 0;
+    const totalWidth = avatarWidth + containerWidth;
+    this.isAutoSmall = totalWidth < 350;
+  }
+  generateAvatar() {
+    const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;
+    if (avatarIcon) {
+      return (h("q2-icon", { type: avatarIcon, ref: e => (this.avatarElement = e), "test-id": "avatar" }));
+    }
+    else if (avatarName || avatarInitials || avatarSrc) {
+      return (h("q2-avatar", { name: avatarName, initials: avatarInitials, src: avatarSrc, ref: e => (this.avatarElement = e), "test-id": "avatar" }));
+    }
+  }
+  generateContent() {
+    return (h(Fragment, null,
+      this.bar && (h("div", { class: "bar", "test-id": "bar", style: { '--comp-bar-color': this.barColor } })),
+      this.generateAvatar(),
+      h("div", { class: "container", "test-id": "contentContainer", ref: e => (this.containerElement = e) },
+        this.title && h("h3", { "test-id": "title" }, this.title),
+        this.description && h("p", { "test-id": "description" }, this.description)),
+      this.isTouch && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
+  }
+  generateContainerClasses() {
+    const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch } = this;
+    const result = [];
+    const showSmall = isSmall || isAutoSmall;
+    const showTouch = isTouch || isAutoTouch;
+    const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;
+    if (showSmall)
+      result.push('is-small');
+    if (showTouch)
+      result.push('is-touch');
+    if (hasAvatar)
+      result.push('has-avatar');
+    return result.join(' ');
+  }
+  render() {
+    const { url } = this;
+    return !!url ? (h("a", { ref: e => (this.clickableElement = e), href: this.url, class: this.generateContainerClasses(), target: this.target, rel: "noopener noreferrer", "test-id": "clickableElement", onClick: this.handleClick }, this.generateContent())) : (h("button", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement", type: "button", onClick: this.handleClick }, this.generateContent()));
+  }
+  static get is() { return "q2-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "title": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "title",
+      "reflect": true
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": true
+    },
+    "avatarName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "avatar-name",
+      "reflect": true
+    },
+    "avatarInitials": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "avatar-initials",
+      "reflect": true
+    },
+    "avatarIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "avatar-icon",
+      "reflect": true
+    },
+    "avatarSrc": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "avatar-src",
+      "reflect": true
+    },
+    "isSmall": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-small",
+      "reflect": true
+    },
+    "bar": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "bar",
+      "reflect": true
+    },
+    "isTouch": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-touch",
+      "reflect": true,
+      "defaultValue": "isTouchDevice()"
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "url",
+      "reflect": true
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'_self' | '_blank' | '_parent' | '_top'",
+        "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "target",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "isAutoTouch": {},
+    "isAutoSmall": {}
+  }; }
+  static get events() { return [{
+      "method": "click",
+      "name": "click",
+      "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": "bar",
+      "methodName": "checkBar"
+    }]; }
+  static get listeners() { return [{
+      "name": "focus",
+      "method": "onHostElementFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,177 @@
+* {
+  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;
+}
+
+:host {
+  display: block;
+}
+
+button,
+a {
+  --comp-border-radius: var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));
+  --comp-border-width: var(--tct-card-border-width, var(--t-card-border-width, 0px));
+  position: relative;
+  width: 100%;
+  text-align: start;
+  cursor: pointer;
+  height: 100%;
+  display: grid;
+  gap: var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));
+  margin: 0;
+  border: none;
+  background: var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));
+  padding: var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)));
+  color: var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));
+  text-decoration: none;
+  border-width: var(--comp-border-width);
+  border-color: var(--tct-card-border-color, var(--t-card-border-color, transparent));
+  border-style: solid;
+  border-radius: var(--comp-border-radius);
+  transition: box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+  box-shadow: var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))));
+  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));
+  --comp-chevron-size: 0;
+}
+@media (hover: hover) {
+  button:hover, button:active, button:focus,
+a:hover,
+a:active,
+a:focus {
+    color: var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));
+  }
+  button:hover,
+a:hover {
+    box-shadow: var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))));
+  }
+  button:active,
+a:active {
+    box-shadow: var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
+  }
+}
+button.is-small,
+a.is-small {
+  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px));
+}
+button.is-touch,
+a.is-touch {
+  --comp-chevron-size: var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));
+  grid-template-columns: 1fr var(--comp-chevron-size);
+}
+button.has-avatar,
+a.has-avatar {
+  grid-template-columns: var(--comp-avatar-size) 1fr;
+  --tct-avatar-width: var(--comp-avatar-size);
+  --tct-avatar-height: var(--comp-avatar-size);
+  --tct-icon-size: var(--comp-avatar-size);
+}
+button.has-avatar.is-touch,
+a.has-avatar.is-touch {
+  grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);
+}
+
+.container {
+  overflow: hidden;
+  display: grid;
+  gap: var(--tct-card-container-gap, var(--t-card-container-gap, var(--app-scale-1x, 5px)));
+  align-content: start;
+}
+
+h3,
+p {
+  margin: 0;
+  padding: 0;
+  line-height: var(--tct-card-font-height, var(--t-card-font-height, 20px));
+}
+
+h3 {
+  font-weight: var(--tct-card-font-weight, var(--t-card-font-weight, 600));
+  font-size: var(--tct-card-font-size, var(--t-card-font-size, 17px));
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+p {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.bar {
+  --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));
+  border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));
+  background: var(--comp-bar-color);
+  height: 100%;
+}
+
+.touch-indicator {
+  align-self: center;
+  --tct-icon-size: var(--comp-chevron-size);
+}

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

@@ -1,4 +1,4 @@
-import { Component, Prop, Watch, State, Fragment, Element, Host, h, Event, Listen } from '@stencil/core';
+import { Component, Prop, Watch, State, Fragment, Element, Host, h, Event, Listen, } from '@stencil/core';
 import Swiper, { Autoplay } from 'swiper';
 import { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';
 const carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly */
@@ -31,10 +31,10 @@ export class Q2Carousel {
           }
           else if (isCarouselFocused)
             swiper.slides[swiper.activeIndex].focus({
-              preventScroll: true
+              preventScroll: true,
             });
-        }
-      }
+        },
+      },
     };
     this.fullWidthDisplayOptions = Object.assign({ slidesPerView: 1, spaceBetween: 100 }, this.universalCarouselOptions);
     this.activePaneIndex = this.realIndex;
@@ -75,7 +75,7 @@ export class Q2Carousel {
       });
     };
     this.handleAutoPlayPause = () => {
-      const { swiper: { autoplay } } = this;
+      const { swiper: { autoplay }, } = this;
       if (!autoplay)
         return;
       if (autoplay === null || autoplay === void 0 ? void 0 : autoplay.running)
@@ -149,25 +149,20 @@ export class Q2Carousel {
       if (this.dynamicPaginationDots)
         paginationContainerClasses = [...paginationContainerClasses, 'dynamic'];
       return (h("div", { class: paginationContainerClasses.join(' '), role: "tablist", "aria-label": loc('tecton.element.carousel.tabWrapperLabel') }, this.paneArray.map(pane => {
-        let btnClasses = [
-          'q2-carousel-page-indicator',
-          `q2-carousel-page-indicator-${pane.index}`
-        ];
+        let btnClasses = ['q2-carousel-page-indicator', `q2-carousel-page-indicator-${pane.index}`];
         if (pane.isActivePane)
           btnClasses = [...btnClasses, 'active-page'];
         if (this.dynamicPaginationDots)
           btnClasses = [...btnClasses, 'dynamic'];
-        let withinOneOfActive = pane.index === this.activePaneIndex + 1 ||
-          pane.index === this.activePaneIndex - 1;
+        const withinOneOfActive = pane.index === this.activePaneIndex + 1 || pane.index === this.activePaneIndex - 1;
         if (withinOneOfActive)
           btnClasses = [...btnClasses, 'active-adjacent'];
-        let withinTwoOfActive = pane.index === this.activePaneIndex + 2 ||
-          pane.index === this.activePaneIndex - 2;
+        const withinTwoOfActive = pane.index === this.activePaneIndex + 2 || pane.index === this.activePaneIndex - 2;
         if (withinTwoOfActive)
           btnClasses = [...btnClasses, 'active-adjacent-adjacent'];
         return (h("button", { type: "button", role: "tab", tabIndex: pane.isActivePane ? undefined : -1, "aria-selected": pane.isActivePane ? 'true' : 'false', class: btnClasses.join(' '), onClick: () => this.handleCarouselNavigationSelection(pane.index, true), onKeyDown: event => this.onPaginationKeyDown(event), "aria-label": loc('tecton.element.carousel.itemDescription', [
             (pane.index + 1).toString(),
-            this.paneCount.toString()
+            this.paneCount.toString(),
           ]) }));
       })));
     };
@@ -192,7 +187,7 @@ export class Q2Carousel {
     this.insufficientPanesDisplay = () => {
       let insufficientPanesContainerClasses = [
         'insufficient-pane-feedback',
-        this.fullWidthPanes ? 'full-width-display' : 'content-peek-display'
+        this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',
       ];
       if (this.compactMode)
         insufficientPanesContainerClasses = [...insufficientPanesContainerClasses, 'compact'];
@@ -285,7 +280,7 @@ export class Q2Carousel {
     let carouselContainerClasses = [
       'q2-carousel-swiper-container',
       'swiper-container',
-      this.fullWidthPanes ? 'full-width-display' : 'content-peek-display'
+      this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',
     ];
     if (this.compactMode)
       carouselContainerClasses = [...carouselContainerClasses, 'compact'];

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

@@ -93,12 +93,11 @@ q2-carousel {
 
 .insufficient-pane-feedback {
   text-align: center;
-  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--app-shadow-2, 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;
@@ -128,6 +127,8 @@ q2-carousel {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: var(--app-scale-2x, 10px);
+  min-height: 44px;
 }
 .q2-carousel-pagination-navigation-wrapper.evenly-space {
   justify-content: space-between;
@@ -192,7 +193,6 @@ q2-carousel {
 .q2-carousel-swiper-container .swiper-wrapper {
   position: relative;
   width: 100%;
-  min-height: 12em;
   z-index: 1;
   display: flex;
   transition-property: transform;

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

@@ -11,7 +11,7 @@ export class Q2Carousel {
       event.preventDefault();
       this.clickCarouselPane.emit({
         paneIndex: this.index,
-        pane: this.hostElement
+        pane: this.hostElement,
       });
     };
   }
@@ -52,7 +52,7 @@ export class Q2Carousel {
         ? loc(label)
         : loc('tecton.element.carousel.itemDescription', [
           (this.currentPaneIndex + 1).toString(),
-          (this.siblingCount || 0).toString()
+          (this.siblingCount || 0).toString(),
         ]), onClick: this.paneClicked },
       h("article", { class: "q2-carousel-pane-main-content" },
         h("slot", null))));

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

@@ -74,6 +74,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));
   cursor: grab;
 }
 q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) * {
@@ -87,10 +88,14 @@ q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content {
   box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));
 }
 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));
+  box-shadow: var(--app-shadow-2, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));
+  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, 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: 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))))));
   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;
+  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)));
 }