@scania/tegel-lite 0.0.1-beta.0 → 0.0.1-beta.10

package/dist/tl-slider.css

@@ -1287,7 +1287,7 @@
 .tl-text-field--sm {
   height: 40px;
 }
-.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[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon)::before {
   content: "";
   position: absolute;
   top: 50%;
@@ -1302,16 +1302,16 @@
   transform: translateY(-50%);
   z-index: 1;
 }
-.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside).tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon)::before {
+.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--disabled {
-  pointer-events: none;
+.tl-text-field:has(.tl-text-field__input:disabled) {
+  cursor: not-allowed;
 }
 .tl-text-field .tl-icon {
   background-color: var(--text-field-affix);
 }
-.tl-text-field--disabled .tl-text-field .tl-icon {
+:has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
   background-color: var(--text-field-affix-disabled);
 }
 
@@ -1355,7 +1355,7 @@
 .tl-text-field__input:focus {
   box-shadow: inset var(--text-field-box-shadow-focus);
 }
-.tl-text-field:hover .tl-text-field__input:not(:focus) {
+.tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
   box-shadow: inset var(--text-field-box-shadow-hover);
 }
 .tl-text-field--error .tl-text-field__input {
@@ -1364,33 +1364,35 @@
 .tl-text-field--error .tl-text-field__input:focus {
   box-shadow: inset var(--text-field-box-shadow-error-focus);
 }
-.tl-text-field--error:hover .tl-text-field__input:not(:focus) {
+.tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
   box-shadow: inset var(--text-field-box-shadow-error-hover);
 }
-.tl-text-field--success:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__input:not(:focus) {
+.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);
 }
-.tl-text-field--readonly .tl-text-field__input {
+.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);
 }
-.tl-text-field--readonly .tl-text-field__input:focus {
+: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);
 }
-.tl-text-field--readonly:hover .tl-text-field__input:not(:focus) {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__input {
-  box-shadow: none;
-  background-color: var(--text-field-background-disabled);
-  color: var(--text-field-text-disabled);
-}
-.tl-text-field--readonly .tl-text-field__input {
+:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
   user-select: auto;
   caret-color: transparent;
   cursor: default;
   pointer-events: none;
 }
-.tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input {
+.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 {
   padding-right: 54px;
 }
 .tl-text-field--lg .tl-text-field__input {
@@ -1488,10 +1490,10 @@
   opacity: 0;
   visibility: hidden;
 }
-.tl-text-field--label-inside.tl-text-field--disabled .tl-text-field__label {
+.tl-text-field--label-inside:has(.tl-text-field__input:disabled) .tl-text-field__label {
   color: var(--text-field-label-disabled);
 }
-.tl-text-field:not(.tl-text-field--label-inside).tl-text-field--disabled .tl-text-field__label {
+.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input:disabled) .tl-text-field__label {
   color: var(--text-field-label-disabled);
 }
 
@@ -1511,7 +1513,7 @@
   color: var(--text-field-helper);
   position: relative;
 }
-.tl-text-field--disabled .tl-text-field__helper {
+:has(.tl-text-field__input:disabled) .tl-text-field__helper {
   color: var(--color-foreground-text-disabled);
 }
 .tl-text-field--error .tl-text-field__helper {
@@ -1530,16 +1532,16 @@
   mask-repeat: no-repeat;
   mask-position: center;
 }
-.tl-text-field--error.tl-text-field--readonly .tl-text-field__helper {
+.tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper {
   padding-left: 0;
 }
-.tl-text-field--error.tl-text-field--readonly .tl-text-field__helper::before {
+.tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper::before {
   display: none;
 }
-.tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__helper {
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__helper {
   color: var(--text-field-error);
 }
-.tl-text-field--error.tl-text-field--disabled .tl-text-field__helper::before {
+.tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
   background-color: var(--color-foreground-text-disabled);
 }
 
@@ -1553,13 +1555,13 @@
   margin-left: auto;
   color: var(--text-field-textcounter);
 }
-.tl-text-field--disabled .tl-text-field__charcounter {
+:has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
   color: var(--color-foreground-text-disabled);
 }
-.tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__charcounter {
+.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);
 }
-.tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
   color: var(--text-field-error);
 }
 
@@ -1591,16 +1593,16 @@
 .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));
 }
