@scania/tegel 0.0.2 → 0.0.5

package/dist/collection/components/textfield/textfield.css

@@ -1,91 +1,5 @@
-:root,
-.sdds-mode-light {
-  --sdds-textfield-background-primary: var(--sdds-grey-50);
-  --sdds-textfield-background-secondary: var(--sdds-white);
-  --sdds-textfield-background: var(--sdds-textfield-background-primary);
-  --sdds-textfield-color: var(--sdds-grey-868);
-  --sdds-textfield-placeholder: var(--sdds-grey-500);
-  --sdds-textfield-background-disabled-primary: var(--sdds-grey-50);
-  --sdds-textfield-background-disabled-secondary: var(--sdds-white);
-  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-primary);
-  --sdds-textfield-color-disabled: var(--sdds-grey-400);
-  --sdds-textfield-placeholder-disabled: var(--sdds-grey-400);
-  --sdds-textfield-label-disabled: var(--sdds-grey-400);
-  --sdds-textfield-ps-color-disabled: var(--sdds-grey-400);
-  --sdds-textfield-label-color: var(--sdds-grey-958);
-  --sdds-textfield-label-inside-color: var(--sdds-grey-700);
-  --sdds-textfield-placeholder-focus-color: var(--sdds-grey-500);
-  --sdds-textfield-bar: var(--sdds-blue-400);
-  --sdds-textfield-helper: var(--sdds-grey-700);
-  --sdds-textfield-border-bottom-error: var(--sdds-negative);
-  --sdds-textfield-helper-error: var(--sdds-negative);
-  --sdds-textfield-bar-error: var(--sdds-negative);
-  --sdds-textfield-icon-error: var(--sdds-negative);
-  --sdds-textfield-textcounter: var(--sdds-grey-700);
-  --sdds-textfield-textcounter-divider: var(--sdds-grey-500);
-  --sdds-textfield-ps-color: var(--sdds-grey-600);
-  --sdds-textfield-resize-icon: var(--sdds-grey-500);
-  --sdds-textfield-background-secondary: var(--sdds-white);
-  --sdds-textfield-border-bottom: var(--sdds-grey-600);
-  --sdds-textfield-border-bottom-hover: var(--sdds-grey-800);
-  --sdds-textfield-border-bottom-success: var(--sdds-grey-958);
-  --sdds-textfield-border-bottom-error: var(--sdds-negative);
-  --sdds-textfield-icon-read-only-color: var(--sdds-grey-958);
-  --sdds-textfield-icon-read-only-label-color: var(--sdds-grey-958);
-}
-:root .sdds-mode-variant-primary,
-.sdds-mode-light .sdds-mode-variant-primary {
-  --sdds-textfield-background: var(--sdds-textfield-background-primary);
-  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-primary);
-}
-:root .sdds-mode-variant-secondary,
-.sdds-mode-light .sdds-mode-variant-secondary {
-  --sdds-textfield-background: var(--sdds-textfield-background-secondary);
-  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-secondary);
-}
-
-.sdds-mode-dark {
-  --sdds-textfield-background-primary: var(--sdds-grey-900);
-  --sdds-textfield-background: var(--sdds-textfield-background-primary);
-  --sdds-textfield-background-secondary: var(--sdds-grey-868);
-  --sdds-textfield-color: var(--sdds-grey-200);
-  --sdds-textfield-placeholder: var(--sdds-grey-600);
-  --sdds-textfield-ps-color-disabled: var(--sdds-grey-700);
-  --sdds-textfield-color-disabled: var(--sdds-grey-800);
-  --sdds-textfield-background-disabled-primary: var(--sdds-grey-900);
-  --sdds-textfield-background-disabled-secondary: var(--sdds-grey-868);
-  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-primary);
-  --sdds-textfield-placeholder-disabled: var(--sdds-grey-800);
-  --sdds-textfield-label-disabled: var(--sdds-grey-700);
-  --sdds-textfield-label-color: var(--sdds-grey-100);
-  --sdds-textfield-label-inside-color: var(--sdds-grey-400);
-  --sdds-textfield-placeholder-focus-color: var(--sdds-grey-700);
-  --sdds-textfield-bar: var(--sdds-blue-400);
-  --sdds-textfield-helper: var(--sdds-grey-600);
-  --sdds-textfield-helper-error: var(--sdds-negative);
-  --sdds-textfield-bar-error: var(--sdds-negative);
-  --sdds-textfield-icon-error: var(--sdds-negative);
-  --sdds-textfield-textcounter: var(--sdds-grey-600);
-  --sdds-textfield-textcounter-divider: var(--sdds-grey-700);
-  --sdds-textfield-ps-color: var(--sdds-grey-100);
-  --sdds-textfield-resize-icon: var(--sdds-grey-500);
-  --sdds-textfield-border-bottom: var(--sdds-grey-600);
-  --sdds-textfield-border-bottom-hover: var(--sdds-grey-400);
-  --sdds-textfield-border-bottom-success: var(--sdds-grey-50);
-  --sdds-textfield-border-bottom-error: var(--sdds-negative);
-  --sdds-textfield-icon-read-only-color: var(--sdds-grey-100);
-  --sdds-textfield-icon-read-only-label-color: var(--sdds-grey-50);
-}
-.sdds-mode-dark .sdds-mode-variant-primary {
-  --sdds-textfield-background: var(--sdds-textfield-background-primary);
-  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-primary);
-}
-.sdds-mode-dark .sdds-mode-variant-secondary {
-  --sdds-textfield-background: var(--sdds-textfield-background-secondary);
-  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-secondary);
-}
-
-.sdds-textfield-input {
+.textfield-input-lg {
+  all: unset;
   border-radius: 4px 4px 0 0;
   width: 100%;
   box-sizing: border-box;
@@ -99,26 +13,27 @@
   letter-spacing: var(--sdds-detail-02-ls);
   padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
 }
-.sdds-textfield-input::placeholder {
+.textfield-input-lg::placeholder {
   opacity: 1;
   color: var(--sdds-textfield-placeholder);
 }
-.sdds-textfield-input:focus::placeholder {
+.textfield-input-lg:focus::placeholder {
   color: var(--sdds-textfield-placeholder-focus-color);
 }
-.sdds-textfield-input:disabled {
+.textfield-input-lg:disabled {
   cursor: not-allowed;
   background-color: var(--sdds-textfield-background-disabled);
   color: var(--sdds-textfield-color-disabled);
 }
-.sdds-textfield-input:disabled::placeholder {
+.textfield-input-lg:disabled::placeholder {
   color: var(--sdds-textfield-placeholder-disabled);
 }
-.sdds-textfield-input:disabled ~ .sdds-textfield-label-inside {
+.textfield-input-lg:disabled ~ .textfield-label-inside {
   color: var(--sdds-textfield-label-disabled);
 }
 
-.sdds-textfield-input-md {
+.textfield-input-md {
+  all: unset;
   border-radius: 4px 4px 0 0;
   width: 100%;
   box-sizing: border-box;
@@ -132,26 +47,27 @@
   letter-spacing: var(--sdds-detail-02-ls);
   padding: var(--sdds-spacing-element-16);
 }
-.sdds-textfield-input-md::placeholder {
+.textfield-input-md::placeholder {
   opacity: 1;
   color: var(--sdds-textfield-placeholder);
 }
-.sdds-textfield-input-md:focus::placeholder {
+.textfield-input-md:focus::placeholder {
   color: var(--sdds-textfield-placeholder-focus-color);
 }
-.sdds-textfield-input-md:disabled {
+.textfield-input-md:disabled {
   cursor: not-allowed;
   background-color: var(--sdds-textfield-background-disabled);
   color: var(--sdds-textfield-color-disabled);
 }
-.sdds-textfield-input-md:disabled::placeholder {
+.textfield-input-md:disabled::placeholder {
   color: var(--sdds-textfield-placeholder-disabled);
 }
-.sdds-textfield-input-md:disabled ~ .sdds-textfield-label-inside {
+.textfield-input-md:disabled ~ .textfield-label-inside {
   color: var(--sdds-textfield-label-disabled);
 }
 
-.sdds-textfield-input-sm {
+.textfield-input-sm {
+  all: unset;
   border-radius: 4px 4px 0 0;
   width: 100%;
   box-sizing: border-box;
@@ -165,26 +81,26 @@
   letter-spacing: var(--sdds-detail-02-ls);
   padding: var(--sdds-spacing-element-16);
 }
-.sdds-textfield-input-sm::placeholder {
+.textfield-input-sm::placeholder {
   opacity: 1;
   color: var(--sdds-textfield-placeholder);
 }
-.sdds-textfield-input-sm:focus::placeholder {
+.textfield-input-sm:focus::placeholder {
   color: var(--sdds-textfield-placeholder-focus-color);
 }
-.sdds-textfield-input-sm:disabled {
+.textfield-input-sm:disabled {
   cursor: not-allowed;
   background-color: var(--sdds-textfield-background-disabled);
   color: var(--sdds-textfield-color-disabled);
 }
-.sdds-textfield-input-sm:disabled::placeholder {
+.textfield-input-sm:disabled::placeholder {
   color: var(--sdds-textfield-placeholder-disabled);
 }
-.sdds-textfield-input-sm:disabled ~ .sdds-textfield-label-inside {
+.textfield-input-sm:disabled ~ .textfield-label-inside {
   color: var(--sdds-textfield-label-disabled);
 }
 
-.sdds-textfield-container {
+.textfield-container {
   border-radius: 4px 4px 0 0;
   display: flex;
   position: relative;
@@ -194,17 +110,17 @@
   border-bottom: 1px solid var(--sdds-textfield-border-bottom);
   transition: border-bottom-color 200ms ease;
 }
-.sdds-textfield-container:hover {
+.textfield-container:hover {
   border-bottom-color: var(--sdds-textfield-border-bottom-hover);
 }
-.sdds-form-textfield-md .sdds-textfield-container {
+.form-textfield-md .textfield-container {
   height: 48px;
 }
-.sdds-form-textfield-sm .sdds-textfield-container {
+.form-textfield-sm .textfield-container {
   height: 40px;
 }
 
-.sdds-textfield-input-container {
+.textfield-input-container {
   position: relative;
   width: 100%;
 }
@@ -215,7 +131,7 @@
   margin-bottom: var(--sdds-spacing-element-8);
   color: var(--sdds-textfield-label-color);
 } */
-.sdds-textfield-label-outside > * {
+.textfield-label-outside > * {
   font: var(--sdds-detail-05);
   letter-spacing: var(--sdds-detail-05-ls);
   display: block;
@@ -223,7 +139,7 @@
   color: var(--sdds-textfield-label-color);
 }
 
-.sdds-textfield-label-inside {
+.textfield-label-inside {
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
   position: absolute;
@@ -232,107 +148,107 @@
   left: 16px;
 }
 
-.sdds-form-textfield {
+.form-textfield {
   display: block;
   min-width: 208px;
 }
-.sdds-form-textfield-nomin {
+.form-textfield-nomin {
   min-width: auto;
 }
 
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input {
+.form-textfield.textfield-container-label-inside .textfield-input-lg {
   padding-top: var(--sdds-spacing-element-24);
   padding-bottom: 15px;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input ~ .sdds-textfield-label-inside {
+.form-textfield.textfield-container-label-inside .textfield-input-lg ~ .textfield-label-inside {
   top: 20px;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-lg::placeholder {
   color: transparent;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::input-placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-lg::input-placeholder {
   color: transparent;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-lg:placeholder {
   color: transparent;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input ::placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-lg ::placeholder {
   color: transparent;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:focus::placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-lg:focus::placeholder {
   transition: color 0.35s ease;
   color: var(--sdds-textfield-placeholder-focus-color);
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md {
+.form-textfield.textfield-container-label-inside .textfield-input-md {
   padding-top: var(--sdds-spacing-element-20);
   padding-bottom: 11px;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md ~ .sdds-textfield-label-inside {
+.form-textfield.textfield-container-label-inside .textfield-input-md ~ .textfield-label-inside {
   top: 16px;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-md::placeholder {
   color: transparent;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::input-placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-md::input-placeholder {
   color: transparent;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-md:placeholder {
   color: transparent;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md ::placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-md ::placeholder {
   color: transparent;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:focus::placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-md:focus::placeholder {
   transition: color 0.35s ease;
   color: var(--sdds-textfield-placeholder-focus-color);
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm {
+.form-textfield.textfield-container-label-inside .textfield-input-sm {
   padding-top: var(--sdds-spacing-element-20);
   padding-bottom: 11px;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm ~ .sdds-textfield-label-inside {
+.form-textfield.textfield-container-label-inside .textfield-input-sm ~ .textfield-label-inside {
   top: 16px;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-sm::placeholder {
   color: transparent;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::input-placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-sm::input-placeholder {
   color: transparent;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-sm:placeholder {
   color: transparent;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm ::placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-sm ::placeholder {
   color: transparent;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:focus::placeholder {
+.form-textfield.textfield-container-label-inside .textfield-input-sm:focus::placeholder {
   transition: color 0.35s ease;
   color: var(--sdds-textfield-placeholder-focus-color);
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-sm ~ .sdds-textfield-label-inside, .sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-sm ~ .sdds-textfield-label-inside {
+.form-textfield.textfield-container-label-inside.textfield-focus .textfield-input-sm ~ .textfield-label-inside, .form-textfield.textfield-container-label-inside.textfield-data .textfield-input-sm ~ .textfield-label-inside {
   font: var(--sdds-detail-07);
   letter-spacing: var(--sdds-detail-07-ls);
   transition: 0.1s ease all;
   top: 8px;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-md ~ .sdds-textfield-label-inside, .sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-md ~ .sdds-textfield-label-inside {
+.form-textfield.textfield-container-label-inside.textfield-focus .textfield-input-md ~ .textfield-label-inside, .form-textfield.textfield-container-label-inside.textfield-data .textfield-input-md ~ .textfield-label-inside {
   font: var(--sdds-detail-07);
   letter-spacing: var(--sdds-detail-07-ls);
   transition: 0.1s ease all;
   top: 8px;
 }
-.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input ~ .sdds-textfield-label-inside, .sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input ~ .sdds-textfield-label-inside {
+.form-textfield.textfield-container-label-inside.textfield-focus .textfield-input-lg ~ .textfield-label-inside, .form-textfield.textfield-container-label-inside.textfield-data .textfield-input-lg ~ .textfield-label-inside {
   font: var(--sdds-detail-07);
   letter-spacing: var(--sdds-detail-07-ls);
   transition: 0.1s ease all;
   top: 12px;
 }
 
-.sdds-textfield-bar {
+.textfield-bar {
   position: absolute;
   width: 100%;
 }
-.sdds-textfield-bar::before, .sdds-textfield-bar::after {
+.textfield-bar::before, .textfield-bar::after {
   content: "";
   height: 2px;
   top: 54px;
@@ -341,23 +257,23 @@
   background: var(--sdds-textfield-bar);
   transition: 0.35s ease all;
 }
-.sdds-form-textfield-md .sdds-textfield-bar::before, .sdds-form-textfield-md .sdds-textfield-bar::after {
+.form-textfield-md .textfield-bar::before, .form-textfield-md .textfield-bar::after {
   top: 46px;
 }
-.sdds-form-textfield-sm .sdds-textfield-bar::before, .sdds-form-textfield-sm .sdds-textfield-bar::after {
+.form-textfield-sm .textfield-bar::before, .form-textfield-sm .textfield-bar::after {
   top: 40px;
 }
-.sdds-textfield-bar::before {
+.textfield-bar::before {
   left: 50%;
 }
-.sdds-textfield-bar::after {
+.textfield-bar::after {
   right: 50%;
 }
-.sdds-textfield-focus .sdds-textfield-bar::before, .sdds-textfield-focus .sdds-textfield-bar::after {
+.textfield-focus .textfield-bar::before, .textfield-focus .textfield-bar::after {
   width: 50%;
 }
 
-.sdds-textfield-helper {
+.textfield-helper {
   font: var(--sdds-detail-05);
   letter-spacing: var(--sdds-detail-05-ls);
   display: flex;
@@ -367,29 +283,29 @@
   padding-top: var(--sdds-spacing-element-4);
   color: var(--sdds-textfield-helper);
 }
-.sdds-textfield-helper .sdds-textfield-textcounter {
+.textfield-helper .textfield-textcounter {
   margin-left: auto;
 }
 
-.sdds-form-textfield-disabled .sdds-textfield-container {
+.form-textfield-disabled .textfield-container {
   border-bottom-color: transparent;
 }
-.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-prefix > *,
-.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-suffix > * {
+.form-textfield-disabled .textfield-slot-wrap-prefix > *,
+.form-textfield-disabled .textfield-slot-wrap-suffix > * {
   color: var(--sdds-textfield-ps-color-disabled);
 }
-.sdds-form-textfield-disabled .sdds-textfield-label-outside > * {
+.form-textfield-disabled .textfield-label-outside > * {
   color: var(--sdds-textfield-label-disabled);
 }
 
-.sdds-textfield-icon__readonly {
+.textfield-icon__readonly {
   display: none;
   position: absolute;
   right: 18px;
   top: 18px;
   color: var(--sdds-textfield-icon-read-only-label-color);
 }
-.sdds-textfield-icon__readonly-label {
+.textfield-icon__readonly-label {
   display: none;
   position: absolute;
   right: 18px;
@@ -402,51 +318,51 @@
   background-color: var(--sdds-textfield-icon-read-only-label-background);
 }
 
-.sdds-form-textfield-readonly {
+.form-textfield-readonly {
   pointer-events: none;
 }
-.sdds-form-textfield-readonly .sdds-textfield-icon__readonly {
+.form-textfield-readonly .textfield-icon__readonly {
   display: block;
 }
-.sdds-form-textfield-readonly .sdds-textfield-icon__readonly:hover ~ .sdds-textfield-icon__readonly-label {
+.form-textfield-readonly .textfield-icon__readonly:hover ~ .textfield-icon__readonly-label {
   display: block;
 }
-.sdds-form-textfield-readonly .sdds-textfield-input {
+.form-textfield-readonly .textfield-input {
   padding-right: 54px;
   background-color: transparent;
 }
 
-.sdds-form-textfield-success .sdds-textfield-container {
+.form-textfield-success .textfield-container {
   border-bottom-color: var(--sdds-textfield-border-bottom-success);
 }
 
-.sdds-form-textfield-error .sdds-textfield-helper {
+.form-textfield-error .textfield-helper {
   color: var(--sdds-textfield-helper-error);
 }
-.sdds-form-textfield-error .sdds-textfield-container {
+.form-textfield-error .textfield-container {
   border-bottom-color: var(--sdds-textfield-border-bottom-error);
 }
-.sdds-form-textfield-error .sdds-textfield-bar::before, .sdds-form-textfield-error .sdds-textfield-bar::after {
+.form-textfield-error .textfield-bar::before, .form-textfield-error .textfield-bar::after {
   background: var(--sdds-textfield-bar-error);
 }
-.sdds-form-textfield-error slot[name=sdds-prefix]::slotted(sdds-icon),
-.sdds-form-textfield-error slot[name=sdds-suffix]::slotted(sdds-icon) {
+.form-textfield-error slot[name=sdds-prefix]::slotted(sdds-icon),
+.form-textfield-error slot[name=sdds-suffix]::slotted(sdds-icon) {
   color: var(--sdds-textfield-icon-error);
 }
 
-.sdds-textfield-helper-error-state {
+.textfield-helper-error-state {
   display: flex;
   gap: 8px;
   flex-wrap: nowrap;
 }
 
-.sdds-textfield-textcounter {
+.textfield-textcounter {
   font: var(--sdds-detail-05);
   letter-spacing: var(--sdds-detail-05-ls);
   color: var(--sdds-textfield-textcounter);
   float: right;
 }
-.sdds-textfield-textcounter .sdds-textfield-textcounter-divider {
+.textfield-textcounter .textfield-textcounter-divider {
   color: var(--sdds-textfield-textcounter-divider);
 }
 
@@ -456,31 +372,31 @@ slot[name="sdds-suffix"]::slotted(*) {
   align-self: center;
   color: var(--sdds-textfield-ps-color);
 } */
-.sdds-textfield-slot-wrap-prefix {
+.textfield-slot-wrap-prefix {
   align-self: center;
 }
-.sdds-textfield-slot-wrap-prefix > * {
+.textfield-slot-wrap-prefix > * {
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
   margin-left: 16px;
   color: var(--sdds-textfield-ps-color);
 }
-.sdds-textfield-slot-wrap-prefix.sdds-textfield-error sdds-icon,
-.sdds-textfield-slot-wrap-prefix.sdds-textfield-error .sdds-icon {
+.textfield-slot-wrap-prefix.textfield-error sdds-icon,
+.textfield-slot-wrap-prefix.textfield-error .icon {
   color: var(--sdds-negative);
 }
 
-.sdds-textfield-slot-wrap-suffix {
+.textfield-slot-wrap-suffix {
   align-self: center;
 }
-.sdds-textfield-slot-wrap-suffix > * {
+.textfield-slot-wrap-suffix > * {
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
   margin-right: 16px;
   color: var(--sdds-textfield-ps-color);
 }
-.sdds-textfield-slot-wrap-suffix.sdds-textfield-error sdds-icon,
-.sdds-textfield-slot-wrap-suffix.sdds-textfield-error .sdds-icon {
+.textfield-slot-wrap-suffix.textfield-error sdds-icon,
+.textfield-slot-wrap-suffix.textfield-error .icon {
   color: var(--sdds-negative);
 }
 
@@ -493,7 +409,7 @@ slot[name=sdds-suffix]::slotted(sdds-icon) {
 slot[name=sdds-prefix]::slotted(*) {
   padding-left: var(--sdds-spacing-element-20);
 }
-slot[name=sdds-prefix]::slotted(*) ~ .sdds-textfield-input {
+slot[name=sdds-prefix]::slotted(*) ~ .textfield-input {
   padding-left: var(--sdds-spacing-element-12);
 }