@scania/tegel 0.0.1-beta.1 → 0.0.1-beta.3

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

@@ -1,149 +0,0 @@
-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',
-      },
-    },
-    disabled: {
-      description: 'Set textfield to disabled state',
-      name: 'Disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    readonly: {
-      description: 'Set textfield to disabled 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'],
-    },
-    variant: {
-      name: 'Mode Variant',
-      description: 'The variant of the textarea',
-      control: {
-        type: 'radio',
-      },
-      options: ['Primary', 'Secondary'],
-    },
-  },
-  args: {
-    placeholder: 'Placeholder',
-    disabled: false,
-    readonly: false,
-    label: 'Label',
-    labelPosition: 'None',
-    helper: '',
-    maxLength: 0,
-    rows: 5,
-    state: 'Default',
-    variant: 'Secondary',
-  },
-};
-const Template = ({ placeholder, disabled, readonly, label, labelPosition, state, helper, maxLength, rows, variant, }) => {
-  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
-  const variantValue = variant === 'Primary' ? 'primary' : 'secondary';
-  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}"
-          mode-variant="${variantValue}"
-          helper="${helper}"
-          label-position="${labelPosLookup[labelPosition]}"
-          ${disabled ? 'disabled' : ''}
-          ${readonly ? 'read-only' : ''}
-          placeholder="${placeholder}"
-          ${maxlength}>
-        </sdds-textarea>
-  </div>
-  `);
-};
-export const Default = Template.bind({});
-Default.args = {};

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

@@ -1,494 +0,0 @@
-:root,
-.sdds-theme-light {
-  --sdds-textfield-color: var(--sdds-grey-868);
-  --sdds-textfield-bg: var(--sdds-white);
-  --sdds-textfield-border-bottom: var(--sdds-grey-400);
-  --sdds-textfield-placeholder: var(--sdds-grey-500);
-  --sdds-textfield-border-bottom-hover: var(--sdds-grey-600);
-  --sdds-textfield-disabled-bg: var(--sdds-white);
-  --sdds-textfield-disabled-color: var(--sdds-grey-400);
-  --sdds-textfield-disabled-placeholder: var(--sdds-grey-400);
-  --sdds-textfield-disabled-label: var(--sdds-grey-400);
-  --sdds-textfield-disabled-ps-color: 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-success: var(--sdds-grey-800);
-  --sdds-textfield-border-bottom-error: var(--sdds-red-500);
-  --sdds-textfield-helper-error: var(--sdds-red-500);
-  --sdds-textfield-bar-error: var(--sdds-red-500);
-  --sdds-textfield-icon-error: var(--sdds-red-500);
-  --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-textarea-border-bottom: var(--sdds-grey-400);
-  --sdds-textarea-border-bottom-hover: var(--sdds-grey-600);
-  --sdds-textfield-on-white-bg: var(--sdds-grey-50);
-}
-
-.sdds-theme-dark {
-  --sdds-textfield-color: var(--sdds-grey-868);
-  --sdds-textfield-bg: var(--sdds-red);
-  --sdds-textfield-border-bottom: var(--sdds-grey-400);
-  --sdds-textfield-placeholder: var(--sdds-grey-500);
-  --sdds-textfield-border-bottom-hover: var(--sdds-grey-600);
-  --sdds-textfield-disabled-bg: var(--red-white);
-  --sdds-textfield-disabled-color: var(--sdds-grey-400);
-  --sdds-textfield-disabled-placeholder: var(--sdds-grey-400);
-  --sdds-textfield-disabled-label: var(--sdds-grey-400);
-  --sdds-textfield-disabled-ps-color: 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-success: var(--sdds-grey-800);
-  --sdds-textfield-border-bottom-error: var(--sdds-red-500);
-  --sdds-textfield-helper-error: var(--sdds-red-500);
-  --sdds-textfield-bar-error: var(--sdds-red-500);
-  --sdds-textfield-icon-error: var(--sdds-red-500);
-  --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-textarea-border-bottom: var(--sdds-grey-400);
-  --sdds-textarea-border-bottom-hover: var(--sdds-grey-600);
-  --sdds-textfield-on-white-bg: var(--sdds-grey-50);
-}
-
-.sdds-on-white-bg {
-  --sdds-textfield-bg: var(--sdds-textfield-on-white-bg);
-}
-
-.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-bg);
-  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-disabled-bg);
-  color: var(--sdds-textfield-disabled-color);
-}
-.sdds-textfield-input:disabled::placeholder {
-  color: var(--sdds-textfield-disabled-placeholder);
-}
-.sdds-textfield-input:disabled ~ .sdds-textfield-label-inside {
-  color: var(--sdds-textfield-disabled-label);
-}
-
-.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-bg);
-  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-disabled-bg);
-  color: var(--sdds-textfield-disabled-color);
-}
-.sdds-textfield-input-md:disabled::placeholder {
-  color: var(--sdds-textfield-disabled-placeholder);
-}
-.sdds-textfield-input-md:disabled ~ .sdds-textfield-label-inside {
-  color: var(--sdds-textfield-disabled-label);
-}
-
-.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-bg);
-  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-disabled-bg);
-  color: var(--sdds-textfield-disabled-color);
-}
-.sdds-textfield-input-sm:disabled::placeholder {
-  color: var(--sdds-textfield-disabled-placeholder);
-}
-.sdds-textfield-input-sm:disabled ~ .sdds-textfield-label-inside {
-  color: var(--sdds-textfield-disabled-label);
-}
-
-.sdds-textfield-container {
-  border-radius: 4px 4px 0 0;
-  display: flex;
-  position: relative;
-  height: 56px;
-  box-sizing: border-box;
-  background-color: var(--sdds-textfield-bg);
-  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;
-  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 {
-  /* slot[name="sdds-prefix"]::slotted(*),
-  slot[name="sdds-suffix"]::slotted(*) {
-    color: var(--sdds-textfield-disabled-ps-color);
-  }
-  slot[name="sdds-label"]::slotted(*) {
-    color: var(--sdds-textfield-disabled-label);
-  } */
-}
-.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-disabled-ps-color);
-}
-.sdds-form-textfield-disabled .sdds-textfield-label-outside > * {
-  color: var(--sdds-textfield-disabled-label);
-}
-
-.sdds-textfield-icon__readonly {
-  display: none;
-  position: absolute;
-  right: 18px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.sdds-textfield-icon__readonly-label {
-  display: none;
-  position: absolute;
-  right: 18px;
-  bottom: -24px;
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  padding: 8px;
-  color: var(--sdds-white);
-  background-color: var(--sdds-grey-800);
-  white-space: nowrap;
-  border-radius: 4px 0 4px 4px;
-}
-
-.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-readonly .sdds-textfield-container {
-  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;
-  flex-wrap: nowrap;
-}
-.sdds-textfield-helper-error-state svg {
-  margin-right: 8px;
-}
-
-.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);
-}