@scania/tegel-lite 0.1.0 → 1.0.0

package/dist/tl-text-field.css

@@ -1,64 +1,229 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component--input-background-primary: var(--color-background-layer-01);
+  --component--input-background-secondary: var(--color-background-layer-02);
+  --component--input-border-default: var(--color-border-soft);
+  --component--input-border-hover: var(--color-border-strong);
+  --component--input-border-success-default: var(--color-border-strong);
+  --component--input-border-error-default: var(--color-system-danger-default);
+  --component--input-border-radius-default: var(--scania-unit-4);
+  --component--input-border-radius-none: var(--scania-unit-0);
+  --component--input-border-radius-top-left: var(--component--input-border-radius-default);
+  --component--input-border-radius-top-right: var(--component--input-border-radius-default);
+  --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
+  --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
+  --component--input-border-width-default: var(--scania-unit-1);
+  --component--input-border-width-none: var(--scania-unit-0);
+  --component--input-border-width-top: var(--component--input-border-width-none);
+  --component--input-border-width-right: var(--component--input-border-width-none);
+  --component--input-border-width-bottom: var(--component--input-border-width-default);
+  --component--input-border-width-left: var(--component--input-border-width-none);
+  --component--input-icon-prefix-default: var(--color-text-defined);
+  --component--input-icon-suffix-default: var(--color-text-defined);
+  --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-opacity-disabled: var(--scania-opacity-25);
+  --component--input-text-counter-default: var(--color-text-defined);
+  --component--input-text-label-default: var(--color-text-strong);
+  --component--input-text-helper-default: var(--color-text-defined);
+  --component--input-text-placeholder-default: var(--color-text-soft);
+  --component--input-text-value-default: var(--color-text-strong);
+  --component--input-text-error-default: var(--color-system-danger-default);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component--input-background-primary: var(--color-background-layer-01);
+  --component--input-background-secondary: var(--color-background-layer-02);
+  --component--input-border-default: var(--color-border-soft);
+  --component--input-border-hover: var(--color-border-strong);
+  --component--input-border-success-default: var(--color-border-strong);
+  --component--input-border-error-default: var(--color-system-danger-default);
+  --component--input-border-radius-default: var(--traton-unit-4);
+  --component--input-border-radius-none: var(--traton-unit-0);
+  --component--input-border-radius-top-left: var(--component--input-border-radius-default);
+  --component--input-border-radius-top-right: var(--component--input-border-radius-default);
+  --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
+  --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
+  --component--input-border-width-default: var(--traton-unit-1);
+  --component--input-border-width-none: var(--traton-unit-0);
+  --component--input-border-width-top: var(--component--input-border-width-default);
+  --component--input-border-width-right: var(--component--input-border-width-default);
+  --component--input-border-width-bottom: var(--component--input-border-width-default);
+  --component--input-border-width-left: var(--component--input-border-width-default);
+  --component--input-icon-prefix-default: var(--color-text-defined);
+  --component--input-icon-suffix-default: var(--color-text-defined);
+  --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-opacity-disabled: var(--traton-opacity-25);
+  --component--input-text-counter-default: var(--color-text-defined);
+  --component--input-text-label-default: var(--color-text-strong);
+  --component--input-text-helper-default: var(--color-text-defined);
+  --component--input-text-placeholder-default: var(--color-text-subtle);
+  --component--input-text-value-default: var(--color-text-strong);
+  --component--input-text-error-default: var(--color-system-danger-default);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component--input-background-primary: var(--color-background-layer-01);
+  --component--input-background-secondary: var(--color-background-layer-02);
+  --component--input-border-default: var(--color-border-soft);
+  --component--input-border-hover: var(--color-border-strong);
+  --component--input-border-success-default: var(--color-border-strong);
+  --component--input-border-error-default: var(--color-system-danger-default);
+  --component--input-border-radius-default: var(--scania-unit-4);
+  --component--input-border-radius-none: var(--scania-unit-0);
+  --component--input-border-radius-top-left: var(--component--input-border-radius-default);
+  --component--input-border-radius-top-right: var(--component--input-border-radius-default);
+  --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
+  --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
+  --component--input-border-width-default: var(--scania-unit-1);
+  --component--input-border-width-none: var(--scania-unit-0);
+  --component--input-border-width-top: var(--component--input-border-width-none);
+  --component--input-border-width-right: var(--component--input-border-width-none);
+  --component--input-border-width-bottom: var(--component--input-border-width-default);
+  --component--input-border-width-left: var(--component--input-border-width-none);
+  --component--input-icon-prefix-default: var(--color-text-defined);
+  --component--input-icon-suffix-default: var(--color-text-defined);
+  --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-opacity-disabled: var(--scania-opacity-25);
+  --component--input-text-counter-default: var(--color-text-defined);
+  --component--input-text-label-default: var(--color-text-strong);
+  --component--input-text-helper-default: var(--color-text-defined);
+  --component--input-text-placeholder-default: var(--color-text-soft);
+  --component--input-text-value-default: var(--color-text-strong);
+  --component--input-text-error-default: var(--color-system-danger-default);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component--input-background-primary: var(--color-background-layer-01);
+  --component--input-background-secondary: var(--color-background-layer-02);
+  --component--input-border-default: var(--color-border-soft);
+  --component--input-border-hover: var(--color-border-strong);
+  --component--input-border-success-default: var(--color-border-strong);
+  --component--input-border-error-default: var(--color-system-danger-default);
+  --component--input-border-radius-default: var(--traton-unit-4);
+  --component--input-border-radius-none: var(--traton-unit-0);
+  --component--input-border-radius-top-left: var(--component--input-border-radius-default);
+  --component--input-border-radius-top-right: var(--component--input-border-radius-default);
+  --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
+  --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
+  --component--input-border-width-default: var(--traton-unit-1);
+  --component--input-border-width-none: var(--traton-unit-0);
+  --component--input-border-width-top: var(--component--input-border-width-default);
+  --component--input-border-width-right: var(--component--input-border-width-default);
+  --component--input-border-width-bottom: var(--component--input-border-width-default);
+  --component--input-border-width-left: var(--component--input-border-width-default);
+  --component--input-icon-prefix-default: var(--color-text-defined);
+  --component--input-icon-suffix-default: var(--color-text-defined);
+  --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-opacity-disabled: var(--traton-opacity-25);
+  --component--input-text-counter-default: var(--color-text-defined);
+  --component--input-text-label-default: var(--color-text-strong);
+  --component--input-text-helper-default: var(--color-text-defined);
+  --component--input-text-placeholder-default: var(--color-text-subtle);
+  --component--input-text-value-default: var(--color-text-strong);
+  --component--input-text-error-default: var(--color-system-danger-default);
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
+  --component-text-field-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
+  --component-text-field-focus-ring-radius-secondary: var(
+    --component--focus-ring-radius-extra-large
+  );
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
+  --component-text-field-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
+  --component-text-field-focus-ring-radius-secondary: var(
+    --component--focus-ring-radius-extra-large
+  );
+}
+
 .tl-text-field {
-  --text-field-background: var(--color-background-layer-01);
-  --text-field-text: var(--color-foreground-text-strong);
-  --text-field-placeholder: var(--color-foreground-text-subtle);
-  --text-field-affix: var(--color-foreground-text-defined);
-  --text-field-label: var(--color-foreground-text-strong);
-  --text-field-label-inside: var(--color-foreground-text-strong);
+  --text-field-background: var(--component--input-background-primary);
+  --text-field-text: var(--component--input-text-value-default);
+  --text-field-placeholder: var(--component--input-text-placeholder-default);
+  --text-field-affix: var(--component--input-icon-prefix-default);
+  --text-field-affix-suffix: var(--component--input-icon-suffix-default);
+  --text-field-label: var(--component--input-text-label-default);
+  --text-field-label-inside: var(--component--input-text-label-default);
   --text-field-label-inside-left: 16px;
   --text-field-affix-width-icon: 35px;
   --text-field-affix-width-text: 8px;
-  --text-field-border-bottom-readonly: var(--color-foreground-border-strong);
-  --text-field-helper: var(--color-foreground-text-defined);
-  --text-field-error: var(--color-system-danger-default);
-  --text-field-affix-error: var(--color-foreground-text-defined);
-  --text-field-background-disabled: var(--color-background-layer-01);
-  --text-field-text-disabled: var(--color-foreground-text-disabled);
-  --text-field-placeholder-disabled: var(--color-foreground-text-disabled);
-  --text-field-label-disabled: var(--color-foreground-text-disabled);
-  --text-field-affix-disabled: var(--color-foreground-text-disabled);
-  --text-field-textcounter: var(--color-foreground-text-defined);
+  --text-field-helper: var(--component--input-text-helper-default);
+  --text-field-error: var(--component--input-text-error-default);
+  --text-field-error-icon: var(--component--input-icon-error-default);
+  --text-field-affix-error: var(--component--input-icon-error-default);
+  --text-field-background-disabled: var(--component--input-background-primary);
+  --text-field-text-disabled: var(--color-text-disabled);
+  --text-field-placeholder-disabled: var(--color-text-disabled);
+  --text-field-label-disabled: var(--color-text-disabled);
+  --text-field-affix-disabled: var(--color-text-disabled);
+  --text-field-textcounter: var(--component--input-text-counter-default);
+  --text-field-opacity-disabled: var(--component--input-opacity-disabled);
+  --text-field-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
+    calc(var(--component--input-border-radius-top-right) * 1px)
+    calc(var(--component--input-border-radius-bottom-right) * 1px)
+    calc(var(--component--input-border-radius-bottom-left) * 1px);
+  --text-field-border-color: var(--component--input-border-default);
+  --text-field-border-color-hover: var(--component--input-border-hover);
+  --text-field-border-color-success: var(--component--input-border-success-default);
+  --text-field-border-color-error: var(--component--input-border-error-default);
+  --text-field-border-color-readonly: var(--color-border-strong);
+  --text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-primary);
 }
 .tl-text-field--primary {
-  --text-field-background: var(--color-background-layer-01);
-  --text-field-background-disabled: var(--color-background-layer-01);
+  --text-field-background: var(--component--input-background-primary);
+  --text-field-background-disabled: var(--component--input-background-primary);
+  --text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-primary);
 }
 .tl-text-field--secondary {
-  --text-field-background: var(--color-background-layer-02);
-  --text-field-background-disabled: var(--color-background-layer-02);
-}
-
-.tl-text-field,
-.scania .tl-text-field {
-  --text-field-border-radius: 4px 4px 0 0;
-  --text-field-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
-  --text-field-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
-  --text-field-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
-  --text-field-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
-  --text-field-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
-  --text-field-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
-  --text-field-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
-  --text-field-bar-focus: var(--color-foreground-border-accent-focus);
-  --text-field-bar-error: var(--color-system-danger-default);
-  --text-field-focus-outline: none;
-  --text-field-focus-outline-error: none;
-  --text-field-focus-outline-offset: 0;
-}
-
-.traton .tl-text-field {
-  --text-field-border-radius: 4px 4px 4px 4px;
-  --text-field-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
-  --text-field-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
-  --text-field-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
-  --text-field-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
-  --text-field-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
-  --text-field-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
-  --text-field-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
-  --text-field-focus-outline: 2px solid var(--color-foreground-border-accent-focus);
-  --text-field-focus-outline-error: 2px solid var(--color-system-danger-default);
-  --text-field-focus-outline-offset: 0;
-  --text-field-bar-focus: transparent;
-  --text-field-bar-error: transparent;
+  --text-field-background: var(--component--input-background-secondary);
+  --text-field-background-disabled: var(--component--input-background-secondary);
+  --text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-secondary);
 }
 
 /* Typography Usage mixins */