-.tl-text-field--disabled .tl-text-field__prefix--text, .tl-text-field--disabled .tl-text-field__prefix--icon {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__prefix--text > *, .tl-text-field--disabled .tl-text-field__prefix--icon > * {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__prefix--text .tl-icon, .tl-text-field--disabled .tl-text-field__prefix--icon .tl-icon {
+:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon .tl-icon {
   background-color: var(--text-field-affix-disabled);
 }
-.tl-text-field--disabled .tl-text-field__prefix--icon.tl-icon {
+:has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon.tl-icon {
   background-color: var(--text-field-affix-disabled);
 }
 
@@ -1628,15 +1630,15 @@
 .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));
 }
-.tl-text-field--disabled .tl-text-field__suffix--text, .tl-text-field--disabled .tl-text-field__suffix--icon {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__suffix--text > *, .tl-text-field--disabled .tl-text-field__suffix--icon > * {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__suffix--text .tl-icon,
-.tl-text-field--disabled .tl-text-field__suffix--text > .tl-icon, .tl-text-field--disabled .tl-text-field__suffix--icon .tl-icon,
-.tl-text-field--disabled .tl-text-field__suffix--icon > .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--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) !important;
 }
 
@@ -1660,18 +1662,18 @@
 .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));
 }
-.tl-text-field--disabled .tl-text-field__suffix--text, .tl-text-field--disabled .tl-text-field__suffix--icon {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__suffix--text > *, .tl-text-field--disabled .tl-text-field__suffix--icon > * {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__suffix--text .tl-icon,
-.tl-text-field--disabled .tl-text-field__suffix--text > .tl-icon, .tl-text-field--disabled .tl-text-field__suffix--icon .tl-icon,
-.tl-text-field--disabled .tl-text-field__suffix--icon > .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--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);
 }
-.tl-text-field--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);
 }
 
@@ -1988,11 +1990,7 @@
 .tl-slider {
   width: 100%;
 }
