@scania/tegel 0.0.1-beta.9 → 0.0.2

package/dist/collection/components/textarea/textarea.stories.js

@@ -0,0 +1,169 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Textarea',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    placeholder: {
+      name: 'Placeholder',
+      description: 'Placeholder text',
+      control: {
+        type: 'text',
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Change the components mode variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    disabled: {
+      description: 'Set textfield to disabled state',
+      name: 'Disabled',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    readonly: {
+      description: 'Set textfield to read-only state',
+      name: 'Read only',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    label: {
+      description: 'Label text for specific textfield',
+      name: 'Label text',
+      control: {
+        type: 'text',
+      },
+    },
+    labelPosition: {
+      name: 'Label position',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Inside', 'Outside'],
+      description: 'Label text position',
+    },
+    helper: {
+      name: 'Helper text',
+      description: 'Add helper text for the textfield',
+      control: {
+        type: 'text',
+      },
+    },
+    maxLength: {
+      name: 'Max length',
+      description: 'Set a maximum value of how long the text can be.',
+      control: {
+        type: 'number',
+      },
+    },
+    rows: {
+      name: 'Rows',
+      description: 'Set the number of rows',
+      control: {
+        type: 'number',
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switch between success or error state',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Success', 'Error'],
+    },
+  },
+  args: {
+    placeholder: 'Placeholder',
+    disabled: false,
+    readonly: false,
+    label: 'Label',
+    labelPosition: 'None',
+    helper: '',
+    maxLength: 0,
+    rows: 5,
+    state: 'Default',
+    modeVariant: 'Inherit from parent',
+  },
+};
+const Template = ({ placeholder, disabled, readonly, label, labelPosition, state, helper, maxLength, modeVariant, rows, }) => {
+  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
+  const stateValue = state.toLowerCase();
+  const labelPosLookup = {
+    None: 'no-label',
+    Inside: 'inside',
+    Outside: 'outside',
+  };
+  return formatHtmlPreview(`
+  <style>
+  /* demo-wrapper is for demonstration purposes only*/
+    .demo-wrapper {
+      width: 400px;
+    }
+  </style>
+
+  <div class="demo-wrapper">
+        <sdds-textarea
+          rows="${rows}"
+          state="${stateValue}"
+          label="${label}"
+          helper="${helper}"
+          ${modeVariant !== 'Inherit from parent'
+    ? `mode-variant="${modeVariant.toLowerCase()}"`
+    : ''}
+          label-position="${labelPosLookup[labelPosition]}"
+          ${disabled ? 'disabled' : ''}
+          ${readonly ? 'read-only' : ''}
+          placeholder="${placeholder}"
+          ${maxlength}>
+        </sdds-textarea>
+  </div>
+  <!-- Script tag for demo purposes -->
+  <script>
+    textElement = document.querySelector('sdds-textarea')
+
+    textElement.addEventListener('sddsFocus',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('sddsBlur',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('sddsInput',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('sddsChange',(event) => {
+      console.log(event)
+    })
+  </script>
+  `);
+};
+export const Default = Template.bind({});

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

@@ -0,0 +1,502 @@
+: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 {
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--sdds-textfield-color);
+  background-color: var(--sdds-textfield-background);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
+}
+.sdds-textfield-input::placeholder {
+  opacity: 1;
+  color: var(--sdds-textfield-placeholder);
+}
+.sdds-textfield-input:focus::placeholder {
+  color: var(--sdds-textfield-placeholder-focus-color);
+}
+.sdds-textfield-input:disabled {
+  cursor: not-allowed;
+  background-color: var(--sdds-textfield-background-disabled);
+  color: var(--sdds-textfield-color-disabled);
+}
+.sdds-textfield-input:disabled::placeholder {
+  color: var(--sdds-textfield-placeholder-disabled);
+}
+.sdds-textfield-input:disabled ~ .sdds-textfield-label-inside {
+  color: var(--sdds-textfield-label-disabled);
+}
+
+.sdds-textfield-input-md {
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--sdds-textfield-color);
+  background-color: var(--sdds-textfield-background);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  padding: var(--sdds-spacing-element-16);
+}
+.sdds-textfield-input-md::placeholder {
+  opacity: 1;
+  color: var(--sdds-textfield-placeholder);
+}
+.sdds-textfield-input-md:focus::placeholder {
+  color: var(--sdds-textfield-placeholder-focus-color);
+}
+.sdds-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 {
+  color: var(--sdds-textfield-placeholder-disabled);
+}
+.sdds-textfield-input-md:disabled ~ .sdds-textfield-label-inside {
+  color: var(--sdds-textfield-label-disabled);
+}
+
+.sdds-textfield-input-sm {
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--sdds-textfield-color);
+  background-color: var(--sdds-textfield-background);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  padding: var(--sdds-spacing-element-16);
+}
+.sdds-textfield-input-sm::placeholder {
+  opacity: 1;
+  color: var(--sdds-textfield-placeholder);
+}
+.sdds-textfield-input-sm:focus::placeholder {
+  color: var(--sdds-textfield-placeholder-focus-color);
+}
+.sdds-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 {
+  color: var(--sdds-textfield-placeholder-disabled);
+}
+.sdds-textfield-input-sm:disabled ~ .sdds-textfield-label-inside {
+  color: var(--sdds-textfield-label-disabled);
+}
+
+.sdds-textfield-container {
+  border-radius: 4px 4px 0 0;
+  display: flex;
+  position: relative;
+  height: 56px;
+  box-sizing: border-box;
+  background-color: var(--sdds-textfield-background);
+  border-bottom: 1px solid var(--sdds-textfield-border-bottom);
+  transition: border-bottom-color 200ms ease;
+}
+.sdds-textfield-container:hover {
+  border-bottom-color: var(--sdds-textfield-border-bottom-hover);
+}
+.sdds-form-textfield-md .sdds-textfield-container {
+  height: 48px;
+}
+.sdds-form-textfield-sm .sdds-textfield-container {
+  height: 40px;
+}
+
+.sdds-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 > * {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  display: block;
+  margin-bottom: var(--sdds-spacing-element-8);
+  color: var(--sdds-textfield-label-color);
+}
+
+.sdds-textfield-label-inside {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  position: absolute;
+  pointer-events: none;
+  color: var(--sdds-textfield-label-inside-color);
+  left: 16px;
+}
+
+.sdds-form-textfield {
+  display: block;
+  min-width: 208px;
+}
+.sdds-form-textfield-nomin {
+  min-width: auto;
+}
+
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input {
+  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 {
+  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 {
+  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 ::placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input: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 {
+  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 {
+  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 {
+  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 ::placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-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 {
+  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 {
+  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 {
+  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 ::placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-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 {
+  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 {
+  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 {
+  font: var(--sdds-detail-07);
+  letter-spacing: var(--sdds-detail-07-ls);
+  transition: 0.1s ease all;
+  top: 12px;
+}
+
+.sdds-textfield-bar {
+  position: absolute;
+  width: 100%;
+}
+.sdds-textfield-bar::before, .sdds-textfield-bar::after {
+  content: "";
+  height: 2px;
+  top: 54px;
+  width: 0;
+  position: absolute;
+  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 {
+  top: 46px;
+}
+.sdds-form-textfield-sm .sdds-textfield-bar::before, .sdds-form-textfield-sm .sdds-textfield-bar::after {
+  top: 40px;
+}
+.sdds-textfield-bar::before {
+  left: 50%;
+}
+.sdds-textfield-bar::after {
+  right: 50%;
+}
+.sdds-textfield-focus .sdds-textfield-bar::before, .sdds-textfield-focus .sdds-textfield-bar::after {
+  width: 50%;
+}
+
+.sdds-textfield-helper {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  flex-basis: 100%;
+  padding-top: var(--sdds-spacing-element-4);
+  color: var(--sdds-textfield-helper);
+}
+.sdds-textfield-helper .sdds-textfield-textcounter {
+  margin-left: auto;
+}
+
+.sdds-form-textfield-disabled .sdds-textfield-container {
+  border-bottom-color: transparent;
+}
+.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-prefix > *,
+.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-suffix > * {
+  color: var(--sdds-textfield-ps-color-disabled);
+}
+.sdds-form-textfield-disabled .sdds-textfield-label-outside > * {
+  color: var(--sdds-textfield-label-disabled);
+}
+
+.sdds-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 {
+  display: none;
+  position: absolute;
+  right: 18px;
+  top: 48px;
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  padding: 8px;
+  white-space: nowrap;
+  border-radius: 4px 0 4px 4px;
+  background-color: var(--sdds-textfield-icon-read-only-label-background);
+}
+
+.sdds-form-textfield-readonly {
+  pointer-events: none;
+}
+.sdds-form-textfield-readonly .sdds-textfield-icon__readonly {
+  display: block;
+}
+.sdds-form-textfield-readonly .sdds-textfield-icon__readonly:hover ~ .sdds-textfield-icon__readonly-label {
+  display: block;
+}
+.sdds-form-textfield-readonly .sdds-textfield-input {
+  padding-right: 54px;
+  background-color: transparent;
+}
+
+.sdds-form-textfield-success .sdds-textfield-container {
+  border-bottom-color: var(--sdds-textfield-border-bottom-success);
+}
+
+.sdds-form-textfield-error .sdds-textfield-helper {
+  color: var(--sdds-textfield-helper-error);
+}
+.sdds-form-textfield-error .sdds-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 {
+  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 {
+  display: flex;
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+
+.sdds-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 {
+  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 {
+  align-self: center;
+}
+.sdds-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 {
+  color: var(--sdds-negative);
+}
+
+.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);
+}
+
+slot[name=sdds-prefix]::slotted(sdds-icon),
+slot[name=sdds-suffix]::slotted(sdds-icon) {
+  font-size: 24px;
+  line-height: 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);
+}