@@ -348,6 +513,10 @@
   mask-image: var(--icon-document_tool-svg);
   background-color: currentcolor;
 }
+.tl-icon--document_word {
+  mask-image: var(--icon-document_word-svg);
+  background-color: currentcolor;
+}
 .tl-icon--document_wrong {
   mask-image: var(--icon-document_wrong-svg);
   background-color: currentcolor;
@@ -524,8 +693,8 @@
   mask-image: var(--icon-gift-svg);
   background-color: currentcolor;
 }
-.tl-icon--gift inactive {
-  mask-image: var(--icon-gift inactive-svg);
+.tl-icon--gift_inactive {
+  mask-image: var(--icon-gift_inactive-svg);
   background-color: currentcolor;
 }
 .tl-icon--global {
@@ -1268,7 +1437,20 @@
 .tl-text-field--no-min-width {
   min-width: auto;
 }
-.tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon)::before {
+.tl-text-field:has(.tl-text-field__input:disabled) {
+  cursor: not-allowed;
+}
+.tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__label {
+  opacity: var(--text-field-opacity-disabled);
+}
+.tl-text-field .tl-icon {
+  background-color: var(--text-field-affix);
+}
+
+.tl-text-field__input-wrapper {
+  position: relative;
+}
+.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input-wrapper::before {
   content: "";
   position: absolute;
   top: 50%;
@@ -1283,18 +1465,6 @@
   transform: translateY(-50%);
   z-index: 1;
 }
-.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__label):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon)::before {
-  top: calc(50% + 24px);
-}
-.tl-text-field:has(.tl-text-field__input:disabled) {
-  cursor: not-allowed;
-}
-.tl-text-field .tl-icon {
-  background-color: var(--text-field-affix);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
-  background-color: var(--text-field-affix-disabled);
-}
 
 .tl-text-field__input {
   all: unset;
@@ -1304,8 +1474,11 @@
   width: 100%;
   box-sizing: border-box;
   margin: 0;
-  border: none;
+  border-style: solid;
+  border-color: var(--text-field-border-color);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
   outline: none;
+  transition: border-color 200ms ease;
 }
 .tl-text-field__input::placeholder {
   color: var(--text-field-placeholder);
@@ -1330,42 +1503,46 @@
   color: var(--text-field-text);
   flex: 1;
   order: 2;
-  box-shadow: inset var(--text-field-box-shadow);
-  transition: box-shadow 0.2s;
 }
 .tl-text-field__input:focus {
-  box-shadow: inset var(--text-field-box-shadow-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
 }
 .tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
-  box-shadow: inset var(--text-field-box-shadow-hover);
+  border-color: var(--text-field-border-color-hover);
 }
 .tl-text-field--error .tl-text-field__input {
-  box-shadow: inset var(--text-field-box-shadow-error);
+  border-color: var(--text-field-border-color-error);
 }
 .tl-text-field--error .tl-text-field__input:focus {
-  box-shadow: inset var(--text-field-box-shadow-error-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
 }
 .tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
-  box-shadow: inset var(--text-field-box-shadow-error-hover);
+  border-color: var(--text-field-border-color-error);
 }
 .tl-text-field--success:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
