@tet/tet-components 1.3.35-staging → 1.3.36-staging

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

@@ -480,9 +480,12 @@
   --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);
+  --textarea-border-radius: 0.625rem;
+  --textarea-min-height: 5.25rem;
 }
 
-.tet-input__dark {
+.tet-input__dark,
+.tet-textarea__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);
@@ -501,7 +504,8 @@
   --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 {
+.tet-input__dark.tet-input__dark.keyboard-focus:focus,
+.tet-textarea__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;
@@ -526,7 +530,8 @@
   --input-disabled-text-color: rgb(67, 75, 86);
 }
 
-.tet-input__light {
+.tet-input__light,
+.tet-textarea__light {
   --input-icon-color: var(--tc-icon-primary);
   --input-label-color: var(--tc-text-primary);
   --input-text-color: var(--tc-text-primary);
@@ -558,7 +563,8 @@
   --input-focus-background-color: #1d2128;
 }
 
-.tet-input__base {
+.tet-input__base,
+.tet-textarea__base {
   width: 100%;
   height: var(--input-height);
   box-sizing: border-box;
@@ -591,74 +597,103 @@
    *   }
    */
 }
-.tet-input__base::placeholder {
+.tet-input__base::placeholder,
+.tet-textarea__base::placeholder {
   color: var(--input-placeholder-color);
 }
-.tet-input__base.tet-input__mint-original:not(:disabled):hover {
+.tet-input__base.tet-input__mint-original:not(:disabled):hover,
+.tet-textarea__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 {
+.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,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):hover.error,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):focus.error,
+.tet-textarea__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 {
+.tet-input__base.tet-input__mint-original:not(:disabled):focus, .tet-input__base.tet-input__mint-original:not(:disabled):active,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):focus,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):active {
   outline: none;
 }
-.tet-input__base.tet-input__mint-original.keyboard-focus:focus {
+.tet-input__base.tet-input__mint-original.keyboard-focus:focus,
+.tet-textarea__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] {
+.tet-input__base[disabled],
+.tet-textarea__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 {
+.tet-input__base:not(:disabled).error,
+.tet-textarea__base:not(:disabled).error {
   border-color: var(--input-color-error);
 }
-.tet-input__base:not(:disabled):hover {
+.tet-input__base:not(:disabled):hover,
+.tet-textarea__base:not(:disabled):hover {
   background: var(--input-hover-background-color);
 }
-.tet-input__base:not(:disabled):focus, .tet-input__base:not(:disabled):active {
+.tet-input__base:not(:disabled):focus, .tet-input__base:not(:disabled):active,
+.tet-textarea__base:not(:disabled):focus,
+.tet-textarea__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 {
+.tet-input__base.keyboard-focus:focus,
+.tet-textarea__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 {
+.tet-input__base.error:not(:disabled).keyboard-focus,
+.tet-textarea__base.error:not(:disabled).keyboard-focus {
   border-color: var(--input-color-error);
 }
 
-.tet-input__label {
+.tet-input__label,
+.tet-textarea__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 {
+.tet-input__label.tet-input__mint-original,
+.tet-textarea__label.tet-input__mint-original {
   margin-left: 0 !important;
   font-family: var(--font-family-fallback);
 }
-.tet-input__label:has(~ .input-container input[disabled]) {
+.tet-input__label:has(~ .input-container input[disabled]),
+.tet-textarea__label:has(~ .input-container input[disabled]) {
   color: var(--input-disabled-label-color);
 }
 
-.tet-input__error-message {
+.tet-input__error-message,
+.tet-textarea__error-message {
   font: 500 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
   color: var(--input-color-error);
 }
 
+.errors {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  margin-top: 0.5em;
+}
+.errors--hidden {
+  display: none;
+}
+
 :host {
   /**
     * @prop --options-max-height: The maximum height of the options panel.

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

@@ -82,25 +82,25 @@ describe('tet-input', () => {
         const validators = [new RequiredValidator('Test required validation message')];
         const page = await newSpecPage({
             components: [TetInput],
-            template: () => h("tet-input", { validators: validators }),
+            template: () => h("tet-input", { validators: validators, theme: "dark" }),
         });
         // Trigger validation
         await page.root.validateInput();
         await page.waitForChanges();
         expect(page.root).toEqualHtml(`
       <tet-input>
-        <label class="classic">
-          <div class="input-container tet-input__classic">
+        <label class="dark">
+          <div class="input-container tet-input__dark">
             <input
               autocomplete="off"
-              class="error tet-input__base tet-input__classic"
+              class="error tet-input__base tet-input__dark"
               placeholder=""
               type="text"
               value=""
             />
           </div>
         </label>
-        <div class="errors">
+        <div class="errors tet-input__dark">
           <p class="tet-input__error-message">Test required validation message</p>
         </div>
       </tet-input>

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

@@ -480,9 +480,12 @@
   --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);
+  --textarea-border-radius: 0.625rem;
+  --textarea-min-height: 5.25rem;
 }
 
-.tet-input__dark {
+.tet-input__dark,
+.tet-textarea__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);
@@ -501,7 +504,8 @@
   --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 {
+.tet-input__dark.tet-input__dark.keyboard-focus:focus,
+.tet-textarea__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;
@@ -526,7 +530,8 @@
   --input-disabled-text-color: rgb(67, 75, 86);
 }
 
-.tet-input__light {
+.tet-input__light,
+.tet-textarea__light {
   --input-icon-color: var(--tc-icon-primary);
   --input-label-color: var(--tc-text-primary);
   --input-text-color: var(--tc-text-primary);
@@ -558,7 +563,8 @@
   --input-focus-background-color: #1d2128;
 }
 
-.tet-input__base {
+.tet-input__base,
+.tet-textarea__base {
   width: 100%;
   height: var(--input-height);
   box-sizing: border-box;
@@ -591,74 +597,103 @@
    *   }
    */
 }
-.tet-input__base::placeholder {
+.tet-input__base::placeholder,
+.tet-textarea__base::placeholder {
   color: var(--input-placeholder-color);
 }
-.tet-input__base.tet-input__mint-original:not(:disabled):hover {
+.tet-input__base.tet-input__mint-original:not(:disabled):hover,
+.tet-textarea__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 {
+.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,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):hover.error,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):focus.error,
+.tet-textarea__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 {
+.tet-input__base.tet-input__mint-original:not(:disabled):focus, .tet-input__base.tet-input__mint-original:not(:disabled):active,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):focus,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):active {
   outline: none;
 }
-.tet-input__base.tet-input__mint-original.keyboard-focus:focus {
+.tet-input__base.tet-input__mint-original.keyboard-focus:focus,
+.tet-textarea__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] {
+.tet-input__base[disabled],
+.tet-textarea__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 {
+.tet-input__base:not(:disabled).error,
+.tet-textarea__base:not(:disabled).error {
   border-color: var(--input-color-error);
 }
-.tet-input__base:not(:disabled):hover {
+.tet-input__base:not(:disabled):hover,
+.tet-textarea__base:not(:disabled):hover {
   background: var(--input-hover-background-color);
 }
-.tet-input__base:not(:disabled):focus, .tet-input__base:not(:disabled):active {
+.tet-input__base:not(:disabled):focus, .tet-input__base:not(:disabled):active,
+.tet-textarea__base:not(:disabled):focus,
+.tet-textarea__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 {
+.tet-input__base.keyboard-focus:focus,
+.tet-textarea__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 {
+.tet-input__base.error:not(:disabled).keyboard-focus,
+.tet-textarea__base.error:not(:disabled).keyboard-focus {
   border-color: var(--input-color-error);
 }
 
-.tet-input__label {
+.tet-input__label,
+.tet-textarea__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 {
+.tet-input__label.tet-input__mint-original,
+.tet-textarea__label.tet-input__mint-original {
   margin-left: 0 !important;
   font-family: var(--font-family-fallback);
 }
-.tet-input__label:has(~ .input-container input[disabled]) {
+.tet-input__label:has(~ .input-container input[disabled]),
+.tet-textarea__label:has(~ .input-container input[disabled]) {
   color: var(--input-disabled-label-color);
 }
 
-.tet-input__error-message {
+.tet-input__error-message,
+.tet-textarea__error-message {
   font: 500 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
   color: var(--input-color-error);
 }
 
+.errors {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  margin-top: 0.5em;
+}
+.errors--hidden {
+  display: none;
+}
+
 :host {
   /**
    * @prop --input-height: The height of the input field.
@@ -731,11 +766,4 @@
 }
 .icon.icon-right {
   right: 0.75rem;
-}
-
-.errors {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5em;
-  margin-top: 0.5em;
 }

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

@@ -34,7 +34,7 @@ export class TetInput {
             return h("tet-icon", { name: iconName, class: classes, onClick: callback, accessibilityLabel: clickable ? 'Area label' : '', onKeyDown: a11yBtnClick });
         };
         this.renderErrorMessages = () => {
-            return (h("div", { class: "errors" }, this.errorMessages.map((message) => h("p", { class: "tet-input__error-message" }, t(message)))));
+            return (h("div", { class: { 'errors': true, [`tet-input__${this.theme}`]: true, 'errors--hidden': this.disabled } }, this.errorMessages.map((message) => h("p", { class: "tet-input__error-message" }, t(message)))));
         };
         this.errorMessages = [];
         this.class = '';