@tet/tet-components 1.3.10-testing → 1.3.11-staging

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

@@ -58,6 +58,7 @@ export class TetDropdown {
         this.disabled = false;
         this.selectedOptionIndexes = [];
         this.isOpen = false;
+        this.isKeyboardFocus = false;
     }
     componentWillLoad() {
         this.preselectOption();
@@ -111,6 +112,7 @@ export class TetDropdown {
             return;
         }
         this.isOpen = false;
+        this.isKeyboardFocus = false;
     }
     /**
      * Handles the focusout event to close the dropdown menu if focus moves outside the component.
@@ -127,13 +129,14 @@ export class TetDropdown {
             return;
         }
         this.isOpen = false;
+        this.isKeyboardFocus = false;
     }
     /**
      * Renders the dropdown toggle button and label.
      */
     renderButton() {
         const { label, labelLogo, labelLogoGrayscale, labelRight, currentButtonLabel, currentButtonLabelRight, currentButtonLabelRightColor, isOpen, disabled } = this;
-        return (h("div", { ref: el => (this.dropdownWrapperElement = el), class: { 'dropdown__wrapper': true, 'disabled': disabled } }, label && h("label", { htmlFor: 'dropdown-button', class: "dropdown__label" }, label), h("button", { id: 'dropdown-button', class: "dropdown__button", "aria-haspopup": "listbox", "aria-controls": 'dropdown-options', "aria-expanded": isOpen, ref: el => (this.dropdownButtonElement = el), onClick: this.handleDropdownToggle(), onKeyDown: this.handleButtonKeydown(), disabled: disabled }, !disabled && labelLogo && h("img", { src: labelLogo, alt: label }), disabled && labelLogoGrayscale && h("img", { src: labelLogoGrayscale, alt: label }), h("span", { class: { 'dropdown__button__selected': true, 'dropdown__button__selected--flex': this.flexLayout } }, currentButtonLabel), labelRight && h("span", { class: "dropdown__button__labelright", style: { 'color': currentButtonLabelRightColor } }, currentButtonLabelRight), h("tet-icon", { class: "dropdown__icon dropdown__chevron-icon", name: isOpen ? 'chevron-up' : 'chevron-down' }))));
+        return (h("div", { ref: el => (this.dropdownWrapperElement = el), class: { 'dropdown__wrapper': true, 'disabled': disabled } }, label && h("label", { htmlFor: 'dropdown-button', class: "dropdown__label" }, label), h("div", { class: "dropdown__button-wrapper" }, h("button", { id: 'dropdown-button', class: "dropdown__button", "aria-haspopup": "listbox", "aria-controls": 'dropdown-options', "aria-expanded": isOpen, ref: el => (this.dropdownButtonElement = el), onClick: this.handleDropdownToggle(), onKeyDown: this.handleButtonKeydown(), disabled: disabled }, !disabled && labelLogo && h("img", { src: labelLogo, alt: label }), disabled && labelLogoGrayscale && h("img", { src: labelLogoGrayscale, alt: label }), h("span", { class: { 'dropdown__button__selected': true, 'dropdown__button__selected--flex': this.flexLayout } }, currentButtonLabel), labelRight && h("span", { class: "dropdown__button__labelright", style: { 'color': currentButtonLabelRightColor } }, currentButtonLabelRight), h("tet-icon", { class: "dropdown__icon dropdown__chevron-icon", name: isOpen ? 'chevron-up' : 'chevron-down' })))));
     }
     /**
      * Renders the dropdown options menu.
@@ -144,7 +147,7 @@ export class TetDropdown {
         if (this.flexLayout) {
             mappedOptions = options.map(this.renderFlexOptionItem.bind(this));
         }
-        return (h("ul", { id: `dropdown-options`, ref: el => (this.dropdownOptionsElement = el), class: "dropdown__options", role: "listbox", tabindex: "-1", "aria-labelledby": `dropdown-button`, "aria-expanded": isOpen, "aria-multiselectable": allowMultiple }, mappedOptions));
+        return (h("ul", { id: `dropdown-options`, ref: el => (this.dropdownOptionsElement = el), class: "dropdown__options", role: "listbox", tabindex: "-1", "aria-labelledby": `dropdown-button`, "aria-expanded": isOpen, "aria-multiselectable": allowMultiple }, h("div", { class: "dropdown__options-wrapper" }, mappedOptions)));
     }
     /**
      * Renders a dropdown option item.
@@ -191,7 +194,7 @@ export class TetDropdown {
                 'dropdown__option': true,
                 'dropdown__option--multiple': true,
                 'dropdown__option--selected': selected
-            }, role: "option", tabindex: "0", "aria-checked": selected, "data-value": value, onClick: handleClick, onKeyDown: handleKeyDown }, h("tet-checkbox", { checked: selected, theme: this.theme }), label));
+            }, role: "option", tabindex: "0", "aria-checked": selected, "data-value": value, onClick: handleClick, onKeyDown: handleKeyDown }, h("tet-checkbox", { checked: selected, theme: this.theme, tabindex: -1 }), label));
     }
     /**
      * Handles keyboard input for an option item.
@@ -220,6 +223,12 @@ export class TetDropdown {
                     this.isOpen = false;
                     this.dropdownButtonElement.focus();
                     break;
+                case 'Tab':
+                    const targetElement = target;
+                    if (!targetElement.previousElementSibling && event.shiftKey) {
+                        this.isKeyboardFocus = true;
+                    }
+                    break;
                 default:
                     break;
             }
@@ -236,15 +245,26 @@ export class TetDropdown {
                     event.preventDefault();
                     if (!this.isOpen) {
                         this.isOpen = true;
+                        this.isKeyboardFocus = true;
                     }
-                    const { children } = this.dropdownOptionsElement;
+                    const { children } = this.dropdownOptionsElement.children[0];
                     if (children.length == 0) {
                         return;
                     }
                     requestAnimationFrame(() => children[0].focus());
+                    this.isKeyboardFocus = false;
                     break;
                 case 'Escape':
                     this.isOpen = false;
+                    this.isKeyboardFocus = false;
+                    break;
+                case 'Tab':
+                    this.isKeyboardFocus = false;
+                    break;
+                case 'Enter':
+                case ' ':
+                case 'SpaceBar':
+                    this.isKeyboardFocus = !this.isKeyboardFocus;
                     break;
                 default:
                     break;
@@ -338,8 +358,8 @@ export class TetDropdown {
         });
     }
     render() {
-        const { theme, isOpen } = this;
-        return (h(Host, { key: 'e703a30d4a6c34303c63082553011468c08a9dc6' }, h("div", { key: '8280fc569da083682f972540c84f118c029ae81d', class: { 'dropdown': true, 'dropdown--open': isOpen, [`${theme}`]: true } }, this.renderButton(), this.renderOptions())));
+        const { theme, isOpen, isKeyboardFocus } = this;
+        return (h(Host, { key: '305032965ef0e379b79a0c2990a8975fd18cd35f' }, h("div", { key: '02eea1e67fc3412ea5a8366fb16d59ef2a841be5', class: { 'dropdown': true, 'dropdown--open': isOpen, 'focus-visible': isKeyboardFocus && isOpen, [`${theme}`]: true } }, this.renderButton(), this.renderOptions())));
     }
     static get is() { return "tet-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -598,7 +618,8 @@ export class TetDropdown {
     static get states() {
         return {
             "selectedOptionIndexes": {},
-            "isOpen": {}
+            "isOpen": {},
+            "isKeyboardFocus": {}
         };
     }
     static get events() {

package/dist/collection/components/simple/inputs/tet-expandable-input/tet-expandable-input.js

@@ -222,12 +222,12 @@ export class TetExpandableInput {
         return '';
     }
     render() {
-        return (h(Host, { key: '17d961b4da48837145748706d3ca226e6419c920' }, h("div", { key: '70f87d0139c7ce2dca5cb21583fbf765e1c20971', class: {
+        return (h(Host, { key: '37562d6a8f52f2863511c189d212a64ab3493969' }, h("div", { key: '17884b2b8c0658b09bb7af74cc8df4f723fdefea', class: {
                 container: true,
                 expanded: this.expanded,
                 [this.mode]: true,
                 dark: this.darkMode
-            } }, h("div", { key: '08b8567445b1cae859abb0f44c0a1adbb7a4f50e', class: "input-wrapper", ref: (element) => (this.inputWrapper = element) }, h("tet-input", { key: 'd720bb7322ecb7cd234b374c4dcf96ccc3c45151', class: "tet-input", label: this.label, "input-class": this.class, "input-placeholder": this.renderInputContent ? this.placeholder : '', "accessibility-label": this.accessibilityLabel, "input-type": this.type, "input-value": this.value, "input-disabled": this.disabled, error: this.error, "icon-left": this.iconLeft, "icon-right": this.renderInputContent ? this.iconRight : '', iconRightClickCallback: this.iconRightClickCallback, theme: this.theme, ref: (inputElement) => (this.inputHtmlElement = inputElement) }), this.closeButton))));
+            } }, h("div", { key: '76e7f5bc4e7d3b8fe18cc744644b6ee5821462e9', class: "input-wrapper", ref: (element) => (this.inputWrapper = element) }, h("tet-input", { key: '19133005cfbfdaabd0a4b23c3d2466c678fac576', class: "tet-input", label: this.label, "input-class": this.class, "input-placeholder": this.renderInputContent ? this.placeholder : '', "accessibility-label": this.accessibilityLabel, "input-type": this.type, "input-value": this.value, "input-disabled": this.disabled, error: this.error, "icon-left": this.iconLeft, "icon-right": this.renderInputContent ? this.iconRight : '', iconRightClickCallback: this.iconRightClickCallback, theme: this.theme, ref: (inputElement) => (this.inputHtmlElement = inputElement) }), this.closeButton))));
     }
     static get is() { return "tet-expandable-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-input/tet-input.css

@@ -808,7 +808,7 @@
   border: 0.0625rem solid var(--input-border-color);
   color: var(--input-text-color);
   background: var(--input-background-color);
-  outline: none;
+  outline: 0.125rem solid transparent;
   font-size: inherit;
   font-family: var(--input-font-family);
   font-weight: 500;
@@ -846,6 +846,12 @@
 .tet-input__base.tet-input__mint-original:not(:disabled):focus, .tet-input__base.tet-input__mint-original:not(:disabled):active {
   outline: none;
 }
+.tet-input__base.tet-input__mint-original.keyboard-focus:focus {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  box-shadow: none;
+}
 .tet-input__base[disabled] {
   cursor: not-allowed;
   outline: none;
@@ -864,6 +870,15 @@
   border: 0.0625rem solid var(--input-focus-border-color);
   box-shadow: 0 0 0 0.25rem var(--input-focus-outline-color);
 }
+.tet-input__base.keyboard-focus:focus {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  box-shadow: none;
+}
+.tet-input__base.error {
+  border-color: var(--input-color-error);
+}
 
 .tet-input__label {
   display: block;
@@ -945,6 +960,13 @@
 .icon.clickable {
   cursor: pointer;
 }
+.icon.clickable:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  border-radius: 0.125rem;
+  outline-offset: 0;
+}
 .icon.icon-left {
   left: var(--input-icon-left-position, 0.75rem);
 }

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

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { validate } from "../../../../services/validators/index";
 import { t } from "../../../../services/translations/index";
 import { a11yBtnClick } from "../../../../services/utils/a11y";
+import { IconName } from "../../../../types/enums";
 /**
  * The input enables the user to interact with and input content and data.
  * It supports left and right icons with click actions and error state.
@@ -19,7 +20,7 @@ export class TetInput {
                 'icon-right': alignment === 'right',
                 'clickable': clickable
             };
-            return h("tet-icon", { name: iconName, class: classes, onClick: callback, tabIndex: clickable ? 0 : -1, onKeyDown: a11yBtnClick });
+            return h("tet-icon", { name: iconName, class: classes, onClick: callback, tabIndex: iconName === IconName.Close ? 0 : -1, onKeyDown: a11yBtnClick });
         };
         this.renderErrorMessages = () => {
             return (h("div", { class: "errors" }, this.errorMessages.map((message) => h("p", { class: "tet-input__error-message" }, t(message)))));
@@ -44,6 +45,8 @@ export class TetInput {
         this.autocomplete = 'off';
         this.maxlength = undefined;
         this.inputTabindex = undefined;
+        this.isKeyboardFocus = true;
+        this.focusVisible = false;
     }
     componentDidLoad() {
         if (!this.manualValidation) {
@@ -59,6 +62,37 @@ export class TetInput {
     async getInputHtmlElement() {
         return this.inputHtmlElement;
     }
+    /**
+     * Listen for Tab key event.
+     * @param {KeyboardEvent} event
+     */
+    onKeyDown(event) {
+        if (event.key === 'Tab') {
+            this.isKeyboardFocus = true;
+        }
+    }
+    /**
+     * Listen for click event and reset Keyboard focus on Input.
+     */
+    onMouseDown() {
+        this.isKeyboardFocus = false;
+    }
+    /**
+     * Set Keyboard Focus State on Input if Tab key is pressed.
+     */
+    addKeyboardFocus() {
+        return () => {
+            this.focusVisible = this.isKeyboardFocus;
+        };
+    }
+    /**
+     * Removes Keyboard Focus State.
+     */
+    removeKeyboardFocus() {
+        return () => {
+            this.focusVisible = false;
+        };
+    }
     /**
      * Returns the list of validation errors.
      */