-  box-shadow: inset var(--text-field-box-shadow-success);
+  border-color: var(--text-field-border-color-success);
 }
 .tl-text-field__input:disabled {
-  box-shadow: none;
-  background-color: var(--text-field-background-disabled);
-  color: var(--text-field-text-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
 :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
-  box-shadow: inset var(--text-field-box-shadow);
+  border-color: var(--text-field-border-color-readonly);
 }
 :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
-  box-shadow: inset var(--text-field-box-shadow-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
 }
 :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
-  box-shadow: inset var(--text-field-box-shadow-hover);
+  border-color: var(--text-field-border-color-hover);
 }
 :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
   user-select: auto;
@@ -1438,6 +1615,7 @@
   letter-spacing: var(--detail-02-letter-spacing);
   text-transform: var(--detail-02-text-transform);
   position: absolute;
+  top: 50%;
   left: var(--text-field-label-inside-left, 16px);
   color: var(--text-field-label-inside);
   pointer-events: none;
@@ -1446,18 +1624,6 @@
   transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
   z-index: 1;
 }
-.tl-text-field__label {
-  /* Center label in input row before focus/fill */
-}
-.tl-text-field--label-inside.tl-text-field--lg .tl-text-field__label {
-  top: 28px; /* half of 56px input height */
-}
-.tl-text-field--label-inside.tl-text-field--md .tl-text-field__label {
-  top: 24px; /* half of 48px input height */
-}
-.tl-text-field--label-inside.tl-text-field--sm .tl-text-field__label {
-  top: 20px; /* half of 40px input height */
-}
 .tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field__label {
   left: 44px;
 }
