@tet/tet-components 1.3.31-testing → 1.3.32-testing

package/dist/collection/components/advanced/cards/tet-compare-card/tet-compare-card.css

@@ -4855,7 +4855,7 @@
   box-sizing: border-box;
   padding: var(--input-padding);
   border-radius: var(--input-border-radius);
-  border: 0.0625rem solid var(--tc-border-quaternary-dark);
+  border: 0.0625rem solid var(--input-border-color);
   color: var(--input-text-color);
   background: var(--input-background-color);
   outline: 0.125rem solid transparent;
@@ -4937,7 +4937,7 @@
   color: var(--input-label-color);
   font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
 }
-.tet-input__label.tet-input__light, .tet-input__label.tet-input__mint-original {
+.tet-input__label.tet-input__mint-original {
   margin-left: 0 !important;
   font-family: var(--font-family-fallback);
 }

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

@@ -29,11 +29,12 @@ describe('tet-dropdown', () => {
           <mock:shadow-root>
             <div class="dropdown light">
               <div class="dropdown__wrapper">
-                <label htmlfor="dropdown-button" class="dropdown__label">Label</label>
+                <label id="dropdown-label" htmlfor="dropdown-button" class="tet-input__label">Label</label>
                   <div class="dropdown__button-wrapper">
                     <button
                     id="dropdown-button"
                     class="dropdown__button"
+                    aria-labelledby="dropdown-label"
                     aria-haspopup="listbox"
                     aria-controls="dropdown-options">
                       <span class="dropdown__button__selected">
@@ -43,36 +44,38 @@ describe('tet-dropdown', () => {
                   </button>
                 </div>
               </div>
-              <ul
-                id="dropdown-options"
-                class="dropdown__options"
-                role="listbox"
-                tabindex="-1"
-                aria-labelledby="dropdown-button">
-                <div class="dropdown__options-wrapper">
-                  <li
-                    class="dropdown__option"
-                    role="option"
-                    tabindex="0"
-                    data-value="0">
-                    Apple
-                  </li>
-                  <li
-                    class="dropdown__option"
-                    role="option"
-                    tabindex="0"
-                    data-value="0">
-                    Banana
-                  </li>
-                  <li
-                    class="dropdown__option"
-                    role="option"
-                    tabindex="0"
-                    data-value="0">
-                    Pineapple
-                  </li>
-                  </div>
-              </ul>
+              <div class="dropdown__options-focus-wrapper">
+                <div class="dropdown__options-scroll-wrapper">
+                  <ul
+                    id="dropdown-options"
+                    class="dropdown__options"
+                    role="listbox"
+                    tabindex="-1"
+                    aria-labelledby="dropdown-button">
+                    <li
+                      class="dropdown__option dropdown__option--single"
+                      role="option"
+                      tabindex="0"
+                      data-value="0">
+                      Apple
+                    </li>
+                    <li
+                      class="dropdown__option dropdown__option--single"
+                      role="option"
+                      tabindex="0"
+                      data-value="0">
+                      Banana
+                    </li>
+                    <li
+                      class="dropdown__option dropdown__option--single"
+                      role="option"
+                      tabindex="0"
+                      data-value="0">
+                      Pineapple
+                    </li>
+                  </ul>
+                </div>
+              </div>
             </div>
           </mock:shadow-root>
         </tet-dropdown>

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

@@ -350,7 +350,320 @@
   font-family: var(--font-family-content);
 }
 
+@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);
+}
+
+:root, :host {
+  --input-height: 2.75rem;
+  --input-padding: 0.5rem;
+  --input-font-size: 1rem;
+  --input-border-radius: 0.1875rem;
+  --input-color-error: rgb(233, 69, 54);
+  --input-font-family: var(--font-family-content);
+  --input-icon-size: 1.5rem;
+  --input-icon-top-position: auto;
+  --input-icon-color: rgb(10, 11, 13);
+  --input-focus-icon-color: rgb(10, 11, 13);
+  --input-label-color: rgb(10, 11, 13);
+  --input-text-color: rgb(10, 11, 13);
+  --input-background-color: rgb(255, 255, 255);
+  --input-border-color: rgb(153, 160, 174);
+  --input-placeholder-color: rgb(153, 160, 174);
+  --input-hover-background-color: rgba(88, 99, 116, 0.08);
+  --input-focus-background-color: rgb(255, 255, 255);
+  --input-focus-border-color: rgb(10, 11, 13);
+  --input-focus-outline-color: rgba(88, 99, 116, 0.12);
+  --input-disabled-label-color: rgb(88, 99, 116);
+  --input-disabled-text-color: rgb(153, 160, 174);
+  --input-border-disabled: rgb(215, 219, 224);
+  --input-disabled-background-color: rgba(88, 99, 116, 0.08);
+  --input-disabled-icon-color: var(--input-icon-color);
+}
+
+.tet-input__dark {
+  --input-icon-color: var(--tc-icon-primary-dark);
+  --input-label-color: var(--tc-text-primary-dark);
+  --input-text-color: var(--tc-text-primary-dark);
+  --input-background-color: var(--tc-layer-primary-dark);
+  --input-border-color: var(--tc-border-secondary-dark);
+  --input-placeholder-color: var(--tc-button-text-inverse-disabled-dark);
+  --input-hover-background-color: var(--tc-button-primary-background-inverse-hover-dark);
+  --input-focus-icon-color: var(--tc-icon-primary-dark);
+  --input-focus-background-color: var(--tc-layer-primary-dark);
+  --input-focus-border-color: var(--tc-border-primary-dark);
+  --input-focus-outline-color: var(--tc-text-input-border-active-dark);
+  --input-disabled-label-color: var(--tc-text-secondary-dark);
+  --input-disabled-text-color: var(--tc-button-text-inverse-disabled-dark);
+  --input-border-disabled: var(--tc-border-quaternary-dark);
+  --input-disabled-background-color: var(--tc-button-primary-background-inverse-hover-dark);
+  --input-disabled-icon-color: var(--tc-button-icon-inverse-disabled-dark);
+  --input-color-error: var(--tc-alert-accent-error-dark);
+}
+.tet-input__dark.tet-input__dark.keyboard-focus:focus {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+}
+
+.tet-input__mint {
+  --input-icon-color: rgb(247, 247, 247);
+  --input-focus-icon-color: rgb(247, 247, 247);
+  --input-label-color: rgb(247, 247, 247);
+  --input-text-color: rgb(255, 255, 255);
+  --input-background-color: transparent;
+  --input-border-color: rgb(88, 99, 116);
+  --input-placeholder-color: rgb(67, 75, 86);
+  --input-hover-background-color: rgba(26, 213, 219, 0.08);
+  --input-focus-background-color: transparent;
+  --input-focus-border-color: rgb(26, 213, 219);
+  --input-focus-outline-color: rgba(26, 213, 219, 0.24);
+  --input-disabled-label-color: rgb(153, 160, 174);
+  --input-border-disabled: rgb(67, 75, 86);
+  --input-disabled-background-color: rgba(153, 160, 174, 0.08);
+  --input-disabled-text-color: rgb(67, 75, 86);
+}
+
+.tet-input__light {
+  --input-icon-color: var(--tc-icon-primary);
+  --input-label-color: var(--tc-text-primary);
+  --input-text-color: var(--tc-text-primary);
+  --input-background-color: var(--tc-layer-primary);
+  --input-border-color: var(--tc-border-secondary);
+  --input-placeholder-color: var(--tc-button-text-inverse-disabled);
+  --input-hover-background-color: var(--tc-button-primary-background-inverse-hover);
+  --input-focus-icon-color: var(--tc-icon-primary);
+  --input-focus-background-color: var(--tc-layer-primary);
+  --input-focus-border-color: var(--tc-border-primary);
+  --input-focus-outline-color: var(--tc-text-input-border-active);
+  --input-disabled-label-color: var(--tc-text-secondary);
+  --input-disabled-text-color: var(--tc-button-text-inverse-disabled);
+  --input-border-disabled: var(--tc-border-quaternary);
+  --input-disabled-background-color: var(--tc-button-primary-background-inverse-hover);
+  --input-disabled-icon-color: var(--tc-button-icon-inverse-disabled);
+  --input-color-error: var(--tc-alert-accent-error);
+}
+
+.tet-input__mint-original {
+  --input-icon-color: #9ba5be;
+  --input-label-color: #f5f5f5;
+  --input-text-color: #f5f5f5;
+  --input-background-color: #1d2128;
+  --input-border-color: #2b3036;
+  --input-placeholder-color: rgba(155, 165, 190, 0.8);
+  --input-focus-icon-color: #aeb7bc;
+  --input-focus-border-color: #01cbe0;
+  --input-focus-background-color: #1d2128;
+}
+
+.tet-input__base {
+  width: 100%;
+  height: var(--input-height);
+  box-sizing: border-box;
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  border: 0.0625rem solid var(--input-border-color);
+  color: var(--input-text-color);
+  background: var(--input-background-color);
+  outline: 0.125rem solid transparent;
+  font-size: inherit;
+  font-family: var(--input-font-family);
+  font-weight: 500;
+  line-height: 1.25rem;
+  letter-spacing: -0.005625rem;
+  /**
+   * Deprecated: Forms now use the default (classic) input theming.
+   * With the introduction of light and dark themes, the code below would
+   * cause input fields to appear differently depending on the theme.
+   *
+   *   // The light and mint-original themes are currently used in the Forms application.
+   *   &.tet-input__light,
+   *   &.tet-input__mint-original {
+   *     min-height: unset;
+   *     height: 2.5rem;
+   *     font-family: var(--font-family-fallback);
+   *     font-size: 1rem;
+   *     font-weight: 400;
+   *     line-height: 1.5;
+   *     letter-spacing: normal;
+   *   }
+   */
+}
+.tet-input__base::placeholder {
+  color: var(--input-placeholder-color);
+}
+.tet-input__base.tet-input__mint-original:not(:disabled):hover {
+  background-color: #1d2128;
+  border-color: #01cbe0;
+  box-shadow: 0 0.0625rem 0.25rem 0.125rem rgba(1, 203, 224, 0.4);
+}
+.tet-input__base.tet-input__mint-original:not(:disabled):hover.error, .tet-input__base.tet-input__mint-original:not(:disabled):focus.error, .tet-input__base.tet-input__mint-original:not(:disabled):active.error {
+  border-color: rgb(233, 69, 54);
+}
+.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;
+  border: 0.0625rem solid var(--input-border-disabled);
+  background-color: var(--input-disabled-background-color);
+  color: var(--input-disabled-text-color);
+}
+.tet-input__base:not(:disabled).error {
+  border-color: var(--input-color-error);
+}
+.tet-input__base:not(:disabled):hover {
+  background: var(--input-hover-background-color);
+}
+.tet-input__base:not(:disabled):focus, .tet-input__base:not(:disabled):active {
+  background: var(--input-focus-background-color);
+  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;
+  margin-left: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+  color: var(--input-label-color);
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+}
+.tet-input__label.tet-input__mint-original {
+  margin-left: 0 !important;
+  font-family: var(--font-family-fallback);
+}
+.tet-input__label:has(~ .input-container input[disabled]) {
+  color: var(--input-disabled-label-color);
+}
+
+.tet-input__error-message {
+  font: 500 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
+  color: var(--input-color-error);
+}
+
+:host {
+  /**
+    * @prop --options-max-height: The maximum height of the options panel.
+    */
+  --options-max-height: 15.625rem;
   --border-radius: 0.625rem;
   --focus-border-radius: 0.875rem;
   --option-padding: 0.5rem 0.75rem;
@@ -398,13 +711,8 @@
   --focus-button-background-color: rgba(26, 213, 219, 0.32);
 }
 .dropdown * {
-  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
   color: var(--text-color);
 }
-.dropdown__label {
-  margin-left: 0.375rem;
-  margin-bottom: 0.25rem;
-}
 .dropdown__wrapper {
   position: relative;
   display: flex;
@@ -432,6 +740,7 @@
   --icon-color: var(--text-color);
 }
 .dropdown__button {
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
   display: flex;
   height: 2.75rem;
   width: 100%;
@@ -486,6 +795,7 @@
   margin-right: 0.5rem;
 }
 .dropdown__option {
+  font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
   display: flex;
   align-items: center;
   border-radius: 0.125rem;
@@ -510,6 +820,9 @@
 .dropdown__option__labelright {
   font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
 }
+.dropdown__option--single {
+  position: relative;
+}
 .dropdown__option__flex {
   display: flex;
   flex-direction: column;
@@ -545,7 +858,7 @@
   border-color: var(--option-accent-color);
   background-color: var(--option-accent-color);
 }
-.dropdown__options {
+.dropdown__options-focus-wrapper {
   z-index: 99999;
   position: absolute;
   top: 100%;
@@ -557,16 +870,21 @@
   padding: 0 0.125rem 0.125rem 0.125rem;
   border-radius: 0 0 var(--focus-border-radius) var(--focus-border-radius);
 }
-.dropdown__options-wrapper {
-  display: none;
-  flex-direction: column;
-  padding: 0.625rem 0;
+.dropdown__options-scroll-wrapper {
   border: 0.0625rem solid var(--border-color);
   border-top: none;
   border-radius: 0 0 var(--border-radius) var(--border-radius);
+  overflow: hidden;
+}
+.dropdown__options {
+  display: none;
+  flex-direction: column;
+  padding: 0.625rem 0;
   background-color: var(--dropdown-background-color);
+  max-height: var(--options-max-height);
+  overflow-y: auto;
 }
-.dropdown--open .dropdown__options-wrapper, .dropdown--open .dropdown__options {
+.dropdown--open .dropdown__options-focus-wrapper, .dropdown--open .dropdown__options {
   display: flex;
 }
 .dropdown--open .dropdown__button {
@@ -575,7 +893,7 @@
   background-color: var(--hover-button-background-color);
   outline: none;
 }
-.dropdown--open.focus-visible .dropdown__options {
+.dropdown--open.focus-visible .dropdown__options-focus-wrapper {
   border-color: var(--keyboard-focus-outline-color);
 }
 .dropdown--open.focus-visible .dropdown__button-wrapper {

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

@@ -136,7 +136,7 @@ export class TetDropdown {
      */
     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("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' })))));
+        return (h("div", { ref: el => (this.dropdownWrapperElement = el), class: { 'dropdown__wrapper': true, 'disabled': disabled } }, label && h("label", { id: 'dropdown-label', htmlFor: 'dropdown-button', class: "tet-input__label" }, label), h("div", { class: "dropdown__button-wrapper" }, h("button", { id: 'dropdown-button', class: "dropdown__button", "aria-labelledby": `dropdown-label`, "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.
@@ -147,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 }, h("div", { class: "dropdown__options-wrapper" }, mappedOptions)));
+        return (h("div", { class: "dropdown__options-focus-wrapper" }, h("div", { class: "dropdown__options-scroll-wrapper" }, 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))));
     }
     /**
      * Renders a dropdown option item.
@@ -160,7 +160,11 @@ export class TetDropdown {
         const selected = selectedOptionIndexes[0] === index;
         const handleClick = this.handleOptionSelect(index);
         const handleKeyDown = this.handleOptionKeydown(handleClick);
-        return (h("li", { class: { 'dropdown__option': true, 'dropdown__option--selected': selected }, role: "option", tabindex: "0", "aria-selected": selected, "data-value": value, onClick: handleClick, onKeyDown: handleKeyDown }, label, selected && h("tet-icon", { class: "dropdown__icon", name: "check" })));
+        return (h("li", { class: {
+                'dropdown__option': true,
+                'dropdown__option--single': true,
+                'dropdown__option--selected': selected
+            }, role: "option", tabindex: "0", "aria-selected": selected, "data-value": value, onClick: handleClick, onKeyDown: handleKeyDown }, label, selected && h("tet-icon", { class: "dropdown__icon", name: "check" })));
     }
     /**
      * Renders a dropdown option item.
@@ -247,7 +251,7 @@ export class TetDropdown {
                         this.isOpen = true;
                         this.isKeyboardFocus = true;
                     }
-                    const { children } = this.dropdownOptionsElement.children[0];
+                    const { children } = this.dropdownOptionsElement;
                     if (children.length == 0) {
                         return;
                     }
@@ -359,7 +363,7 @@ export class TetDropdown {
     }
     render() {
         const { theme, isOpen, isKeyboardFocus } = this;
-        return (h(Host, { key: '562e18e6d7541ae72f276140592f9f1e86bf1dfb' }, h("div", { key: '5bd4df5ed2992ec894cfe6b1b838e0d59d6503c9', class: { 'dropdown': true, 'dropdown--open': isOpen, 'focus-visible': isKeyboardFocus && isOpen, [`${theme}`]: true } }, this.renderButton(), this.renderOptions())));
+        return (h(Host, { key: '2e363361db992d3f37ae62eb6b870ceaba68ac5c' }, h("div", { key: 'e99a4899dbb23c041ad9574b143777928b5c0d3a', 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"; }

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

@@ -564,7 +564,7 @@
   box-sizing: border-box;
   padding: var(--input-padding);
   border-radius: var(--input-border-radius);
-  border: 0.0625rem solid var(--tc-border-quaternary-dark);
+  border: 0.0625rem solid var(--input-border-color);
   color: var(--input-text-color);
   background: var(--input-background-color);
   outline: 0.125rem solid transparent;
@@ -646,7 +646,7 @@
   color: var(--input-label-color);
   font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
 }
-.tet-input__label.tet-input__light, .tet-input__label.tet-input__mint-original {
+.tet-input__label.tet-input__mint-original {
   margin-left: 0 !important;
   font-family: var(--font-family-fallback);
 }

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

@@ -4856,7 +4856,7 @@
   box-sizing: border-box;
   padding: var(--input-padding);
   border-radius: var(--input-border-radius);
-  border: 0.0625rem solid var(--tc-border-quaternary-dark);
+  border: 0.0625rem solid var(--input-border-color);
   color: var(--input-text-color);
   background: var(--input-background-color);
   outline: 0.125rem solid transparent;
@@ -4938,7 +4938,7 @@
   color: var(--input-label-color);
   font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
 }
-.tet-input__label.tet-input__light, .tet-input__label.tet-input__mint-original {
+.tet-input__label.tet-input__mint-original {
   margin-left: 0 !important;
   font-family: var(--font-family-fallback);
 }