@tet/tet-components 1.4.88-testing → 1.4.89-staging

package/dist/collection/components/basic/buttons/tet-radio/tet-radio.js

@@ -99,24 +99,24 @@ export class TetRadio {
     }
     render() {
         const { id, disabled, value, checked, name, label, accessibilityLabel, error, inputAutofocus, iconName, labelFont, alignCenter, hasSlotIcon, unavailable, iconType } = this;
-        return (h(Host, { key: '044bed922df2605146b724df6c07bd1262c624c6' }, h("div", { key: '93f6e7e407a7aa9314a97adf0bdcbacdf2d4598a', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: 'fbbaedb8aa60f1e41d22084b4936ece65dcf6de6', class: {
+        return (h(Host, { key: '92d0faaa774f60c9b72ff5bfb06bf0549dbd732e' }, h("div", { key: '61af2cb7d15e35ce29bdbea80007161e886bbd35', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: '2a50e9a962b76f9d383ddfe9fa9667773ef4dab1', class: {
                 'radio__container': true,
                 'radio__container--focus-style': this.focusStyleOnContainer,
                 'radio__container--align-center': alignCenter,
-            }, htmlFor: id }, h("input", { key: '1c313e9d39c542d004a7d986455d43b202e4430e', class: {
+            }, htmlFor: id }, h("input", { key: 'd26d54057d5c052ca77f2b1866f0650d21a58229', class: {
                 "radio__html-input": true,
                 'radio__html-input--unavailable': unavailable,
-            }, id: id, name: name, type: "radio", value: value, disabled: disabled || unavailable, checked: checked, onChange: this.handleInputChange, autofocus: inputAutofocus, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}) }), h("span", { key: '7f5cef267fae409fa6902096b7a4b308f8ea178e', class: {
+            }, id: id, name: name, type: "radio", value: value, disabled: disabled || unavailable, checked: checked, onChange: this.handleInputChange, autofocus: inputAutofocus, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}) }), h("span", { key: '2bba9cb17108ebbcf104fffd94a72b8750d6b355', class: {
                 'radio__input-background': true,
                 'radio__input-background--has-label-prop': !!label,
                 ...(labelFont ? { [`radio__input-background--${labelFont}`]: true } : {}),
-            } }), h("span", { key: 'adc802363f3556df97467aeecf478aae3c2e48d4', class: {
+            } }), h("span", { key: '3af4ee740e6b184f3395d44810f0d801bf8ee795', class: {
                 'radio__input': true,
                 'radio__input--error': error,
                 'radio__input--hide-focus-style': this.focusStyleOnContainer,
                 'radio__input--has-label-prop': !!label,
                 ...(labelFont ? { [`radio__input--${labelFont}`]: true } : {}),
-            } }), h("div", { key: 'c697a26327fe81b39091649da7599091f1601c30', class: {
+            } }), h("div", { key: '7a637b429fd507acc763849eb98b49eecb8894de', class: {
                 'radio__label-container': true,
                 'radio__label-container--line-height': hasSlotIcon || !!iconName,
             } }, iconName ? (h("tet-icon", { theme: ['classic', 'light'].includes(this.theme) ? 'light' : 'dark', name: iconName, type: iconType, class: {
@@ -127,11 +127,11 @@ export class TetRadio {
                 'radio__label-slot-icon': true,
                 'radio__label-slot-icon--hidden': !hasSlotIcon,
                 ...(labelFont ? { [`radio__label-slot-icon--${labelFont}`]: true } : {}),
-            } }, h("slot", { name: "label-icon" }))), h("span", { key: '12bec614da0085a66d4def197bd656e119b2743e', class: {
+            } }, h("slot", { name: "label-icon" }))), h("span", { key: 'd22cf820189a9d87fbb648a756b5390936e16054', class: {
                 'radio__label': true,
                 'radio__label--has-slot-icon': hasSlotIcon,
                 ...(labelFont ? { [`radio__label--${labelFont}`]: true } : {}),
-            }, innerHTML: label }, h("slot", { key: '75fc6c14b139b6f3298b8ffa2fd4b80ffbf4249b' })))))));
+            }, innerHTML: label }, h("slot", { key: '65159335b20885115d031a1511d08c62987a6e68' })))))));
     }
     static get is() { return "tet-radio"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/basic/buttons/tet-radio-blocks/tet-radio-blocks.js

@@ -54,7 +54,7 @@ export class TetRadioBlocks {
     }
     render() {
         const { theme, blocks } = this;
-        return (h(Host, { key: 'e1f32a693a04facdc73ee50fb492259314f15512' }, h("div", { key: 'bd8efca139630add4901c936bddff4eeddc22a0d', class: {
+        return (h(Host, { key: '95c0ccd418bd0fe0c10c9fe67015cb590253ece6' }, h("div", { key: '4fca1d3c7d42685ec532c79d73197767730afe21', class: {
                 'radio-block__container': true,
                 [`radio-block-${theme}-theme`]: true,
                 [`row-of-${this.blocksPerRow}`]: !!this.blocksPerRow

package/dist/collection/components/basic/buttons/tet-switch/tet-switch.js

@@ -46,16 +46,16 @@ export class TetSwitch {
     }
     render() {
         const { label, name, theme, disabled, checked, accessibilityLabel, labelFont, alignCenter, labelPosition } = this;
-        return (h(Host, { key: '87b48fda4b73c6b0970c162e37871664028c94bc' }, h("div", { key: '4c3fcb25433dc75862fe7846bdee5e9d6a4a7086', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: 'cc6b10c3051088e545de10327a3e823482717710', class: {
+        return (h(Host, { key: '8f83c21dd384662118c0e1ae6f1d189c8bd540ff' }, h("div", { key: 'cf540828b97b7e75268f2e2cd8164517f91672de', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: '239a5e82c4f419e0ad66f2d53e9c78b6ad3e8878', class: {
                 'switch__container': true,
                 'switch__container--align-start': !alignCenter,
                 [`switch__container--${labelFont}`]: true,
                 'switch__container--focus-style': this.focusStyleOnContainer,
-            }, part: "switch-container", htmlFor: "tet-switch" }, h("input", { key: 'b4d928ec795a933aeaee350f40009952748ee0ce', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange.bind(this), ...(accessibilityLabel ? { "aria-label": accessibilityLabel } : {}) }), labelPosition === 'right' && this.renderSwitch(), h("span", { key: '92b15df23f6c5a1ece1c95a7eda0aca7b2b93e7f', class: {
+            }, part: "switch-container", htmlFor: "tet-switch" }, h("input", { key: 'c167bb4274f31a0de83dfd928afb3ae3fbc14dd7', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange.bind(this), ...(accessibilityLabel ? { "aria-label": accessibilityLabel } : {}) }), labelPosition === 'right' && this.renderSwitch(), h("span", { key: '364c159ed958a5db0e2a60d12710101eaa559dd3', class: {
                 'switch__label': true,
                 ...(labelPosition === 'left' ? { 'switch__label--left': true } : {}),
                 ...(labelFont ? { [`switch__label--${labelFont}`]: true } : {}),
-            }, innerHTML: label }, h("slot", { key: '854b1f777f53115dfa3a12ce707647272ecb31eb' })), labelPosition === 'left' && this.renderSwitch()))));
+            }, innerHTML: label }, h("slot", { key: '92df072650c0a88d9adcf27f6dc86eb945914102' })), labelPosition === 'left' && this.renderSwitch()))));
     }
     static get is() { return "tet-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-content/tet-tab-content.js

@@ -161,11 +161,11 @@ export class TetTabContent {
         this.selectedId = id;
     }
     render() {
-        return (h(Host, { key: '2bb3c9eb29e7d1af040e19df576c465dc70e15a2' }, h("div", { key: 'bcbd0c25a1ac76a653e5cc4901fe3df7e36eb4a4', class: {
+        return (h(Host, { key: 'a3af21b6704556ee041f727a6afe101f52e287cf' }, h("div", { key: '138fe86c811e9422e411a068c80170a1c7c438ac', class: {
                 'tet-tab-content': true,
                 'use-visibility': this.useVisibility,
                 [this.theme]: true
-            } }, h("slot", { key: 'fedc25761ccc5281b6b5f866bbb4eb6c7f618057' }))));
+            } }, h("slot", { key: '4e1712be17522b8ff353c670cd0ae07491378ad5' }))));
     }
     static get is() { return "tet-tab-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.js

@@ -652,7 +652,7 @@ export class TetTabHeader {
     }
     render() {
         const shouldRenderOverflowGradients = this.showOverflowGradients;
-        return (h(Host, { key: '7ec1139f579ef209df0af5bb1a0c2c318441aa35', "data-id-suffix": this.idSuffix }, h("div", { key: '46912061c10409706acaf76a5814622ae201e198', class: {
+        return (h(Host, { key: 'e72eff166042cfa9e3542165bf9fa6452386d036', "data-id-suffix": this.idSuffix }, h("div", { key: '2818784186bd53998e3ccb04f6754ced9f8dc52f', class: {
                 'tabs': true,
                 'tabs--segmented': this.segmented,
                 'tabs--disabled': this.isSwitchDisabled,
@@ -662,7 +662,7 @@ export class TetTabHeader {
                 [this.theme]: true,
                 [this.sizing]: true,
                 [this.type]: !!this.type
-            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: this.isSwitchMode ? 'radiogroup' : 'tablist', "aria-label": this.isSwitchMode && this.accessibilityLabel ? this.accessibilityLabel : undefined, "aria-orientation": this.isSwitchMode ? 'horizontal' : undefined, "aria-disabled": this.isSwitchDisabled ? 'true' : undefined }, shouldRenderOverflowGradients && h("div", { key: '77dd73bfb3eb00358c1f5dea34e2cedf8d4a998d', class: "tabs-gradient tabs-gradient-left", "aria-hidden": "true" }), h("slot", { key: '7eff26bd0244486f28be39bb64245c3ef8dee0fb', onSlotchange: () => this.updatePositionClass(), ref: (slot) => (this.tabContainer = slot) }), shouldRenderOverflowGradients && h("div", { key: 'a1c5faa59e7f3a62f8062ec2dc74706e35f7f766', class: "tabs-gradient tabs-gradient-right", "aria-hidden": "true" })), h("div", { key: 'cca3b3b98de15f8367720adf3d74b140f50c7d5a', class: {
+            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: this.isSwitchMode ? 'radiogroup' : 'tablist', "aria-label": this.isSwitchMode && this.accessibilityLabel ? this.accessibilityLabel : undefined, "aria-orientation": this.isSwitchMode ? 'horizontal' : undefined, "aria-disabled": this.isSwitchDisabled ? 'true' : undefined }, shouldRenderOverflowGradients && h("div", { key: 'c1f820bb7aa163232979c6ef87629a2416438f6d', class: "tabs-gradient tabs-gradient-left", "aria-hidden": "true" }), h("slot", { key: '4f4faa4010939933885986666a661925bb6a7513', onSlotchange: () => this.updatePositionClass(), ref: (slot) => (this.tabContainer = slot) }), shouldRenderOverflowGradients && h("div", { key: 'e4a0a3738db41816a0b1e619223a789b804f0979', class: "tabs-gradient tabs-gradient-right", "aria-hidden": "true" })), h("div", { key: '6b885bbb1a44e19c85063575a5948a746fa8e5fd', class: {
                 'tabs-line': !this.segmented,
                 'no-underline': this.hideHeaderUnderline || this.isScrollableType,
                 [this.theme]: true

package/dist/collection/components/basic/buttons/tet-tag/tet-tag.js

@@ -21,12 +21,12 @@ export class TetTag {
         await processTranslations('tet-components', this.language);
     }
     render() {
-        return (h(Host, { key: '834e40e0b73ed2ef306cc4668a36d721cbe16f4c' }, h("button", { key: '79f527946ef083d4d3ff8980d58ed9369ee1c354', class: {
+        return (h(Host, { key: '0afd33de36d01a62509024f99f0e152b93b061fb' }, h("button", { key: 'b557951086eedfcc3e2a2fb795693fb23e8497e7', class: {
                 tag: true,
                 'tag-active': this.active,
                 'tag--icon': this.showIcon,
                 [`theme-${this.theme}`]: true,
-            }, "aria-pressed": this.active.toString(), disabled: this.disabled }, this.tagTitle && h("p", { key: '1d6de3657a9ddb4405a216ad81b6b3f79a0241d4', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: '04ef1bafee80a43066ff8dcbf00f7d70dbba4a75', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '79ec1e1fe535722dcbab51456c85e9e169da0b6c', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
+            }, "aria-pressed": this.active.toString(), disabled: this.disabled }, this.tagTitle && h("p", { key: 'b24e9a083482394d3649129dfdc354cd1d36a2e7', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: 'c98077a0914fcc103e3dc0b4d0f8bd58fd85c846', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '77d1260955f5b688807afd6bead03da450825881', class: "tag-icon", name: "tc-close-circle", part: "icon-selected" }))));
     }
     static get is() { return "tet-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/carousel/tet-carousel/tet-carousel.js

@@ -932,22 +932,22 @@ export class TetCarousel {
                 trackTransition = 'none';
             }
         }
-        return (h(Host, { key: 'ad132abf1f4de351587972348634b90e76e22ab3' }, h("div", { key: '086d8d972fca9cc528b2dedb8f900ca1a17d4611', class: { 'tet-carousel': true, [`${this.theme}`]: true, 'tet-carousel--unified-buttons': this.unifiedButtons }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '13587675acf78a9161d73a26ba0ea7b8b9d143fb', class: "tet-carousel__container" }, h("div", { key: 'decb3ff4c21e68ec1c411dad2ba9cff96f005d34', class: "tet-carousel__gradient-left", ref: (el) => {
+        return (h(Host, { key: 'afdcdf742c1d43a3a03191acd1a91f3d94081987' }, h("div", { key: '5975f9f682fc55284deeb1e72879ac5be1949550', class: { 'tet-carousel': true, [`${this.theme}`]: true, 'tet-carousel--unified-buttons': this.unifiedButtons }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '5723e8899dc7e33428e5cc6f71b921565d815d09', class: "tet-carousel__container" }, h("div", { key: 'da90bbeb6c7a271acb57307374d99b8bf01f7e04', class: "tet-carousel__gradient-left", ref: (el) => {
                 this.leftGradientRef = el;
-            } }), h("div", { key: '0cd620f52647b335f18895707d4ab3a3163b2b5b', class: "tet-carousel__gradient-right", ref: (el) => {
+            } }), h("div", { key: '0cc35a37e3fb99cf6b4023730e39997142b57891', class: "tet-carousel__gradient-right", ref: (el) => {
                 this.rightGradientRef = el;
-            } }), h("div", { key: '831c329f8e452cf9335dc28b53984c08f1c9c88b', class: `tet-carousel__track ${showControls ? '' : 'tet-carousel__track--center'}`, ref: (el) => (this.trackElement = el), style: {
+            } }), h("div", { key: 'd428b427170a585271103a3c32bf8d145ceb2b9e', class: `tet-carousel__track ${showControls ? '' : 'tet-carousel__track--center'}`, ref: (el) => (this.trackElement = el), style: {
                 transform: `translate3d(${this.dragOffset}px, 0, 0)`,
                 transition: trackTransition,
                 willChange: 'transform'
-            }, onPointerDown: this.onPointerDown, onPointerUp: this.onPointerUp }, h("div", { key: 'a95a6f779918bb2d21bfa177792af358852d1866', class: {
+            }, onPointerDown: this.onPointerDown, onPointerUp: this.onPointerUp }, h("div", { key: 'a9a4bf16dc888048820c77a7acaa7e65b45631e1', class: {
                 'tet-carousel__track-content': true,
                 'tet-carousel__track-content--nudge': this.isNudgeAnimating
             }, ref: (el) => (this.trackContentElement = el), style: {
                 '--tet-carousel-nudge-distance': `${TetCarousel.NUDGE_DISTANCE_PX}px`
-            }, onAnimationEnd: this.onNudgeAnimationEnd }, h("slot", { key: '4e6536f4edf8a196e98bf799978aa23913d5fc5d' })))), !!this.label && h("div", { key: 'afa6d0a9d4b790b04fa38c32fe9400ecd8be7ab2', class: "tet-carousel__label" }, this.label), showControls && (h("div", { key: 'cb506ebda9394b6adb726d00ce7b8a34f47da595', class: "tet-carousel__controls" }, showButtons && (h("div", { key: '39e427155bf759235e4606c73a64f67331fb178f', class: "tet-carousel__buttons tet-carousel__buttons--mobile", ref: (el) => (this.mobileBackButtonWrapper = el) }, h("tet-button", { key: '06740a3682c2ceedc22c41389a5865c9533659dd', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }))), showDots && (h("div", { key: 'd6757681663a2271946d76c335536e722b8a1c20', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: idx === this.activeDotIndex ? 0 : -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, "aria-label": `${idx === this.activeDotIndex
+            }, onAnimationEnd: this.onNudgeAnimationEnd }, h("slot", { key: '773b9691a19f0d62010b3c1c4a12f470ab87688d' })))), !!this.label && h("div", { key: '772df7af616ab7dc1168979d5eaa91ada0a4d807', class: "tet-carousel__label" }, this.label), showControls && (h("div", { key: '9a8088a294974792aadf1b4f39f6528b76f753ae', class: "tet-carousel__controls" }, showButtons && (h("div", { key: 'e0980949c347a4dde8405fb5d323eabfe6d800c6', class: "tet-carousel__buttons tet-carousel__buttons--mobile", ref: (el) => (this.mobileBackButtonWrapper = el) }, h("tet-button", { key: 'e29bdadaa37b441c59dbc82880ef1aaa48606564', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }))), showDots && (h("div", { key: '33b1e0b03808354cbf680cf31cc2c443dca9c26d', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: idx === this.activeDotIndex ? 0 : -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, "aria-label": `${idx === this.activeDotIndex
                 ? t('components-carousel-indicator-button-active')
-                : t('components-carousel-indicator-button')} ${idx + 1}/${this.dotCount}`, "aria-current": idx === this.activeDotIndex ? 'true' : undefined, onPointerDown: (e) => e.stopPropagation(), onKeyDown: (event) => this.handleDotKeyDown(event, idx), onClick: () => this.handleDotClick(idx) }))))), showButtons && (h("div", { key: '4cdceb1e8341d5ef1f486908ce20b76d49aa3670', class: "tet-carousel__buttons" }, h("tet-button", { key: '2d813f6f52864d5c03c06e95488f8042e612c225', class: "tet-carousel__buttons--desktop", theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }), h("tet-button", { key: '5abab060727a1603f24d700be1ec8887b9be80d5', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconRight, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handleNext(), accessibilityLabel: t('components-carousel-next'), disabled: this.isRightNavigationDisabled() }))))))));
+                : t('components-carousel-indicator-button')} ${idx + 1}/${this.dotCount}`, "aria-current": idx === this.activeDotIndex ? 'true' : undefined, onPointerDown: (e) => e.stopPropagation(), onKeyDown: (event) => this.handleDotKeyDown(event, idx), onClick: () => this.handleDotClick(idx) }))))), showButtons && (h("div", { key: '2f5835d9fd584d6debf78a75bef6ccfbdbb8cd6e', class: "tet-carousel__buttons" }, h("tet-button", { key: '1dd955d437de2c81768fe1d345d59510f13b7d02', class: "tet-carousel__buttons--desktop", theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }), h("tet-button", { key: 'e233074a843c4bc74a3d98e7a89a80a7525e3511', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconRight, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handleNext(), accessibilityLabel: t('components-carousel-next'), disabled: this.isRightNavigationDisabled() }))))))));
     }
     static get is() { return "tet-carousel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/icon/default-color-icon-names.js

@@ -0,0 +1,24 @@
+/* Icons with separate SVG assets to support switching icons when the theme changes. */
+export const themedDefaultColorIcons = [
+    {
+        name: 'tc-go3-films',
+        light: 'tc-go3-films-light',
+        dark: 'tc-go3-films-dark',
+    },
+    {
+        name: 'tc-go3-sport',
+        light: 'tc-go3-sport-light',
+        dark: 'tc-go3-sport-dark',
+    },
+    {
+        name: 'tc-go3',
+        light: 'tc-go3-light',
+        dark: 'tc-go3-dark',
+    },
+];
+/* Icons in this list use their own colors defined in the SVG file. */
+export const defaultColorTcIcons = [
+    ...themedDefaultColorIcons.flatMap(({ light, dark }) => [light, dark]),
+    'tc-netflix',
+    'tc-popcorn',
+];

package/dist/collection/components/basic/icon/default-color-icons.js

@@ -1,37 +1,10 @@
-/* Icons with separate SVG assets to support switching icons when the theme changes. */
-const themedDefaultColorIcons = [
-    {
-        name: 'tc-go3-films',
-        light: 'tc-go3-films-light',
-        dark: 'tc-go3-films-dark',
-    },
-    {
-        name: 'tc-go3-sport',
-        light: 'tc-go3-sport-light',
-        dark: 'tc-go3-sport-dark',
-    },
-    {
-        name: 'tc-go3',
-        light: 'tc-go3-light',
-        dark: 'tc-go3-dark',
-    },
-];
+import { themedDefaultColorIcons } from "./default-color-icon-names";
+export { defaultColorTcIcons as defaultColorIcons } from './default-color-icon-names';
 const themedIconsByName = new Map(themedDefaultColorIcons.flatMap((icon) => [
     [icon.name, icon],
     [icon.light, icon],
     [icon.dark, icon],
 ]));
-/* Icons in this list use their own colors defined in the SVG file and
-   cannot be colored via the icon type prop. */
-export const defaultColorIcons = [
-    ...themedDefaultColorIcons.flatMap(({ light, dark }) => [light, dark]),
-    'tc-netflix',
-    'tc-popcorn',
-];
-export const getThemedDefaultColorIconNames = (name) => {
-    const icon = themedIconsByName.get(name);
-    return icon ? [icon.light, icon.dark] : [];
-};
 /**
  * Resolves a themed default-color icon to its corresponding SVG asset.
  * Classic keeps explicit light/dark icon names unchanged for backwards compatibility.

package/dist/collection/components/basic/icon/test/svg-raw.mock.js

@@ -0,0 +1,6 @@
+const tcIconSprite = `<svg>
+  <symbol id="tc-home" viewBox="0 0 24 24" data-width="24" data-height="24"><path d="M0 0h24v24H0z" /></symbol>
+  <symbol id="tc-go3-light" viewBox="0 0 24 24"><path d="M1 1h22v22H1z" /></symbol>
+  <symbol id="tc-go3-dark" viewBox="0 0 24 24"><path d="M2 2h20v20H2z" /></symbol>
+</svg>`;
+export default tcIconSprite;

package/dist/collection/components/basic/icon/tet-icon.js

@@ -1,6 +1,39 @@
 import { getAssetPath, h } from "@stencil/core";
 import { iconStore } from "./icon-cache.store";
-import { defaultColorIcons, getThemedDefaultColorIconNames, resolveDefaultColorIconName, } from "./default-color-icons";
+import { defaultColorIcons, resolveDefaultColorIconName, } from "./default-color-icons";
+import tcIconSprite from "../../../assets/icons/tc-icons.svg?raw";
+const tcIconSvgByName = {};
+const getTcIconSvg = (name) => {
+    if (!name.startsWith('tc-')) {
+        return undefined;
+    }
+    if (name in tcIconSvgByName) {
+        return tcIconSvgByName[name];
+    }
+    const escapedName = name.replaceAll(/[.*+?^${}()|[\]\\]/g, String.raw `\$&`);
+    const symbolPattern = new RegExp(String.raw `<symbol\b([^>]*\bid="${escapedName}"[^>]*)>([\s\S]*?)<\/symbol>`);
+    const symbol = symbolPattern.exec(tcIconSprite);
+    if (!symbol) {
+        tcIconSvgByName[name] = undefined;
+        return undefined;
+    }
+    const viewBox = /\bviewBox="([^"]+)"/.exec(symbol[1])?.[1];
+    const width = /\bdata-width="([^"]+)"/.exec(symbol[1])?.[1];
+    const height = /\bdata-height="([^"]+)"/.exec(symbol[1])?.[1];
+    let attributes = '';
+    if (width) {
+        attributes += ` width="${width}"`;
+    }
+    if (height) {
+        attributes += ` height="${height}"`;
+    }
+    if (viewBox) {
+        attributes += ` viewBox="${viewBox}"`;
+    }
+    const iconSvg = `<svg${attributes}>${symbol[2]}</svg>`;
+    tcIconSvgByName[name] = iconSvg;
+    return iconSvg;
+};
 /**
  * A component that renders an icon.
  */
@@ -17,10 +50,17 @@ export class TetIcon {
     iconRequestId = 0;
     /** Watcher that detects an icon source prop change and initiates the icon change. */
     onIconSourceChange() {
+        const iconName = this.getIconName();
+        if (this.hasBundledTcIcon(iconName)) {
+            this.iconRequestId++;
+            return;
+        }
         this.setIcon();
     }
     componentDidLoad() {
-        this.setIcon();
+        if (!this.hasBundledTcIcon(this.getIconName())) {
+            this.setIcon();
+        }
     }
     /**
      * Loads the passed icon asynchronously and sets the component's inner HTML to acquired result.
@@ -31,21 +71,19 @@ export class TetIcon {
             return;
         }
         const requestId = ++this.iconRequestId;
-        const iconName = resolveDefaultColorIconName(this.name, this.theme);
+        const iconName = this.getIconName();
         const icon = this.getIcon(iconName);
-        this.preloadThemedIconVariants(iconName);
         icon.then((svgHtml) => {
             if (requestId === this.iconRequestId && svgHtml && this.iconContainer) {
                 this.iconContainer.innerHTML = svgHtml;
             }
         });
     }
-    preloadThemedIconVariants(currentIconName) {
-        getThemedDefaultColorIconNames(this.name)
-            .filter((iconName) => iconName !== currentIconName)
-            .forEach((iconName) => {
-            void this.getIcon(iconName).catch(() => undefined);
-        });
+    getIconName() {
+        return resolveDefaultColorIconName(this.name, this.theme);
+    }
+    hasBundledTcIcon(name) {
+        return !!getTcIconSvg(name);
     }
     getIconMap = () => {
         if (!iconStore.iconMap) {
@@ -65,17 +103,21 @@ export class TetIcon {
         return iconStore.icons[name];
     };
     shouldUseDefaultColor() {
-        const iconName = resolveDefaultColorIconName(this.name, this.theme);
+        const iconName = this.getIconName();
         return this.useDefaultColor || defaultColorIcons.includes(iconName);
     }
     ;
     render() {
-        return (h("span", { key: '24303705739dc26a12cb9985194981a1a7c9ead4', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", { key: 'b06f6e3c104432472d61e539a3b0f52c76fab78b', class: {
+        const iconName = this.getIconName();
+        const tcIconSvg = getTcIconSvg(iconName);
+        return (h("span", { key: '2d8294f79d3c0179e66adf7076e0cdc2d57b65da', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", { key: tcIconSvg ? 'bundled-tc-icon' : 'fetched-icon', class: {
                 'icon-container': true,
                 'default-color': this.shouldUseDefaultColor(),
                 [this.theme]: true,
                 [this.type]: true,
-            }, ref: (element) => (this.iconContainer = element), ...(this.accessibilityLabel
+            }, ref: (element) => {
+                this.iconContainer = element;
+            }, ...(tcIconSvg ? { innerHTML: tcIconSvg } : {}), ...(this.accessibilityLabel
                 ? { "aria-label": this.accessibilityLabel, "role": "img" }
                 : { "role": "presentation" }) })));
     }

package/dist/collection/components/basic/loaders/tet-loader/tet-loader.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TetLoader {
     render() {
-        return (h("div", { key: 'dddd5219c590f05b85d7bf63c48583d9076a9f54', class: "loader" }, h("div", { key: '12a30bd690d44ffaff95d871f4a874db85c99c37', class: "loader-inner" })));
+        return (h("div", { key: 'e4bddb211501786606714aa29f9b503ad6df80f1', class: "loader" }, h("div", { key: '171ff138058d0293adb5f0a45ba485d89774ba02', class: "loader-inner" })));
     }
     static get is() { return "tet-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/loaders/tet-placeholder/tet-placeholder.js

@@ -9,7 +9,7 @@ export class TetPlaceholder {
         this.darkTheme = false;
     }
     render() {
-        return (h(Host, { key: 'fc3198f44f5c197c90bf8f6e652e7da7dc4d08b9', style: { width: this.width, height: this.height } }, h("div", { key: '5fbe8f34374b9c42ee237dbfa2a3151bfb4b0ed1', class: { 'placeholder': true, 'dark-theme': this.darkTheme }, style: { height: this.height } })));
+        return (h(Host, { key: 'e2f1de2f2e79ff9c4604aaccc9ad0f034687dd6f', style: { width: this.width, height: this.height } }, h("div", { key: '1c49567db5ff6d054badca3cd4ce5778c70d1058', class: { 'placeholder': true, 'dark-theme': this.darkTheme }, style: { height: this.height } })));
     }
     static get is() { return "tet-placeholder"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/loaders/tet-spinner/tet-spinner.js

@@ -48,13 +48,13 @@ export class TetSpinner {
         foreignObject.setAttribute('clip-path', 'url(#clip)');
     };
     render() {
-        return (h("div", { key: '60fe0f21e1111e99479a22dcbdc835e0c54d284f', ref: element => (this.spinner = element), class: {
+        return (h("div", { key: '2388419cdbd8cd65d0ffc46f4f0834cd0fa40bac', ref: element => (this.spinner = element), class: {
                 spinner: true,
                 [`${this.theme}-theme`]: true,
                 [`size--${this.size}`]: true,
                 [`spinner--${this.type}`]: true,
-            } }, h("svg", { key: '69e022d2277cfb7388dfd01bd149369d7e84c75d', viewBox: "0 0 40 40" }, h("clipPath", { key: 'a2501367e58e2a7565ece7ce2f6fc2b09b735c3b', id: "clip" }, h("path", { key: 'e98975d83a79ff7aae596fe365f475c4f91a785d', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
-              0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: 'a4142020efe0a98c5cd0482a2931118506c23210' }, h("div", { key: '7cb4116018ed01ed02b895883c352b1dba6772b4', class: "spinner__gradient" })))));
+            } }, h("svg", { key: 'd7a257980d163c9b0047c8a288b070d750afcab9', viewBox: "0 0 40 40" }, h("clipPath", { key: '9a5a4b037895cf021836de3d855c0825b194b102', id: "clip" }, h("path", { key: 'ee1fba8671ce5c3957bc02dfa3b7bcc122d326d8', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
+              0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: 'a22f330096f5d6b5772eebac26f5f2408ba0b9af' }, h("div", { key: '8c009629e448cf2cdbdb8a834369a533c5579f86', class: "spinner__gradient" })))));
     }
     static get is() { return "tet-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/misc/tet-countdown/tet-countdown.js

@@ -119,7 +119,7 @@ export class TetCountdown {
     }
     render() {
         const hostClass = `static-text-color-${this.staticTextColor}`;
-        return (h(Host, { key: '479f3c8bcbce08595dc0ec453cf8a7424dbb92b2', class: hostClass }, this.countdownTitle && (h("div", { key: 'f9a219e8fb6a25b8d1e6d24b59b8e94dda71f716', class: "countdown-title", part: "title", "aria-hidden": "true" }, this.countdownTitle)), h("div", { key: '13aefbb8e20545f2278eac5440d825847ff31e36', class: "countdown", part: "countdown", "aria-hidden": "true" }, this.renderUnit(this.countdown.days, this.getUnitLabel('days', this.countdown.days), 'days'), this.renderUnit(this.countdown.hours, this.getUnitLabel('hours', this.countdown.hours), 'hours'), this.renderUnit(this.countdown.minutes, this.getUnitLabel('minutes', this.countdown.minutes), 'minutes'), this.renderUnit(this.countdown.seconds, this.getUnitLabel('seconds', this.countdown.seconds), 'seconds')), h("div", { key: 'd3c60bbc0747ed3bedab421acea8e3c6e922ffe4', class: "sr-only" }, this.getCountdownAriaLabel())));
+        return (h(Host, { key: 'cc513e7f2da5c916b31b3ddb4c63237d6a1d2172', class: hostClass }, this.countdownTitle && (h("div", { key: '01998545e7d2ba80ca38f921af5238baf904a733', class: "countdown-title", part: "title", "aria-hidden": "true" }, this.countdownTitle)), h("div", { key: '8648e018ea35071fd0c8f76ec82b7417d311cf8f', class: "countdown", part: "countdown", "aria-hidden": "true" }, this.renderUnit(this.countdown.days, this.getUnitLabel('days', this.countdown.days), 'days'), this.renderUnit(this.countdown.hours, this.getUnitLabel('hours', this.countdown.hours), 'hours'), this.renderUnit(this.countdown.minutes, this.getUnitLabel('minutes', this.countdown.minutes), 'minutes'), this.renderUnit(this.countdown.seconds, this.getUnitLabel('seconds', this.countdown.seconds), 'seconds')), h("div", { key: '371a132bb27cae5c07bd42606f34e79408b8bfeb', class: "sr-only" }, this.getCountdownAriaLabel())));
     }
     static get is() { return "tet-countdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/misc/tet-label/tet-label.js

@@ -13,12 +13,12 @@ export class TetLabel {
         this.showIcon = false;
     }
     render() {
-        return (h(Host, { key: '95024abedad9bae5276c554552035a245154cec4' }, h("div", { key: '56f83d3bd666b0e5b0c3643d4937709089f965ed', class: {
+        return (h(Host, { key: 'ed54b6081a177bbac7f845c64ae8df1f7dd93c63' }, h("div", { key: '7857f64186c2989dbe2ef9371edc5111b25b160a', class: {
                 label: true,
                 'label-active': this.active,
                 [`label-type-${this.type}`]: true,
                 [`theme-${this.theme}`]: true,
-            } }, this.labelTitle && h("p", { key: '72655c21e7e05281e206c6a8b00780eaebeaca4a', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: '7b5fda50a499fec7d624cd1553f08ee8ccd8c11a', class: "label-icon", name: "close-circle", part: "icon-selected" }))));
+            } }, this.labelTitle && h("p", { key: '26b23b4444f203c42f3b2596024bb57f306498e3', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: 'c5e91e258d2c107c19232339609bc540d44eabd9', class: "label-icon", name: "tc-close-circle", part: "icon-selected" }))));
     }
     static get is() { return "tet-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/steppers/tet-round-stepper/tet-round-stepper.js

@@ -73,7 +73,7 @@ export class TetRoundStepper {
         }
     }
     render() {
-        return (h(Host, { key: '0cb44a58dc395c6204dbe47d57384e9928429f2b' }, h("div", { key: 'd13e38a618b357f777eeb6e2adfba21de596e4ff', class: {
+        return (h(Host, { key: '78901b40d6307aaf936c23e8d2b4b6665bdb1132' }, h("div", { key: '58c1be80945422de6c5858582a9e13b2d096e91a', class: {
                 'round-stepper': true,
                 'with-background-gradient': this.layout === 'withBackgroundGradient',
                 'column': this.forcedColumn,

package/dist/collection/components/basic/steppers/tet-stepper/tet-stepper.js

@@ -36,7 +36,7 @@ export class TetStepper {
                     'icon': true,
                     [`icon-${iconVariant}`]: true,
                 };
-                const iconName = iconVariant === 'close' ? 'close-circle' : 'check-circle';
+                const iconName = iconVariant === 'close' ? 'tc-close-circle' : 'tc-check-circle';
                 content = h("div", { class: "stepper-step-content-icon" }, h("tet-icon", { class: iconClasses, name: iconName, "aria-hidden": "true" }));
                 break;
             }
@@ -75,7 +75,7 @@ export class TetStepper {
         return this.stepperData.length - 1 > index ? h("li", { class: lineClasses }) : null;
     };
     render() {
-        return (h(Host, { key: '346449e75270b13371ee8142f4ce27d0d20a7033' }, h("ol", { key: 'b30ca2d1dce437775287a536be1357898a887f6c', class: "stepper" }, this.stepperData.map(this.renderStep))));
+        return (h(Host, { key: '775b18931a850d02656fa9252d29493817640bff' }, h("ol", { key: 'eed178adbe345da0d7ebb1c1a0f535108df3841f', class: "stepper" }, this.stepperData.map(this.renderStep))));
     }
     static get is() { return "tet-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/steppers/tet-stepper-v2/tet-stepper-v2.js

@@ -13,7 +13,7 @@ export class TetStepperV2 {
     renderStepIcon = (icon) => {
         switch (icon) {
             case 'check':
-                return (h("div", { class: "check-icon" }, h("tet-icon", { class: "check", name: "check" })));
+                return (h("div", { class: "check-icon" }, h("tet-icon", { class: "check", name: "tc-check" })));
             case 'circle':
                 return h("div", { class: "circle" });
             case 'circle-attention':
@@ -35,7 +35,7 @@ export class TetStepperV2 {
         return isLastStep ? h("div", { class: { 'stepper-line': true, active } }) : null;
     };
     render() {
-        return (h(Host, { key: '677b682387455b456ef71a22df6820f54753eaa0' }, h("ol", { key: '35c3e267e0f6ce483e239b2c2abba00f9dd22045', class: {
+        return (h(Host, { key: '7bec3272f95c31eb888351ba439f5b6c07ad42f3' }, h("ol", { key: '40c790f31661e9f76e6057f9c0d0c79f427ef50a', class: {
                 'stepper': true,
                 [this.theme]: true,
             } }, this.stepperData.map(this.renderStep.bind(this)))));

package/dist/collection/components/basic/steppers/tet-stepper-v3/tet-stepper-v3.js

@@ -13,7 +13,7 @@ export class TetStepperV3 {
     };
     renderStepIcon = (icon) => {
         if (icon === 'check') {
-            return (h("div", { class: "check-icon" }, h("tet-icon", { class: "check", name: "check" })));
+            return (h("div", { class: "check-icon" }, h("tet-icon", { class: "check", name: "tc-check" })));
         }
         if (icon === 'circle-attention') {
             return h("div", { class: "circle-attention" });
@@ -27,7 +27,7 @@ export class TetStepperV3 {
         return description ? h("div", { class: "content-description", innerHTML: description }) : null;
     };
     render() {
-        return (h(Host, { key: '48d2456f213278043f250bf50e344a8a0a555161' }, h("ol", { key: 'da3cd2bfab8a2b5ad590797b3004b9e1cbbcfab1', class: {
+        return (h(Host, { key: '2d5dadc15bb680aaef8ff00bc6974e5c2e1c72f6' }, h("ol", { key: '6c5879a5f06703f902c2920db8c14c452b42a6c9', class: {
                 stepper: true,
                 [this.theme]: true
             } }, this.stepperData.map(this.renderStep.bind(this)))));

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-header/tet-datepicker-header.js

@@ -55,10 +55,10 @@ export class TetDatepickerHeader {
         this.datepickerViewChanged.emit(view);
     };
     render() {
-        return (h("div", { key: '49f968019ee0d56ef2933866238413132f38328b', class: "header" }, this.datepickerView !== 'year'
-            ? (h("div", { class: "icon-container", onClick: () => this.subtractDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-left" })))
-            : h("div", null), h("div", { key: 'd004cde571dd0678d73b26a8282ec4a8d05ee8a6', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: 'df53aba4245b06c7ae7831727d9324d7f7bd2b1a', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
-            ? (h("div", { class: "icon-container", onClick: () => this.addDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-right" })))
+        return (h("div", { key: '8884e1bded38e61b8149ba2699fd896e41f8132e', class: "header" }, this.datepickerView !== 'year'
+            ? (h("div", { class: "icon-container", onClick: () => this.subtractDates() }, h("tet-icon", { class: "arrow-left", name: "tc-arrow-left" })))
+            : h("div", null), h("div", { key: '772cd331f91106a5894d748f4f35dded73901dad', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: '9c0d2c252fbc07f5f14184bc4c0b469198e27e3f', class: "chevron-down", name: this.datepickerView === 'month' ? 'tc-chevron-down' : 'tc-chevron-up' })), this.datepickerView !== 'year'
+            ? (h("div", { class: "icon-container", onClick: () => this.addDates() }, h("tet-icon", { class: "arrow-left", name: "tc-arrow-right" })))
             : h("div", null)));
     }
     static get is() { return "tet-datepicker-header"; }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-month-view/tet-datepicker-month-view.js

@@ -159,7 +159,7 @@ export class TetDatepickerMonthView {
         };
     };
     render() {
-        return (h(Host, { key: 'dad7afd7dc3e909b45e0790e4e6219a521dbae0f' }, h("div", { key: 'cf284cf792f03a9f9451d1a78f4f87c0ed932519', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: '6ed0e6a91649986079e67764e0b2b537d33969a4', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
+        return (h(Host, { key: 'b47e4e5060c11a14384e7bb8c2791fa0cf366f6c' }, h("div", { key: 'dde45579bc8313f55f44b365f071bde1b7008e84', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: '00162b15a264294eec2ea3da637506e901cdfad3', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
     }
     static get is() { return "tet-datepicker-month-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-multi-year-view/tet-datepicker-multi-year-view.js

@@ -32,7 +32,7 @@ export class TetDatepickerMultiYearView {
         return { year: true, current: year === currentYear, selected: this.isSelectedYear(year) };
     };
     render() {
-        return (h("div", { key: 'd229035d2091b2adad983525ae148a54e48af910', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
+        return (h("div", { key: '19aade9825010d1c468f18e43852f7a0f74be671', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
     }
     static get is() { return "tet-datepicker-multi-year-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-year-view/tet-datepicker-year-view.js

@@ -39,7 +39,7 @@ export class TetDatepickerYearView {
         };
     };
     render() {
-        return (h("div", { key: 'd1a7b108dfc24e46109da7cf124ff4fa77850385', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
+        return (h("div", { key: '6ad1b0c13e91b52908da1935ee3b88f2ebf38ec3', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
     }
     static get is() { return "tet-datepicker-year-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/tet-datepicker.js

@@ -100,10 +100,10 @@ export class TetDatepicker {
         return { overlay: true, closed: !this.isOpen, 'overlay-effect': this.overlayEffect };
     };
     render() {
-        return (h("div", { key: '2d26b24635e9571d233d599ba825415f296de607', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '0740d3c9b050f99f88e36e3460f661e69843e86e', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '4eaf5d2ae2784efb742025d2749d066a40d8bde1', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
-            h("tet-datepicker-month-view", { key: '6048d53b042be918cceb9bd214997ed43971fca8', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
-            h("tet-datepicker-multi-year-view", { key: 'bedcc22618f1561d14f79f5c1da43f445ffb00ef', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
-            h("tet-datepicker-year-view", { key: 'f73830b69333f30fe42b87468049a78ad2980640', selectedDate: this.date, internalDate: this.internalDate }))));
+        return (h("div", { key: '8acde6fd2e5500cf971cfe8210a7054356f9a66e', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '101e537583f51cf37edeaae7dcee6a65a840f1fc', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '585fc631eacc40169a725dd4f6ee4e853dc012fc', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
+            h("tet-datepicker-month-view", { key: '9e278df4f97724b6d8b878bfe13830799592ec76', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
+            h("tet-datepicker-multi-year-view", { key: '6537108864e72c23afb272eded7682a4332147d6', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
+            h("tet-datepicker-year-view", { key: 'c25123d258455e593013012d670e6a8699b67eb9', selectedDate: this.date, internalDate: this.internalDate }))));
     }
     static get is() { return "tet-datepicker"; }
     static get encapsulation() { return "shadow"; }