-.tl-slider--disabled {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-.tl-slider--read-only {
+.tl-slider:has(input[type=range][readonly]):not(:has(input[type=range]:disabled)) {
   pointer-events: none;
 }
 
@@ -2026,7 +2024,7 @@
   margin-bottom: 2px;
   margin-left: 0;
 }
-.tl-slider--disabled .tl-slider__label {
+:has(input[type=range]:disabled) .tl-slider__label {
   color: var(--slider-disabled-text);
 }
 
@@ -2045,7 +2043,7 @@
 .tl-slider__control-minus,
 .tl-slider__control-plus {
   flex-shrink: 0;
-  border: none !important;
+  border: none;
 }
 
 .tl-slider__track {
@@ -2086,11 +2084,11 @@
   outline-offset: 1px;
   z-index: 1;
 }
-.tl-slider--disabled .tl-slider__track {
+.tl-slider__track:disabled {
   cursor: not-allowed;
   background-color: var(--slider-disabled);
 }
-.tl-slider--disabled .tl-slider__track::after {
+.tl-slider__track:disabled::after {
   cursor: not-allowed;
 }
 
@@ -2106,7 +2104,7 @@
   flex-shrink: 0;
   align-self: center;
 }
-.tl-slider--disabled .tl-slider__value {
+:has(input[type=range]:disabled) .tl-slider__value {
   color: var(--slider-disabled-text);
 }
 
@@ -2118,11 +2116,12 @@
   margin-left: 0;
   align-self: center;
 }
-.tl-slider__input-wrapper.tl-text-field--readonly:not(.tl-text-field--disabled)::before {
+.tl-slider__input-wrapper.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled))::before {
   width: 16px;
   height: 16px;
   right: 16px;
   top: 50%;
+  transform: translateY(-50%);
 }
 
 .tl-slider__input-wrapper .tl-slider__input-field {
@@ -2139,7 +2138,7 @@
   margin: 0;
 }
 
-.tl-slider__input-wrapper.tl-text-field--readonly:not(.tl-text-field--disabled) .tl-slider__input-field[readonly] {
+.tl-slider__input-wrapper:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-slider__input-field[readonly] {
   width: 74px;
   padding-right: 39px;
 }
@@ -2180,7 +2179,7 @@
 .tl-slider__thumb:hover .tl-slider__value-tooltip {
   display: block;
 }
-.tl-slider--disabled .tl-slider__value-tooltip {
+:has(input[type=range]:disabled) .tl-slider__value-tooltip {
   display: none;
 }
 
@@ -2237,11 +2236,11 @@
   width: 20px;
   height: 20px;
 }
-.tl-slider--disabled .tl-slider__thumb-inner {
+:has(input[type=range]:disabled) .tl-slider__thumb-inner {
   background-color: var(--slider-disabled);
-  cursor: default;
+  cursor: not-allowed;
 }
-.tl-slider--disabled .tl-slider__thumb-inner::before {
+:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
   display: none;
 }
 
@@ -2272,7 +2271,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.tl-slider--disabled .tl-slider__value-divider-line {
+:has(input[type=range]:disabled) .tl-slider__value-divider-line {
   background-color: var(--slider-disabled);
 }
 
@@ -2294,7 +2293,7 @@
   user-select: none;
   color: var(--slider-divider-values);
 }
-.tl-slider--disabled .tl-slider__value-divider-label {
+:has(input[type=range]:disabled) .tl-slider__value-divider-label {
   color: var(--slider-disabled-text);
 }
 
@@ -2307,7 +2306,7 @@
   top: -1px;
   z-index: 1;
 }
-.tl-slider--disabled .tl-slider__track-fill {
+:has(input[type=range]:disabled) .tl-slider__track-fill {
   background-color: var(--slider-disabled);
 }
 

package/dist/tl-text-field.css

@@ -1263,7 +1263,7 @@
 .tl-text-field--sm {
   height: 40px;
 }
-.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[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon)::before {
   content: "";
   position: absolute;
   top: 50%;
@@ -1278,16 +1278,16 @@
   transform: translateY(-50%);
   z-index: 1;
 }
-.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside).tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon)::before {
+.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--disabled {
-  pointer-events: none;
+.tl-text-field:has(.tl-text-field__input:disabled) {
+  cursor: not-allowed;
 }
 .tl-text-field .tl-icon {
   background-color: var(--text-field-affix);
 }
-.tl-text-field--disabled .tl-text-field .tl-icon {
+:has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
   background-color: var(--text-field-affix-disabled);
 }
 
@@ -1331,7 +1331,7 @@
 .tl-text-field__input:focus {
   box-shadow: inset var(--text-field-box-shadow-focus);
 }
-.tl-text-field:hover .tl-text-field__input:not(:focus) {
+.tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
   box-shadow: inset var(--text-field-box-shadow-hover);
 }
 .tl-text-field--error .tl-text-field__input {
@@ -1340,33 +1340,35 @@
 .tl-text-field--error .tl-text-field__input:focus {
   box-shadow: inset var(--text-field-box-shadow-error-focus);
 }
-.tl-text-field--error:hover .tl-text-field__input:not(:focus) {
+.tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
   box-shadow: inset var(--text-field-box-shadow-error-hover);
 }
-.tl-text-field--success:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__input:not(:focus) {
+.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);
 }
-.tl-text-field--readonly .tl-text-field__input {
+.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);
 }
-.tl-text-field--readonly .tl-text-field__input:focus {
+: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);
 }
-.tl-text-field--readonly:hover .tl-text-field__input:not(:focus) {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__input {
-  box-shadow: none;
-  background-color: var(--text-field-background-disabled);
-  color: var(--text-field-text-disabled);
-}
-.tl-text-field--readonly .tl-text-field__input {
+:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
   user-select: auto;
   caret-color: transparent;
   cursor: default;
   pointer-events: none;
 }
-.tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input {
+.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 {
   padding-right: 54px;
 }
 .tl-text-field--lg .tl-text-field__input {
@@ -1464,10 +1466,10 @@
   opacity: 0;
   visibility: hidden;
 }
-.tl-text-field--label-inside.tl-text-field--disabled .tl-text-field__label {
+.tl-text-field--label-inside:has(.tl-text-field__input:disabled) .tl-text-field__label {
   color: var(--text-field-label-disabled);
 }
-.tl-text-field:not(.tl-text-field--label-inside).tl-text-field--disabled .tl-text-field__label {
+.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input:disabled) .tl-text-field__label {
   color: var(--text-field-label-disabled);
 }
 
@@ -1487,7 +1489,7 @@
   color: var(--text-field-helper);
   position: relative;
 }
-.tl-text-field--disabled .tl-text-field__helper {
+:has(.tl-text-field__input:disabled) .tl-text-field__helper {
   color: var(--color-foreground-text-disabled);
 }
 .tl-text-field--error .tl-text-field__helper {
@@ -1506,16 +1508,16 @@
   mask-repeat: no-repeat;
   mask-position: center;
 }
-.tl-text-field--error.tl-text-field--readonly .tl-text-field__helper {
+.tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper {
   padding-left: 0;
 }
-.tl-text-field--error.tl-text-field--readonly .tl-text-field__helper::before {
+.tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper::before {
   display: none;
 }
-.tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__helper {
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__helper {
   color: var(--text-field-error);
 }
-.tl-text-field--error.tl-text-field--disabled .tl-text-field__helper::before {
+.tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
   background-color: var(--color-foreground-text-disabled);
 }
 
@@ -1529,13 +1531,13 @@
   margin-left: auto;
   color: var(--text-field-textcounter);
 }
-.tl-text-field--disabled .tl-text-field__charcounter {
+:has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
   color: var(--color-foreground-text-disabled);
 }
-.tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__charcounter {
+.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);
 }
-.tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
   color: var(--text-field-error);
 }
 
@@ -1567,16 +1569,16 @@
 .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));
 }
-.tl-text-field--disabled .tl-text-field__prefix--text, .tl-text-field--disabled .tl-text-field__prefix--icon {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__prefix--text > *, .tl-text-field--disabled .tl-text-field__prefix--icon > * {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__prefix--text .tl-icon, .tl-text-field--disabled .tl-text-field__prefix--icon .tl-icon {
+:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon .tl-icon {
   background-color: var(--text-field-affix-disabled);
 }
-.tl-text-field--disabled .tl-text-field__prefix--icon.tl-icon {
+:has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon.tl-icon {
   background-color: var(--text-field-affix-disabled);
 }
 
@@ -1604,15 +1606,15 @@
 .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));
 }
-.tl-text-field--disabled .tl-text-field__suffix--text, .tl-text-field--disabled .tl-text-field__suffix--icon {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__suffix--text > *, .tl-text-field--disabled .tl-text-field__suffix--icon > * {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__suffix--text .tl-icon,
-.tl-text-field--disabled .tl-text-field__suffix--text > .tl-icon, .tl-text-field--disabled .tl-text-field__suffix--icon .tl-icon,
-.tl-text-field--disabled .tl-text-field__suffix--icon > .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--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) !important;
 }
 
@@ -1636,18 +1638,18 @@
 .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));
 }
-.tl-text-field--disabled .tl-text-field__suffix--text, .tl-text-field--disabled .tl-text-field__suffix--icon {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__suffix--text > *, .tl-text-field--disabled .tl-text-field__suffix--icon > * {
+: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);
 }
-.tl-text-field--disabled .tl-text-field__suffix--text .tl-icon,
-.tl-text-field--disabled .tl-text-field__suffix--text > .tl-icon, .tl-text-field--disabled .tl-text-field__suffix--icon .tl-icon,
-.tl-text-field--disabled .tl-text-field__suffix--icon > .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--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);
 }
-.tl-text-field--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);
 }