@tet/tet-components 1.3.23-testing → 1.3.24-staging

package/dist/components/{p-e00acbb2.js → p-3f462a6d.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-37ed3ebb.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-5749376d.js';
 
 var TooltipPosition;
 (function (TooltipPosition) {
@@ -362,7 +362,7 @@ const TetTooltip = /*@__PURE__*/ proxyCustomElement(class TetTooltip extends H {
         return isTooltipOutOfBounds;
     }
     render() {
-        return h(Host, { key: '64ee4fec058667134d313b0c60da620751594abb', class: { visible: this.showTooltip } }, this.renderTooltip());
+        return h(Host, { key: 'c24e662bedaf97a4ed591e7d8acfaecb518c6f4e', class: { visible: this.showTooltip } }, this.renderTooltip());
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/{p-266dfc5a.js → p-477693a2.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-37ed3ebb.js';
-import { d as defineCustomElement$2 } from './p-fe98c368.js';
-import { d as defineCustomElement$1 } from './p-60143a57.js';
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-5749376d.js';
+import { d as defineCustomElement$2 } from './p-33c61038.js';
+import { d as defineCustomElement$1 } from './p-cc30e8fa.js';
 
-const tetNumberInputCss = "@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:host{--number-input-height:3.5rem;--number-input-background-color:var(--tc-layer-primary);--number-input-border-radius:0.75rem;--number-input-border-color:var(--tc-border-secondary);--number-input-border-color-active:var(--tc-border-primary);--number-input-border-color-error:var( --tc-alert-accent-error);--number-input-text-color:var(--tc-text-primary);--number-input-text-secondary-color:var(--tc-text-secondary);--number-input-dropdown-active:var(--tc-layer-tertiary);--number-input-max-width:21.625rem;--number-input-disabled:var(--tc-background-secondary);--number-input-disabled-text:var(--tc-text-tertiary);--number-input-dropdown-border:var(--tc-border-tertiary);max-width:var(--number-input-max-width);display:block}.number-input{display:flex;flex-direction:column}.number-input.dark{--number-input-background-color:var(--tc-layer-primary-dark);--number-input-border-color:var(--tc-border-secondary-dark);--number-input-border-color-active:var(--tc-border-primary-dark);--number-input-border-color-error:var(--tc-alert-accent-error-dark);--number-input-text-color:var(--tc-text-primary-dark);--number-input-text-secondary-color:var(--tc-text-secondary-dark);--number-input-dropdown-active:var(--tc-layer-tertiary-dark);--number-input-disabled:var(--tc-background-secondary-dark);--number-input-disabled-text:var(--tc-text-tertiary-dark);--number-input-dropdown-border:var(--tc-border-tertiary-dark)}.number-input__label{margin-bottom:0.25rem;font:500 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\";color:var(--number-input-text-secondary-color)}.number-input__input{border:none;outline:none;appearance:textfield;-moz-appearance:textfield;padding-inline:0;padding-block:0;font:500 1.25rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.number-input__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-input__input-suffix{font:400 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\";color:var(--number-input-text-secondary-color);margin-left:0.25rem}.number-input__input-invisible{visibility:hidden;font:500 1.25rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\";position:absolute;pointer-events:none}.number-input__input-container{position:relative;display:flex;border:0.063rem solid var(--number-input-border-color);align-items:baseline;justify-content:center;padding:0.9375rem;cursor:pointer;height:var(--number-input-height);box-sizing:border-box;background-color:var(--number-input-background-color);border-radius:var(--number-input-border-radius)}.number-input__input-container:focus-within:not(.dropdown-open){outline:2px solid var(--tc-blue-50-dark);outline-offset:2px}.number-input__input-container .dropdown-open .number-input__input:focus{outline:none !important}.number-input__input-container:active{outline:none;border:0.063rem solid var(--number-input-border-color-active)}.number-input__input--hidden{display:none}.number-input__helper-text{margin-top:0.25rem;font:400 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\";color:var(--number-input-text-secondary-color)}.number-input__cheveron{display:flex;align-self:center;position:absolute;right:1rem;--icon-size:1.25rem;background:transparent;border:none;outline:none;cursor:pointer;--button-border:none;--button-padding-small:0.5rem}.number-input__dropdown{border:0.0625rem solid var(--number-input-dropdown-border);position:absolute;width:100%;top:3.625rem;background-color:var(--number-input-background-color);padding:0.625rem 0;border-radius:0.75rem;z-index:1;color:var(--number-input-text-color)}.number-input__dropdown-item{display:flex;align-items:center;padding:0.5rem 1rem;font:500 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.number-input__dropdown-item.active{background-color:var(--number-input-dropdown-active)}.number-input__dropdown-item.focus{outline:2px solid var(--tc-blue-50-dark);outline-offset:2px}.number-input__dropdown-item:hover{background-color:var(--number-input-dropdown-active)}.number-input__dropdown-item .check{margin-left:auto}.number-input.disabled .number-input__input-container,.number-input.disabled .number-input__input{background-color:var(--number-input-disabled);border-color:var(--number-input-disabled);cursor:not-allowed}.number-input.disabled .number-input__input,.number-input.disabled .number-input__input-suffix{color:var(--number-input-disabled-text)}.number-input.error .number-input__input-container{border:0.063rem solid var(--number-input-border-color-error)}.number-input.error .number-input__helper-text{color:var(--number-input-border-color-error)}@media all and (min-width: 48rem){.number-input .number-input__label{font:500 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\"}}.number-input tet-icon{--icon-color:var(--number-input-text-color)}.number-input .number-input__input{color:var(--number-input-text-color);background-color:var(--number-input-background-color)}";
+const tetNumberInputCss = "@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:host{--number-input-height:3.5rem;--number-input-background-color:var(--tc-layer-primary);--number-input-border-radius:0.75rem;--number-input-border-color:var(--tc-border-secondary);--number-input-border-color-active:var(--tc-border-primary);--number-input-border-color-error:var( --tc-alert-accent-error);--number-input-text-color:var(--tc-text-primary);--number-input-text-secondary-color:var(--tc-text-secondary);--number-input-dropdown-active:var(--tc-layer-tertiary);--number-input-max-width:21.625rem;--number-input-focus-outline-color:var(--tc-blue-40);--number-input-disabled:var(--tc-background-secondary);--number-input-disabled-text:var(--tc-text-tertiary);--number-input-dropdown-border:var(--tc-border-tertiary);max-width:var(--number-input-max-width);display:block}.number-input{display:flex;flex-direction:column}.number-input.dark{--number-input-background-color:var(--tc-layer-primary-dark);--number-input-border-color:var(--tc-border-secondary-dark);--number-input-border-color-active:var(--tc-border-primary-dark);--number-input-border-color-error:var(--tc-alert-accent-error-dark);--number-input-text-color:var(--tc-text-primary-dark);--number-input-text-secondary-color:var(--tc-text-secondary-dark);--number-input-dropdown-active:var(--tc-layer-tertiary-dark);--number-input-disabled:var(--tc-background-secondary-dark);--number-input-disabled-text:var(--tc-text-tertiary-dark);--number-input-dropdown-border:var(--tc-border-tertiary-dark);--number-input-focus-outline-color:var(--tc-blue-40-dark)}.number-input__label{margin-bottom:0.25rem;font:500 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\";color:var(--number-input-text-secondary-color)}.number-input__input{border:none;outline:none;appearance:textfield;-moz-appearance:textfield;padding-inline:0;padding-block:0;font:500 1.25rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.number-input__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-input__input-suffix{font:400 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\";color:var(--number-input-text-secondary-color);margin-left:0.25rem}.number-input__input-invisible{visibility:hidden;font:500 1.25rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\";position:absolute;pointer-events:none}.number-input__input-container{position:relative;display:flex;border:0.063rem solid var(--number-input-border-color);align-items:baseline;justify-content:center;padding:0.9375rem;cursor:pointer;height:var(--number-input-height);box-sizing:border-box;background-color:var(--number-input-background-color);border-radius:var(--number-input-border-radius)}.number-input__input-container:active,.number-input__input-container:focus-within{outline:none;border:0.063rem solid var(--number-input-border-color-active)}.number-input__input-container.focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:0.125rem;transition:outline 0s;outline-color:var(--number-input-focus-outline-color);border-color:var(--number-input-border-color-active)}.number-input__input--hidden{opacity:0;position:absolute}.number-input__helper-text{margin-top:0.25rem;font:400 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\";color:var(--number-input-text-secondary-color)}.number-input__cheveron{display:flex;align-self:center;position:absolute;right:1rem;--icon-size:1.25rem;background:transparent;border:none;outline:none;cursor:pointer;--button-border:none;--button-padding-small:0.5rem}.number-input__cheveron:focus,.number-input__cheveron:focus-visible{--button-box-shadow:none}.number-input__dropdown{border:0.0625rem solid var(--number-input-dropdown-border);position:absolute;width:100%;top:3.625rem;background-color:var(--number-input-background-color);padding:0.625rem 0;border-radius:0.75rem;z-index:1;color:var(--number-input-text-color)}.number-input__dropdown:focus-within{outline:none}.number-input__dropdown-item{display:flex;align-items:center;padding:0.5rem 1rem;font:500 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.number-input__dropdown-item.active{background-color:var(--number-input-dropdown-active)}.number-input__dropdown-item:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:0rem;transition:outline 0s;border-radius:0.125rem;outline-color:var(--number-input-focus-outline-color)}.number-input__dropdown-item:hover{background-color:var(--number-input-dropdown-active)}.number-input__dropdown-item .check{margin-left:auto}.number-input.disabled .number-input__input-container,.number-input.disabled .number-input__input{background-color:var(--number-input-disabled);border-color:var(--number-input-disabled);cursor:not-allowed}.number-input.disabled .number-input__input,.number-input.disabled .number-input__input-suffix{color:var(--number-input-disabled-text)}.number-input.error .number-input__input-container{border:0.063rem solid var(--number-input-border-color-error)}.number-input.error .number-input__helper-text{color:var(--number-input-border-color-error)}@media all and (min-width: 48rem){.number-input .number-input__label{font:500 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\"}}.number-input tet-icon{--icon-color:var(--number-input-text-color)}.number-input .number-input__input{color:var(--number-input-text-color);background-color:var(--number-input-background-color)}";
 const TetNumberInputStyle0 = tetNumberInputCss;
 
 /**
@@ -34,6 +34,7 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
          */
         this.onChevronClick = () => {
             this.isOpen = !this.isOpen;
+            this.onDropdownOpenChanged();
         };
         /**
          * Closes dropdown
@@ -60,7 +61,7 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
         this.handleContainerKeydown = (e) => {
             if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
-                this.isOpen = !this.isOpen;
+                this.onChevronClick();
             }
         };
         this.label = undefined;
@@ -79,6 +80,7 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
         this.suffix = undefined;
         this.isOpen = undefined;
         this.isValueHidden = false;
+        this.isKeyboardFocus = false;
     }
     /**
      * Expose method to access value
@@ -119,6 +121,9 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
         if (['-', '+', '.'].includes(event.key)) {
             event.preventDefault();
         }
+        if (event.key === 'Tab') {
+            this.isKeyboardFocus = true;
+        }
     }
     /**
      * Listens for focus to select value
@@ -140,6 +145,8 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
      * @param event mouse event
      */
     onClick(event) {
+        this.isKeyboardFocus = false;
+        this.inputWrapperElement.classList.remove('focus-visible');
         const path = event.composedPath();
         if (!path.includes(this.dropdownElement) && !path.includes(this.chevronElement)) {
             this.closeDropdown();
@@ -162,6 +169,7 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
         }
         this.inputElement.value = this.value.toString();
         this.inputValueChanged.emit({ value: this.value, suffix: this.suffix });
+        this.inputWrapperElement.classList.remove('focus-visible');
     }
     /**
      * handle input logic
@@ -192,7 +200,6 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
             const { key, target } = event;
             switch (key) {
                 case ' ':
-                case 'SpaceBar':
                 case 'Enter':
                     event.preventDefault();
                     selectCallback();
@@ -207,11 +214,17 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
                     break;
                 case 'Escape':
                     this.isOpen = false;
-                    this.dropdownElement.focus();
+                    this.inputWrapperElement.classList.add('focus-visible');
                     break;
             }
         };
     }
+    toggleKeyboardFocus(focus) {
+        if (!this.isKeyboardFocus) {
+            return;
+        }
+        return focus ? this.inputWrapperElement.classList.add('focus-visible') : this.inputWrapperElement.classList.remove('focus-visible');
+    }
     /**
      *
      * @param _suffix selected suffix option
@@ -219,13 +232,15 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
     onDropdownItemClick(_suffix) {
         this.suffix = _suffix;
         this.inputValueChanged.emit({ value: this.value, suffix: this.suffix });
-        this.onChevronClick();
+        if (!this.isKeyboardFocus) {
+            this.closeDropdown();
+        }
     }
     /**
      * Move focus from input element to dropdown
      */
-    onDropdownOpenChanged(isDropdownOpen) {
-        if (isDropdownOpen && this.suffixes) {
+    onDropdownOpenChanged() {
+        if (this.isOpen && this.suffixes) {
             setTimeout(() => {
                 const activeSuffixIndex = this.suffixes.findIndex(suffixOption => suffixOption === this.suffix);
                 const indexToFocus = activeSuffixIndex !== -1 ? activeSuffixIndex : 0;
@@ -240,12 +255,11 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
      */
     render() {
         const { label, helperText, value, disabled, error, completed, isOpen, suffix } = this;
-        return (h("div", { key: 'ad2189f28458f296fd76390eb07996637f0f99d7', class: { 'number-input': true, [this.theme]: !!this.theme,
-                'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: '146fc7c71058fa0c1f81ed56081f49b054faff61', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: 'f7f5b78ebd0b02fbad5cdc0c285c656d9b03354b', class: { 'number-input__input-container': true, 'dropdown-open': this.isOpen }, onKeyDown: this.handleContainerKeydown }, h("input", Object.assign({ key: '4058bb72542f82be4ec7c692642e2066af44e3e5', 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: '5a51da6e82e6bb430242f3fb1d630a764b6b1077', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: '2100c7f19934b51a7a46e53139e127c0f935e177', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: '690e1ebf1a885532fedacad732f376db57e334fb', type: "ghost", size: "small", ref: (element) => (this.chevronElement = element), class: { 'number-input__cheveron': true }, onClick: this.onChevronClick, "accessibility-label": this.buttonAccessibilityLabel, tabindex: "-1" }, !isOpen && h("tet-icon", { key: '600304642780a9fe20e28a6974179ff45842fe09', name: "chevron-down" }), isOpen && h("tet-icon", { key: '30fd2bc3ba018a178e179dec02aa6cd7812248e6', name: "chevron-up" }))), isOpen && (h("div", { key: 'cf7913cf9b324911c24f2069083a7e2e71dcc95b', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: '77a8561e514764964b4d1599e328fa1b38286e19', class: "number-input__helper-text" }, helperText)));
+        return (h("div", { key: 'f42326284d1402bcd30f89475ffceeb1dd87dd64', class: { 'number-input': true, [this.theme]: !!this.theme,
+                'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: 'bd65040341d94f32e51e27ecc4cb2e31ca5404ac', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: '489371376c69acc1a58de2ef648e9442c67e2102', class: "number-input__input-container", onKeyDown: this.handleContainerKeydown, ref: (divElement) => (this.inputWrapperElement = divElement) }, h("input", Object.assign({ key: '4e60876405aecd6a49780f0aa59927be897b9d47', onFocusin: () => this.toggleKeyboardFocus(true), onFocusout: () => this.toggleKeyboardFocus(false), 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: '753a6a04acd02316df678e1400cf7ed3230a6db7', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: 'c7e7a471f7e43215ce7d379d2c0acd6438c29409', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: '4b7abaaa0b100a2eb61e3483067853859427c8d0', type: "ghost", size: "small", ref: (element) => (this.chevronElement = element), class: { 'number-input__cheveron': true }, onClick: this.onChevronClick, "accessibility-label": this.buttonAccessibilityLabel, tabindex: "-1" }, !isOpen && h("tet-icon", { key: 'a0ec85317e9adf73a062a33735b171c394093518', name: "chevron-down" }), isOpen && h("tet-icon", { key: 'bd5066a3599356a91d90aa88377f204293c491ab', name: "chevron-up" }))), isOpen && (h("div", { key: 'e1c8fef8079d26d109462396bf6a883c2336dab1', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: 'efe5c0acfd2bf9dcdafbf8c38e826e1f18a33a98', class: "number-input__helper-text" }, helperText)));
     }
     static get watchers() { return {
-        "suffix": ["onSuffixChange"],
-        "isOpen": ["onDropdownOpenChanged"]
+        "suffix": ["onSuffixChange"]
     }; }
     static get style() { return TetNumberInputStyle0; }
 }, [1, "tet-number-input", {
@@ -265,11 +279,11 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
         "suffix": [32],
         "isOpen": [32],
         "isValueHidden": [32],
+        "isKeyboardFocus": [32],
         "getValue": [64],
         "resetSuffix": [64]
-    }, [[0, "keydown", "onKeydown"], [0, "focus", "onFocus"], [8, "click", "onClick"], [0, "input", "inputChangeHandler"], [0, "blur", "onBlur"]], {
-        "suffix": ["onSuffixChange"],
-        "isOpen": ["onDropdownOpenChanged"]
+    }, [[8, "keydown", "onKeydown"], [0, "focus", "onFocus"], [8, "click", "onClick"], [0, "input", "inputChangeHandler"], [0, "blur", "onBlur"]], {
+        "suffix": ["onSuffixChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/{p-0d70fd4f.js → p-498fffdf.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-37ed3ebb.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-5749376d.js';
 import { g as getConvertedPixels } from './p-165a8492.js';
-import { d as defineCustomElement$2 } from './p-fe98c368.js';
-import { d as defineCustomElement$1 } from './p-60143a57.js';
+import { d as defineCustomElement$2 } from './p-33c61038.js';
+import { d as defineCustomElement$1 } from './p-cc30e8fa.js';
 
 /**
  * Adds the `mobile-like` inertial scroll logic without calling the native `scroll` event

package/dist/components/{p-f88fd95c.js → p-4a6d784c.js}

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-37ed3ebb.js';
-import { e as endpoints, A as ApiRequest } from './p-a63d3582.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-5749376d.js';
+import { e as endpoints, A as ApiRequest } from './p-a156c1d8.js';
 import { g as generateFormUrl } from './p-6e631dc7.js';
-import { d as defineCustomElement$5 } from './p-29ac9a53.js';
-import { d as defineCustomElement$4 } from './p-36142c3d.js';
-import { d as defineCustomElement$3 } from './p-4c96685f.js';
-import { d as defineCustomElement$2 } from './p-60143a57.js';
-import { d as defineCustomElement$1 } from './p-b48a9190.js';
+import { d as defineCustomElement$5 } from './p-6b0146be.js';
+import { d as defineCustomElement$4 } from './p-3a4537b9.js';
+import { d as defineCustomElement$3 } from './p-3145c59f.js';
+import { d as defineCustomElement$2 } from './p-cc30e8fa.js';
+import { d as defineCustomElement$1 } from './p-b2ced599.js';
 
 /**
  * Returns data on requested products.
@@ -98,7 +98,7 @@ const fillProductData = (compareCard, requestedProduct, requestedProductData) =>
     const finalPrice = parseFloat(price.toString()).toFixed(2).replace('.', ',');
     compareCard = Object.assign(Object.assign({}, compareCard), { bestChoice: bestChoice });
     const incomingCompareCardOptions = Object.assign(Object.assign({}, currentCompareCardOptions), { price: finalPrice, oldPrice: oldPrice, mainTitle: requestedProductData.name[productLanguage], subTitle: requestedProductData.subtitle[productLanguage], bulletPoints: benefits, infoItem: requestedProductData.descriptionTooltip[productLanguage] !== ''
-            ? '<tet-icon class="icon" name="info-circle"></tet-icon>' +
+            ? '<tet-icon class="icon" name="info-circle" focusable={true}></tet-icon>' +
                 '<tet-tooltip class="tet-tooltip">' +
                 requestedProductData.descriptionTooltip[productLanguage] +
                 '</tet-tooltip>' +
@@ -178,7 +178,7 @@ const fillOldProductData = (compareCard, requestedProduct, requestedProductData)
     const finalPrice = parseFloat(price.toString()).toFixed(2).replace('.', ',');
     compareCard = Object.assign(Object.assign({}, compareCard), { bestChoice: bestChoice });
     const incomingCompareCardOptions = Object.assign(Object.assign({}, currentCompareCardOptions), { price: finalPrice, oldPrice: oldPrice, mainTitle: requestedProductData.name[productLanguage], subTitle: requestedProductData.subtitle[productLanguage], bulletPoints: benefits, infoItem: requestedProductData.descriptionTooltip[productLanguage] !== ''
-            ? '<tet-icon class="icon" name="info-circle"></tet-icon>' +
+            ? '<tet-icon class="icon" name="info-circle" focusable={true}></tet-icon>' +
                 '<tet-tooltip class="tet-tooltip">' +
                 requestedProductData.descriptionTooltip[productLanguage] +
                 '</tet-tooltip>' +