@energie360/ui-library 0.1.16 → 0.1.18

package/dist/elements/form.css

@@ -0,0 +1,170 @@
+/* easeOutCubic */
+/* prettier-ignore */
+.form .form__messages {
+  display: none;
+}
+.form .form__title {
+  font-size: var(--e-type-size-800);
+  line-height: var(--e-type-line-height-800);
+  letter-spacing: 0.025rem;
+  font-weight: var(--e-type-weight-strong);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--e-c-primary-01-500);
+}
+@media (max-width: 1020px) {
+  .form .form__title {
+    font-size: var(--e-type-size-700);
+    line-height: var(--e-type-line-height-700);
+    letter-spacing: 0.025rem;
+    font-weight: var(--e-type-weight-strong);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+.form .form__lead {
+  font-size: var(--e-type-size-200);
+  line-height: var(--e-type-line-height-200);
+  letter-spacing: 0.01875rem;
+  font-weight: var(--e-type-weight-weak);
+}
+.form .form__lead .form__subtitle-info {
+  color: var(--e-c-secondary-01-900);
+  margin-left: var(--e-space-1);
+}
+.form .form__lead .form__subtitle-info e-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.form .form__title + .form__lead {
+  font-size: var(--e-type-size-300);
+  line-height: var(--e-type-line-height-300);
+  letter-spacing: 0.01875rem;
+}
+@media (max-width: 1020px) {
+  .form .form__title + .form__lead {
+    font-size: var(--e-type-size-200);
+    line-height: var(--e-type-line-height-200);
+    letter-spacing: 0.01875rem;
+  }
+}
+.form .form__subtitle {
+  font-size: var(--e-type-size-300);
+  line-height: var(--e-type-line-height-300);
+  letter-spacing: 0.01875rem;
+  font-weight: var(--e-type-weight-strong);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--e-c-primary-01-500);
+}
+.form .form__subtitle .form__subtitle-info {
+  color: var(--e-c-secondary-01-900);
+  margin-left: var(--e-space-1);
+}
+.form .form__subtitle .form__subtitle-info e-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.form .form__cta-group {
+  display: flex;
+  grid-gap: var(--e-space-5);
+}
+@media (max-width: 740px) {
+  .form .form__cta-group {
+    flex-direction: column;
+  }
+}
+.form .form__title + .form__lead,
+.form .form__subtitle + .form__lead {
+  margin-top: var(--e-space-3);
+}
+@media (max-width: 1020px) {
+  .form .form__title + .form__lead,
+  .form .form__subtitle + .form__lead {
+    margin-top: var(--e-space-1_5);
+  }
+}
+.form .form__lead-row + * {
+  margin-top: var(--e-space-5);
+}
+@media (max-width: 1020px) {
+  .form .form__lead-row + * {
+    margin-top: var(--e-space-3);
+  }
+}
+.form .form__subtitle-row + *,
+.form .form__lead-row.form__subtitle-row + * {
+  margin-top: var(--e-space-6);
+}
+@media (max-width: 1020px) {
+  .form .form__subtitle-row + *,
+  .form .form__lead-row.form__subtitle-row + * {
+    margin-top: var(--e-space-3);
+  }
+}
+.form .form__input-row + .form__input-row,
+.form .form__title-row + *,
+.form *:not(legend) + .form__lead-row {
+  margin-top: var(--e-space-10);
+}
+@media (max-width: 1020px) {
+  .form .form__input-row + .form__input-row,
+  .form .form__title-row + *,
+  .form *:not(legend) + .form__lead-row {
+    margin-top: var(--e-space-6);
+  }
+}
+.form .form__input-row.form__input-row--compact + .form__input-row.form__input-row--compact {
+  margin-top: var(--e-space-6);
+}
+.form *:not(legend) + .form__title-row,
+.form *:not(legend) + .form__cta-row,
+.form *:not(legend) + .form__subtitle-row {
+  margin-top: var(--e-space-16);
+}
+@media (max-width: 1020px) {
+  .form *:not(legend) + .form__title-row,
+  .form *:not(legend) + .form__cta-row,
+  .form *:not(legend) + .form__subtitle-row {
+    margin-top: var(--e-space-10);
+  }
+}
+@media (max-width: 1020px) {
+  .form .form__input-col + .form__input-col {
+    margin-top: var(--e-space-6);
+  }
+}
+.form .form__messages-row {
+  display: none;
+  margin-top: var(--e-space-10);
+}
+.form .form__cookiebot-message {
+  margin-bottom: var(--e-space-6);
+}
+.form.form--has-general-error .form__messages-row,
+.form.form--has-general-error .form__messages {
+  display: block;
+}
+.form.form--hide-form-elements > *:not(.success-screen) {
+  display: none;
+}
+.form.form--is-submitting .form-row:not(.form__cta-row) {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.form .form__recaptcha {
+  font-size: 0.625rem;
+  line-height: 1.5;
+  margin-top: var(--e-space-6);
+  color: var(--e-c-mono-700);
+}
+.form .form__recaptcha a {
+  color: var(--e-c-primary-01-700);
+  text-underline-offset: var(--e-space-1);
+}
+
+.grecaptcha-badge {
+  visibility: hidden;
+}
+
+/*# sourceMappingURL=form.css.map */

package/dist/elements/form.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../elements/form/form.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACFE;EACE;;AAGF;ECoCA;EACA;EAGE;EAMA;EAKE;EACA;EDjDF;;ACWF;EDdA;ICoCA;IACA;IAGE;IAMA;IAKE;IACA;;;AD1CJ;EC0BA;EACA;EAKE;EAIA;;ADjCA;EACE;EACA;;AAEA;EACE;EACA;;AAKN;ECYA;EACA;EAKE;;AA5BF;EDUA;ICYA;IACA;IAKE;;;ADVF;ECIA;EACA;EAGE;EAMA;EAKE;EACA;EDjBF;;AAEA;EACE;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;;ACpCF;EDkCA;IAKI;;;AAKJ;AAAA;EAEE;;AC9CF;ED4CA;AAAA;IAKI;;;AAQJ;EACE;;AC1DF;EDyDA;IAII;;;AAIJ;AAAA;EAEE;;ACnEF;EDiEA;AAAA;IAKI;;;AAIJ;AAAA;AAAA;EAGE;;AC7EF;ED0EA;AAAA;AAAA;IAMI;;;AAIJ;EACE;;AAGF;AAAA;AAAA;EAGE;;AC3FF;EDwFA;AAAA;AAAA;IAMI;;;AC9FJ;EDkGA;IAEI;;;AAIJ;EACE;EACA;;AAGF;EACE;;AASA;AAAA;EAEE;;AAKF;EACE;;AAKF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE","file":"form.css"}

package/dist/layout/form-grid.css

@@ -0,0 +1,184 @@
+/* easeOutCubic */
+/* prettier-ignore */
+/**
+Helper to colculate col width in %.
+Looks complicated because we use grid-gap on the row, which takes away from available width.
+ */
+/**
+Mixin to create a grid column cell.
+
+$cols: Column width of cell.
+$columns: Grid size (in columns). Default is set by global variable $grid-columns (defined via design token).
+ */
+.form-grid {
+  width: 100%;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 2.6315789474%;
+}
+@media (max-width: 1020px) {
+  .form-row {
+    grid-gap: 2.5531914894%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row {
+    grid-gap: 3.6363636364%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row {
+    grid-gap: 4.1666666667%;
+  }
+}
+.form-row .form-col {
+  flex: 0 0 48.6842105263%;
+  max-width: 48.6842105263%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col {
+    flex: 0 0 48.7234042553%;
+    max-width: 48.7234042553%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col {
+    flex: 0 0 48.1818181818%;
+    max-width: 48.1818181818%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col {
+    flex: 0 0 47.9166666667%;
+    max-width: 47.9166666667%;
+  }
+}
+.form-row .form-col-1\/4 {
+  flex: 0 0 23.0263157895%;
+  max-width: 23.0263157895%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col-1\/4 {
+    flex: 0 0 23.085106383%;
+    max-width: 23.085106383%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col-1\/4 {
+    flex: 0 0 22.2727272727%;
+    max-width: 22.2727272727%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col-1\/4 {
+    flex: 0 0 21.875%;
+    max-width: 21.875%;
+  }
+}
+.form-row .form-col-2\/4 {
+  flex: 0 0 48.6842105263%;
+  max-width: 48.6842105263%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col-2\/4 {
+    flex: 0 0 48.7234042553%;
+    max-width: 48.7234042553%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col-2\/4 {
+    flex: 0 0 48.1818181818%;
+    max-width: 48.1818181818%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col-2\/4 {
+    flex: 0 0 47.9166666667%;
+    max-width: 47.9166666667%;
+  }
+}
+.form-row .form-col-3\/4 {
+  flex: 0 0 74.3421052632%;
+  max-width: 74.3421052632%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col-3\/4 {
+    flex: 0 0 74.3617021277%;
+    max-width: 74.3617021277%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col-3\/4 {
+    flex: 0 0 74.0909090909%;
+    max-width: 74.0909090909%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col-3\/4 {
+    flex: 0 0 73.9583333333%;
+    max-width: 73.9583333333%;
+  }
+}
+.form-row .form-col-4\/4 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col-4\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col-4\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col-4\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 1020px) {
+  .form-row .form-col,
+  .form-row .form-col-1\/4,
+  .form-row .form-col-2\/4,
+  .form-row .form-col-3\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 1020px) and (max-width: 1020px) {
+  .form-row .form-col,
+  .form-row .form-col-1\/4,
+  .form-row .form-col-2\/4,
+  .form-row .form-col-3\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 1020px) and (max-width: 740px) {
+  .form-row .form-col,
+  .form-row .form-col-1\/4,
+  .form-row .form-col-2\/4,
+  .form-row .form-col-3\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 1020px) and (max-width: 520px) {
+  .form-row .form-col,
+  .form-row .form-col-1\/4,
+  .form-row .form-col-2\/4,
+  .form-row .form-col-3\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
+/*# sourceMappingURL=form-grid.css.map */

package/dist/layout/form-grid.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/grid/grid.mixin.scss","../../layout/form-grid/form-grid.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACFA;AAAA;AAAA;AAAA;AA0BA;AAAA;;AAAA;AAAA;AAAA;ACzBA;EACE;;;AAGF;EDIE;EACA;EACA,UFgBgB;;AIThB;EDbF;IDSI,UFca;;;AIVf;EDbF;IDaI,UFWY;;;AIXd;EDbF;IDiBI,UFQY;;;AGtBd;ED2BA;EACA,WAHY;;AEfZ;EDVA;IDiCE;IACA,WAHW;;;AErBb;EDVA;IDwCE;IACA,WAHU;;;AE5BZ;EDVA;ID+CE;IACA,WAHU;;;ACxCZ;EDsBA;EACA,WAHY;;AEfZ;EDLA;ID4BE;IACA,WAHW;;;AErBb;EDLA;IDmCE;IACA,WAHU;;;AE5BZ;EDLA;ID0CE;IACA,WAHU;;;ACpCZ;EDkBA;EACA,WAHY;;AEfZ;EDDA;IDwBE;IACA,WAHW;;;AErBb;EDDA;ID+BE;IACA,WAHU;;;AE5BZ;EDDA;IDsCE;IACA,WAHU;;;AC/BZ;EDaA;EACA,WAHY;;AEfZ;EDIA;IDmBE;IACA,WAHW;;;AErBb;EDIA;ID0BE;IACA,WAHU;;;AE5BZ;EDIA;IDiCE;IACA,WAHU;;;AC3BZ;EDSA;EACA,WAHY;;AEfZ;EDQA;IDeE;IACA,WAHW;;;AErBb;EDQA;IDsBE;IACA,WAHU;;;AE5BZ;EDQA;ID6BE;IACA,WAHU;;;AEnCZ;EDYA;AAAA;AAAA;AAAA;IDKA;IACA,WAHY;;;AEfZ;EDYA;AAAA;AAAA;AAAA;IDWE;IACA,WAHW;;;AErBb;EDYA;AAAA;AAAA;AAAA;IDkBE;IACA,WAHU;;;AE5BZ;EDYA;AAAA;AAAA;AAAA;IDyBE;IACA,WAHU","file":"form-grid.css"}

package/dist/layout/split.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/container/container.scss","../../base/abstracts/_mixins.scss","../../layout/split/split.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACsBA;EAtBE;EACA;EACA;EACA;EACA;;ACYA;EDMF;IAfI;IACA;;;ACQF;EDMF;IAVI;IACA;;;ACGF;EDMF;IALI;IACA;;;;AEjBJ;EACE;EACA;EACA;EACA;EACA;;ADUA;ECfF;IAQI;IACA;IACA;IACA;IACA;IACA,qBACE;;;ADCJ;ECfF;IAmBI;IACA;;;;AAIJ;EACE;EACA;;ADXA;ECSF;IAKI;IACA;;;ADfF;ECSF;IAUI;IACA;IACA;;;;AAIJ;EACE;;AD1BA;ECyBF;IAII;IACA;;;AD9BF;ECyBF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;;AD1CA;ECsCF;IAOI;IAIA;IACA;;;ADlDF;ECsCF;IAgBI;IACA;IACA;IACA;IACA;IACA;;;AD3DF;ECsCF;IAyBI;IACA;IACA;;;;AAIJ;EACE;;ADtEA;ECqEF;IAII;;;ADzEF;ECqEF;IAQI","file":"split.css"}
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/container/container.scss","../../base/abstracts/_mixins.scss","../../layout/split/split.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACwCA;EAxCE;EACA;EACA;EACA;EACA;;ACYA;EDwBF;IAjCI;IACA;;;ACQF;EDwBF;IA5BI;IACA;;;ACGF;EDwBF;IAvBI;IACA;;;;AEjBJ;EACE;EACA;EACA;EACA;EACA;;ADUA;ECfF;IAQI;IACA;IACA;IACA;IACA;IACA,qBACE;;;ADCJ;ECfF;IAmBI;IACA;;;;AAIJ;EACE;EACA;;ADXA;ECSF;IAKI;IACA;;;ADfF;ECSF;IAUI;IACA;IACA;;;;AAIJ;EACE;;AD1BA;ECyBF;IAII;IACA;;;AD9BF;ECyBF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;;AD1CA;ECsCF;IAOI;IAIA;IACA;;;ADlDF;ECsCF;IAgBI;IACA;IACA;IACA;IACA;IACA;;;AD3DF;ECsCF;IAyBI;IACA;IACA;;;;AAIJ;EACE;;ADtEA;ECqEF;IAII;;;ADzEF;ECqEF;IAQI","file":"split.css"}

package/elements/button/_button-plain-small-spaceless.scss

@@ -0,0 +1,10 @@
+@use '../../base/abstracts' as a;
+@use './button-plain' as *;
+
+@mixin button-plain-small-spaceless {
+  @include button-plain;
+  @include a.type(100, strong);
+
+  padding: 0;
+  border-radius: var(--e-brd-radius-1); // For nicer focus outline.
+}

package/elements/button/button.scss

@@ -4,6 +4,7 @@
 @use 'button-plain' as *;
 @use 'button-plain-spaceless' as *;
 @use 'button-plain-small' as *;
+@use 'button-plain-small-spaceless' as *;
 @use 'button-filled-inverted' as *;
 @use 'button-outlined-inverted' as *;
 @use 'button-secondary-outlined' as *;
@@ -41,6 +42,10 @@
     @include button-plain-small;
   }
 
+  &.plain-small-spaceless {
+    @include button-plain-small-spaceless;
+  }
+
   &.filled-inverted {
     @include button-filled-inverted;
   }
@@ -70,4 +75,31 @@
       --icon-fill-color: transparent;
     }
   }
+
+  // Modifiers
+  &.nowrap {
+    white-space: nowrap;
+  }
+
+  // In some cases we need to force full width of a button.
+  // Is mostly the case when the button is wrapped by another element.
+  &.full-width {
+    width: 100%;
+  }
+
+  &.hide-label-lg {
+    @include a.bp(lg) {
+      .button__label {
+        @include a.visually-hidden;
+      }
+    }
+  }
+
+  &.hide-label-m {
+    @include a.bp(m) {
+      .button__label {
+        @include a.visually-hidden;
+      }
+    }
+  }
 }

package/elements/button/u-button.vue

@@ -12,6 +12,10 @@ interface ButtonProps {
   target?: string
   variant?: string
   asSpan?: boolean
+  nowrap?: boolean
+  fullWidth?: boolean
+  hideLabelM?: boolean
+  hideLabelLg?: boolean
 }
 
 const { asSpan = false } = defineProps<ButtonProps>()
@@ -21,20 +25,59 @@ const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
 
 <template>
   <template v-if="href">
-    <a :class="['button', variant]" :href :target>
+    <a
+      :class="[
+        'button',
+        variant,
+        {
+          nowrap,
+          'full-width': fullWidth,
+          'hide-label-m': hideLabelM,
+          'hide-label-lg': hideLabelLg,
+        },
+      ]"
+      :href
+      :target
+      v-bind="$attrs"
+    >
       <UIcon v-if="icon" :name="icon"></UIcon>
-      <slot>{{ label }}</slot>
+
+      <span v-if="hideLabelM || hideLabelLg" class="button__label">
+        <slot>{{ label }}</slot>
+      </span>
+
+      <template v-else>
+        <slot>{{ label }}</slot>
+      </template>
     </a>
   </template>
 
   <template v-else>
     <component
       :is="buttonTag"
-      :class="['button', variant, { loading: loading, disabled }]"
+      :class="[
+        'button',
+        variant,
+        {
+          nowrap,
+          'full-width': fullWidth,
+          'hide-label-m': hideLabelM,
+          'hide-label-lg': hideLabelLg,
+          loading: loading,
+          disabled,
+        },
+      ]"
       :disabled="disabled || null"
     >
       <UIcon v-if="icon" :name="icon" />
-      <slot>{{ label }}</slot>
+
+      <span v-if="hideLabelM || hideLabelLg" class="button__label">
+        <slot>{{ label }}</slot>
+      </span>
+
+      <template v-else>
+        <slot>{{ label }}</slot>
+      </template>
 
       <span v-if="loading" class="button__loader">
         <ULoader />

package/elements/form/form.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .form {
   .form__messages {

package/elements/form-field/form-field-base.scss

@@ -23,6 +23,10 @@
       font-size a.$trs-default,
       color a.$trs-default,
       line-height a.$trs-default;
+    white-space: nowrap;
+    max-width: calc(100% - var(--e-space-6));
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .control {

package/elements/form-field/form-field-prefix-suffix.scss

@@ -48,6 +48,10 @@
     transform: translateY(-50%);
   }
 
+  .suffix-action {
+    display: flex;
+  }
+
   .suffix-text {
     @include a.type(200);
   }
@@ -70,6 +74,7 @@
     }
   }
 
+  &:has(.suffix-action),
   &:has(.suffix-text) {
     // A suffix only makes sense for an <input>. That's why we select only input here.
     .control input {

package/elements/select/u-select.vue

@@ -51,7 +51,7 @@ const onHoverOut = () => {
 }
 
 const hasHelpText = computed(() => {
-  return !!helpText || !!slots.helpText || required
+  return !!helpText || !!slots.helpText || !required
 })
 
 const needsHelpTextSpacer = computed(() => {
@@ -70,7 +70,7 @@ const needsHelpTextSpacer = computed(() => {
         hover: isHovering,
         'float-label': true,
         'has-error': error,
-        'show-help-text': !required || hasHelpText,
+        'show-help-text': hasHelpText,
       },
     ]"
     @mouseenter="onHover"
@@ -111,10 +111,10 @@ const needsHelpTextSpacer = computed(() => {
     </div>
 
     <div class="help-text">
-      <span class="optional-text"
-        >{{ getTranslation('optional')
-        }}<span v-if="needsHelpTextSpacer" v-html="spacer"></span></span
-      ><slot name="helpText">{{ helpText }}</slot>
+      <span class="optional-text">
+        {{ getTranslation('optional') }}<span v-if="needsHelpTextSpacer" v-html="spacer"></span>
+      </span>
+      <slot name="helpText">{{ helpText }}</slot>
     </div>
 
     <div class="error-messages-container">

package/elements/text-field/text-field.scss

@@ -28,4 +28,19 @@
       color: var(--e-c-secondary-01-700);
     }
   }
+
+  // Type: Search
+  .cancel-search {
+    display: block;
+    border-radius: var(--e-brd-radius-1);
+    color: var(--e-c-primary-01-900);
+    visibility: hidden;
+    pointer-events: none;
+
+    &.visible {
+      visibility: visible;
+      pointer-events: auto;
+      cursor: pointer;
+    }
+  }
 }

package/elements/text-field/text-field.types.ts

@@ -4,4 +4,5 @@ export enum TextFieldTypes {
   email = 'email',
   password = 'password',
   date = 'date',
+  search = 'search',
 }

package/elements/text-field/u-text-field.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import UIcon from '../icon/u-icon.vue'
 import { TextFieldTypes } from './text-field.types'
-import { computed, ref, useSlots, useTemplateRef, useId, watch } from 'vue'
+import { computed, ref, useId, useSlots, useTemplateRef, watch } from 'vue'
 import { FormFieldBase } from '../form-field/form-field.types'
 import { getTranslation } from '../../utils/translations/translate'
 
@@ -95,6 +95,10 @@ const passwordA11yText = computed(() => {
   return _inputType.value === TextFieldTypes.password ? 'showPassword' : 'hidePassword'
 })
 
+const onCancelSearch = () => {
+  model.value = ''
+}
+
 watch(
   () => type,
   () => {
@@ -129,9 +133,9 @@ watch(
   >
     <div class="wrapper">
       <div class="label">
-        <slot name="label">
-          <label :for="inputId">{{ label }}</label>
-        </slot>
+        <label :for="inputId">
+          <slot name="label">{{ label }}</slot>
+        </label>
       </div>
 
       <div class="control">
@@ -165,14 +169,36 @@ watch(
         </button>
       </span>
 
+      <!-- TYPE: DATE -->
+      <span v-if="type === TextFieldTypes.date" class="suffix-icon">
+        <UIcon name="calendar" />
+      </span>
+
+      <!-- TYPE: SEARCH -->
+      <span v-if="type === TextFieldTypes.search" class="prefix-icon">
+        <UIcon name="search" />
+      </span>
+
+      <span v-if="type === TextFieldTypes.search" class="suffix-action">
+        <button
+          type="button"
+          :class="['cancel-search', { visible: hasValue && (isHovering || isFocused) }]"
+          tabindex="-1"
+          @click="onCancelSearch"
+        >
+          <span class="visually-hidden">{{ getTranslation('cancelSearch') }}</span>
+          <UIcon name="close-circle-filled"></UIcon>
+        </button>
+      </span>
+
       <!-- UNIT -->
       <span v-if="unit" class="suffix-text">
         {{ unit }}
       </span>
 
-      <!-- DATE -->
-      <span v-if="type === TextFieldTypes.date" class="suffix-icon">
-        <UIcon name="calendar"></UIcon>
+      <!-- ACTION -->
+      <span v-if="!!slots.action" class="suffix-action custom-action">
+        <slot name="action"></slot>
       </span>
     </div>
 
@@ -191,6 +217,16 @@ watch(
   </div>
 </template>
 
+<style scoped lang="scss" src="./text-field.scss"></style>
+
 <style scoped lang="scss">
-@use './text-field.scss';
+.suffix-action.custom-action {
+  :slotted(button) {
+    cursor: pointer;
+  }
+
+  :slotted(.icon) {
+    color: var(--e-c-secondary-05-700);
+  }
+}
 </style>