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

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

@@ -4771,9 +4771,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);
@@ -4792,7 +4795,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;
@@ -4817,7 +4821,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);
@@ -4849,7 +4854,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;
@@ -4882,228 +4888,101 @@
    *   }
    */
 }
-.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);
 }
 
-@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);
-}
-
-.tet-textarea__base {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 5.25rem;
-  border-radius: 0.625rem;
-  padding: 0.75rem !important;
-  background: rgb(255, 255, 255);
-  border: 0.0625rem solid rgb(153, 160, 174);
-  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
-  outline: none;
-  resize: none;
-}
-.tet-textarea__base:disabled {
-  cursor: not-allowed;
-  outline: none;
-  border-color: rgb(215, 219, 224);
-  background: rgba(88, 99, 116, 0.08);
-}
-.tet-textarea__base::placeholder {
-  color: rgb(153, 160, 174);
-}
-.tet-textarea__base:not(:disabled):hover {
-  background: rgba(88, 99, 116, 0.08);
-}
-.tet-textarea__base:not(:disabled):focus {
-  background: rgb(255, 255, 255);
-}
-.tet-textarea__base:not(:disabled):focus, .tet-textarea__base:not(:disabled):active {
-  border-color: rgb(10, 11, 13);
-  box-shadow: 0 0 0 0.25rem rgba(88, 99, 116, 0.12);
-}
-.tet-textarea__base.error {
-  border-color: rgb(233, 69, 54);
-}
-
-.tet-textarea__label {
-  display: inline-block;
-  margin-left: 0.25rem !important;
-  margin-bottom: 0.25rem !important;
-  color: rgb(10, 11, 13);
-  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
-}
-.tet-textarea__label:disabled {
-  color: rgb(67, 75, 86);
+.errors {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  margin-top: 0.5em;
 }
-
-.tet-textarea__error-message {
-  font: 500 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
-  color: rgb(233, 69, 54);
+.errors--hidden {
+  display: none;
 }
 
 .tet-body-text-max-width {

package/dist/collection/components/basic/buttons/tet-button/test/tet-button.spec.js

@@ -113,4 +113,19 @@ describe('tet-button', () => {
       </tet-button>
     `);
     });
+    it('renders with url', async () => {
+        const page = await newSpecPage({
+            components: [TetButton],
+            html: `<tet-button url="https://tet.lv"></tet-button>`
+        });
+        expect(page.root).toEqualHtml(`
+      <tet-button url="https://tet.lv">
+        <mock:shadow-root>
+          <button class="${expectedClassesLarge.join(' ')}" part="button">
+            <slot></slot>
+          </button>
+        </mock:shadow-root>
+      </tet-button>
+    `);
+    });
 });

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

@@ -6,6 +6,12 @@ import { Host, h } from "@stencil/core";
  */
 export class TetButton {
     constructor() {
+        this.handleClick = () => {
+            this.clickCallback();
+            if (!this.url)
+                return;
+            window.open(this.url, this.urlTarget, this.urlTarget === '_blank' ? 'noopener,noreferrer' : undefined);
+        };
         this.clickCallback = () => null;
         this.size = 'large';
         this.type = 'primary';
@@ -16,6 +22,8 @@ export class TetButton {
         this.iconName = undefined;
         this.elementId = undefined;
         this.accessibilityLabel = '';
+        this.url = '';
+        this.urlTarget = '_self';
     }
     /**
      * Renders the button content with the icon displayed before or after the text, based on the icon position.
@@ -27,7 +35,7 @@ export class TetButton {
         return (h("div", { class: "button__content" }, h("slot", null), h("tet-icon", { name: this.iconName })));
     }
     render() {
-        return (h(Host, { key: '57f85898ea9406150ff5d6ebe74207ce9db2f468' }, h("button", Object.assign({ key: 'd8ab0fc232a28724d24bb09502033204d2e1016c', part: "button", onClick: this.clickCallback, id: this.elementId, class: {
+        return (h(Host, { key: 'f74633e0ab79a8bda50347cacd9112cdcf731c77' }, h("button", Object.assign({ key: '020d85e05e57ca53ded783f06a280e69b72f1fae', part: "button", onClick: this.handleClick, id: this.elementId, class: {
                 button: true,
                 [`button-${this.size}`]: true,
                 [`button--type-${this.type}`]: true,
@@ -248,6 +256,42 @@ export class TetButton {
                 "attribute": "accessibility-label",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL that the button will navigate to when clicked."
+                },
+                "attribute": "url",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "urlTarget": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_self'",
+                    "resolved": "\"_blank\" | \"_self\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies where to open the URL when the button is clicked."
+                },
+                "attribute": "url-target",
+                "reflect": false,
+                "defaultValue": "'_self'"
             }
         };
     }

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>