q2-tecton-elements 1.55.3 → 1.56.0

package/dist/esm/q2-badge_7.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement, F as Fragment, a as getAssetPath, c as createEvent } from './index-7a5365e2.js';
-import { l as loc, h as handleDeprecationWarning, a as handleAriaLabel, b as handleColor, o as overrideFocus, i as isEventFromElement, g as getAriaValueFromProp, c as createGuid, d as isMobile, s as setMessageHeight, e as hasSlotContent, n as nextPaint, r as renderMessages, f as renderLabel } from './index-f2a66217.js';
+import { l as loc, h as handleDeprecationWarning, a as handleAriaLabel, b as handleColor, o as overrideFocus, i as isEventFromElement, g as getAriaValueFromProp, c as createGuid, d as isMobile, s as setMessageHeight, e as hasSlotContent, n as nextPaint, r as renderMessages, f as renderLabel } from './index-c215e8ef.js';
 import { s as shapes } from './shapes-c7e1a3fa.js';
 
 const q2BadgeCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}:host{display:inline-block;line-height:0;--comp-badge-font-size:var(--app-font-size-small, 12px);--comp-badge-large-font-size:var(--app-font-size-medium, 14px);--comp-badge-background:var(--tct-badge-background, var(--t-a11y-gray-color-AAA, #6c6c6c));--comp-badge-color:var(--tct-badge-color, var(--t-base, #ffffff))}:host:host([status=info]){--comp-badge-background:var(--tct-badge-info-background, var(--const-stoplight-info, #0079c1));--comp-badge-color:var(--tct-badge-info-color, var(--const-stoplight-info-text, #ffffff))}:host:host([status=alert]){--comp-badge-background:var(--tct-badge-alert-background, var(--const-stoplight-alert, #d20a0a));--comp-badge-color:var(--tct-badge-alert-color, var(--const-stoplight-alert-text, #ffffff))}:host:host([status=warning]){--comp-badge-background:var(--tct-badge-warning-background, var(--const-stoplight-warning, #c35500));--comp-badge-color:var(--tct-badge-warning-color, var(--const-stoplight-warning-text, #ffffff))}:host:host([status=success]){--comp-badge-background:var(--tct-badge-success-background, var(--const-stoplight-success, #0e8a00));--comp-badge-color:var(--tct-badge-success-color, var(--const-stoplight-success-text, #ffffff))}:host:host([theme=primary]){--comp-badge-background:var(--tct-badge-primary-background, var(--t-primary, #6a4a9e));--comp-badge-color:var(--tct-badge-primary-color, var(--t-primary-text, #ffffff))}:host:host([theme=secondary]){--comp-badge-background:var(--tct-badge-secondary-background, var(--t-secondary, #b3c2cc));--comp-badge-color:var(--tct-badge-secondary-color, var(--t-secondary-text, #141414))}:host:host([theme=tertiary]){--comp-badge-background:var(--tct-badge-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-badge-color:var(--tct-badge-tertiary-color, var(--t-tertiary-text, #141414))}.badge-container{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;height:var(--tct-badge-height, 16px);min-width:var(--tct-badge-min-width, 16px);text-align:center;padding:var(--tct-badge-padding, 0 5px);color:var(--comp-badge-color);background:var(--comp-badge-background);border-radius:var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px))}.badge-container .badge-text{font-size:var(--comp-badge-font-size);line-height:var(--tct-badge-line-height, 14px)}.badge-container .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-font-size) !important}.badge-container.size-large{height:var(--tct-badge-large-height, 22px);min-width:var(--tct-badge-large-min-width, 22px);border-radius:var(--tct-badge-large-border-radius, 11px);padding:var(--tct-badge-large-padding, 0 6px)}.badge-container.size-large .badge-text{font-size:var(--comp-badge-large-font-size);line-height:var(--tct-badge-large-line-height, 20px)}.badge-container.size-large .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-large-font-size) !important}.empty-variant{min-width:unset;width:16px;height:16px;padding:0}.empty-variant.size-large{min-width:unset;width:22px;height:22px;padding:0}";
@@ -265,7 +265,7 @@ const a11y = "standard";
 const add = "standard";
 const airplane = "standard";
 const ambulance = "standard";
-const android = "legacy";
+const android = "browsersos";
 const apple = "standard";
 const arts = "standard";
 const atv = "standard";
@@ -299,7 +299,7 @@ const conversation = "standard";
 const copy = "standard";
 const coupon = "standard";
 const dashboard = "standard";
-const desktop = "system";
+const desktop = "devices";
 const diploma = "standard";
 const divider = "standard";
 const document$1 = "standard";
@@ -325,9 +325,9 @@ const heart = "standard";
 const home = "standard";
 const inbox = "standard";
 const info = "status";
-const ios = "legacy";
+const ios = "browsersos";
 const key = "standard";
-const laptop = "system";
+const laptop = "devices";
 const law = "standard";
 const leaf = "standard";
 const lightbulb = "standard";
@@ -358,7 +358,7 @@ const paw = "standard";
 const people = "standard";
 const percent = "standard";
 const person = "standard";
-const phone = "mobile";
+const phone = "devices";
 const piechart = "standard";
 const play = "standard";
 const pricetag = "standard";
@@ -389,7 +389,7 @@ const star = "standard";
 const statements = "standard";
 const storefront = "standard";
 const success = "status";
-const tablet = "mobile";
+const tablet = "devices";
 const target = "standard";
 const taxi = "standard";
 const time = "standard";
@@ -457,24 +457,24 @@ const iconMap = {
 	"brand-zelle-name-color": "brand",
 	"brand-zelle-name-filled": "brand",
 	briefcase: briefcase,
-	"browser-chrome": "legacy",
-	"browser-chrome-color": "legacy",
-	"browser-chrome-filled": "legacy",
-	"browser-edge": "legacy",
-	"browser-edge-color": "legacy",
-	"browser-edge-filled": "legacy",
-	"browser-firefox": "legacy",
-	"browser-firefox-color": "legacy",
-	"browser-firefox-filled": "legacy",
-	"browser-ie": "legacy",
-	"browser-ie-color": "legacy",
-	"browser-ie-filled": "legacy",
-	"browser-opera": "legacy",
-	"browser-opera-color": "legacy",
-	"browser-opera-filled": "legacy",
-	"browser-safari": "legacy",
-	"browser-safari-color": "legacy",
-	"browser-safari-filled": "legacy",
+	"browser-chrome": "browsersos",
+	"browser-chrome-color": "browsersos",
+	"browser-chrome-filled": "browsersos",
+	"browser-edge": "browsersos",
+	"browser-edge-color": "browsersos",
+	"browser-edge-filled": "browsersos",
+	"browser-firefox": "browsersos",
+	"browser-firefox-color": "browsersos",
+	"browser-firefox-filled": "browsersos",
+	"browser-ie": "browsersos",
+	"browser-ie-color": "browsersos",
+	"browser-ie-filled": "browsersos",
+	"browser-opera": "browsersos",
+	"browser-opera-color": "browsersos",
+	"browser-opera-filled": "browsersos",
+	"browser-safari": "browsersos",
+	"browser-safari-color": "browsersos",
+	"browser-safari-filled": "browsersos",
 	"bubble-graph": "standard",
 	bug: bug,
 	buildings: buildings,
@@ -496,46 +496,46 @@ const iconMap = {
 	card: card,
 	"card-add": "cards",
 	"card-amazon": "cards",
-	"card-amazon-color": "legacy",
+	"card-amazon-color": "cards",
 	"card-amex": "cards",
-	"card-amex-color": "legacy",
+	"card-amex-color": "cards",
 	"card-applepay": "cards",
-	"card-applepay-color": "legacy",
+	"card-applepay-color": "cards",
 	"card-bitcoin": "cards",
-	"card-bitcoin-color": "legacy",
+	"card-bitcoin-color": "cards",
 	"card-dinersclub": "cards",
-	"card-dinersclub-color": "legacy",
+	"card-dinersclub-color": "cards",
 	"card-discover": "cards",
-	"card-discover-color": "legacy",
+	"card-discover-color": "cards",
 	"card-edit": "cards",
 	"card-gift": "cards",
 	"card-googlepay": "cards",
-	"card-googlepay-color": "legacy",
+	"card-googlepay-color": "cards",
 	"card-heart": "cards",
 	"card-in-hand": "cards",
 	"card-insert": "cards",
 	"card-jcb": "cards",
-	"card-jcb-color": "legacy",
+	"card-jcb-color": "cards",
 	"card-join": "cards",
 	"card-locked": "cards",
 	"card-maestro": "cards",
-	"card-maestro-color": "legacy",
+	"card-maestro-color": "cards",
 	"card-mastercard": "cards",
-	"card-mastercard-color": "legacy",
+	"card-mastercard-color": "cards",
 	"card-more": "cards",
 	"card-paypal": "cards",
-	"card-paypal-color": "legacy",
+	"card-paypal-color": "cards",
 	"card-prohibited": "cards",
 	"card-remove": "cards",
 	"card-scissors": "cards",
 	"card-star": "cards",
 	"card-stripe": "cards",
-	"card-stripe-color": "legacy",
+	"card-stripe-color": "cards",
 	"card-success": "cards",
 	"card-unknown": "cards",
 	"card-update": "cards",
 	"card-visa": "cards",
-	"card-visa-color": "legacy",
+	"card-visa-color": "cards",
 	cart: cart,
 	"cart-moving": "standard",
 	cash: cash,
@@ -697,15 +697,15 @@ const iconMap = {
 	"nest-egg": "standard",
 	newspaper: newspaper,
 	options: options,
-	"os-android": "legacy",
-	"os-android-color": "legacy",
-	"os-android-filled": "legacy",
-	"os-apple": "legacy",
-	"os-apple-color": "legacy",
-	"os-apple-filled": "legacy",
-	"os-windows": "legacy",
-	"os-windows-color": "legacy",
-	"os-windows-filled": "legacy",
+	"os-android": "browsersos",
+	"os-android-color": "browsersos",
+	"os-android-filled": "browsersos",
+	"os-apple": "browsersos",
+	"os-apple-color": "browsersos",
+	"os-apple-filled": "browsersos",
+	"os-windows": "browsersos",
+	"os-windows-color": "browsersos",
+	"os-windows-filled": "browsersos",
 	palette: palette,
 	"paper-plane": "standard",
 	paperclip: paperclip,
@@ -793,8 +793,8 @@ const iconMap = {
 	umbrella: umbrella,
 	unlink: unlink,
 	upload: upload,
-	"venmo-colored": "legacy",
-	"venmo-filled": "legacy",
+	"venmo-colored": "brand",
+	"venmo-filled": "brand",
 	virus: virus,
 	wallet: wallet,
 	warning: warning,
@@ -805,12 +805,13 @@ const iconMap = {
 	"zoom-out": "standard"
 };
 
-const q2IconCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}:host{display:inline-block;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round));transition:var(--tct-icon-transition, none)}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.fill-secondary{fill:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)));transition:var(--tct-icon-fill-transition, none)}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentcolor));transition:var(--tct-icon-stroke-primary-transition, none)}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a))}";
+const q2IconCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}:host{display:inline-block;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, var(--tct-icon-group-stroke-width, 2)));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round));transition:var(--tct-icon-transition, none)}svg.brand{stroke-width:var(--tct-icon-group-brand-stroke-width, 1)}svg.browsersos{stroke-width:var(--tct-icon-group-browsersos-stroke-width, 1)}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.fill-secondary{fill:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)));transition:var(--tct-icon-fill-transition, none)}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentcolor));transition:var(--tct-icon-stroke-primary-transition, none)}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a))}";
 const Q2IconStyle0 = q2IconCss;
 
 const Q2Icon = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.spritePrefix = 'tecton-sprite-';
         this.iconClone = undefined;
         this.inline = undefined;
         this.label = undefined;