@@ -82,11 +116,11 @@ export class TetInput {
         var _a, _b;
         const propClasses = (_b = (_a = this.class) === null || _a === void 0 ? void 0 : _a.split('w')) !== null && _b !== void 0 ? _b : [];
         // Merges the values defined in the class attribute with the inner classes.
-        const inputClasses = Object.assign({ 'tet-input__base': true, [`tet-input__${this.theme}`]: true, 'with-icon--left': !!this.iconLeft, 'with-icon--right': !!this.iconRight, 'error': this.error || this.errorMessages.length > 0 }, propClasses.reduce((accumulator, value) => {
+        const inputClasses = Object.assign({ 'tet-input__base': true, [`tet-input__${this.theme}`]: true, 'with-icon--left': !!this.iconLeft, 'with-icon--right': !!this.iconRight, 'error': this.error || this.errorMessages.length > 0, 'keyboard-focus': this.focusVisible }, propClasses.reduce((accumulator, value) => {
             return Object.assign(Object.assign({}, accumulator), { [value]: true });
         }, {}));
         return (h(Host, null, h("label", { class: { [`${this.theme}`]: true } }, this.label &&
-            h("span", { class: { 'tet-input__label': true, [`tet-input__${this.theme}`]: true } }, this.label), h("div", { class: { 'input-container': true, [`tet-input__${this.theme}`]: true } }, h("input", Object.assign({ class: inputClasses, placeholder: this.placeholder, type: this.type, value: this.value, ref: (el) => (this.inputHtmlElement = el), disabled: this.disabled, autoComplete: this.autocomplete ? this.autocomplete : 'off', maxlength: this.maxlength, readOnly: this.readonly }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}), (this.inputTabindex ? { "tabindex": this.inputTabindex } : {}))), !!this.iconLeft && this.renderIcon(this.iconLeft, 'left', this.iconLeftClickCallback), !!this.iconRight && this.renderIcon(this.iconRight, 'right', this.iconRightClickCallback), h("slot", null))), this.errorMessages.length > 0 && this.renderErrorMessages()));
+            h("span", { class: { 'tet-input__label': true, [`tet-input__${this.theme}`]: true } }, this.label), h("div", { class: { 'input-container': true, [`tet-input__${this.theme}`]: true } }, h("input", Object.assign({ onFocus: this.addKeyboardFocus(), onFocusout: this.removeKeyboardFocus(), class: inputClasses, placeholder: this.placeholder, type: this.type, value: this.value, ref: (el) => (this.inputHtmlElement = el), disabled: this.disabled, autoComplete: this.autocomplete ? this.autocomplete : 'off', maxlength: this.maxlength, readOnly: this.readonly }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}), (this.inputTabindex ? { "tabindex": this.inputTabindex } : {}))), !!this.iconLeft && this.renderIcon(this.iconLeft, 'left', this.iconLeftClickCallback), !!this.iconRight && this.renderIcon(this.iconRight, 'right', this.iconRightClickCallback), h("slot", null))), this.errorMessages.length > 0 && this.renderErrorMessages()));
     }
     static get is() { return "tet-input"; }
     static get encapsulation() { return "scoped"; }
