npm - q2-tecton-elements - Versions diffs - 1.67.2 → 1.68.0 - Mend

q2-tecton-elements 1.67.2 → 1.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (807) hide show

package/dist/cjs/q2-carousel-pane.cjs.entry.js CHANGED Viewed

@@ -1,11 +1,11 @@
 'use strict';
 var index = require('./index-BYXz4owL.js');
-var component = require('./component-DRAntnCA.js');
-var index$1 = require('./index-YvKoRT-t.js');
+var component = require('./component-iASoq6gx.js');
+var index$1 = require('./index-DmGkqdX2.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
-const q2CarouselPaneCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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 0.2s}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content,q2-carousel .q2-carousel-swiper-container.frameless-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-background, var(--app-base, #ffffff))}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{box-shadow:var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow))}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 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-pane-inactive-background, var(--tct-carousel-background, var(--app-base, #ffffff)));box-shadow:var(--tct-carousel-pane-inactive-box-shadow, var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow)))}q2-carousel-pane.q2-carousel-pane:focus-visible .q2-carousel-pane-main-content{outline:none;box-shadow:var(--tct-carousel-pane-focus-visible-box-shadow, --const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow));transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, 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))))));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, 7px));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content{box-shadow:none;border:0;border-radius:0;padding:0}";
+const q2CarouselPaneCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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-wrapper{align-items:stretch}q2-carousel .swiper-slide{display:flex;flex-shrink:0;width:100%;height:auto;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content,q2-carousel .q2-carousel-swiper-container.frameless-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-background, var(--app-base, #ffffff))}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{box-shadow:var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow))}q2-carousel .q2-carousel-swiper-container.frameless-display q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:none}q2-carousel[auto-height] q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{height:auto}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 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-pane-inactive-background, var(--tct-carousel-background, var(--app-base, #ffffff)));box-shadow:var(--tct-carousel-pane-inactive-box-shadow, var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow)))}q2-carousel-pane.q2-carousel-pane:focus-visible .q2-carousel-pane-main-content{outline:none;box-shadow:var(--tct-carousel-pane-focus-visible-box-shadow, --const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-sizing:border-box;flex:1 1 auto;width:100%;min-height:var(--q2-carousel-equal-pane-height, auto);box-shadow:var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow));transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, 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))))));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, 7px));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content{box-shadow:none;border:0;border-radius:0;padding:0}";
 const Q2CarouselPane = class {
     constructor(hostRef) {

package/dist/cjs/q2-carousel-pane.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-carousel-pane.entry.cjs.js","mappings":"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","names":["mirrorEmit","hasValidParent","h","Host","loc"],"sources":["src/components/q2-carousel-pane/q2-carousel-pane.scss?tag=q2-carousel-pane","src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\nq2-carousel {\n .swiper-slide {\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n position: relative;\n transition-property: transform;\n transition: all 0.2s;\n }\n\n .q2-carousel-swiper-container {\n &.full-width-display,\n &.frameless-display {\n q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n background: var-list(--tct-carousel-background, --app-base, #ffffff);\n }\n }\n &.full-width-display {\n q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n }\n }\n }\n}\n\nq2-carousel-pane.q2-carousel-pane {\n --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"))};\n\n cursor: grab;\n\n &:not([is-active-pane]) {\n .q2-carousel-pane-main-content {\n background: var-list(--tct-carousel-pane-inactive-background, --tct-carousel-background, --app-base, #ffffff);\n box-shadow: var-list(--tct-carousel-pane-inactive-box-shadow, --tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n }\n }\n\n &:focus-visible {\n .q2-carousel-pane-main-content {\n outline: none;\n box-shadow: var(--tct-carousel-pane-focus-visible-box-shadow, --const-double-focus-ring);\n }\n }\n\n button {\n border: 0;\n background: transparent;\n transition: all 0.2s;\n opacity: 0.3;\n cursor: pointer;\n\n &:hover {\n opacity: 0.7;\n }\n }\n\n .q2-carousel-pane-main-content {\n box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n transition: var(--comp-carousel-pane-tween);\n background: var-list(\n --tct-carousel-background,\n var-prefixer(carousel-background-color),\n --tct-white,\n --app-white,\n #ffffff\n );\n border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n var-list(\n var-prefixer(carousel-pane-border-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n padding: var-list(var-prefixer(carousel-pane-padding), 7px);\n height: var-list(var-prefixer(carousel-pane-height), 10em);\n }\n\n &[slot-frameless]:not([slot-frameless='false']) {\n .q2-carousel-pane-main-content {\n box-shadow: none;\n border: 0;\n border-radius: 0;\n padding: 0;\n }\n }\n}\n","import { hasValidParent } from '@/utils/component';\nimport { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Carousel Pane\n * @category Display\n * @summary Use as a single slide within a Carousel.\n /\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n // #region Own Properties\n\n disabledElements?: HTMLElement[] = [];\n mutationObserver?: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n Used by `q2-carousel` to determine the pane's index.\n * @private\n /\n @Prop({ reflect: false })\n index: number;\n\n /\n Used by `q2-carousel` to indicate which pane is currently active.\n * @private\n /\n @Prop({ reflect: true })\n isActivePane: boolean;\n\n /\n Text used only as an `aria-label` for accessibility purposes.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Used by `q2-carousel` to indicate how many panes are in the carousel.\n * @private\n /\n @Prop({ reflect: false })\n siblingCount: number;\n\n /\n Used by `q2-carousel` to indicate the pane should be frameless.\n * @private\n /\n @Prop({ reflect: true })\n slotFrameless: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pane is clicked.\n * @deprecated Use 'tctClickCarouselPane' instead\n /\n @Event()\n clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n /\n Emitted when the pane is clicked.\n */\n @Event()\n tctClickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n this.removePointerMoveListeners();\n }\n\n componentWillLoad() {\n hasValidParent(this.hostElement, 'div.q2-carousel-swiper-wrapper');\n }\n\n componentDidLoad(): void {\n this.determineDisabledContent();\n this.addPointerMoveListeners();\n\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('isActivePane')\n determineDisabledContent() {\n const { isActivePane } = this;\n const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n 'q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n );\n\n focusableElements.forEach(element => {\n const hasValidTabIndex =\n element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n if (hasValidTabIndex) {\n element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);\n }\n\n if (isActivePane) {\n if (element.hasAttribute('data-q2-tabindex')) {\n element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n element.removeAttribute('data-q2-tabindex');\n } else {\n element.removeAttribute('tabindex');\n }\n } else {\n element.tabIndex = -1;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get currentPaneIndex() {\n return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n }\n\n addPointerMoveListeners() {\n const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n this.disabledElements.forEach(element => {\n element.addEventListener('pointermove', this.pointerMoveHandler);\n });\n }\n\n generatePaneClass = (currentIndex: number) => {\n return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n };\n\n onMutationObserved = () => {\n this.removePointerMoveListeners();\n this.addPointerMoveListeners();\n };\n\n paneClicked = event => {\n if (this.isActivePane) return;\n event.preventDefault();\n mirrorEmit(this, ['clickCarouselPane', 'tctClickCarouselPane'], {\n paneIndex: this.index,\n pane: this.hostElement,\n });\n };\n\n pointerMoveHandler = (event: PointerEvent) => {\n event.stopPropagation();\n };\n\n removePointerMoveListeners() {\n this.disabledElements.forEach(element => {\n element.removeEventListener('pointermove', this.pointerMoveHandler);\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label } = this;\n\n return (\n <Host\n class={this.generatePaneClass(this.currentPaneIndex)}\n tabIndex={this.isActivePane ? 0 : -1}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-hidden={this.isActivePane ? undefined : 'true'}\n aria-label={\n label\n ? loc(label)\n : loc('tecton.element.carousel.itemDescription', [\n (this.currentPaneIndex + 1).toString(),\n (this.siblingCount \|\| 0).toString(),\n ])\n }\n onClick={this.paneClicked}\n >\n <article class=\"q2-carousel-pane-main-content\">\n <slot></slot>\n </article>\n </Host>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-carousel-pane.entry.cjs.js","mappings":"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","names":["mirrorEmit","hasValidParent","h","Host","loc"],"sources":["src/components/q2-carousel-pane/q2-carousel-pane.scss?tag=q2-carousel-pane","src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\nq2-carousel {\n .swiper-wrapper {\n align-items: stretch;\n }\n\n .swiper-slide {\n display: flex;\n flex-shrink: 0;\n width: 100%;\n height: auto;\n position: relative;\n transition-property: transform;\n transition: all 0.2s;\n }\n\n .q2-carousel-swiper-container {\n &.full-width-display,\n &.frameless-display {\n q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n background: var-list(--tct-carousel-background, --app-base, #ffffff);\n }\n }\n &.full-width-display {\n q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n }\n }\n &.frameless-display {\n q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content {\n box-shadow: none;\n }\n }\n }\n\n &[auto-height] q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content {\n height: auto;\n }\n}\n\nq2-carousel-pane.q2-carousel-pane {\n --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"))};\n\n cursor: grab;\n\n &:not([is-active-pane]) {\n .q2-carousel-pane-main-content {\n background: var-list(--tct-carousel-pane-inactive-background, --tct-carousel-background, --app-base, #ffffff);\n box-shadow: var-list(--tct-carousel-pane-inactive-box-shadow, --tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n }\n }\n\n &:focus-visible {\n .q2-carousel-pane-main-content {\n outline: none;\n box-shadow: var(--tct-carousel-pane-focus-visible-box-shadow, --const-double-focus-ring);\n }\n }\n\n button {\n border: 0;\n background: transparent;\n transition: all 0.2s;\n opacity: 0.3;\n cursor: pointer;\n\n &:hover {\n opacity: 0.7;\n }\n }\n\n .q2-carousel-pane-main-content {\n box-sizing: border-box;\n flex: 1 1 auto;\n width: 100%;\n min-height: var(--q2-carousel-equal-pane-height, auto);\n box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n transition: var(--comp-carousel-pane-tween);\n background: var-list(\n --tct-carousel-background,\n var-prefixer(carousel-background-color),\n --tct-white,\n --app-white,\n #ffffff\n );\n border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n var-list(\n var-prefixer(carousel-pane-border-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n padding: var-list(var-prefixer(carousel-pane-padding), 7px);\n height: var-list(var-prefixer(carousel-pane-height), 10em);\n }\n\n &[slot-frameless]:not([slot-frameless='false']) {\n .q2-carousel-pane-main-content {\n box-shadow: none;\n border: 0;\n border-radius: 0;\n padding: 0;\n }\n }\n}\n","import { hasValidParent } from '@/utils/component';\nimport { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Carousel Pane\n * @category Display\n * @summary Use as a single slide within a Carousel.\n /\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n // #region Own Properties\n\n disabledElements?: HTMLElement[] = [];\n mutationObserver?: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n Used by `q2-carousel` to determine the pane's index.\n * @private\n /\n @Prop({ reflect: false })\n index: number;\n\n /\n Used by `q2-carousel` to indicate which pane is currently active.\n * @private\n /\n @Prop({ reflect: true })\n isActivePane: boolean;\n\n /\n Text used only as an `aria-label` for accessibility purposes.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Used by `q2-carousel` to indicate how many panes are in the carousel.\n * @private\n /\n @Prop({ reflect: false })\n siblingCount: number;\n\n /\n Used by `q2-carousel` to indicate the pane should be frameless.\n * @private\n /\n @Prop({ reflect: true })\n slotFrameless: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pane is clicked.\n * @deprecated Use 'tctClickCarouselPane' instead\n /\n @Event()\n clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n /\n Emitted when the pane is clicked.\n */\n @Event()\n tctClickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n this.removePointerMoveListeners();\n }\n\n componentWillLoad() {\n hasValidParent(this.hostElement, 'div.q2-carousel-swiper-wrapper');\n }\n\n componentDidLoad(): void {\n this.determineDisabledContent();\n this.addPointerMoveListeners();\n\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('isActivePane')\n determineDisabledContent() {\n const { isActivePane } = this;\n const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n 'q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n );\n\n focusableElements.forEach(element => {\n const hasValidTabIndex =\n element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n if (hasValidTabIndex) {\n element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);\n }\n\n if (isActivePane) {\n if (element.hasAttribute('data-q2-tabindex')) {\n element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n element.removeAttribute('data-q2-tabindex');\n } else {\n element.removeAttribute('tabindex');\n }\n } else {\n element.tabIndex = -1;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get currentPaneIndex() {\n return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n }\n\n addPointerMoveListeners() {\n const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n this.disabledElements.forEach(element => {\n element.addEventListener('pointermove', this.pointerMoveHandler);\n });\n }\n\n generatePaneClass = (currentIndex: number) => {\n return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n };\n\n onMutationObserved = () => {\n this.removePointerMoveListeners();\n this.addPointerMoveListeners();\n };\n\n paneClicked = event => {\n if (this.isActivePane) return;\n event.preventDefault();\n mirrorEmit(this, ['clickCarouselPane', 'tctClickCarouselPane'], {\n paneIndex: this.index,\n pane: this.hostElement,\n });\n };\n\n pointerMoveHandler = (event: PointerEvent) => {\n event.stopPropagation();\n };\n\n removePointerMoveListeners() {\n this.disabledElements.forEach(element => {\n element.removeEventListener('pointermove', this.pointerMoveHandler);\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label } = this;\n\n return (\n <Host\n class={this.generatePaneClass(this.currentPaneIndex)}\n tabIndex={this.isActivePane ? 0 : -1}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-hidden={this.isActivePane ? undefined : 'true'}\n aria-label={\n label\n ? loc(label)\n : loc('tecton.element.carousel.itemDescription', [\n (this.currentPaneIndex + 1).toString(),\n (this.siblingCount \|\| 0).toString(),\n ])\n }\n onClick={this.paneClicked}\n >\n <article class=\"q2-carousel-pane-main-content\">\n <slot></slot>\n </article>\n </Host>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-carousel-pane.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-carousel-pane.entry.cjs.js","sources":["src/components/q2-carousel-pane/q2-carousel-pane.scss?tag=q2-carousel-pane","src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\nq2-carousel {\n .swiper-slide {\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n position: relative;\n transition-property: transform;\n transition: all 0.2s;\n }\n\n .q2-carousel-swiper-container {\n &.full-width-display,\n &.frameless-display {\n q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n background: var-list(--tct-carousel-background, --app-base, #ffffff);\n }\n }\n &.full-width-display {\n q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n }\n }\n }\n}\n\nq2-carousel-pane.q2-carousel-pane {\n --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"))};\n\n cursor: grab;\n\n &:not([is-active-pane]) {\n .q2-carousel-pane-main-content {\n background: var-list(--tct-carousel-pane-inactive-background, --tct-carousel-background, --app-base, #ffffff);\n box-shadow: var-list(--tct-carousel-pane-inactive-box-shadow, --tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n }\n }\n\n &:focus-visible {\n .q2-carousel-pane-main-content {\n outline: none;\n box-shadow: var(--tct-carousel-pane-focus-visible-box-shadow, --const-double-focus-ring);\n }\n }\n\n button {\n border: 0;\n background: transparent;\n transition: all 0.2s;\n opacity: 0.3;\n cursor: pointer;\n\n &:hover {\n opacity: 0.7;\n }\n }\n\n .q2-carousel-pane-main-content {\n box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n transition: var(--comp-carousel-pane-tween);\n background: var-list(\n --tct-carousel-background,\n var-prefixer(carousel-background-color),\n --tct-white,\n --app-white,\n #ffffff\n );\n border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n var-list(\n var-prefixer(carousel-pane-border-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n padding: var-list(var-prefixer(carousel-pane-padding), 7px);\n height: var-list(var-prefixer(carousel-pane-height), 10em);\n }\n\n &[slot-frameless]:not([slot-frameless='false']) {\n .q2-carousel-pane-main-content {\n box-shadow: none;\n border: 0;\n border-radius: 0;\n padding: 0;\n }\n }\n}\n","import { hasValidParent } from '@/utils/component';\nimport { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Carousel Pane\n * @category Display\n * @summary Use as a single slide within a Carousel.\n /\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n // #region Own Properties\n\n disabledElements?: HTMLElement[] = [];\n mutationObserver?: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n Used by `q2-carousel` to determine the pane's index.\n * @private\n /\n @Prop({ reflect: false })\n index: number;\n\n /\n Used by `q2-carousel` to indicate which pane is currently active.\n * @private\n /\n @Prop({ reflect: true })\n isActivePane: boolean;\n\n /\n Text used only as an `aria-label` for accessibility purposes.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Used by `q2-carousel` to indicate how many panes are in the carousel.\n * @private\n /\n @Prop({ reflect: false })\n siblingCount: number;\n\n /\n Used by `q2-carousel` to indicate the pane should be frameless.\n * @private\n /\n @Prop({ reflect: true })\n slotFrameless: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pane is clicked.\n * @deprecated Use 'tctClickCarouselPane' instead\n /\n @Event()\n clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n /\n Emitted when the pane is clicked.\n */\n @Event()\n tctClickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n this.removePointerMoveListeners();\n }\n\n componentWillLoad() {\n hasValidParent(this.hostElement, 'div.q2-carousel-swiper-wrapper');\n }\n\n componentDidLoad(): void {\n this.determineDisabledContent();\n this.addPointerMoveListeners();\n\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('isActivePane')\n determineDisabledContent() {\n const { isActivePane } = this;\n const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n 'q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n );\n\n focusableElements.forEach(element => {\n const hasValidTabIndex =\n element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n if (hasValidTabIndex) {\n element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);\n }\n\n if (isActivePane) {\n if (element.hasAttribute('data-q2-tabindex')) {\n element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n element.removeAttribute('data-q2-tabindex');\n } else {\n element.removeAttribute('tabindex');\n }\n } else {\n element.tabIndex = -1;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get currentPaneIndex() {\n return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n }\n\n addPointerMoveListeners() {\n const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n this.disabledElements.forEach(element => {\n element.addEventListener('pointermove', this.pointerMoveHandler);\n });\n }\n\n generatePaneClass = (currentIndex: number) => {\n return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n };\n\n onMutationObserved = () => {\n this.removePointerMoveListeners();\n this.addPointerMoveListeners();\n };\n\n paneClicked = event => {\n if (this.isActivePane) return;\n event.preventDefault();\n mirrorEmit(this, ['clickCarouselPane', 'tctClickCarouselPane'], {\n paneIndex: this.index,\n pane: this.hostElement,\n });\n };\n\n pointerMoveHandler = (event: PointerEvent) => {\n event.stopPropagation();\n };\n\n removePointerMoveListeners() {\n this.disabledElements.forEach(element => {\n element.removeEventListener('pointermove', this.pointerMoveHandler);\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label } = this;\n\n return (\n <Host\n class={this.generatePaneClass(this.currentPaneIndex)}\n tabIndex={this.isActivePane ? 0 : -1}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-hidden={this.isActivePane ? undefined : 'true'}\n aria-label={\n label\n ? loc(label)\n : loc('tecton.element.carousel.itemDescription', [\n (this.currentPaneIndex + 1).toString(),\n (this.siblingCount \|\| 0).toString(),\n ])\n }\n onClick={this.paneClicked}\n >\n <article class=\"q2-carousel-pane-main-content\">\n <slot></slot>\n </article>\n </Host>\n );\n }\n\n // #endregion\n}\n"],"names":["mirrorEmit","hasValidParent","h","Host","loc"],"mappings":"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"}
1	+ {"version":3,"file":"q2-carousel-pane.entry.cjs.js","sources":["src/components/q2-carousel-pane/q2-carousel-pane.scss?tag=q2-carousel-pane","src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\nq2-carousel {\n .swiper-wrapper {\n align-items: stretch;\n }\n\n .swiper-slide {\n display: flex;\n flex-shrink: 0;\n width: 100%;\n height: auto;\n position: relative;\n transition-property: transform;\n transition: all 0.2s;\n }\n\n .q2-carousel-swiper-container {\n &.full-width-display,\n &.frameless-display {\n q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n background: var-list(--tct-carousel-background, --app-base, #ffffff);\n }\n }\n &.full-width-display {\n q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n }\n }\n &.frameless-display {\n q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content {\n box-shadow: none;\n }\n }\n }\n\n &[auto-height] q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content {\n height: auto;\n }\n}\n\nq2-carousel-pane.q2-carousel-pane {\n --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"))};\n\n cursor: grab;\n\n &:not([is-active-pane]) {\n .q2-carousel-pane-main-content {\n background: var-list(--tct-carousel-pane-inactive-background, --tct-carousel-background, --app-base, #ffffff);\n box-shadow: var-list(--tct-carousel-pane-inactive-box-shadow, --tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n }\n }\n\n &:focus-visible {\n .q2-carousel-pane-main-content {\n outline: none;\n box-shadow: var(--tct-carousel-pane-focus-visible-box-shadow, --const-double-focus-ring);\n }\n }\n\n button {\n border: 0;\n background: transparent;\n transition: all 0.2s;\n opacity: 0.3;\n cursor: pointer;\n\n &:hover {\n opacity: 0.7;\n }\n }\n\n .q2-carousel-pane-main-content {\n box-sizing: border-box;\n flex: 1 1 auto;\n width: 100%;\n min-height: var(--q2-carousel-equal-pane-height, auto);\n box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n transition: var(--comp-carousel-pane-tween);\n background: var-list(\n --tct-carousel-background,\n var-prefixer(carousel-background-color),\n --tct-white,\n --app-white,\n #ffffff\n );\n border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n var-list(\n var-prefixer(carousel-pane-border-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n padding: var-list(var-prefixer(carousel-pane-padding), 7px);\n height: var-list(var-prefixer(carousel-pane-height), 10em);\n }\n\n &[slot-frameless]:not([slot-frameless='false']) {\n .q2-carousel-pane-main-content {\n box-shadow: none;\n border: 0;\n border-radius: 0;\n padding: 0;\n }\n }\n}\n","import { hasValidParent } from '@/utils/component';\nimport { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Carousel Pane\n * @category Display\n * @summary Use as a single slide within a Carousel.\n /\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n // #region Own Properties\n\n disabledElements?: HTMLElement[] = [];\n mutationObserver?: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n Used by `q2-carousel` to determine the pane's index.\n * @private\n /\n @Prop({ reflect: false })\n index: number;\n\n /\n Used by `q2-carousel` to indicate which pane is currently active.\n * @private\n /\n @Prop({ reflect: true })\n isActivePane: boolean;\n\n /\n Text used only as an `aria-label` for accessibility purposes.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Used by `q2-carousel` to indicate how many panes are in the carousel.\n * @private\n /\n @Prop({ reflect: false })\n siblingCount: number;\n\n /\n Used by `q2-carousel` to indicate the pane should be frameless.\n * @private\n /\n @Prop({ reflect: true })\n slotFrameless: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pane is clicked.\n * @deprecated Use 'tctClickCarouselPane' instead\n /\n @Event()\n clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n /\n Emitted when the pane is clicked.\n */\n @Event()\n tctClickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n this.removePointerMoveListeners();\n }\n\n componentWillLoad() {\n hasValidParent(this.hostElement, 'div.q2-carousel-swiper-wrapper');\n }\n\n componentDidLoad(): void {\n this.determineDisabledContent();\n this.addPointerMoveListeners();\n\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('isActivePane')\n determineDisabledContent() {\n const { isActivePane } = this;\n const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n 'q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n );\n\n focusableElements.forEach(element => {\n const hasValidTabIndex =\n element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n if (hasValidTabIndex) {\n element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);\n }\n\n if (isActivePane) {\n if (element.hasAttribute('data-q2-tabindex')) {\n element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n element.removeAttribute('data-q2-tabindex');\n } else {\n element.removeAttribute('tabindex');\n }\n } else {\n element.tabIndex = -1;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get currentPaneIndex() {\n return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n }\n\n addPointerMoveListeners() {\n const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n this.disabledElements.forEach(element => {\n element.addEventListener('pointermove', this.pointerMoveHandler);\n });\n }\n\n generatePaneClass = (currentIndex: number) => {\n return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n };\n\n onMutationObserved = () => {\n this.removePointerMoveListeners();\n this.addPointerMoveListeners();\n };\n\n paneClicked = event => {\n if (this.isActivePane) return;\n event.preventDefault();\n mirrorEmit(this, ['clickCarouselPane', 'tctClickCarouselPane'], {\n paneIndex: this.index,\n pane: this.hostElement,\n });\n };\n\n pointerMoveHandler = (event: PointerEvent) => {\n event.stopPropagation();\n };\n\n removePointerMoveListeners() {\n this.disabledElements.forEach(element => {\n element.removeEventListener('pointermove', this.pointerMoveHandler);\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label } = this;\n\n return (\n <Host\n class={this.generatePaneClass(this.currentPaneIndex)}\n tabIndex={this.isActivePane ? 0 : -1}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-hidden={this.isActivePane ? undefined : 'true'}\n aria-label={\n label\n ? loc(label)\n : loc('tecton.element.carousel.itemDescription', [\n (this.currentPaneIndex + 1).toString(),\n (this.siblingCount \|\| 0).toString(),\n ])\n }\n onClick={this.paneClicked}\n >\n <article class=\"q2-carousel-pane-main-content\">\n <slot></slot>\n </article>\n </Host>\n );\n }\n\n // #endregion\n}\n"],"names":["mirrorEmit","hasValidParent","h","Host","loc"],"mappings":"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"}

package/dist/cjs/q2-carousel.cjs.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
 'use strict';
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-YvKoRT-t.js');
+var index$1 = require('./index-DmGkqdX2.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
-var component = require('./component-DRAntnCA.js');
+var component = require('./component-iASoq6gx.js');
 /**
  * SSR Window 5.0.1
@@ -4634,9 +4634,8 @@ function Autoplay({
   });
 }
-const q2CarouselCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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{display:grid;grid-template-rows:repeat(2, auto);gap:var(--tct-carousel-gap, var(--app-scale-2x, 10px))}.swiper{--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)))}.insufficient-pane-feedback{text-align:center;box-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));background:var(--tct-carousel-background, 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, 7px))}.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-navigation-wrapper{grid-row:2;display:flex;justify-content:center;align-items:center;min-height:44px}.q2-carousel-pagination-navigation-wrapper.evenly-space{justify-content:space-between}.q2-carousel-pagination-navigation-wrapper.center-space{justify-content:center}.q2-carousel-pagination-navigation-wrapper.center-space .q2-carousel-control-center-tray{margin:var(--tct-carouse-pagination-center-tray-margin, 0 24px)}.q2-carousel-floating-arrow-wrapper{--comp-pagination-arrow-height:var(--tct-carousel-floating-nav-arrow-height, 44px);width:auto;z-index:2;display:flex;position:absolute;left:10px;right:10px;top:calc(50% - var(--comp-pagination-arrow-height) / 2);height:var(--comp-pagination-arrow-height);justify-content:space-between;align-items:center}.q2-carousel-control-center-tray{display:flex;align-items:center;gap:var(--tct-carousel-control-gap, 16px)}.q2-carousel-swiper-wrapper.compact{overflow:visible}.q2-carousel-swiper-wrapper.compact q2-btn{margin-top:4px}.q2-carousel-pagination{height:var(--tct-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:var(--tct-carousel-page-indicator-size, 8px);width:var(--tct-carousel-page-indicator-size, 8px);border-radius:50%;background-color:var(--tct-carousel-page-indicator-inactive-color, var(--t-gray11, #CCCCCC));padding:0;border:0;transition:var(--tct-carouse-pagination-transition, all 0.5s)}.q2-carousel-pagination .q2-carousel-page-indicator:hover,.q2-carousel-pagination .q2-carousel-page-indicator.active-page{display:inline-block;background-color:var(--tct-carousel-indicator-active, var(--t-primary, #6A4A9E))}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator{display:none}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-page,.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-pagination.autoplay{align-items:center;gap:var(--tct-carousel-pagination-gap, var(--app-scale-2x, 8px))}.q2-carousel-pagination.autoplay.autoplay-on{--comp-carousel-indicator-grow-animation:autoplay-progress 3s linear forwards}.q2-carousel-pagination.autoplay .q2-carousel-page-indicator{height:var(--tct-carousel-page-indicator-height, 8px);width:var(--tct-carousel-page-indicator-width, 8px);transition:none}.q2-carousel-pagination.autoplay .q2-carousel-page-indicator.active-page{width:var(--tct-carousel-active-page-indicator-width, 24px);border-radius:var(--tct-carousel-active-page-border-radius, 4px);background-color:var(--tct-carousel-indicator-inactive, var(--t-gray11, #CCCCCC));position:relative;overflow:hidden}.q2-carousel-pagination.autoplay .q2-carousel-page-indicator.active-page::after{content:\"\";position:absolute;top:0;left:0;height:100%;width:100%;border-radius:var(--tct-carousel-active-page-border-radius-pseudo, 4px);background-color:var(--tct-carousel-indicator-active, var(--t-primary, #6A4A9E));transform-origin:left;animation:var(--comp-carousel-indicator-grow-animation, none)}@keyframes autoplay-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}.q2-carousel-swiper-container{grid-row:1;}.q2-carousel-swiper-container .swiper-wrapper{position:relative;width:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.q2-carousel-swiper-container.content-peek-display .q2-carousel-pane:not(.swiper-slide-active){transform:scale(var(--tct-carousel-neighbor-pane-scale, 1))}.q2-carousel-swiper-container.frameless-display{padding:var(--tct-carousel-frameless-container-padding, var(--t-carousel-frameless-container-padding, 0))}.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)))}.q2-carousel-navigation-button{display:flex;align-items:center;justify-content:center;position:relative;width:44px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;opacity:var(--tct-carousel-navigation-arrow-opacity, 1);-webkit-tap-highlight-color:transparent}.q2-carousel-navigation-button::before{content:\"\";position:absolute;width:32px;height:32px;border-radius:50%;background-color:var(--tct-carousel-navigation-arrow-background-color, var(--t-primary, #6A4A9E));transition:background-color var(--t-tween-time-in-2, 200ms) var(--t-tween-ease-inout, cubic-bezier(0.4, 0, 0.2, 1))}.q2-carousel-navigation-button:hover::before,.q2-carousel-navigation-button:focus-visible::before{background-color:var(--tct-carousel-btn-hover-background, var(--t-primary-d1, #5F438E))}.q2-carousel-navigation-button:focus-visible{outline:none}.q2-carousel-navigation-button:focus-visible::before{outline:2px solid var(--const-focus-color, #1a73e8);outline-offset:2px}.q2-carousel-navigation-button q2-icon{position:relative;--tct-icon-size:16px;--tct-icon-stroke-primary:var(--tct-carousel-btn-icon-stroke-primary, var(--t-base));--tct-icon-stroke-secondary:var(--tct-carousel-btn-icon-stroke-secondary, var(--app-gray, #747474))}.q2-carousel-autoplay-control{display:flex;align-items:center;justify-content:center;position:relative;width:44px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.q2-carousel-autoplay-control::before{content:\"\";position:absolute;width:32px;height:32px;border-radius:50%;background:transparent;transition:background-color var(--t-tween-time-in-2, 200ms) var(--t-tween-ease-inout, cubic-bezier(0.4, 0, 0.2, 1))}.q2-carousel-autoplay-control:hover::before,.q2-carousel-autoplay-control:focus-visible::before{background-color:var(--tct-carousel-autoplay-hover-background, var(--t-gray13, #E6E6E6))}.q2-carousel-autoplay-control:focus-visible{outline:none}.q2-carousel-autoplay-control:focus-visible::before{outline:2px solid var(--const-focus-color, #1a73e8);outline-offset:2px}.q2-carousel-autoplay-control .autoplay-icon{position:relative;width:var(--tct-carousel-autoplay-icon-width, 16px);height:var(--tct-carousel-autoplay-icon-height, 16px);color:var(--tct-carousel-autoplay-icon-color, var(--t-gray6, #4D4D4D))}";
+const q2CarouselCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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{display:grid;grid-template-rows:repeat(2, auto);gap:var(--tct-carousel-gap, var(--app-scale-2x, 10px))}.swiper{--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)))}.insufficient-pane-feedback{text-align:center;box-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));background:var(--tct-carousel-background, 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, 7px))}.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-navigation-wrapper{grid-row:2;display:flex;justify-content:center;align-items:center;min-height:44px}.q2-carousel-pagination-navigation-wrapper.evenly-space{justify-content:space-between}.q2-carousel-pagination-navigation-wrapper.center-space{justify-content:center}.q2-carousel-pagination-navigation-wrapper.center-space .q2-carousel-control-center-tray{margin:var(--tct-carousel-pagination-center-tray-margin, 0 24px)}.q2-carousel-floating-arrow-wrapper{--comp-pagination-arrow-height:var(--tct-carousel-floating-nav-arrow-height, 44px);width:auto;z-index:2;display:flex;position:absolute;left:10px;right:10px;top:calc(50% - var(--comp-pagination-arrow-height) / 2);height:var(--comp-pagination-arrow-height);justify-content:space-between;align-items:center}.q2-carousel-control-center-tray{display:flex;align-items:center;gap:var(--tct-carousel-control-gap, 16px)}.q2-carousel-swiper-wrapper.compact{overflow:visible}.q2-carousel-swiper-wrapper.compact q2-btn{margin-top:4px}.q2-carousel-pagination{height:var(--tct-carousel-pagination-height, 12px);display:flex;align-content:center;justify-content:center;gap:0.5rem;--comp-carousel-page-transition-duration:var(--tct-carousel-page-transition-duration, 0.3s)}.q2-carousel-pagination .q2-carousel-page-indicator{display:inline-block;height:var(--tct-carousel-indicator-size, 8px);width:var(--tct-carousel-indicator-size, 8px);border-radius:var(--tct-carousel-active-page-border-radius, 4px);background-color:var(--tct-carousel-page-indicator-inactive-color, var(--t-gray11, #CCCCCC));padding:0;border:0;transition:width 0.3s ease, background-color 0.3s ease 0.3s;transition-duration:var(--comp-carousel-page-transition-duration)}.q2-carousel-pagination .q2-carousel-page-indicator:hover{background-color:var(--tct-carousel-indicator-active, var(--t-primary, #6A4A9E));transition:background-color 0.3s ease;transition-duration:var(--comp-carousel-page-transition-duration)}.q2-carousel-pagination .q2-carousel-page-indicator.active-page{width:var(--tct-carousel-indicator-active-width, 24px);border-radius:var(--tct-carousel-active-page-border-radius, 4px);background-color:var(--tct-carousel-indicator-active, var(--t-primary, #6A4A9E))}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator{display:none}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-page,.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-pagination.autoplay{align-items:center;gap:var(--tct-carousel-pagination-gap, var(--app-scale-2x, 8px))}.q2-carousel-pagination.autoplay.autoplay-on{--comp-carousel-indicator-grow-animation:autoplay-progress 3s linear forwards}.q2-carousel-pagination.autoplay .q2-carousel-page-indicator{height:var(--tct-carousel-page-indicator-height, 8px);width:var(--tct-carousel-page-indicator-width, 8px);transition:width 0.3s ease;transition-duration:var(--comp-carousel-page-transition-duration)}.q2-carousel-pagination.autoplay .q2-carousel-page-indicator.active-page{width:var(--tct-carousel-indicator-active-width, 24px);border-radius:var(--tct-carousel-active-page-border-radius, 4px);background-color:var(--tct-carousel-indicator-inactive, var(--t-gray11, #CCCCCC));position:relative;overflow:hidden}.q2-carousel-pagination.autoplay .q2-carousel-page-indicator.active-page::after{content:\"\";position:absolute;top:0;left:0;height:100%;width:100%;border-radius:var(--tct-carousel-active-page-border-radius-pseudo, 4px);background-color:var(--tct-carousel-indicator-active, var(--t-primary, #6A4A9E));transform-origin:left;animation:var(--comp-carousel-indicator-grow-animation, none)}@keyframes autoplay-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}.q2-carousel-section-wrapper{position:relative;grid-row:1;overflow:hidden}.q2-carousel-edge-fade{position:absolute;top:0;bottom:0;width:var(--tct-carousel-edge-fade-width, 64px);z-index:10;pointer-events:none}.q2-carousel-edge-fade-left{left:0;background:linear-gradient(to right, var(--tct-carousel-edge-fade-color, #FFFFFF), transparent)}.q2-carousel-edge-fade-right{right:0;background:linear-gradient(to left, var(--tct-carousel-edge-fade-color, #FFFFFF), transparent)}.q2-carousel-swiper-container{}.q2-carousel-swiper-container .swiper-wrapper{position:relative;width:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.q2-carousel-swiper-container.content-peek-display .q2-carousel-pane:not(.swiper-slide-active){transform:scale(var(--tct-carousel-neighbor-pane-scale, 1))}.q2-carousel-swiper-container.frameless-display{padding:var(--tct-carousel-frameless-container-padding, var(--t-carousel-frameless-container-padding, 0))}.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)))}.q2-carousel-navigation-button{display:flex;align-items:center;justify-content:center;position:relative;width:44px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;opacity:var(--tct-carousel-navigation-arrow-opacity, 1);-webkit-tap-highlight-color:transparent}.q2-carousel-navigation-button::before{content:\"\";position:absolute;width:32px;height:32px;border-radius:50%;background-color:var(--tct-carousel-arrow-background, var(--t-primary, #6A4A9E));transition:background-color var(--t-tween-time-in-2, 200ms) var(--t-tween-ease-inout, cubic-bezier(0.4, 0, 0.2, 1))}.q2-carousel-navigation-button:hover::before,.q2-carousel-navigation-button:focus-visible::before{background-color:var(--tct-carousel-arrow-hover-background, var(--t-primary-d1, #5F438E))}.q2-carousel-navigation-button:focus-visible{outline:none}.q2-carousel-navigation-button:focus-visible::before{outline:2px solid var(--const-focus-color, #1a73e8);outline-offset:2px}.q2-carousel-navigation-button q2-icon{position:relative;--tct-icon-size:16px;--tct-icon-stroke-primary:var(--tct-carousel-arrow-font-color, var(--t-base, #FFFFFF));--tct-icon-stroke-secondary:var(--tct-carousel-btn-icon-stroke-secondary, var(--app-gray, #747474))}.q2-carousel-autoplay-control{display:flex;align-items:center;justify-content:center;position:relative;width:44px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.q2-carousel-autoplay-control::before{content:\"\";position:absolute;width:32px;height:32px;border-radius:50%;background:transparent;transition:background-color var(--t-tween-time-in-2, 200ms) var(--t-tween-ease-inout, cubic-bezier(0.4, 0, 0.2, 1))}.q2-carousel-autoplay-control:hover::before,.q2-carousel-autoplay-control:focus-visible::before{background-color:var(--tct-carousel-autoplay-hover-background, var(--t-gray13, #E6E6E6))}.q2-carousel-autoplay-control:focus-visible{outline:none}.q2-carousel-autoplay-control:focus-visible::before{outline:2px solid var(--const-focus-color, #1a73e8);outline-offset:2px}.q2-carousel-autoplay-control .autoplay-icon{position:relative;width:var(--tct-carousel-autoplay-icon-width, 16px);height:var(--tct-carousel-autoplay-icon-height, 16px);color:var(--tct-carousel-autoplay-icon-color, var(--t-gray6, #4D4D4D))}";
-const carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly */
 const carouselDesktopBreakpoint = 1024; /* viewport width where we show 3 full panes */
 const Q2Carousel = class {
     constructor(hostRef) {
@@ -4657,8 +4656,14 @@ const Q2Carousel = class {
         this.compactMode = false;
         /** Manages re-rendering the component when panes are added or removed. */
         this.currentPaneCount = this.paneCount;
+        /** Keeps all carousel panes at the height of the tallest pane. */
+        this.autoHeight = false;
         /** Enables the auto-play feature and starts the carousel without user input. */
         this.autoPlay = false;
+        /** Adjusts width of active pane automatically in compact screen based on the carousel width. */
+        this.autoWidth = false;
+        /** Breakpoint pixel number for switching to compact mode when autoWIdth is enabled, default is 500.*/
+        this.compactBreakpoint = 500;
         /** Display the carousel panes as frameless with no container or shadow. */
         this.framelessPanes = false;
         /** Display the carousel panes full-width rather than with peeking content. */
@@ -4682,6 +4687,10 @@ const Q2Carousel = class {
                 this.tearDownCarousel();
             }
             this.autoPlayInProgress = this.autoPlay;
+            // Pad the DOM with duplicate panes before Swiper initializes so small carousels have
+            // enough slides for loop mode to rearrange neighbors without leaving empty slots.
+            this.syncPaneDuplicates();
+            this.updateCarouselPaneProps();
             // Save the target index before Swiper init — the realIndexChange callback
             // fires during construction and may overwrite this.index
             const targetIndex = this.realIndex;
@@ -4691,6 +4700,7 @@ const Q2Carousel = class {
             (_c = this.activePane) === null || _c === void 0 ? void 0 : _c.addEventListener('popoverStateChanged', this.handlePopovers);
             if (this.autoPlayInProgress)
                 (_d = this.swiper) === null || _d === void 0 ? void 0 : _d.autoplay.start();
+            this.managePaneHeightObserver();
             // Re-observe after Swiper's DOM changes have settled
             requestAnimationFrame(() => {
                 var _a;
@@ -4747,29 +4757,128 @@ const Q2Carousel = class {
                     break;
             }
         };
+        this.managePaneHeightObserver = () => {
+            var _a, _b, _c;
+            if (this.autoHeight) {
+                this.observePaneHeights();
+                return;
+            }
+            (_a = this.paneResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            if (this.syncPaneHeightFrame !== undefined) {
+                cancelAnimationFrame(this.syncPaneHeightFrame);
+                this.syncPaneHeightFrame = undefined;
+            }
+            this.hostElement.style.removeProperty('--q2-carousel-equal-pane-height');
+            (_c = (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.update) === null || _c === void 0 ? void 0 : _c.call(_b);
+        };
+        this.observePaneHeights = () => {
+            var _a;
+            (_a = this.paneResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            if (typeof ResizeObserver === 'undefined') {
+                this.schedulePaneHeightSync();
+                return;
+            }
+            this.paneResizeObserver = new ResizeObserver(this.schedulePaneHeightSync);
+            this.hostElement.querySelectorAll('.q2-carousel-pane-main-content').forEach(paneContent => {
+                this.paneResizeObserver.observe(paneContent);
+            });
+            this.schedulePaneHeightSync();
+        };
         this.onMutationObserved = () => {
             if (this.paneCount !== this.currentPaneCount) {
                 this.updateCarouselPaneProps();
                 this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
             }
+            else if (this.autoHeight) {
+                this.schedulePaneHeightSync();
+            }
+        };
+        this.schedulePaneHeightSync = () => {
+            if (this.syncPaneHeightFrame !== undefined) {
+                cancelAnimationFrame(this.syncPaneHeightFrame);
+            }
+            this.syncPaneHeightFrame = requestAnimationFrame(() => {
+                this.syncPaneHeightFrame = undefined;
+                this.syncPaneHeights();
+            });
         };
         this.setCarouselWrapperWidth = () => {
             if (this.insufficientPanes)
                 return;
             this.carouselWrapperWidth = this.carouselWrapper.clientWidth;
         };
+        /**
+         * Swiper's loop mode needs enough DOM slides on both sides of a centered active slide. For
+         * two-pane full-width carousels and 3 to 5 pane peek carousels, we double the pane set in the
+         * DOM by cloning each real pane once, giving Swiper 4 to 10 slides to loop through. Duplicates are tagged with
+         * `data-q2-pane-duplicate`; they're excluded from `paneArray` / `paneCount` / pagination, and
+         * logical index changes are mapped back to the real-pane range via `modulo paneCount`.
+         */
+        this.syncPaneDuplicates = () => {
+            const realPanes = this.paneArray;
+            const realCount = realPanes.length;
+            const needsDuplicates = realCount === 2 || (!this.useFullWidthPanes && realCount >= 3 && realCount <= 5);
+            const existingDuplicates = Array.from(this.hostElement.querySelectorAll('q2-carousel-pane[data-q2-pane-duplicate]'));
+            existingDuplicates.forEach(node => node.remove());
+            if (!needsDuplicates || realCount === 0)
+                return;
+            const parent = realPanes[0].parentElement;
+            for (let i = 0; i < realCount; i += 1) {
+                // Build a fresh pane and clone only the user-authored slot content. Cloning the
+                // hydrated real pane would copy Stencil's rendered `<article class="...main-content">`
+                // wrapper, so when the duplicate hydrates it re-wraps → nested articles.
+                const clone = document.createElement('q2-carousel-pane');
+                clone.setAttribute('data-q2-pane-duplicate', 'true');
+                clone.setAttribute('aria-hidden', 'true');
+                // Apply the same classes Stencil will add on hydration so Swiper recognizes the
+                // duplicates as slides during initialization (which happens before Stencil runs).
+                clone.classList.add('q2-carousel-pane', 'swiper-slide', `q2-carousel-pane-${i}`);
+                const sourceContentRoot = realPanes[i].querySelector(':scope > article.q2-carousel-pane-main-content') ||
+                    realPanes[i];
+                Array.from(sourceContentRoot.children).forEach(child => {
+                    clone.appendChild(child.cloneNode(true));
+                });
+                parent.appendChild(clone);
+            }
+        };
+        this.syncPaneHeights = () => {
+            var _a, _b;
+            this.hostElement.style.removeProperty('--q2-carousel-equal-pane-height');
+            const paneContentElements = Array.from(this.hostElement.querySelectorAll('.q2-carousel-pane-main-content'));
+            const tallestPaneHeight = Math.max(...paneContentElements.map(paneContent => paneContent.offsetHeight), 0);
+            if (tallestPaneHeight) {
+                this.hostElement.style.setProperty('--q2-carousel-equal-pane-height', `${tallestPaneHeight}px`);
+            }
+            (_b = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.update) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
         this.tearDownCarousel = () => {
             this.swiper.destroy();
             this.swiper = null;
         };
         this.updateCarouselPaneProps = () => {
-            const { framelessPanes, paneCount, paneArray } = this;
+            const { framelessPanes, paneArray, paneCount } = this;
+            // Swiper's loop mode reorders slide DOM nodes, so DOM order no longer matches pane identity.
+            // When Swiper has tagged a slide, use its data-swiper-slide-index as the authoritative index.
             paneArray.forEach((pane, domIndex) => {
                 const swiperIndex = pane.getAttribute('data-swiper-slide-index');
-                const index = swiperIndex !== null ? parseInt(swiperIndex, 10) : domIndex;
-                pane.index = index;
+                const rawIndex = swiperIndex !== null ? parseInt(swiperIndex, 10) : domIndex;
+                const logicalIndex = paneCount > 0 ? rawIndex % paneCount : rawIndex;
+                pane.index = logicalIndex;
+                pane.siblingCount = paneCount;
+                pane.isActivePane = logicalIndex === this.realIndex;
+                pane.slotFrameless = framelessPanes || undefined;
+            });
+            // Duplicate panes mirror real panes visually but never own "active" — active stays unique
+            // on the real DOM pane. Their `index` maps clicks back to the source via `slideToLoop` in
+            // `carouselPaneClicked`.
+            const duplicatePanes = Array.from(this.hostElement.querySelectorAll('q2-carousel-pane[data-q2-pane-duplicate]'));
+            duplicatePanes.forEach((pane, domIndex) => {
+                const swiperIndex = pane.getAttribute('data-swiper-slide-index');
+                const rawIndex = swiperIndex !== null ? parseInt(swiperIndex, 10) : domIndex + paneCount;
+                const logicalIndex = paneCount > 0 ? rawIndex % paneCount : rawIndex;
+                pane.index = logicalIndex;
                 pane.siblingCount = paneCount;
-                pane.isActivePane = index === this.realIndex;
+                pane.isActivePane = false;
                 pane.slotFrameless = framelessPanes || undefined;
             });
             this.currentPaneCount = paneCount;
@@ -4785,7 +4894,7 @@ const Q2Carousel = class {
         this.renderInsufficientPanesDisplay = () => {
             let insufficientPanesContainerClasses = [
                 'insufficient-pane-feedback',
-                this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',
+                this.useFullWidthPanes ? 'full-width-display' : 'content-peek-display',
             ];
             if (this.compactMode)
                 insufficientPanesContainerClasses = [...insufficientPanesContainerClasses, 'compact'];
@@ -4827,10 +4936,15 @@ const Q2Carousel = class {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
+        var _a;
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
             this.mutationObserver = null;
         }
+        (_a = this.paneResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (this.syncPaneHeightFrame !== undefined) {
+            cancelAnimationFrame(this.syncPaneHeightFrame);
+        }
         if (!!this.swiper) {
             this.tearDownCarousel();
         }
@@ -4851,15 +4965,19 @@ const Q2Carousel = class {
             modules: [Autoplay],
             on: {
                 realIndexChange: swiper => {
-                    this.index = swiper.realIndex + 1;
+                    // When peek mode pads the DOM with duplicates (3- or 4-pane carousels),
+                    // `swiper.realIndex` can point at a duplicate; map it back to the 0..paneCount-1
+                    // range so `this.index`, pagination dots, and emitted events stay logical.
+                    const logicalIndex = this.paneCount > 0 ? swiper.realIndex % this.paneCount : swiper.realIndex;
+                    this.index = logicalIndex + 1;
                     this.updateCarouselPaneProps();
                     const isPaginationFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} .q2-carousel-page-indicator`);
                     const isCarouselFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} q2-carousel-pane`);
                     const isFocused = isPaginationFocused || isCarouselFocused;
                     this.handleAriaLive(isFocused);
-                    mirrorEmit.mirrorEmit(this, ['change', 'tctChange'], { index: swiper.realIndex + 1 });
+                    mirrorEmit.mirrorEmit(this, ['change', 'tctChange'], { index: logicalIndex + 1 });
                     if (isPaginationFocused) {
-                        this.paginationBtns[swiper.realIndex].focus({ preventScroll: true });
+                        this.paginationBtns[logicalIndex].focus({ preventScroll: true });
                     }
                     else if (isCarouselFocused)
                         swiper.slides[swiper.activeIndex].focus({
@@ -4945,8 +5063,11 @@ const Q2Carousel = class {
     ariaLabelObserver() {
         index$1.handleAriaLabel(this);
     }
+    autoHeightChanged() {
+        this.managePaneHeightObserver();
+    }
     carouselWrapperWidthChanged() {
-        this.compactMode = this.carouselWrapperWidth < carouselBreakpoint;
+        this.compactMode = this.carouselWrapperWidth < this.compactBreakpoint;
     }
     framelessPanesChanged() {
         this.updateCarouselPaneProps();
@@ -4956,19 +5077,21 @@ const Q2Carousel = class {
         this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
     }
     indexChanged(newIndex) {
-        var _a, _b;
         // this allows the carousel to be swiped programmatically via the index prop
-        if (newIndex !== ((_a = this.swiper) === null || _a === void 0 ? void 0 : _a.realIndex) + 1) {
-            (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.slideToLoop(this.realIndex);
-            // this.swiper?.slideTo(this.realIndex);
+        if (!this.swiper)
+            return;
+        // Small looped carousels duplicate the pane set, so `swiper.realIndex` may point
+        // at a duplicate. Compare against its logical (mod paneCount) equivalent before deciding
+        // to programmatically slide — otherwise the watcher fights our own realIndexChange mapping.
+        const swiperLogicalIndex = this.paneCount > 0 ? this.swiper.realIndex % this.paneCount : this.swiper.realIndex;
+        if (newIndex !== swiperLogicalIndex + 1) {
+            this.swiper.slideToLoop(this.realIndex);
         }
     }
     // #endregion
     // #region Local Methods
     get activeCarouselOptions() {
-        return this.fullWidthPanes || this.framelessPanes
-            ? this.fullWidthDisplayOptions
-            : this.peekContentDisplayOptions;
+        return this.useFullWidthPanes ? this.fullWidthDisplayOptions : this.peekContentDisplayOptions;
     }
     get activePane() {
         var _a, _b, _c;
@@ -4982,19 +5105,20 @@ const Q2Carousel = class {
         return this.hostElement.querySelectorAll('.q2-carousel-page-indicator');
     }
     get paneArray() {
-        return Array.from(this.hostElement.querySelectorAll('q2-carousel-pane'));
+        return Array.from(this.hostElement.querySelectorAll('q2-carousel-pane:not([data-q2-pane-duplicate])'));
     }
     get paneCount() {
         return this.paneArray.length;
     }
     get peekContentDisplayOptions() {
+        const slidesPerView = (this.autoWidth && this.compactMode) || index$1.isMobile() ? 1.2 : 2;
         return {
-            slidesPerView: 2,
-            spaceBetween: this.compactMode ? 0 : 10,
+            slidesPerView,
+            spaceBetween: 10,
             centerInsufficientSlides: false,
             breakpoints: {
                 [carouselDesktopBreakpoint]: {
-                    slidesPerView: 2,
+                    slidesPerView,
                 },
             },
             ...this.universalCarouselOptions,
@@ -5007,6 +5131,14 @@ const Q2Carousel = class {
     get useDynamicPaginationDots() {
         return this.paneCount && this.paneCount > 5;
     }
+    /**
+     * Swiper's loop mode rearranges existing DOM slides rather than cloning them. Small pane sets
+     * are padded in `syncPaneDuplicates` so Swiper has enough slides while Pane N still visually
+     * loops back to Pane 1.
+     */
+    get useFullWidthPanes() {
+        return this.fullWidthPanes || this.paneCount < 3;
+    }
     handleAriaLive(activeAndFocused) {
         if (this.autoPlayInProgress && !activeAndFocused) {
             this.ariaLiveValue = 'off';
@@ -5016,13 +5148,13 @@ const Q2Carousel = class {
         }
     }
     render() {
-        const { paneCount, fullWidthPanes, framelessPanes, compactMode, showNavigationArrows, arrowPosition = 'bottom', insufficientPanes, autoPlay, hidePagination, ariaLiveValue, label, } = this;
+        const { paneCount, useFullWidthPanes, framelessPanes, compactMode, showNavigationArrows, arrowPosition = 'bottom', insufficientPanes, autoPlay, hidePagination, ariaLiveValue, label, } = this;
         let carouselContainerClasses = ['q2-carousel-swiper-container', 'swiper'];
-        if (fullWidthPanes)
+        if (useFullWidthPanes)
             carouselContainerClasses = [...carouselContainerClasses, 'full-width-display'];
         if (framelessPanes)
             carouselContainerClasses = [...carouselContainerClasses, 'frameless-display'];
-        if (!fullWidthPanes && !framelessPanes)
+        if (!useFullWidthPanes)
             carouselContainerClasses = [...carouselContainerClasses, 'content-peek-display'];
         if (compactMode)
             carouselContainerClasses = [...carouselContainerClasses, 'compact'];
@@ -5031,15 +5163,16 @@ const Q2Carousel = class {
             paginationWrapperClasses.push('evenly-space');
         if (showNavigationArrows && arrowPosition === 'hug')
             paginationWrapperClasses.push('center-space');
-        return (index.h(index.Host, { key: '7c8a2c87c41d8621971bff9a22ab8de2439276c5', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (index.h(index.Fragment, null, paneCount > 1 && (index.h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
+        return (index.h(index.Host, { key: '585ada42e719c5fe7f715ea98e266d406e166511', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (index.h(index.Fragment, null, paneCount > 1 && (index.h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&
             this.renderPrevNavBtn(), index.h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&
-            this.renderNextNavBtn())), index.h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": index$1.loc(label) }, index.h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": ariaLiveValue, onKeyDown: this.keydownHandler }, index.h("slot", null)), showNavigationArrows && arrowPosition === 'float' && (index.h("div", { class: "q2-carousel-floating-arrow-wrapper" }, this.renderPrevNavBtn(), this.renderNextNavBtn())))))));
+            this.renderNextNavBtn())), index.h("div", { class: "q2-carousel-section-wrapper" }, this.edgeFade && index.h("div", { class: "q2-carousel-edge-fade q2-carousel-edge-fade-left" }), this.edgeFade && index.h("div", { class: "q2-carousel-edge-fade q2-carousel-edge-fade-right" }), index.h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": index$1.loc(label) }, index.h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": ariaLiveValue, onKeyDown: this.keydownHandler }, index.h("slot", null)), showNavigationArrows && arrowPosition === 'float' && (index.h("div", { class: "q2-carousel-floating-arrow-wrapper" }, this.renderPrevNavBtn(), this.renderNextNavBtn()))))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "ariaLabel": ["ariaLabelObserver"],
+        "autoHeight": ["autoHeightChanged"],
         "carouselWrapperWidth": ["carouselWrapperWidthChanged"],
         "framelessPanes": ["framelessPanesChanged", "revampCarousel"],
         "fullWidthPanes": ["revampCarousel"],