@@ -1509,7 +1675,7 @@
   position: relative;
 }
 :has(.tl-text-field__input:disabled) .tl-text-field__helper {
-  color: var(--color-foreground-text-disabled);
+  color: var(--color-text-disabled);
 }
 .tl-text-field--error .tl-text-field__helper {
   padding-left: 24px;
@@ -1521,7 +1687,7 @@
   top: 0;
   width: 16px;
   height: 16px;
-  background-color: var(--text-field-error);
+  background-color: var(--text-field-error-icon);
   mask-image: var(--icon-error-svg);
   mask-size: contain;
   mask-repeat: no-repeat;
@@ -1537,7 +1703,7 @@
   color: var(--text-field-error);
 }
 .tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
-  background-color: var(--color-foreground-text-disabled);
+  background-color: var(--color-text-disabled);
 }
 
 .tl-text-field__charcounter {
@@ -1551,7 +1717,7 @@
   color: var(--text-field-textcounter);
 }
 :has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
-  color: var(--color-foreground-text-disabled);
+  color: var(--color-text-disabled);
 }
 .tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
   color: var(--text-field-error);
@@ -1561,7 +1727,7 @@
 }
 
 .tl-text-field__charcounter-divider {
-  color: var(--color-foreground-text-disabled);
+  color: var(--color-text-disabled);
 }
 
 .tl-text-field__prefix {
@@ -1582,12 +1748,9 @@
   position: absolute;
   left: 16px;
   top: 50%;
-  transform: translateY(calc(-50% - 1px));
+  transform: translateY(-50%);
   z-index: 1;
 }
