@scania/tegel 0.0.4 → 0.0.6

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,28 +110,22 @@
   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%;
 }
 
-/* slot[name="sdds-label"]::slotted(*) {
-  @include type-style("detail-05");
-  display: block;
-  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 +133,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 +142,89 @@
   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 {
-  color: transparent;
-}
-.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::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 ::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 {
-  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::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 {
-  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 {
-  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::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 {
-  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 +233,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 +259,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,101 +294,70 @@
   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) {
-  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);
 }
 
-/* slot[name="sdds-prefix"]::slotted(*),
-slot[name="sdds-suffix"]::slotted(*) {
-  @include type-style("detail-02");
-  align-self: center;
-  color: var(--sdds-textfield-ps-color);
-} */
-.sdds-textfield-slot-wrap-prefix {
+.textfield-slot-wrap-prefix,
+.textfield-slot-wrap-suffix {
   align-self: center;
-}
-.sdds-textfield-slot-wrap-prefix > * {
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
-  margin-left: 16px;
+  margin: 0 0 0 14px;
   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 {
-  color: var(--sdds-negative);
+.textfield-slot-wrap-prefix::slotted(:not(sdds-icon)),
+.textfield-slot-wrap-suffix::slotted(:not(sdds-icon)) {
+  margin: 0 0 0 2px;
 }
-
-.sdds-textfield-slot-wrap-suffix {
-  align-self: center;
-}
-.sdds-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 {
-  color: var(--sdds-negative);
+.textfield-slot-wrap-prefix.textfield-error,
+.textfield-slot-wrap-suffix.textfield-error {
+  color: var(--sdds-textfield-ps-color-error);
 }
 
-slot[name=sdds-prefix]::slotted(sdds-icon),
-slot[name=sdds-suffix]::slotted(sdds-icon) {
-  font-size: 24px;
-  line-height: 0;
+.textfield-slot-wrap-suffix {
+  margin: 0 14px 0 0;
 }
-
-slot[name=sdds-prefix]::slotted(*) {
-  padding-left: var(--sdds-spacing-element-20);
-}
-slot[name=sdds-prefix]::slotted(*) ~ .sdds-textfield-input {
-  padding-left: var(--sdds-spacing-element-12);
-}
-
-slot[name=sdds-suffix]::slotted(*) {
-  padding-right: var(--sdds-spacing-element-20);
+.textfield-slot-wrap-suffix::slotted(:not(sdds-icon)) {
+  margin: 0 2px 0 0;
 }

package/dist/collection/components/textfield/textfield.js

@@ -39,31 +39,20 @@ export class Textfield {
   }
   render() {
     var _a;
-    let className = ' sdds-textfield-input';
-    if (this.size === 'md') {
-      className += `${className}-md`;
-    }
-    if (this.size === 'sm') {
-      className += `${className}-sm`;
-    }
     return (h("div", { class: `
-        ${this.noMinWidth ? 'sdds-form-textfield-nomin' : ''}
-        ${this.focusInput && !this.disabled
-        ? 'sdds-form-textfield sdds-textfield-focus'
-        : ' sdds-form-textfield'}
-        ${this.value ? 'sdds-textfield-data' : ''}
+        ${this.noMinWidth ? 'form-textfield-nomin' : ''}
+        ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}
+        ${this.value ? 'textfield-data' : ''}
         ${this.labelPosition === 'inside' && this.size !== 'sm'
-        ? 'sdds-textfield-container-label-inside'
+        ? 'textfield-container-label-inside'
         : ''}
-        ${this.disabled ? 'sdds-form-textfield-disabled' : ''}
-        ${this.readOnly ? 'sdds-form-textfield-readonly' : ''}
+        ${this.disabled ? 'form-textfield-disabled' : ''}
+        ${this.readOnly ? 'form-textfield-readonly' : ''}
         ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
-        ${this.size === 'md' ? 'sdds-form-textfield-md' : ''}
-        ${this.size === 'sm' ? 'sdds-form-textfield-sm' : ''}
-        ${this.state === 'error' || this.state === 'success'
-        ? `sdds-form-textfield-${this.state}`
-        : ''}
-        ` }, this.labelPosition === 'outside' && (h("div", { class: "sdds-textfield-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "sdds-textfield-container" }, h("div", { class: `sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-prefix" })), h("div", { class: "sdds-textfield-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+        ${this.size === 'md' ? 'form-textfield-md' : ''}
+        ${this.size === 'sm' ? 'form-textfield-sm' : ''}
+        ${this.state === 'error' || this.state === 'success' ? `form-textfield-${this.state}` : ''}
+        ` }, this.labelPosition === 'outside' && (h("div", { class: "textfield-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "textfield-container" }, h("div", { class: `textfield-slot-wrap-prefix textfield-${this.state}` }, h("slot", { name: "prefix" })), h("div", { class: "textfield-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `textfield-input textfield-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
         if (!this.readOnly) {
           this.handleFocus(event);
         }
@@ -71,9 +60,10 @@ export class Textfield {
         if (!this.readOnly) {
           this.handleBlur(event);
         }
-      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "sdds-textfield-label-inside" }, this.label))), h("div", { class: "sdds-textfield-bar" }), h("div", { class: `sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-suffix" })), h("span", { class: "sdds-textfield-icon__readonly" }, h("sdds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "sdds-textfield-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "sdds-textfield-helper" }, this.state === 'error' && (h("div", { class: "sdds-textfield-helper-error-state" }, h("sdds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "sdds-textfield-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "sdds-textfield-textcounter-divider" }, " / "), this.maxLength)))));
+      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "textfield-label-inside" }, this.label))), h("div", { class: "textfield-bar" }), h("div", { class: `textfield-slot-wrap-suffix textfield-${this.state}` }, h("slot", { name: "suffix" })), h("span", { class: "textfield-icon__readonly" }, h("sdds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "textfield-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "textfield-helper" }, this.state === 'error' && (h("div", { class: "textfield-helper-error-state" }, h("sdds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "textfield-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "textfield-textcounter-divider" }, " / "), this.maxLength)))));
   }
   static get is() { return "sdds-textfield"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["textfield.scss"]