@@ -875,7 +876,7 @@ const Q2Icon = class {
         const { spriteFileName } = this;
         if (!spriteFileName)
             return;
-        return `tecton-sprite-${spriteFileName}`;
+        return `${this.spritePrefix}${spriteFileName}`;
     }
     checkForSprite() {
         var _a;
@@ -972,7 +973,7 @@ const Q2Icon = class {
     // #region Render Methods
     render() {
         const { label, type } = this;
-        return this.isCustom ? (h("slot", null)) : (h("svg", { "aria-hidden": !!label ? undefined : 'true', role: !!label ? 'img' : undefined, "aria-labelledby": !!label ? 'label' : undefined, viewBox: this.iconCloneViewBox, xmlns: "http://www.w3.org/2000/svg" }, !!label && h("title", { id: "label" }, label), !!type && h("use", { ref: el => (this.spriteUse = el) }), h("g", { ref: el => (this.spriteGroup = el) })));
+        return this.isCustom ? (h("slot", null)) : (h("svg", { "aria-hidden": !!label ? undefined : 'true', role: !!label ? 'img' : undefined, "aria-labelledby": !!label ? 'label' : undefined, viewBox: this.iconCloneViewBox, xmlns: "http://www.w3.org/2000/svg", class: this.spriteFileName }, !!label && h("title", { id: "label" }, label), !!type && h("use", { ref: el => (this.spriteUse = el) }), h("g", { ref: el => (this.spriteGroup = el) })));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return getElement(this); }
@@ -4514,7 +4515,7 @@ const Q2Input = class {
         return (h(Fragment, null, hasCustomDisplaySlot && (h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }))), h("input", { ref: el => (this.inputRef = el), class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, maxlength: ['date', 'currency'].includes(this.type) ? undefined : this.maxlength || undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-owns": ariaOwns, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-activedescendant": ariaActivedescendant, autocomplete: this.computedAutocomplete, autocapitalize: this.autocapitalize, autocorrect: this.autocorrect === 'on' ? 'on' : 'off', autofocus: this.autofocus, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: this._role, "test-id": "inputField", readonly: this.readonly || this._preventEntry, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode, pattern: this.pattern || undefined })));
     }
     render() {
-        return (h("div", { key: '2cc30e91a73c9add9f82e794a0e04266fe5e8e78', class: this.wrapperClasses }, h("div", { key: '64baf86fc032a16240e7d4afb9985de4ed63346f', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this)));
+        return (h("div", { key: '89cd96989f8f94952e141cc7dc2c7125106817b5', class: this.wrapperClasses }, h("div", { key: '6112dc111fcd2ea2d82416fa820ac803e7514f23', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this)));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -4867,7 +4868,7 @@ const Q2TabContainer = class {
         return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
     }
     render() {
-        return (h(Fragment, { key: '97f2da0c2b5b73725ba7df8df2a0eb549f9cfd88' }, h("div", { key: 'ff697afe9618dfc6e262701febdca55b279de4d5', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '11151d37351e2770f29f5f0b31df5afb68855dc2' }, h("div", { key: 'd2bf7ed9da0348421a767ba7d38faf942ad44634', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: 'f53cc922938e075b524cae7289a4b5645b867078', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '0c17c23b928f2aab34632073d3b3ba380e153865', class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'ea146cfc55d86e1531bbe94a9a217b93463f9fea', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: 'fce01f8a17e78df73cc834a203b55b9427c4facc', class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'd379b82bd9465278b1e40f82137fc08bd8b0c750', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '97d39c2ff74ac064da28ca763fbd3d6e98a952dd', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '5a9a728931e3dfafe2b20b5a1d1e72b5ef67913c', class: "tab-content" }, h("slot", { key: 'e10400800c9ff9e3b7d9947a32abeeb146981f8b', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '00671ce4926d564d32501ec38abd48deac07cfbb' }, h("div", { key: '5c1f13533e55cfd63c7e8e80e42cfbd1f9a219dd', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: 'f3c7f03440d17924f526b315efedef8f90285a78' }, h("div", { key: 'd7be2db2322c112984c7096a884e7a3f7b48d2d0', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: '02c6d98870223b4b081839db9af754d491e6fe2f', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: 'f694ea3ce2beb6c25d09f9a26ddddd7123bb76f6', class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '79c62503753d185782b922ec2fd15e7042f8e459', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '8b0b9b0e6c21d08c3dc5f1c9003e4024ec3bd6db', class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'b4fdd4caa182e430255a8787300113c472ddf9f5', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '16036b801d37dcef0249aff290d19d9e484a0ce4', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '7879b477deded91f2ec856c33a4b5170857c83ae', class: "tab-content" }, h("slot", { key: 'c1d3857b108dd9f6faea22cfb28495d6fd91f83c', onSlotchange: () => this.onSlotChange() }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -4903,7 +4904,7 @@ const Q2TabPane = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '8f27e390528c79ae1589e1a7614c72455ebbdd32', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: '2d00ea2e03bbac11a63193debd2bb9904050ba37' })));
+        return (h("div", { key: '86b748104c438b4d92f2343d30fac0b5e7150835', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: 'db229a7eeeaaa208635413f57ff5021b9230ecb0' })));
     }
     static get watchers() { return {
         "badgeCount": ["badgeObserver"],