-.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--icon {
-  transform: translateY(calc(-50% + 24px));
-}
 :has(.tl-text-field__input:disabled) .tl-text-field__prefix--text, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon {
   color: var(--text-field-affix-disabled);
 }
@@ -1614,17 +1777,18 @@
   align-items: center;
   z-index: 1;
   position: relative;
+  color: var(--text-field-affix-suffix);
+}
+.tl-text-field__suffix--icon.tl-icon {
+  background-color: var(--text-field-affix-suffix);
 }
 .tl-text-field__suffix--text, .tl-text-field__suffix--icon {
   position: absolute;
   right: 16px;
   top: 50%;
-  transform: translateY(calc(-50% - 1px));
+  transform: translateY(-50%);
   z-index: 1;
 }
-.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
-  transform: translateY(calc(-50% + 24px));
-}
 :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
   color: var(--text-field-affix-disabled);
 }
@@ -1636,38 +1800,6 @@
 :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
   background-color: var(--text-field-affix-disabled) !important;
 }
-
-.tl-text-field__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;
-  display: flex;
-  align-items: center;
-  z-index: 1;
-  position: relative;
-  right: 16px;
-  padding-right: 0;
-  z-index: 1;
-}
-.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
-  transform: translateY(calc(-50% + 24px));
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
-  color: var(--text-field-affix-disabled);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > * {
-  color: var(--text-field-affix-disabled);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text .tl-icon,
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon .tl-icon,
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
-  background-color: var(--text-field-affix-disabled);
-}
 :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon.tl-icon {
   background-color: var(--text-field-affix-disabled);
 }