@@ -444,7 +478,9 @@ export class TetInput {
     }
     static get states() {
         return {
-            "errorMessages": {}
+            "errorMessages": {},
+            "isKeyboardFocus": {},
+            "focusVisible": {}
         };
     }
     static get methods() {
@@ -523,4 +559,19 @@ export class TetInput {
             }
         };
     }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "onMouseDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/simple/inputs/tet-number-input/tet-number-input.js

@@ -220,7 +220,7 @@ export class TetInput {
      */
     render() {
         const { label, helperText, value, disabled, error, completed, isOpen, suffix } = this;
-        return (h("div", { key: '386248b16bd2f32af1f1533c435e007b5b7f0b4a', class: { 'number-input': true, 'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: 'e3bbdef510f04cbab99482e4cef241bd64420550', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: '8e91fe00d0e3a409a0cc71fa558377809ce2c7a8', class: "number-input__input-container", onClick: this.shiftFocus }, h("input", Object.assign({ key: '8f9cc68c92f13a2376d016906823751c55a64ce6', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: { 'number-input__input': true, 'number-input__input--hidden': this.isValueHidden }, disabled: disabled, value: value, type: "number", id: "number-input" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("div", { key: 'e083b50d065a1607af40efb416afee1782696bac', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: 'b7d51f9e2f3ea7aa6b182093b62c23c941640413', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: '3e340cedbc03c00adce4b185edd277754aac4441', type: "ghost", size: "small", ref: (element) => (this.chevronElement = element), class: { 'number-input__cheveron': true }, onClick: this.onChevronClick, "accessibility-label": this.buttonAccessibilityLabel }, !isOpen && h("tet-icon", { key: '1bc7bfc1b741866f0b55e08ed6593c0cc853fb40', name: "chevron-down" }), isOpen && h("tet-icon", { key: '8bdce1961ad4c3e583c1537992e94117fed8c393', name: "chevron-up" }))), isOpen && (h("div", { key: 'b3368dedae72d1e7c94948e0db0ea369c37d3b3b', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: '6f6f75f1bbc511e7ab6c00b8058e0c662504bab4', class: "number-input__helper-text" }, helperText)));
+        return (h("div", { key: 'f326524a925c120ecddba15833dc8e4cb8897179', class: { 'number-input': true, 'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: '7e1c0f9930b5fe8c4d3eecb8fdd705e0d8bc3133', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: 'a2e9136935db0c1277234d0bb2e7143801843189', class: "number-input__input-container", onClick: this.shiftFocus }, h("input", Object.assign({ key: 'fccaeab297ae6cc313dd0bc4759ab53316ab53b4', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: { 'number-input__input': true, 'number-input__input--hidden': this.isValueHidden }, disabled: disabled, value: value, type: "number", id: "number-input" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("div", { key: 'f3fb264c0e839c20a9e26981d3bd7f552ba3bd3e', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: '55139698a73b5c4ddc56ec20c0bb08bc1f894956', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: 'd4711796220d3ef02ae655583ad3403f14dd6ac2', type: "ghost", size: "small", ref: (element) => (this.chevronElement = element), class: { 'number-input__cheveron': true }, onClick: this.onChevronClick, "accessibility-label": this.buttonAccessibilityLabel }, !isOpen && h("tet-icon", { key: 'a3cb79dac9ed077f4884e2f46ddec3ce9691372c', name: "chevron-down" }), isOpen && h("tet-icon", { key: '8a319a2b03507f82b89c59829686a92ad0bdb6db', name: "chevron-up" }))), isOpen && (h("div", { key: '857d7c821006472c787e3bdc68c61fe305a1ae65', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: '2ff12b36a98c717107cd80cfab1a91cbf71e0216', class: "number-input__helper-text" }, helperText)));
     }
     static get is() { return "tet-number-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-range-slider/tet-range-slider.css

@@ -208,6 +208,11 @@
 .range-slider__slider-container::-webkit-scrollbar {
   display: none;
 }
+.range-slider__slider-container:has(.range-slider__slider-wrapper input:focus-visible) ~ .range-slider__tooltip-handle {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+}
 .range-slider__slider-wrapper {
   display: flex;
   width: 100%;
@@ -411,6 +416,11 @@
   position: absolute;
   top: calc(var(--slider-track-height) + 3.5rem);
 }
+.range-slider__control:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+}
 .range-slider--large .range-slider__control {
   position: static;
 }

package/dist/collection/components/simple/inputs/tet-range-slider/tet-range-slider.js

@@ -689,31 +689,31 @@ export class TetRangeSlider {
         this.updateProgress();
     }
     render() {
-        return (h(Host, { key: 'd69725adaabd133db13bfe41371de4578fe38236' }, h("div", { key: 'ae804d77d4066d64bb07af4b257bf16f47ccf893', class: {
+        return (h(Host, { key: '52af8dbdb55c7e921fa0e2306178a947b5e6304c' }, h("div", { key: '5074471aa06625ae6bf32994539fe4ba141039e4', class: {
                 'range-slider': true,
                 [`range-slider--${this.containerSize}`]: true,
                 [`range-slider--${this.type}`]: true,
                 'range-slider--no-controls': !this.withControls,
                 'range-slider--no-input': !this.withInput,
                 [this.theme]: true,
-            } }, h("div", { key: '4297c6ee75a850cc6684e51f00d06bb962b8b26a', class: {
+            } }, h("div", { key: '3a4dbf9e2658be4ccd1992c42ffacb90ee651342', class: {
                 'range-slider__input-container': true,
                 'hidden': !this.withInput,
-            } }, h("tet-input", Object.assign({ key: 'dceca05da6d539585fa072baef543c7f49c34482', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: this.onInputKeyDown, accessibilityLabel: this.numberInputAccessibilityLabel }, (this.containerSize !== 'large' ? { inputTabindex: 3 } : {})))), h("div", { key: 'e554df731cd1b11a5d5245a8d05b4b315e41bf2b', class: "range-slider__container" }, h("tet-button", Object.assign({ key: 'b1166b0930dfbb5dd5e464ee2f5eca0873664056', theme: this.theme, iconMode: true, class: {
+            } }, h("tet-input", Object.assign({ key: '29704c985a33b309bee79608fd4f0c8f37ec262e', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: this.onInputKeyDown, accessibilityLabel: this.numberInputAccessibilityLabel }, (this.containerSize !== 'large' ? { inputTabindex: 3 } : {})))), h("div", { key: 'ee85a4424e5447ecabb29fdcd81491070e3d1ef2', class: "range-slider__container" }, h("tet-button", Object.assign({ key: '5a11f5af863989ea5eeb49bb76e02572655035fd', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--left': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlPreviousClick }, (this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 2 } : {})), h("tet-icon", { key: '3e27a25df0cd8276483773b2bc3acf749a5f8405', name: "remove", class: "range-slider__control--icon" })), h("div", { key: '023af8cd8b2cc9d8b66ee4b2be2c8a62985743f4', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '6449f17be8f4601d54f46d5f8c6a8f3cfaa05576', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: 'eec4d3ccea3fa5a05986b01da84efa6dfb37d8e6', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, class: "range-slider__slider" }, (this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 1 } : {})))), h("div", { key: '3211a80ffc8ad054e2dad57afc33df92c87e8b88', class: "range-slider__track range-slider__track--background" }), h("div", { key: '2cc7290a5690756ce64b32ad4bc15ba3067b2570', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'd834ab41423a90cb2eca66062bfffec652ee9f3d', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: '2e6593d3ac4a7cbbfb2c071886d4d94b767fc886', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
+            }, clickCallback: this.onControlPreviousClick }, (this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 2 } : {})), h("tet-icon", { key: 'c7be06bc2e9d468fbe9eb07995e6ab346cdd76b4', name: "remove", class: "range-slider__control--icon" })), h("div", { key: 'c827ababceaef92a842b27d26f0a5b8b5bcb4cab', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '8ce6676b8110a901b356a11487b84cc4ee59d632', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: 'ac5053a9ed6b6b2e50e2572a1880c533d43c7f4f', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, class: "range-slider__slider" }, (this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 1 } : {})))), h("div", { key: 'd7e5ca3d9d1cea51f204a56414e387dba46f5e7b', class: "range-slider__track range-slider__track--background" }), h("div", { key: '2a308ea9fd72080d7b47e003d341c6fc521b1404', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'ddf626b67e641ef8b30cc7b3e6cf975e2c052694', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: 'fe7692bf08ee1d95e473e7d913bea28e0a8cf3fc', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
                 'range-slider__data-label-container': true,
                 'hidden': this.type === 'secondary' && this.containerSize === 'small',
-            } })), h("div", { key: '3b71468e553c07627870a8d454f5eaac38f76610', class: {
+            } })), h("div", { key: 'b9db111157d714ee9791db18c6882a12c3fbc5f3', class: {
                 'range-slider__current-step-container': true,
                 'hidden': !this.withCurrentStepCounter,
-            } }, h("div", { key: '249d53ac4883be02bb8e48a27b05f386fc678a67', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: 'e45953c8badfb41992c65df47b0e5ef7a1d3f6de', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '905ac500f576696e668c2d6d7eb495d29e150cf9', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", Object.assign({ key: '278b15c2239b28b350c6c2b9e3b1cbedfe8c5871', theme: this.theme, iconMode: true, class: {
+            } }, h("div", { key: '4c5b48d5ddffa6b8f544493417a165a3838b4dc8', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: '53a35748de8014e98c7852bed551ac278784f4f5', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '1277c19ac4e7dcc4a24c592e21fec25026f169b0', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", Object.assign({ key: '8a798655cfc0d467a9034654d2ca3e5a4bb971b8', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--right': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlNextClick }, (this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 4 } : {})), h("tet-icon", { key: '60dd7a4fa527db277de744deb36aa72f088f51e2', name: "add", class: "range-slider__control--icon" }))))));
+            }, clickCallback: this.onControlNextClick }, (this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 4 } : {})), h("tet-icon", { key: '5d80fe8d67dca6ba354fbcf49e1e27441a6406d1', name: "add", class: "range-slider__control--icon" }))))));
     }
     static get is() { return "tet-range-slider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-stepper-input/tet-stepper-input.js

@@ -122,7 +122,7 @@ export class TetStepperInput {
      */
     render() {
         const { onMinusClick, value, onPlusClick } = this;
-        return (h("div", { key: '4987c0b4bd15d6ed778eb5ff50978d3a1c5466fc', class: "stepper-input" }, h("button", { key: '5b48a293a65327e4e53fed860031c5b9fc1fdb2d', class: "stepper-input__control", "aria-label": t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick) }, h("tet-icon", { key: '85fbb37b912f8e2d5cc57d8b9835550c0eb2ee16', name: "remove", onClick: onMinusClick })), h("input", Object.assign({ key: '3d0dd81165ce5580833a8bd3981fe99297e559d4', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("button", { key: '66692dbce9afbc00322b8eb52c4e1e944f0a6ba8', class: "stepper-input__control", "aria-label": t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick) }, h("tet-icon", { key: 'a8904874d5170f5a4f1b2384bd2c0072800bf388', name: "add", onClick: onPlusClick }))));
+        return (h("div", { key: 'b8baa0962d9e8287741483b9f8aaa7065ea84de8', class: "stepper-input" }, h("button", { key: 'b6e36b43624b60eecddffc4a4c8dcbf48d504195', class: "stepper-input__control", "aria-label": t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick) }, h("tet-icon", { key: '6369c3dcf26349ea47613f7fa9c3868aa85cb54f', name: "remove", onClick: onMinusClick })), h("input", Object.assign({ key: 'cb57e8e5a6608a9176e1d20a75e9e38fe74f801d', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("button", { key: '2c05d122dc811fae2d8832a3f7a659b47ce4344d', class: "stepper-input__control", "aria-label": t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick) }, h("tet-icon", { key: '3a8c08cc7a927d7c86d27d28bccf05be02071e70', name: "add", onClick: onPlusClick }))));
     }
     static get is() { return "tet-stepper-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class TetTextarea {
     }
     render() {
         const { value, label, placeholder, disabled, errorMessages, renderErrorMessage } = this;
-        return (h(Host, { key: 'ed0e53afea972375abde03a9389f339760660bb4' }, label && (h("label", { key: '58cdf75fcab5d0fe43836f7a9a850c9eafbb1961', class: "tet-textarea__label", htmlFor: "textarea" }, label)), h("textarea", { key: '2c5892e699357890c1251244f7c0d0cb4d1b66d9', id: "textarea", class: { 'tet-textarea__base': true, 'error': !!errorMessages.length }, placeholder: placeholder, disabled: disabled, autocomplete: "off" }, value !== null && value !== void 0 ? value : ''), !!errorMessages.length && h("div", { key: '513840d4b5f4b90131ea15341ab3669a47050531', class: "error-messages" }, errorMessages.map(renderErrorMessage))));
+        return (h(Host, { key: 'f2fd8ebf50607715fa39ed1ca3082402a0fdf8a7' }, label && (h("label", { key: '36b8206cbd9d0badadb1e9ef95d5c7ba8d0ba537', class: "tet-textarea__label", htmlFor: "textarea" }, label)), h("textarea", { key: 'cdb3ed82a5b2f60c773e610a39869e40a4584ac2', id: "textarea", class: { 'tet-textarea__base': true, 'error': !!errorMessages.length }, placeholder: placeholder, disabled: disabled, autocomplete: "off" }, value !== null && value !== void 0 ? value : ''), !!errorMessages.length && h("div", { key: '30f0890b17c4431ea4322c34aca6f7e33b01f520', class: "error-messages" }, errorMessages.map(renderErrorMessage))));
     }
     static get is() { return "tet-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/lists/tet-news-card-list/test/tet-news-card-list.spec.js

@@ -36,15 +36,15 @@ describe('tet-news-card-list', () => {
       <tet-news-card-list>
         <mock:shadow-root>
           <tet-card-list controlscrollamount="350" initialscrollamount="0" withcontrols="" withoverflowopacity=""
-          exportparts="card-list, card-list-container" part="card-list-component"></tet-card-list>
+          exportparts="card-list, card-list-container" part="card-list-component" theme="light"></tet-card-list>
         </mock:shadow-root>
       </tet-news-card-list>
     `);
     });
-    it('renders items', async () => {
+    it('renders a list with items in dark theme', async () => {
         const page = await newSpecPage({
             components: [TetNewsCardList],
-            template: () => (h("tet-news-card-list", { items: ITEMS, withScrollbar: false, withMouseDrag: false })),
+            template: () => (h("tet-news-card-list", { items: ITEMS, withScrollbar: false, withMouseDrag: false, theme: "dark" })),
         });
         expect(page.root).toEqualHtml(`
       <tet-news-card-list>
@@ -52,9 +52,14 @@ describe('tet-news-card-list', () => {
           <tet-card-list
             controlscrollamount="350"
             initialscrollamount="0"
-            withcontrols="" withoverflowopacity="" exportparts="card-list, card-list-container" part="card-list-component">
-            <div class="tet-news-card" part="card-list-item">
-              <a data-index="0" class="tet-news-card__link-container" href="#" target="_blank" tabindex="0">
+            withcontrols=""
+            withoverflowopacity=""
+            exportparts="card-list, card-list-container"
+            part="card-list-component"
+            theme="dark"
+          >
+            <div class="tet-news-card dark" part="card-list-item">
+              <a data-index="0" class="tet-news-card__link-container" href="#" target="_blank">
                 <div class="tet-news-card__image__container">
                   <div class="tet-news-card__image">
                     <img alt="Alt text" src="https://picsum.photos/seed/1/700/560">
@@ -68,8 +73,8 @@ describe('tet-news-card-list', () => {
                 </div>
               </a>
             </div>
-            <div class="tet-news-card" part="card-list-item">
-            <a data-index="1" class="tet-news-card__link-container" href="#" target="" tabindex="0">
+            <div class="tet-news-card dark" part="card-list-item">
+            <a data-index="1" class="tet-news-card__link-container" href="#" target="">
                 <div class="tet-news-card__image__container">
                   <div class="tet-news-card__image" >
                     <img alt="" src="https://picsum.photos/seed/2/350/280">
@@ -83,8 +88,8 @@ describe('tet-news-card-list', () => {
                 </div>
               </a>
             </div>
-            <div class="tet-news-card" part="card-list-item">
-            <a data-index="2" class="tet-news-card__link-container" href="#" target="" tabindex="0">
+            <div class="tet-news-card dark" part="card-list-item">
+            <a data-index="2" class="tet-news-card__link-container" href="#" target="">
               <div class="tet-news-card__image__container">
                 <div class="tet-news-card__image" >
                   <img alt="" src="https://picsum.photos/seed/3/350/280">

package/dist/collection/components/simple/lists/tet-news-card-list/tet-news-card-list.css

@@ -371,6 +371,11 @@
   --news-card-image-width: var(--news-card-width);
   --news-card-image-tablet-width: var(--news-card-tablet-width);
   --news-card-image-mobile-width: var(--news-card-mobile-width);
+  --news-card-primary-text-color: var(--tc-text-primary);
+  --news-card-date-text-color: var(--tc-text-secondary);
+  --news-card-link-text-color: var(--tc-text-secondary);
+  --news-card-link-hover-text-color: var(--tc-text-primary);
+  --news-card-link-icon-color: var(--tc-icon-secondary);
 }
 
 tet-card-list {
@@ -387,6 +392,13 @@ tet-card-list {
   padding: 0;
   width: var(--news-card-width);
 }
+.tet-news-card.dark {
+  --news-card-primary-text-color: var(--tc-text-primary-dark);
+  --news-card-date-text-color: var(--tc-text-secondary-dark);
+  --news-card-link-text-color: var(--tc-text-secondary-dark);
+  --news-card-link-hover-text-color: var(--tc-text-primary-dark);
+  --news-card-link-icon-color: var(--tc-icon-secondary-dark);
+}
 .tet-news-card__image__container {
   box-sizing: border-box;
   overflow: hidden;
@@ -419,20 +431,21 @@ tet-card-list {
 }
 .tet-news-card__date {
   font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
-  color: rgb(67, 75, 86);
+  color: var(--news-card-date-text-color);
   letter-spacing: -0.005625rem;
   margin-bottom: 0.25rem;
 }
 .tet-news-card__title {
   font: 600 1.25rem/1.5rem "Gilroy", "Gilroy, Arial, sans-serif";
   text-align: left;
+  color: var(--news-card-primary-text-color);
 }
 .tet-news-card__divider {
   flex: 1;
 }
 .tet-news-card__link {
   font: 400 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
-  color: rgb(67, 75, 86);
+  color: var(--news-card-link-text-color);
   letter-spacing: -0.01125rem;
   margin-top: 0.75rem;
   display: inline-flex;
@@ -440,19 +453,19 @@ tet-card-list {
   text-decoration-line: none;
 }
 .hover .tet-news-card__link {
-  color: rgb(10, 11, 13);
+  color: var(--news-card-link-hover-text-color);
 }
 .tet-news-card__link-container {
+  font: 400 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
   display: flex;
   flex-direction: column;
   text-decoration: none;
-  font: 400 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
-  color: rgb(10, 11, 13);
+  color: var(--news-card-primary-text-color);
   height: 100%;
 }
 .tet-news-card__link-icon {
   --icon-size: 1rem;
-  --icon-color: rgb(153, 160, 174);
+  --icon-color: var(--news-card-link-icon-color);
   margin-left: 0.25rem;
   display: inline-flex;
   align-items: center;

package/dist/collection/components/simple/lists/tet-news-card-list/tet-news-card-list.js

@@ -37,7 +37,10 @@ export class TetNewsCardList {
          */
         this.renderListCard = (item, index) => {
             var _a;
-            return (h("div", { class: "tet-news-card", part: "card-list-item" }, h("a", { class: "tet-news-card__link-container", "data-index": index, href: item.redirectHref, target: item.redirectNewTab ? '_blank' : '', onMouseOver: this.handleCardMouseOver, onMouseLeave: this.handleCardMouseLeave, onClick: item.clickCallback, tabIndex: 0 }, h("div", { class: "tet-news-card__image__container" }, h("div", { class: "tet-news-card__image", onMouseDown: this.disableImageEvents }, h("img", { src: item.imageSrc, alt: (_a = item.imageAlt) !== null && _a !== void 0 ? _a : '' }))), item.date && h("span", { class: "tet-news-card__date" }, item.date), h("span", { class: "tet-news-card__title" }, item.title), h("span", { class: "tet-news-card__divider" }), h("div", { class: "tet-news-card__link" }, h("span", { class: "tet-news-card__underline" }, item.redirectText), ' ', h("tet-icon", { class: "tet-news-card__link-icon", name: "chevron-right" })))));
+            return (h("div", { class: {
+                    "tet-news-card": true,
+                    [this.theme]: true,
+                }, part: "card-list-item" }, h("a", { class: "tet-news-card__link-container", "data-index": index, href: item.redirectHref, target: item.redirectNewTab ? '_blank' : '', onMouseOver: this.handleCardMouseOver, onMouseLeave: this.handleCardMouseLeave, onFocus: this.handleCardMouseOver, onBlur: this.handleCardMouseLeave, onClick: item.clickCallback }, h("div", { class: "tet-news-card__image__container" }, h("div", { class: "tet-news-card__image", onMouseDown: this.disableImageEvents }, h("img", { src: item.imageSrc, alt: (_a = item.imageAlt) !== null && _a !== void 0 ? _a : '' }))), item.date && h("span", { class: "tet-news-card__date" }, item.date), h("span", { class: "tet-news-card__title" }, item.title), h("span", { class: "tet-news-card__divider" }), h("div", { class: "tet-news-card__link" }, h("span", { class: "tet-news-card__underline" }, item.redirectText), ' ', h("tet-icon", { class: "tet-news-card__link-icon", name: "chevron-right" })))));
         };
         this.items = [];
         this.withControls = true;
@@ -48,6 +51,7 @@ export class TetNewsCardList {
         this.withScrollbar = true;
         this.withMouseDrag = false;
         this.withVirtualScroll = false;
+        this.theme = 'light';
     }
     render() {
         const { withControls, withMouseDrag, withScrollbar, withVirtualScroll, initialScrollAmount, disableScroll, scrollFullWidth, controlScrollAmount, } = this;
@@ -61,7 +65,7 @@ export class TetNewsCardList {
             scrollFullWidth,
             controlScrollAmount,
         };
-        return (h(Host, { key: 'e5c27006fc39eb5032940928d8962bc9663ec0bf' }, h("tet-card-list", Object.assign({ key: '57ae72acde66ef611444da732ff1e10e1b924845', part: "card-list-component", exportparts: "card-list, card-list-container", withOverflowOpacity: true }, props), this.items.map((item, index) => this.renderListCard(item, index)))));
+        return (h(Host, { key: '6e98afa7859660a19f542bcc5d1be281b2bc1e41' }, h("tet-card-list", Object.assign({ key: 'b5ce16e93f1d14c011286f956138654b953e84b9', theme: this.theme, part: "card-list-component", exportparts: "card-list, card-list-container", withOverflowOpacity: true }, props), this.items.map((item, index) => this.renderListCard(item, index)))));
     }
     static get is() { return "tet-news-card-list"; }
     static get encapsulation() { return "shadow"; }
@@ -242,6 +246,24 @@ export class TetNewsCardList {
                 "attribute": "with-virtual-scroll",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the news card list."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
             }
         };
     }

package/dist/collection/components/simple/lists/tet-selection-list/tet-selection-list.js

@@ -95,7 +95,7 @@ export class TetSelectionList {
         return this.selectedItems;
     }
     render() {
-        return (h("ul", { key: '9672bb24025846ba66e37e07a06175c9cf4ad5a1', class: "list", part: "selection-list" }, this.items.map(this.renderListItem)));
+        return (h("ul", { key: '41e58b8fd13f0ac75ac0a61d4d119ad62985b0fe', class: "list", part: "selection-list" }, this.items.map(this.renderListItem)));
     }
     static get is() { return "tet-selection-list"; }
     static get encapsulation() { return "shadow"; }