q2-tecton-elements 1.12.1 → 1.13.1

package/dist/collection/components/q2-calendar/helpers.js

@@ -15,7 +15,7 @@ export function formatDateShort(value) {
     month: '2-digit',
     day: '2-digit',
     year: 'numeric',
-    timeZone: 'UTC'
+    timeZone: 'UTC',
   }).format(new Date(isoDate));
 }
 export function formatDateLong(value) {
@@ -25,7 +25,7 @@ export function formatDateLong(value) {
   return new Intl.DateTimeFormat('default', {
     month: 'short',
     day: 'numeric',
-    year: 'numeric'
+    year: 'numeric',
   }).format(date);
 }
 export function convertMomentFormat(stringFormat) {
@@ -45,7 +45,7 @@ export function stringToDate(date) {
     return undefined;
   }
   let result;
-  let dateParts = date.split(/[\/\-]/).map(part => part.padStart(2, '0'));
+  const dateParts = date.split(/[\/\-]/).map(part => part.padStart(2, '0'));
   const isIsoString = isString && date.length >= 24 && date[10] === 'T';
   const isCompleteDate = dateParts.length === 3;
   const isPartialDate = dateParts.length < 3;
@@ -100,7 +100,7 @@ export function setupMonthYear(value = new Date()) {
   const monthIndex = Number(value.toISOString().split('-')[1]) - 1;
   return {
     monthIndex,
-    selectedYear: value.getFullYear()
+    selectedYear: value.getFullYear(),
   };
 }
 export function validateInput(input = '', validDays = [], validDates = [], // white list
@@ -144,14 +144,10 @@ startDate, endDate, formatString = 'mm/dd/yyyy', assume) {
     if (input.length >= 5 && !isAvailable) {
       isValid = false;
       messageType = 'error';
-      if (!monthName || !date || !year) {
-        message = `${loc('tecton.element.calendar.hint.invalidDate')}: ${formatString}`;
-      }
-      else {
-        message = loc('tecton.element.calendar.hint.notAvailableDate', [
-          formatDateLong(inputDate)
-        ]);
-      }
+      const isInvalid = !monthName || !date || !year;
+      message = isInvalid
+        ? `${loc('tecton.element.calendar.hint.invalidDate')}: ${formatString}`
+        : loc('tecton.element.calendar.hint.notAvailableDate', [formatDateLong(inputDate)]);
     }
   }
   else {
@@ -165,19 +161,19 @@ startDate, endDate, formatString = 'mm/dd/yyyy', assume) {
     message,
     inputDate,
     isAvailable,
-    calendarPosition
+    calendarPosition,
   };
 }
 function buildInputDate(input, assume) {
   const now = new Date();
-  let [month, day, year] = input.split('/');
+  const [month, day, year] = input.split('/');
   if (input.length === 10) {
     return new Date(input);
   }
   else if (month && day && Number(day) > 0) {
-    day = Number(day) < 10 ? `0${Number(day)}` : day;
-    year = !year || year.length < 4 ? assumeYear(month, day, assume) : year;
-    return new Date(`${month}/${day}/${year}`);
+    const twoDigitDay = Number(day) < 10 ? `0${Number(day)}` : day;
+    const fourDigitYear = !year || year.length < 4 ? assumeYear(month, day, assume) : year;
+    return new Date(`${month}/${twoDigitDay}/${fourDigitYear}`);
   }
   else if (month && day && Number(day) === 0) {
     return new Date(''); // invalid date: 09/0/2021
@@ -231,7 +227,7 @@ export function getDays() {
     loc('tecton.element.calendar.days.short.Wednesday'),
     loc('tecton.element.calendar.days.short.Thursday'),
     loc('tecton.element.calendar.days.short.Friday'),
-    loc('tecton.element.calendar.days.short.Saturday')
+    loc('tecton.element.calendar.days.short.Saturday'),
   ];
 }
 export function getDaysOfWeek() {
@@ -242,7 +238,7 @@ export function getDaysOfWeek() {
     loc('tecton.element.calendar.days.Wednesday'),
     loc('tecton.element.calendar.days.Thursday'),
     loc('tecton.element.calendar.days.Friday'),
-    loc('tecton.element.calendar.days.Saturday')
+    loc('tecton.element.calendar.days.Saturday'),
   ];
 }
 export function getMonths() {
@@ -258,6 +254,6 @@ export function getMonths() {
     loc('tecton.element.calendar.months.September'),
     loc('tecton.element.calendar.months.October'),
     loc('tecton.element.calendar.months.November'),
-    loc('tecton.element.calendar.months.December')
+    loc('tecton.element.calendar.months.December'),
   ];
 }

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

@@ -1,6 +1,6 @@
-import { Component, Prop, Element, State, Event, Listen, Watch, h } from '@stencil/core';
+import { Component, Prop, Element, State, Event, Listen, Watch, h, } from '@stencil/core';
 import { addDays, isSameDay, format, isValid as isValidDate } from 'date-fns';
-import { stringToDate, setupMonthYear, getMonths, getDays, getDaysOfWeek, stringArrayToDate, convertMomentFormat, validateInput, handleMissingZeros, formatDateISO, formatDateLong, formatDateShort, removeTimezoneOffset, reorderDateString } from './helpers';
+import { stringToDate, setupMonthYear, getMonths, getDays, getDaysOfWeek, stringArrayToDate, convertMomentFormat, validateInput, handleMissingZeros, formatDateISO, formatDateLong, formatDateShort, removeTimezoneOffset, reorderDateString, } from './helpers';
 import { buildDates, getValidDaysOfWeek } from './validation';
 import { handleAriaLabel, loc, setPopProperties, overrideFocus, isEventFromElement } from 'src/utils';
 export class Q2Calendar {
@@ -164,7 +164,7 @@ export class Q2Calendar {
       const newYear = removeTimezoneOffset(new Date(year, monthIndex));
       this.selectedMonthYear = {
         monthIndex: newYear.getMonth(),
-        selectedYear: newYear.getFullYear()
+        selectedYear: newYear.getFullYear(),
       };
       this.dateList = this.buildDateList(this.selectedMonthYear);
       this.scheduledAfterRender.push(() => this.checkActiveCellForBlankness());
@@ -252,9 +252,7 @@ export class Q2Calendar {
     };
   }
   resizeIframe() {
-    return (window.TectonElements &&
-      window.TectonElements.resizeIframe &&
-      window.TectonElements.resizeIframe());
+    return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
   }
   connectedCallback() {
     this.selectedMonthYear = setupMonthYear(this.dateValue);
@@ -289,9 +287,7 @@ export class Q2Calendar {
   }
   get localizedErrors() {
     return ((Array.isArray(this.errors) &&
-      this.errors
-        .filter((error) => error)
-        .map((error) => error && loc(error))) ||
+      this.errors.filter((error) => error).map((error) => error && loc(error))) ||
       []);
   }
   get formattedValue() {
@@ -306,7 +302,7 @@ export class Q2Calendar {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit',
-      timeZone: 'UTC'
+      timeZone: 'UTC',
     }).format(dateValue);
   }
   get computedPlaceholder() {
@@ -328,9 +324,7 @@ export class Q2Calendar {
       if (isMoment)
         return value.toDate();
       // stringified moment value assigned in html template e.g.) handlebar
-      const isMomentString = typeof value === 'string' &&
-        value.split(' ').length === 6 &&
-        /GMT-\d{4}/g.test(value);
+      const isMomentString = typeof value === 'string' && value.split(' ').length === 6 && /GMT-\d{4}/g.test(value);
       if (isMomentString) {
         value = formatDateISO(value);
       }
@@ -342,7 +336,7 @@ export class Q2Calendar {
     return {
       startDate: stringToDate(this.startDate),
       endDate: stringToDate(this.endDate),
-      cutOffTime: isValidDate(ct) ? ct : undefined
+      cutOffTime: isValidDate(ct) ? ct : undefined,
     };
   }
   get isTypeable() {
@@ -359,8 +353,7 @@ export class Q2Calendar {
   }
   defaultErrorHandler(event) {
     if (event.target === this.hostElement && !this.hostElement.onerror) {
-      if (Array.isArray(this.errors) &&
-        this.errors.includes('tecton.element.calendar.invalidDate')) {
+      if (Array.isArray(this.errors) && this.errors.includes('tecton.element.calendar.invalidDate')) {
         return;
       }
       this.errors = (this.errors || []).concat(['tecton.element.calendar.invalidDate']);
@@ -374,8 +367,7 @@ export class Q2Calendar {
       this.onsuccess(event);
     }
     else {
-      if (Array.isArray(this.errors) &&
-        this.errors.includes('tecton.element.calendar.invalidDate')) {
+      if (Array.isArray(this.errors) && this.errors.includes('tecton.element.calendar.invalidDate')) {
         this.errors = this.errors.filter(x => x !== 'tecton.element.calendar.invalidDate');
       }
     }
@@ -398,9 +390,7 @@ export class Q2Calendar {
       this.typedValue = newValueAsString;
     }
     else {
-      const dateValue = isMoment
-        ? newValue.toDate()
-        : stringToDate(newValue);
+      const dateValue = isMoment ? newValue.toDate() : stringToDate(newValue);
       this.inputField.value = formatDateShort(dateValue);
       this.selectedMonthYear = setupMonthYear(dateValue);
       this.dateList = this.buildDateList(this.selectedMonthYear);
@@ -457,22 +447,21 @@ export class Q2Calendar {
         else {
           calculationDateList = this.buildDateList({
             monthIndex: month,
-            selectedYear: year
+            selectedYear: year,
           });
         }
         const dateValueDayOfMonth = (_c = dateValue === null || dateValue === void 0 ? void 0 : dateValue.getDate()) !== null && _c !== void 0 ? _c : undefined;
         const isDateValueInvalid = dateValueDayOfMonth
-          ? !calculationDateList.find(({ integer }) => integer === dateValueDayOfMonth)
-            .isValid
+          ? !calculationDateList.find(({ integer }) => integer === dateValueDayOfMonth).isValid
           : true;
         if (isDateValueInvalid) {
           this.error.emit({
             errors: [
               {
                 message: `Value passed is invalid: The date ${this.value} is not valid`,
-                errorCode: 'generalInvalid'
-              }
-            ]
+                errorCode: 'generalInvalid',
+              },
+            ],
           });
         }
         else {
@@ -481,7 +470,7 @@ export class Q2Calendar {
       }
     }
     catch (error) {
-      console.log('Invalid moment value ', this.dateValue);
+      console.warn('Invalid moment value ', this.dateValue);
     }
   }
   focusInput() {
@@ -490,16 +479,12 @@ export class Q2Calendar {
   }
   checkActiveCellForBlankness() {
     const activeElement = this.hostElement.shadowRoot.activeElement;
-    if (!activeElement ||
-      activeElement.tagName !== 'TD' ||
-      !activeElement.hasAttribute('aria-hidden'))
+    if (!activeElement || activeElement.tagName !== 'TD' || !activeElement.hasAttribute('aria-hidden'))
       return;
     const { calendarBody } = this;
     const calendarCells = Array.from(calendarBody.querySelectorAll('td'));
     const indexOfCell = Array.from(calendarCells).indexOf(activeElement);
-    const dayToFocus = indexOfCell < 15
-      ? 1
-      : calendarCells.filter(cell => !cell.hasAttribute('aria-hidden')).length;
+    const dayToFocus = indexOfCell < 15 ? 1 : calendarCells.filter(cell => !cell.hasAttribute('aria-hidden')).length;
     this.focusDay(this.generateDateFromDay(dayToFocus));
   }
   generateDateFromDay(day) {
@@ -539,11 +524,11 @@ export class Q2Calendar {
     this.setHints({
       isValid: true,
       message: `${loc('tecton.element.calendar.hint.selection')}: ${formatDateLong(inputDate)}`,
-      messageType: 'success'
+      messageType: 'success',
     });
   }
   calendarField() {
-    return (h("q2-input", { ref: el => (this.inputField = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: this.dropdownOpen, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
+    return (h("q2-input", { ref: el => (this.inputField = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: `${!!this.dropdownOpen}`, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
         (this.invalid && ['tecton.element.calendar.invalid']) ||
         [], onClick: this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, "icon-right": "calendar", "format-modifier": this.isTypeable ? this.formatModifier : '', pseudo: !this.isTypeable, type: "date", "hide-messages": true, "test-id": "inputAndCalendarToggle" }));
   }

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

@@ -149,7 +149,7 @@ q2-input {
 .calendar-label {
   font-size: var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, 16px));
   flex: 1 1;
-  flex-basis: calc(100% - var-list(--tct-btn-icon-width, 44px));
+  flex-basis: calc(100% - var(--tct-btn-icon-width, 44px));
   margin: 0;
   padding: var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))) 0;
 }

package/dist/collection/components/q2-calendar/validation.js

@@ -8,6 +8,7 @@ export function generateDatesFromMonthYear(month, year) {
   }, []);
 }
 export function getValidDaysOfWeek(checksum = 127) {
+  /* tslint:disable:no-bitwise */
   const sunValid = checksum & 1;
   const monValid = checksum & 2;
   const tuesValid = checksum & 4;
@@ -15,6 +16,7 @@ export function getValidDaysOfWeek(checksum = 127) {
   const thursValid = checksum & 16;
   const friValid = checksum & 32;
   const satValid = checksum & 64;
+  /* tslint:enable:no-bitwise */
   const ret = [];
   if (checksum <= 0)
     return ret;
@@ -82,7 +84,7 @@ export function getDayState(dayInMonth, dateValidators, currentDate) {
   const isEndDate = isSameDay(dayInMonth, dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.endDate);
   return { isSelected, isToday, isStartDate, isEndDate };
 }
-export function generateClassesForCalDay({ isInvalid, isSelected, isEndDate, isStartDate, isToday, isIncompleteDate }) {
+export function generateClassesForCalDay({ isInvalid, isSelected, isEndDate, isStartDate, isToday, isIncompleteDate, }) {
   const classes = [];
   if (!isInvalid)
     classes.push('is-valid');
@@ -116,7 +118,7 @@ export const emptyDate = {
   isSelected: false,
   isStartDate: false,
   isEndDate: false,
-  classList: ''
+  classList: '',
 };
 export function addEmptyDates(from, to) {
   if (from === 7)

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

@@ -1,5 +1,23 @@
-import { Component, Prop, Event, h, Fragment, Listen, Element, State } from '@stencil/core';
+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();
@@ -13,6 +31,9 @@ export class Q2Card {
       this.click.emit();
     };
   }
+  componentWillLoad() {
+    this.checkBar();
+  }
   componentDidLoad() {
     const { hostElement, clickableElement } = this;
     hostElement.click = () => clickableElement.click();
@@ -28,6 +49,20 @@ export class Q2Card {
       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;
@@ -54,6 +89,7 @@ export class Q2Card {
   }
   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),
@@ -62,7 +98,7 @@ export class Q2Card {
   }
   generateContainerClasses() {
     const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch } = this;
-    let result = [];
+    const result = [];
     const showSmall = isSmall || isAutoSmall;
     const showTouch = isTouch || isAutoTouch;
     const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;
@@ -206,6 +242,23 @@ export class Q2Card {
       "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,
@@ -280,6 +333,10 @@ export class Q2Card {
       }
     }]; }
   static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "bar",
+      "methodName": "checkBar"
+    }]; }
   static get listeners() { return [{
       "name": "focus",
       "method": "onHostElementFocus",

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

@@ -70,6 +70,9 @@ button {
 
 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;
@@ -82,7 +85,10 @@ a {
   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-radius: var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));
+  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));
@@ -155,6 +161,16 @@ p {
   -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)));
 }