@scania/tegel 1.33.0 → 1.34.0-internal-variables-demo.0

package/dist/collection/components/text-field/text-field.css

@@ -1,108 +1,93 @@
-.text-field-input-lg {
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
+:host {
+  --tds-scrollbar-width-standard: thin;
+  --tds-scrollbar-width: 10px;
+  --tds-scrollbar-height: 10px;
+  --tds-scrollbar-thumb-border-width: 3px;
+  --tds-scrollbar-thumb-border-hover-width: 2px;
+}
+
+body {
+  scrollbar-width: thin;
+}
+
+@keyframes tds-shake-animation {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
+.text-field-input {
   all: unset;
-  border-radius: 4px 4px 0 0;
+  border-radius: var(--text-field-border-radius);
+  background-color: var(--text-field-background);
+  color: var(--text-field-text);
   width: 100%;
   box-sizing: border-box;
   margin: 0;
   border: none;
   outline: none;
   height: 100%;
-  color: var(--tds-text-field-color);
-  background-color: var(--tds-text-field-background);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
-}
-.text-field-input-lg::placeholder {
-  color: var(--tds-text-field-placeholder);
-}
-.text-field-input-lg:disabled {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+}
+.text-field-input::placeholder {
+  color: var(--text-field-placeholder);
+}
+.text-field-input:disabled {
+  background-color: var(--text-field-background-disabled);
+  color: var(--text-field-text-disabled);
   user-select: none;
   pointer-events: none;
-  background-color: var(--tds-text-field-background-disabled);
-  color: var(--tds-text-field-color-disabled);
 }
-.text-field-input-lg:disabled::placeholder {
-  color: var(--tds-text-field-placeholder-disabled);
+.text-field-input:disabled::placeholder {
+  color: var(--text-field-placeholder-disabled);
+}
+.text-field-input:disabled ~ .text-field-label-inside {
+  color: var(--text-field-label-disabled);
 }
-.text-field-input-lg:disabled ~ .text-field-label-inside {
-  color: var(--tds-text-field-label-disabled);
+
+.text-field-input-lg {
+  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
 }
 
 .text-field-input-md {
-  all: unset;
-  border-radius: 4px 4px 0 0;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  border: none;
-  outline: none;
-  height: 100%;
-  color: var(--tds-text-field-color);
-  background-color: var(--tds-text-field-background);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-16);
 }
-.text-field-input-md::placeholder {
-  color: var(--tds-text-field-placeholder);
-}
-.text-field-input-md:disabled {
-  user-select: none;
-  pointer-events: none;
-  background-color: var(--tds-text-field-background-disabled);
-  color: var(--tds-text-field-color-disabled);
-}
-.text-field-input-md:disabled::placeholder {
-  color: var(--tds-text-field-placeholder-disabled);
-}
-.text-field-input-md:disabled ~ .text-field-label-inside {
-  color: var(--tds-text-field-label-disabled);
-}
 
 .text-field-input-sm {
-  all: unset;
-  border-radius: 4px 4px 0 0;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  border: none;
-  outline: none;
-  height: 100%;
-  color: var(--tds-text-field-color);
-  background-color: var(--tds-text-field-background);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-16);
 }
-.text-field-input-sm::placeholder {
-  color: var(--tds-text-field-placeholder);
-}
-.text-field-input-sm:disabled {
-  user-select: none;
-  pointer-events: none;
-  background-color: var(--tds-text-field-background-disabled);
-  color: var(--tds-text-field-color-disabled);
-}
-.text-field-input-sm:disabled::placeholder {
-  color: var(--tds-text-field-placeholder-disabled);
-}
-.text-field-input-sm:disabled ~ .text-field-label-inside {
-  color: var(--tds-text-field-label-disabled);
-}
 
 .text-field-container {
-  border-radius: 4px 4px 0 0;
+  box-shadow: var(--text-field-box-shadow);
+  border-radius: var(--text-field-border-radius);
   display: flex;
   position: relative;
   height: 56px;
   box-sizing: border-box;
-  background-color: var(--tds-text-field-background);
-  border-bottom: 1px solid var(--tds-text-field-border-bottom);
-  transition: border-bottom-color 200ms ease;
+  background-color: var(--text-field-background);
+  transition: box-shadow 200ms ease;
 }
 .text-field-container:hover {
-  border-bottom-color: var(--tds-text-field-border-bottom-hover);
+  box-shadow: var(--text-field-box-shadow-hover);
 }
 .form-text-field-md .text-field-container {
   height: 48px;
@@ -118,41 +103,46 @@
 
 .text-field-data,
 .text-field-input {
-  color: var(--tds-text-field-data-color);
+  color: var(--text-field-text);
 }
 
 .text-field-label-outside > * {
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   display: block;
   margin-bottom: var(--tds-spacing-element-8);
-  color: var(--tds-text-field-label-color);
+  color: var(--text-field-label);
 }
 
 .text-field-label-inside {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   position: absolute;
   pointer-events: none;
-  color: var(--tds-text-field-label-inside-color);
+  color: var(--text-field-label-inside);
   left: 16px;
 }
 
-.form-text-field {
-  display: block;
-  min-width: 208px;
+.text-field-label-inside-placeholder {
+  color: var(--text-field-placeholder);
 }
-.form-text-field-nomin {
-  min-width: auto;
+
+.form-text-field {
+  padding-bottom: 1px;
 }
 
 .form-text-field.text-field-container-label-inside .text-field-input-lg {
   padding-top: var(--tds-spacing-element-24);
   padding-bottom: 15px;
 }
-.form-text-field.text-field-container-label-inside .text-field-input-lg ~ .text-field-label-inside {
-  top: 20px;
-}
 .form-text-field.text-field-container-label-inside .text-field-input-lg::placeholder {
   color: transparent;
 }
@@ -161,99 +151,89 @@
 }
 .form-text-field.text-field-container-label-inside .text-field-input-lg:focus::placeholder {
   transition: color 0.35s ease;
-  color: var(--tds-text-field-placeholder);
-}
-.form-text-field.text-field-container-label-inside .text-field-input-md {
-  padding-top: var(--tds-spacing-element-20);
-  padding-bottom: 11px;
-}
-.form-text-field.text-field-container-label-inside .text-field-input-md ~ .text-field-label-inside {
-  top: 16px;
-}
-.form-text-field.text-field-container-label-inside .text-field-input-md::placeholder {
-  color: transparent;
+  color: var(--text-field-placeholder);
 }
-.form-text-field.text-field-container-label-inside .text-field-input-md ::placeholder {
-  color: transparent;
-}
-.form-text-field.text-field-container-label-inside .text-field-input-md:focus::placeholder {
-  transition: color 0.35s ease;
-  color: var(--tds-text-field-placeholder);
+.form-text-field.text-field-container-label-inside .text-field-input-lg ~ .text-field-label-inside {
+  top: 20px;
 }
+.form-text-field.text-field-container-label-inside .text-field-input-md,
 .form-text-field.text-field-container-label-inside .text-field-input-sm {
   padding-top: var(--tds-spacing-element-20);
   padding-bottom: 11px;
 }
-.form-text-field.text-field-container-label-inside .text-field-input-sm ~ .text-field-label-inside {
-  top: 16px;
-}
+.form-text-field.text-field-container-label-inside .text-field-input-md::placeholder,
 .form-text-field.text-field-container-label-inside .text-field-input-sm::placeholder {
   color: transparent;
 }
+.form-text-field.text-field-container-label-inside .text-field-input-md ::placeholder,
 .form-text-field.text-field-container-label-inside .text-field-input-sm ::placeholder {
   color: transparent;
 }
+.form-text-field.text-field-container-label-inside .text-field-input-md:focus::placeholder,
 .form-text-field.text-field-container-label-inside .text-field-input-sm:focus::placeholder {
   transition: color 0.35s ease;
-  color: var(--tds-text-field-placeholder);
+  color: var(--text-field-placeholder);
 }
-.form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-sm ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-sm ~ .text-field-label-inside {
-  font: var(--tds-detail-07);
-  letter-spacing: var(--tds-detail-07-ls);
-  transition: 0.1s ease all;
-  top: 8px;
+.form-text-field.text-field-container-label-inside .text-field-input-md ~ .text-field-label-inside,
+.form-text-field.text-field-container-label-inside .text-field-input-sm ~ .text-field-label-inside {
+  top: 16px;
 }
-.form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-md ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-md ~ .text-field-label-inside {
-  font: var(--tds-detail-07);
-  letter-spacing: var(--tds-detail-07-ls);
+.form-text-field.text-field-container-label-inside.text-field-focus .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-label-inside {
+  font-family: var(--detail-07-font-family);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
   transition: 0.1s ease all;
+}
+.form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-sm ~ .text-field-label-inside,
+.form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-md ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-sm ~ .text-field-label-inside,
+.form-text-field.text-field-container-label-inside.text-field-data .text-field-input-md ~ .text-field-label-inside {
   top: 8px;
 }
 .form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-lg ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-lg ~ .text-field-label-inside {
-  font: var(--tds-detail-07);
-  letter-spacing: var(--tds-detail-07-ls);
-  transition: 0.1s ease all;
   top: 12px;
 }
 
 .text-field-bar {
-  position: absolute;
+  position: relative;
   width: 100%;
+  left: 0;
+  z-index: 1;
 }
-.text-field-bar::before, .text-field-bar::after {
+.text-field-bar::after {
+  background: var(--text-field-bar-focus);
   content: "";
   height: 2px;
-  top: 54px;
-  width: 0;
+  width: 100%;
+  bottom: 0;
   position: absolute;
-  background: var(--tds-text-field-bar);
-  transition: 0.35s ease all;
-}
-.form-text-field-md .text-field-bar::before, .form-text-field-md .text-field-bar::after {
-  top: 46px;
-}
-.form-text-field-sm .text-field-bar::before, .form-text-field-sm .text-field-bar::after {
-  top: 40px;
+  transform: scaleX(0);
+  transition: 0.35s ease transform;
 }
-.text-field-bar::before {
-  left: 50%;
-}
-.text-field-bar::after {
-  right: 50%;
+
+.form-text-field.text-field-focus .text-field-container {
+  outline: var(--text-field-focus-outline);
+  outline-offset: var(--text-field-focus-outline-offset);
 }
-.text-field-focus .text-field-bar::before, .text-field-focus .text-field-bar::after {
-  width: 50%;
+.form-text-field.text-field-focus .text-field-bar::after {
+  transform: scaleX(1);
 }
 
 .text-field-helper {
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  color: var(--text-field-helper);
+  padding-top: var(--tds-spacing-element-4);
   display: flex;
   gap: 8px;
   justify-content: space-between;
   flex-basis: 100%;
-  padding-top: var(--tds-spacing-element-4);
-  color: var(--tds-text-field-helper);
 }
 .text-field-helper .text-field-textcounter {
   margin-left: auto;
@@ -261,17 +241,19 @@
 
 .form-text-field-disabled .text-field-container {
   cursor: not-allowed;
-  border-bottom-color: transparent;
+  box-shadow: none;
 }
 .form-text-field-disabled .text-field-slot-wrap-prefix > *,
-.form-text-field-disabled .text-field-slot-wrap-suffix > * {
-  color: var(--tds-text-field-ps-color-disabled);
-}
+.form-text-field-disabled .text-field-slot-wrap-suffix > *,
 .form-text-field-disabled .text-field-label-outside > * {
-  color: var(--tds-text-field-label-disabled);
+  color: var(--text-field-affix-disabled);
 }
+.form-text-field-disabled .text-field-label-inside,
 .form-text-field-disabled .text-field-helper {
-  color: var(--tds-text-field-helper-disabled);
+  color: var(--text-field-label-disabled);
+}
+.form-text-field-disabled .text-field-input {
+  background-color: var(--text-field-background-disabled);
 }
 
 .text-field-icon__readonly {
@@ -280,19 +262,9 @@
   right: 18px;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--tds-text-field-icon-read-only-label-color);
 }
-.text-field-icon__readonly-label {
-  display: none;
-  position: absolute;
-  right: 18px;
-  top: 48px;
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
-  padding: 8px;
-  white-space: nowrap;
-  border-radius: 4px 0 4px 4px;
-  background-color: var(--tds-text-field-icon-read-only-label-background);
+.text-field-icon__readonly .tds-tooltip {
+  min-width: 150px;
 }
 
 .form-text-field-readonly {
@@ -301,7 +273,7 @@
   cursor: default;
 }
 .form-text-field-readonly .text-field-container {
-  border-bottom-color: var(--tds-text-field-border-bottom-readonly);
+  border-bottom-color: var(--text-field-border-bottom-readonly);
 }
 .form-text-field-readonly .text-field-icon__readonly {
   display: block;
@@ -318,17 +290,22 @@
 }
 
 .form-text-field-success:not(.form-text-field-readonly) .text-field-container {
-  border-bottom-color: var(--tds-text-field-border-bottom-success);
+  box-shadow: var(--text-field-box-shadow-success);
 }
 
 .form-text-field-error:not(.form-text-field-readonly) .text-field-helper {
-  color: var(--tds-text-field-helper-error);
+  color: var(--text-field-helper-error);
 }
 .form-text-field-error:not(.form-text-field-readonly) .text-field-container {
-  border-bottom-color: var(--tds-text-field-border-bottom-error);
+  box-shadow: var(--text-field-box-shadow-error);
 }
 .form-text-field-error:not(.form-text-field-readonly) .text-field-bar::before, .form-text-field-error:not(.form-text-field-readonly) .text-field-bar::after {
-  background: var(--tds-text-field-bar-error);
+  background: var(--text-field-bar-error);
+}
+
+.text-field-focus.form-text-field-error .text-field-container {
+  outline: var(--text-field-focus-outline-error);
+  outline-offset: var(--text-field-focus-outline-offset);
 }
 
 .text-field-helper-error-state {
@@ -338,32 +315,46 @@
 }
 
 .text-field-textcounter-disabled {
-  color: var(--tds-text-field-textcounter-disabled);
+  color: var(--text-field-textcounter-disabled);
 }
 
 .text-field-textcounter {
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
-  color: var(--tds-text-field-textcounter);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--text-field-textcounter);
   float: right;
 }
 .text-field-textcounter.text-field-textcounter-disabled {
-  color: var(--tds-text-field-textcounter-disabled);
+  color: var(--text-field-textcounter-disabled);
 }
 .text-field-textcounter.text-field-textcounter-divider {
-  color: var(--tds-text-field-textcounter-divider);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  color: var(--text-field-textcounter-divider);
 }
 .text-field-textcounter.text-field-textcounter-divider-disabled {
-  color: var(--tds-text-field-textcounter-divider-disabled);
+  color: var(--text-field-textcounter-divider);
 }
 
 .text-field-slot-wrap-prefix,
 .text-field-slot-wrap-suffix {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--text-field-affix);
   align-self: center;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
   margin: 0 0 0 14px;
-  color: var(--tds-text-field-ps-color);
 }
 .text-field-slot-wrap-prefix::slotted(:not(tds-icon)),
 .text-field-slot-wrap-suffix::slotted(:not(tds-icon)) {
@@ -371,7 +362,7 @@
 }
 .text-field-slot-wrap-prefix.text-field-error,
 .text-field-slot-wrap-suffix.text-field-error {
-  color: var(--tds-text-field-ps-color-error);
+  color: var(--text-field-affix-error);
 }
 
 .text-field-slot-wrap-suffix {

package/dist/collection/components/text-field/text-field.js

@@ -76,7 +76,7 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '985928ef59662762648f2d95d5decad2e3188e05', class: {
+        return (h("div", { key: '8755d2f9fbbae4ba86587d0ff759b303a8933c87', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -94,12 +94,12 @@ export class TdsTextField {
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: '7a409b43a1fee8b7b078abc5f96c925ab97bcedc', class: "text-field-label-outside" }, h("label", { key: 'c6bdaab4e6f81a95aa71a4e23a1f02fb1bcef9ec', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '945f7901a92850da22ab84c5fe77e2d97738aaa9', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5d6cb2facb8ff90b7393409b769c2b5e5a860421', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '5ea1087cce259d7fa7831520cfad2b61eb2b6977', class: "text-field-label-outside" }, h("label", { key: 'aa93180025a17cdd68c53a62c0f92d9c608a2fd4', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '7eea38fdd39d7a5d409595eff4831352316bbd06', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'bf93437bf95aefc5c458182bffdc28bae2e39204', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { key: 'b0f0e3ebb96dbd2af021150b68690af566db44b9', name: "prefix" }))), h("div", { key: 'c5b172ee6c561256ab930490113f406b88eae67c', class: "text-field-input-container" }, h("input", { key: '2e0a9070b41bde39a2a0f14b132f474692eb0e04', ref: (inputEl) => {
+            } }, h("slot", { key: '1c29047bfcce9bc92bab6d0805a4490fb8f3b1b0', name: "prefix" }))), h("div", { key: '2c3eb1a0a58deecf78ae84c040e34ca26b891dee', class: "text-field-input-container" }, h("input", { key: 'cd537efca0ae390d6a72f5d17df89c5b9e79872a', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -114,13 +114,16 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'ffb3bbb84ab718c2259134f32ee6dd0eb348cb9f', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '166da0147311d28064b7e03bbefd1a0ee18db5ca', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '4bb21d12957bf65d525931c88a5a89fff49d4eaf', class: {
+            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'd211a62fdc2f3eb1d343eb27dd728554132a6664', class: {
+                'text-field-label-inside': true,
+                'text-field-label-inside-placeholder': this.placeholder === '',
+            }, htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '189eecde9dace623bf724220ac1c9fc3f024c7a3', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { key: '7e67dbc8f4f67cb0c7d194e01e5787ae18ffab13', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'd213ec000d837cbd4b711468ef3cfa826cc65ac2', class: "text-field-icon__readonly" }, h("tds-icon", { key: '56b8b76a5771889f9f36ab683dcba6906bff42a6', name: "edit_inactive", size: "20px" }))), h("span", { key: '9e8fa95602a1ce5630f30947b59decc700c06c8b', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: '9e8547e06a25e7da98ff977ac6be1b79d27e4151', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'daeea67a48a15d27785f31dfcb69fb75e31ab85b', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '974bad3f97b23d69a20130bf66b6c72ef47f68bc', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '687cad3cb0451a262f836089851e9a2e08f2c74e', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '431709fb793dde8845b20698e722a7c140bb32b6', class: {
+            } }, h("slot", { key: '14aba4f9a131fed1b71317dc6e167923fc4dfb30', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '923b49e0906c68e29e4d2ef7f0f74a52a29d0c9d', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '30651b869b7618edfc99d70da97386a875a456f0', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'e9d4f090f8de0be64567e21ff998bd9c152f69e8', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '8b04bf35b202ae1023025bf84eaf2b185f1511ec', class: "text-field-bar" }), h("div", { key: 'd607d23d4f3559e9655cf65b4146ade9cec96174', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'e6bd818f42a23ba0b9e23c6379748efd2c80faae', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '6646975561f9f59017b648f50cf7384bdbced8b2', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'ff633a41fec84da6b59ee3896d4cd7e60932c9e6', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '01295a87689d2a535b86d1f83753958adb0a3a3b', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));