@scania/tegel 0.0.34 → 0.0.52

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,aAAa;MACnB,WAAW,EAAE,kBAAkB;MAC/B,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,QAAQ,EAAE;MACR,WAAW,EAAE,iCAAiC;MAC9C,IAAI,EAAE,UAAU;MAChB,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,WAAW,EAAE,kCAAkC;MAC/C,IAAI,EAAE,WAAW;MACjB,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,KAAK,EAAE;MACL,WAAW,EAAE,mCAAmC;MAChD,IAAI,EAAE,YAAY;MAClB,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,aAAa,EAAE;MACb,IAAI,EAAE,gBAAgB;MACtB,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC;MACtC,WAAW,EAAE,qBAAqB;KACnC;IACD,MAAM,EAAE;MACN,IAAI,EAAE,aAAa;MACnB,WAAW,EAAE,mCAAmC;MAChD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,uCAAuC;MACpD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;KACzC;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,aAAa;IAC1B,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,OAAO;IACd,aAAa,EAAE,MAAM;IACrB,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,CAAC;IACZ,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,qBAAqB;GACnC;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,aAAa,EACb,KAAK,EACL,MAAM,EACN,SAAS,EACT,WAAW,EACX,IAAI,GACL,EAAE,EAAE;EACH,MAAM,SAAS,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,eAAe,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;EACnE,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;EACvC,MAAM,cAAc,GAAG;IACrB,IAAI,EAAE,UAAU;IAChB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;GACnB,CAAC;EACF,OAAO,iBAAiB,CAAC;;;;;;;;;;kBAUT,IAAI;mBACH,UAAU;mBACV,KAAK;oBACJ,MAAM;YAEd,WAAW,KAAK,qBAAqB;IACnC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG;IAC/C,CAAC,CAAC,EACN;4BACkB,cAAc,CAAC,aAAa,CAAC;YAC7C,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;YAC1B,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;yBACd,WAAW;YACxB,SAAS;;;;;;;;;;;;;;;;;;;;GAoBlB,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Textarea',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    placeholder: {\n      name: 'Placeholder',\n      description: 'Placeholder text',\n      control: {\n        type: 'text',\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Change the components mode variant',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    disabled: {\n      description: 'Set textfield to disabled state',\n      name: 'Disabled',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    readonly: {\n      description: 'Set textfield to read-only state',\n      name: 'Read only',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    label: {\n      description: 'Label text for specific textfield',\n      name: 'Label text',\n      control: {\n        type: 'text',\n      },\n    },\n    labelPosition: {\n      name: 'Label position',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 'Inside', 'Outside'],\n      description: 'Label text position',\n    },\n    helper: {\n      name: 'Helper text',\n      description: 'Add helper text for the textfield',\n      control: {\n        type: 'text',\n      },\n    },\n    maxLength: {\n      name: 'Max length',\n      description: 'Set a maximum value of how long the text can be.',\n      control: {\n        type: 'number',\n      },\n    },\n    rows: {\n      name: 'Rows',\n      description: 'Set the number of rows',\n      control: {\n        type: 'number',\n      },\n    },\n    state: {\n      name: 'State',\n      description: 'Switch between success or error state',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Success', 'Error'],\n    },\n  },\n  args: {\n    placeholder: 'Placeholder',\n    disabled: false,\n    readonly: false,\n    label: 'Label',\n    labelPosition: 'None',\n    helper: '',\n    maxLength: 0,\n    rows: 5,\n    state: 'Default',\n    modeVariant: 'Inherit from parent',\n  },\n};\n\nconst Template = ({\n  placeholder,\n  disabled,\n  readonly,\n  label,\n  labelPosition,\n  state,\n  helper,\n  maxLength,\n  modeVariant,\n  rows,\n}) => {\n  const maxlength = maxLength > 0 ? `max-length=\"${maxLength}\"` : '';\n  const stateValue = state.toLowerCase();\n  const labelPosLookup = {\n    None: 'no-label',\n    Inside: 'inside',\n    Outside: 'outside',\n  };\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n    .demo-wrapper {\n      width: 400px;\n    }\n  </style>\n\n  <div class=\"demo-wrapper\">\n        <sdds-textarea\n          rows=\"${rows}\"\n          state=\"${stateValue}\"\n          label=\"${label}\"\n          helper=\"${helper}\"\n          ${\n            modeVariant !== 'Inherit from parent'\n              ? `mode-variant=\"${modeVariant.toLowerCase()}\"`\n              : ''\n          }\n          label-position=\"${labelPosLookup[labelPosition]}\"\n          ${disabled ? 'disabled' : ''}\n          ${readonly ? 'read-only' : ''}\n          placeholder=\"${placeholder}\"\n          ${maxlength}>\n        </sdds-textarea>\n  </div>\n  <!-- Script tag for demo purposes -->\n  <script>\n    textElement = document.querySelector('sdds-textarea')\n\n    textElement.addEventListener('sddsFocus',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsBlur',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsInput',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsChange',(event) => {\n      console.log(event)\n    })\n  </script>\n  `);\n};\n\nexport const Default = Template.bind({});\n"]}
+{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Textarea',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    state: {\n      name: 'State',\n      description: 'Switches between success and error state.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Success', 'Error'],\n      table: {\n        defaultValue: { summary: 'default' },\n      },\n    },\n    label: {\n      name: 'Label text',\n      description: 'Sets the label text.',\n      control: {\n        type: 'text',\n      },\n    },\n    labelPosition: {\n      name: 'Label position',\n      description: 'Sets the label text position.',\n      control: {\n        type: 'radio',\n      },\n      options: ['No label', 'Inside', 'Outside'],\n      table: {\n        defaultValue: { summary: 'no-label' },\n      },\n    },\n    placeholder: {\n      name: 'Placeholder',\n      description: 'Sets the placeholder text.',\n      control: {\n        type: 'text',\n      },\n    },\n    helper: {\n      name: 'Helper text',\n      description: 'Sets the helper text.',\n      control: {\n        type: 'text',\n      },\n    },\n    rows: {\n      name: 'Rows',\n      description: 'Sets the number of rows.',\n      control: {\n        type: 'number',\n      },\n    },\n    maxLength: {\n      name: 'Max length',\n      description: 'Sets a maximum value of how long the text can be.',\n      control: {\n        type: 'number',\n      },\n    },\n    noMinWidth: {\n      name: 'No minimum width',\n      description: 'Enables component to shrink below 208px which is the default width.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    readonly: {\n      name: 'Read only',\n      description: 'Sets the textarea to read-only state.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the textarea.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    state: 'Default',\n    label: 'Label',\n    labelPosition: 'No label',\n    placeholder: 'Placeholder',\n    helper: '',\n    rows: 5,\n    maxLength: 0,\n    noMinWidth: false,\n    readonly: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  state,\n  label,\n  labelPosition,\n  placeholder,\n  helper,\n  rows,\n  maxLength,\n  noMinWidth,\n  readonly,\n  disabled,\n}) => {\n  const maxlength = maxLength > 0 ? `max-length=\"${maxLength}\"` : '';\n  const stateValue = state.toLowerCase();\n  const labelPosLookup = {\n    'No label': 'no-label',\n    'Inside': 'inside',\n    'Outside': 'outside',\n  };\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n    .demo-wrapper {\n      width: 400px;\n    }\n  </style>\n\n  <div class=\"demo-wrapper\">\n        <sdds-textarea\n          rows=\"${rows}\"\n          state=\"${stateValue}\"\n          label=\"${label}\"\n          helper=\"${helper}\"\n          ${\n            modeVariant !== 'Inherit from parent'\n              ? `mode-variant=\"${modeVariant.toLowerCase()}\"`\n              : ''\n          }\n          label-position=\"${labelPosLookup[labelPosition]}\"\n          ${disabled ? 'disabled' : ''}\n          ${readonly ? 'read-only' : ''}\n          ${noMinWidth ? 'no-min-width' : ''}\n          placeholder=\"${placeholder}\"\n          ${maxlength}>\n        </sdds-textarea>\n  </div>\n  <!-- Script tag for demo purposes -->\n  <script>\n    textElement = document.querySelector('sdds-textarea')\n\n    textElement.addEventListener('sddsFocus',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsBlur',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsInput',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsChange',(event) => {\n      console.log(event)\n    })\n  </script>\n  `);\n};\n\nexport const Default = Template.bind({});\n"]}

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;
 }