From 6050b837f931096feda8f09d3556b402ba0f5629 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?= <msso@fhi.no>
Date: Thu, 19 Mar 2026 09:47:23 +0100
Subject: [PATCH 01/15] Ikon venste side

---
 .../fhi-text-input.component.ts               | 59 +++++++++++++++----
 1 file changed, 48 insertions(+), 11 deletions(-)

diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index df159d3a..19611406 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -182,21 +182,45 @@ export class FhiTextInput extends LitElement {
     this._internals.setFormValue(this.value);
   }
 
+  private _handleLeftSlotChange(event: Event): void {
+    const nodes = (event.target as HTMLSlotElement).assignedNodes();
+    if (nodes.length !== 1) {
+      return;
+    }
+    const iconNode: Node = nodes[0];
+
+    if (
+      iconNode.nodeType === Node.ELEMENT_NODE &&
+      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')
+    ) {
+      const icon = iconNode as HTMLElement;
+      this._input.style.paddingLeft = '36px';
+      icon.setAttribute('size', '24px');
+      icon.setAttribute('color', 'var(--color-label-text)');
+    }
+  }
+
   render() {
     return html`
       ${this.label && html`<label for="input-element">${this.label}</label>`}
       ${this.helpText ? html`<p class="help-text">${this.helpText}</p>` : ''}
-      <input
-        id="input-element"
-        name=${ifDefined(this.name)}
-        placeholder=${ifDefined(this.placeholder)}
-        .value=${this.value}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        @keydown=${this.handleKeyDown}
-      />
+      <div class="input-container">
+        <input
+          id="input-element"
+          name=${ifDefined(this.name)}
+          placeholder=${ifDefined(this.placeholder)}
+          .value=${this.value}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @keydown=${this.handleKeyDown}
+        />
+        <div class="left-slot-container">
+          <slot name="left-icon" @slotchange=${this._handleLeftSlotChange}>
+          </slot>
+        </div>
+      </div>
       ${this.message ? html`<p class="message">${this.message}</p>` : ''}
     `;
   }
@@ -364,6 +388,19 @@ export class FhiTextInput extends LitElement {
         letter-spacing: var(--typography-help-text-letter-spacing);
         margin: 0 0 var(--dimension-help-text-margin-bottom) 0;
       }
+
+      .input-container {
+        height: var(--dimension-input-height);
+        position: relative;
+      }
+      .left-slot-container {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-left: 8px;
+        height: fit-content;
+      }
     }
 
     :host([disabled]) {

From daac42267a1cce28634d1739009c67291af2f575 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?= <msso@fhi.no>
Date: Thu, 19 Mar 2026 15:13:18 +0100
Subject: [PATCH 02/15] wip

---
 .../fhi-text-input.component.ts               | 21 ++++++++++++-------
 .../fhi-text-input/fhi-text-input.docs.mdx    |  6 ++++++
 .../fhi-text-input/fhi-text-input.stories.ts  | 10 +++++++++
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index 19611406..a418f22f 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -182,7 +182,7 @@ export class FhiTextInput extends LitElement {
     this._internals.setFormValue(this.value);
   }
 
-  private _handleLeftSlotChange(event: Event): void {
+  private _handleStartSlotChange(event: Event): void {
     const nodes = (event.target as HTMLSlotElement).assignedNodes();
     if (nodes.length !== 1) {
       return;
@@ -194,9 +194,8 @@ export class FhiTextInput extends LitElement {
       (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')
     ) {
       const icon = iconNode as HTMLElement;
-      this._input.style.paddingLeft = '36px';
+      this._input.style.paddingLeft = '40px';
       icon.setAttribute('size', '24px');
-      icon.setAttribute('color', 'var(--color-label-text)');
     }
   }
 
@@ -216,9 +215,8 @@ export class FhiTextInput extends LitElement {
           @input=${this.handleInput}
           @keydown=${this.handleKeyDown}
         />
-        <div class="left-slot-container">
-          <slot name="left-icon" @slotchange=${this._handleLeftSlotChange}>
-          </slot>
+        <div class="start-slot-container">
+          <slot name="start" @slotchange=${this._handleStartSlotChange}> </slot>
         </div>
       </div>
       ${this.message ? html`<p class="message">${this.message}</p>` : ''}
@@ -371,6 +369,10 @@ export class FhiTextInput extends LitElement {
         }
       }
 
+      ::slotted([slot='start']) {
+        color: var(--fhi-color-neutral-text-subtle);
+      }
+
       .message {
         margin: var(--dimension-message-margin-top) 0 0 0;
         color: var(--color-message-text);
@@ -392,14 +394,16 @@ export class FhiTextInput extends LitElement {
       .input-container {
         height: var(--dimension-input-height);
         position: relative;
+        width: fit-content;
       }
-      .left-slot-container {
+      .start-slot-container {
         position: absolute;
         left: 0;
         top: 50%;
         transform: translateY(-50%);
         margin-left: 8px;
         height: fit-content;
+        pointer-events: none;
       }
     }
 
@@ -443,6 +447,9 @@ export class FhiTextInput extends LitElement {
       .help-text {
         color: var(--color-help-text-text-error);
       }
+      ::slotted(*) {
+        color: var(--fhi-color-danger-text-subtle);
+      }
     }
   `;
 }
diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
index 1957ae00..f859dca0 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
@@ -29,6 +29,12 @@ Text Input lar brukere skrive inn data, slik som navn, telefonnumre og e-postadr
 Uttrykker at noe mangler eller er skrevet feil.
 <Canvas of={FhiTextInputStories.Error} />
 
+### Ikon
+
+Ikon kan brukes for å forsterke gjenkjennelighet og underbygge label. Det settes til venstre i feltet. 
+
+<Canvas of={FhiTextInputStories.WithIconFirst} />
+
 ### Form Controls
 #### `readonly`
 Gjør at feltet ikke kan endres. Feltet vil fortsatt kunne fokuseres og vil automatisk bli inkludert i FormData.
diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
index 7bc07f34..50eed889 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
@@ -6,8 +6,10 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { FhiStorybookMeta } from '../../../.storybook/fhi-meta';
 import { FhiTextInput } from './fhi-text-input.component';
+import { FhiIconUser } from '../icons/fhi-icon-user.component';
 
 new FhiTextInput();
+new FhiIconUser();
 
 const meta: FhiStorybookMeta<FhiTextInput> = {
   title: 'Komponenter/Text Input',
@@ -187,4 +189,12 @@ export const WithDisabledLabel: Story = {
   },
 };
 
+export const WithIconFirst: Story = {
+  name: 'Icon',
+  render: () =>
+    html` <fhi-text-input label="Brukernavn"
+      ><fhi-icon-user slot="start"></fhi-icon-user
+    ></fhi-text-input>`,
+};
+
 export default meta;

From c2065b15a436bf0b6905e0b3ade1a2105de5302f Mon Sep 17 00:00:00 2001
From: Daniel Nilsen <daniel.alexander.fermin.nilsen@fhi.no>
Date: Fri, 20 Mar 2026 18:10:59 +0100
Subject: [PATCH 03/15] make icon change color on hover and focus

---
 .../fhi-text-input/fhi-text-input.component.ts    | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index a418f22f..bd98c5b9 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -215,9 +215,7 @@ export class FhiTextInput extends LitElement {
           @input=${this.handleInput}
           @keydown=${this.handleKeyDown}
         />
-        <div class="start-slot-container">
-          <slot name="start" @slotchange=${this._handleStartSlotChange}> </slot>
-        </div>
+        <slot name="start" @slotchange=${this._handleStartSlotChange}> </slot>
       </div>
       ${this.message ? html`<p class="message">${this.message}</p>` : ''}
     `;
@@ -373,6 +371,11 @@ export class FhiTextInput extends LitElement {
         color: var(--fhi-color-neutral-text-subtle);
       }
 
+      input:hover ~ ::slotted([slot='start']),
+      input:focus ~ ::slotted([slot='start']) {
+        color: red;
+      }
+
       .message {
         margin: var(--dimension-message-margin-top) 0 0 0;
         color: var(--color-message-text);
@@ -396,7 +399,8 @@ export class FhiTextInput extends LitElement {
         position: relative;
         width: fit-content;
       }
-      .start-slot-container {
+      slot[name='start'] {
+        display: block;
         position: absolute;
         left: 0;
         top: 50%;
@@ -447,9 +451,6 @@ export class FhiTextInput extends LitElement {
       .help-text {
         color: var(--color-help-text-text-error);
       }
-      ::slotted(*) {
-        color: var(--fhi-color-danger-text-subtle);
-      }
     }
   `;
 }

From 5bf556d989ffa9a217f11b3bf357bc67a9a2ff8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?= <msso@fhi.no>
Date: Mon, 23 Mar 2026 14:00:02 +0100
Subject: [PATCH 04/15] =?UTF-8?q?Riktig=20farge=20p=C3=A5=20ikon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/fhi-text-input/fhi-text-input.component.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index bd98c5b9..43d47210 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -373,7 +373,10 @@ export class FhiTextInput extends LitElement {
 
       input:hover ~ ::slotted([slot='start']),
       input:focus ~ ::slotted([slot='start']) {
-        color: red;
+        color: var(--fhi-color-accent-text-subtle);
+      }
+      input:active ~ ::slotted([slot='start']) {
+        color: var(--fhi-color-accent-text-default);
       }
 
       .message {
@@ -451,6 +454,9 @@ export class FhiTextInput extends LitElement {
       .help-text {
         color: var(--color-help-text-text-error);
       }
+      ::slotted([slot='start']) {
+        color: var(--fhi-color-danger-text-subtle);
+      }
     }
   `;
 }

From 5d1063c3e0582585acc33e22d437b6b6f1ca2cb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?= <msso@fhi.no>
Date: Mon, 23 Mar 2026 15:13:32 +0100
Subject: [PATCH 05/15] Validering og dokumentasjon.

---
 .../fhi-text-input.component.ts               | 43 ++++++++++++++++---
 .../fhi-text-input/fhi-text-input.docs.mdx    |  3 ++
 .../fhi-text-input/fhi-text-input.stories.ts  | 10 +++++
 3 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index 43d47210..d0c5dc52 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -183,19 +183,35 @@ export class FhiTextInput extends LitElement {
   }
 
   private _handleStartSlotChange(event: Event): void {
-    const nodes = (event.target as HTMLSlotElement).assignedNodes();
-    if (nodes.length !== 1) {
-      return;
+    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];
+    if (
+      iconNode.nodeType === Node.ELEMENT_NODE &&
+      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')
+    ) {
+      const icon = iconNode as HTMLElement;
+      this._input.style.paddingLeft = '40px';
+      icon.setAttribute('size', '24px');
+    } else {
+      console.error(
+        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',
+      );
     }
-    const iconNode: Node = nodes[0];
+  }
+
+  private _handleEndSlotChange(event: Event): void {
+    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];
 
     if (
       iconNode.nodeType === Node.ELEMENT_NODE &&
       (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')
     ) {
       const icon = iconNode as HTMLElement;
-      this._input.style.paddingLeft = '40px';
+      this._input.style.paddingRight = '40px';
       icon.setAttribute('size', '24px');
+    } else {
+      console.error(
+        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',
+      );
     }
   }
 
@@ -216,6 +232,7 @@ export class FhiTextInput extends LitElement {
           @keydown=${this.handleKeyDown}
         />
         <slot name="start" @slotchange=${this._handleStartSlotChange}> </slot>
+        <slot name="end" @slotchange=${this._handleEndSlotChange}> </slot>
       </div>
       ${this.message ? html`<p class="message">${this.message}</p>` : ''}
     `;
@@ -379,6 +396,10 @@ export class FhiTextInput extends LitElement {
         color: var(--fhi-color-accent-text-default);
       }
 
+      ::slotted([slot='end']) {
+        color: var(--fhi-color-neutral-text-subtle);
+      }
+
       .message {
         margin: var(--dimension-message-margin-top) 0 0 0;
         color: var(--color-message-text);
@@ -402,6 +423,7 @@ export class FhiTextInput extends LitElement {
         position: relative;
         width: fit-content;
       }
+
       slot[name='start'] {
         display: block;
         position: absolute;
@@ -412,6 +434,17 @@ export class FhiTextInput extends LitElement {
         height: fit-content;
         pointer-events: none;
       }
+
+      slot[name='end'] {
+        display: block;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-right: 8px;
+        height: fit-content;
+        pointer-events: none;
+      }
     }
 
     :host([disabled]) {
diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
index f859dca0..f78a5c18 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
@@ -33,6 +33,9 @@ Uttrykker at noe mangler eller er skrevet feil.
 
 Ikon kan brukes for å forsterke gjenkjennelighet og underbygge label. Det settes til venstre i feltet. 
 
+I noen kontekster settes det til høyre, der ikonet har en handling assosiert til seg, slik som å åpne en datovelger, 
+nullstille verdien eller åpne en nedtrekksmeny. Dette kan også vurderes til å indikere validering, om svaret er gyldig eller ikke.
+
 <Canvas of={FhiTextInputStories.WithIconFirst} />
 
 ### Form Controls
diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
index 50eed889..4d9da545 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
@@ -34,6 +34,16 @@ const meta: FhiStorybookMeta<FhiTextInput> = {
         valueLocation: ['event.target.value'],
       },
     ],
+    slotTypes: [
+      {
+        name: 'start',
+        description: 'Ikon på venstre side i inputfeltet.',
+      },
+      {
+        name: 'end',
+        description: 'Ikon på høyre side i inputfeltet.',
+      },
+    ],
   },
   decorators: [story => html`<div style="max-width: 400px;">${story()}</div>`],
   render: args =>

From 138716f580c52f29d2796e2a4c055ae7c10e91d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?= <msso@fhi.no>
Date: Mon, 23 Mar 2026 16:00:49 +0100
Subject: [PATCH 06/15] Tokens og docs

---
 .../fhi-text-input.component.ts               |  8 +++----
 .../fhi-text-input/fhi-text-input.docs.mdx    |  2 +-
 .../fhi-text-input/fhi-text-input.stories.ts  | 22 +++++++++++++++----
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index d0c5dc52..0503a22d 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -189,8 +189,8 @@ export class FhiTextInput extends LitElement {
       (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')
     ) {
       const icon = iconNode as HTMLElement;
-      this._input.style.paddingLeft = '40px';
-      icon.setAttribute('size', '24px');
+      this._input.style.paddingLeft = 'var(--fhi-spacing-500)';
+      icon.setAttribute('size', '1.5rem');
     } else {
       console.error(
         'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',
@@ -206,8 +206,8 @@ export class FhiTextInput extends LitElement {
       (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')
     ) {
       const icon = iconNode as HTMLElement;
-      this._input.style.paddingRight = '40px';
-      icon.setAttribute('size', '24px');
+      this._input.style.paddingRight = 'var(--fhi-spacing-500)';
+      icon.setAttribute('size', '1.5rem');
     } else {
       console.error(
         'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',
diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
index f78a5c18..370e6d2d 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
@@ -36,7 +36,7 @@ Ikon kan brukes for å forsterke gjenkjennelighet og underbygge label. Det sette
 I noen kontekster settes det til høyre, der ikonet har en handling assosiert til seg, slik som å åpne en datovelger, 
 nullstille verdien eller åpne en nedtrekksmeny. Dette kan også vurderes til å indikere validering, om svaret er gyldig eller ikke.
 
-<Canvas of={FhiTextInputStories.WithIconFirst} />
+<Canvas of={FhiTextInputStories.WithIcon} />
 
 ### Form Controls
 #### `readonly`
diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
index 4d9da545..1ff5b38f 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
@@ -7,9 +7,11 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { FhiStorybookMeta } from '../../../.storybook/fhi-meta';
 import { FhiTextInput } from './fhi-text-input.component';
 import { FhiIconUser } from '../icons/fhi-icon-user.component';
+import { FhiIconSearch } from '../icons/fhi-icon-search.component';
 
 new FhiTextInput();
 new FhiIconUser();
+new FhiIconSearch();
 
 const meta: FhiStorybookMeta<FhiTextInput> = {
   title: 'Komponenter/Text Input',
@@ -199,12 +201,24 @@ export const WithDisabledLabel: Story = {
   },
 };
 
-export const WithIconFirst: Story = {
+export const WithIcon: Story = {
   name: 'Icon',
-  render: () =>
-    html` <fhi-text-input label="Brukernavn"
+  decorators: [
+    Story =>
+      html`<section
+        style="display: flex; gap: 2rem; justify-content: start; align-items: center;"
+      >
+        ${Story()}
+      </section>`,
+  ],
+  render: () => html`
+    <fhi-text-input label="Brukernavn"
       ><fhi-icon-user slot="start"></fhi-icon-user
-    ></fhi-text-input>`,
+    ></fhi-text-input>
+    <fhi-text-input label="Søk"
+      ><fhi-icon-search slot="end"></fhi-icon-search
+    ></fhi-text-input>
+  `,
 };
 
 export default meta;

From 7e6f3dafa4c16afcbab9f54099acdb77efb9cc30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?=
 <99345946+Masuso@users.noreply.github.com>
Date: Tue, 24 Mar 2026 13:00:56 +0100
Subject: [PATCH 07/15] Update
 packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx

Co-authored-by: Trygve Bernhardt <51702336+trybern@users.noreply.github.com>
---
 .../src/components/fhi-text-input/fhi-text-input.docs.mdx  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
index 370e6d2d..d91f6016 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
@@ -31,10 +31,11 @@ Uttrykker at noe mangler eller er skrevet feil.
 
 ### Ikon
 
-Ikon kan brukes for å forsterke gjenkjennelighet og underbygge label. Det settes til venstre i feltet. 
+Ikon kan settes til venstre i feltet for å gi visuelle signaler om hvilken data man etterspør. Noen eksempler kan være en konvolutt for e-postadresse, en nøkkel eller lås for passord og bruker for navn eller brukernavn. 
 
-I noen kontekster settes det til høyre, der ikonet har en handling assosiert til seg, slik som å åpne en datovelger, 
-nullstille verdien eller åpne en nedtrekksmeny. Dette kan også vurderes til å indikere validering, om svaret er gyldig eller ikke.
+Bruk ikon med omhu. Ethvert ikon er et nytt visuelt element som brukeren må forholde seg til. Det kan bli mange på skjermen samtidig, noe som kan føles unødvendig travelt ut. 
+
+Hvis ikonet skal være knyttet til en handling, settes det til høyre. Dette kan for eksempel være å la brukeren nullstille verdien eller vise og skjule passordet man skriver inn. Dette kan også vurderes til å indikere validering, om svaret er gyldig eller ikke.
 
 <Canvas of={FhiTextInputStories.WithIcon} />
 

From 59f17e4a171af72131a550a77b126df80e5fd0e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?= <msso@fhi.no>
Date: Thu, 26 Mar 2026 08:20:01 +0100
Subject: [PATCH 08/15] =?UTF-8?q?Styling=20og=20contorls=20p=C3=A5=20story?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fhi-text-input.component.ts               | 15 ++++---
 .../fhi-text-input/fhi-text-input.stories.ts  | 44 ++++++++++++++-----
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index 0503a22d..d5c7a610 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -388,11 +388,11 @@ export class FhiTextInput extends LitElement {
         color: var(--fhi-color-neutral-text-subtle);
       }
 
-      input:hover ~ ::slotted([slot='start']),
-      input:focus ~ ::slotted([slot='start']) {
+      input:not([disabled]):not([readonly]):hover ~ ::slotted([slot='start']),
+      input:not([disabled]):not([readonly]):focus ~ ::slotted([slot='start']) {
         color: var(--fhi-color-accent-text-subtle);
       }
-      input:active ~ ::slotted([slot='start']) {
+      input:not([disabled]):not([readonly]):active ~ ::slotted([slot='start']) {
         color: var(--fhi-color-accent-text-default);
       }
 
@@ -419,9 +419,7 @@ export class FhiTextInput extends LitElement {
       }
 
       .input-container {
-        height: var(--dimension-input-height);
         position: relative;
-        width: fit-content;
       }
 
       slot[name='start'] {
@@ -490,6 +488,13 @@ export class FhiTextInput extends LitElement {
       ::slotted([slot='start']) {
         color: var(--fhi-color-danger-text-subtle);
       }
+
+      input:not([disabled]):not([readonly]):hover ~ ::slotted([slot='start']) {
+        color: var(--fhi-color-danger-text-subtle);
+      }
+      input:not([disabled]):not([readonly]):focus ~ ::slotted([slot='start']) {
+        color: var(--fhi-color-danger-text-subtle);
+      }
     }
   `;
 }
diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
index 1ff5b38f..2c965f98 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
@@ -47,7 +47,14 @@ const meta: FhiStorybookMeta<FhiTextInput> = {
       },
     ],
   },
-  decorators: [story => html`<div style="max-width: 400px;">${story()}</div>`],
+  decorators: [
+    story =>
+      html`<div
+        style="max-width: 400px; display: flex; gap: 2rem; justify-content: start; align-items: center;"
+      >
+        ${story()}
+      </div>`,
+  ],
   render: args =>
     html`<fhi-text-input
       label=${ifDefined(args.label)}
@@ -203,19 +210,32 @@ export const WithDisabledLabel: Story = {
 
 export const WithIcon: Story = {
   name: 'Icon',
-  decorators: [
-    Story =>
-      html`<section
-        style="display: flex; gap: 2rem; justify-content: start; align-items: center;"
-      >
-        ${Story()}
-      </section>`,
-  ],
-  render: () => html`
-    <fhi-text-input label="Brukernavn"
+
+  parameters: {
+    controls: {
+      exclude: [
+        'name',
+        'value',
+        'label',
+        'message',
+        'help-text',
+        'placeholder',
+      ],
+    },
+  },
+  render: args => html`
+    <fhi-text-input
+      label="Brukernavn"
+      status=${ifDefined(args.status)}
+      ?disabled=${args.disabled}
+      ?readonly=${args.readonly}
       ><fhi-icon-user slot="start"></fhi-icon-user
     ></fhi-text-input>
-    <fhi-text-input label="Søk"
+    <fhi-text-input
+      label="Søk"
+      status=${ifDefined(args.status)}
+      ?disabled=${args.disabled}
+      ?readonly=${args.readonly}
       ><fhi-icon-search slot="end"></fhi-icon-search
     ></fhi-text-input>
   `,

From 83e650cf14e176dd542ceeadd95f262f852ed1f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?= <msso@fhi.no>
Date: Thu, 26 Mar 2026 10:11:52 +0100
Subject: [PATCH 09/15] Width

---
 .../src/components/fhi-text-input/fhi-text-input.component.ts   | 2 ++
 .../src/components/fhi-text-input/fhi-text-input.stories.ts     | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index d5c7a610..70187feb 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -341,6 +341,7 @@ export class FhiTextInput extends LitElement {
       flex-direction: column;
       font-family: var(--typography-font-family);
       -webkit-font-smoothing: antialiased;
+      width: 100%;
 
       label {
         font-weight: var(--typography-label-font-weight);
@@ -358,6 +359,7 @@ export class FhiTextInput extends LitElement {
       input {
         box-sizing: border-box;
         height: var(--dimension-input-height);
+        width: 100%;
         border: var(--dimension-input-border-width) solid
           var(--color-input-border);
         border-radius: var(--dimension-input-border-radius);
diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
index 2c965f98..0cbf5dfc 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
@@ -50,7 +50,7 @@ const meta: FhiStorybookMeta<FhiTextInput> = {
   decorators: [
     story =>
       html`<div
-        style="max-width: 400px; display: flex; gap: 2rem; justify-content: start; align-items: center;"
+        style="max-width: 400px; display: flex; flex-wrap: wrap; justify-content: start; align-items: center;"
       >
         ${story()}
       </div>`,

From 646bbe9da682e5e32295ec8db048f6b21fb9ef1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?= <msso@fhi.no>
Date: Mon, 13 Apr 2026 08:30:15 +0200
Subject: [PATCH 10/15] Endre bredde

---
 .../src/components/fhi-text-input/fhi-text-input.component.ts  | 3 +--
 .../src/components/fhi-text-input/fhi-text-input.stories.ts    | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index 70187feb..8ebaa5f7 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -341,7 +341,6 @@ export class FhiTextInput extends LitElement {
       flex-direction: column;
       font-family: var(--typography-font-family);
       -webkit-font-smoothing: antialiased;
-      width: 100%;
 
       label {
         font-weight: var(--typography-label-font-weight);
@@ -359,7 +358,6 @@ export class FhiTextInput extends LitElement {
       input {
         box-sizing: border-box;
         height: var(--dimension-input-height);
-        width: 100%;
         border: var(--dimension-input-border-width) solid
           var(--color-input-border);
         border-radius: var(--dimension-input-border-radius);
@@ -422,6 +420,7 @@ export class FhiTextInput extends LitElement {
 
       .input-container {
         position: relative;
+        width: fit-content;
       }
 
       slot[name='start'] {
diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
index 0cbf5dfc..ebbfbae4 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
@@ -50,7 +50,7 @@ const meta: FhiStorybookMeta<FhiTextInput> = {
   decorators: [
     story =>
       html`<div
-        style="max-width: 400px; display: flex; flex-wrap: wrap; justify-content: start; align-items: center;"
+        style="max-width: 400px; display: flex; flex-wrap: wrap; gap: 10px;"
       >
         ${story()}
       </div>`,

From 82917148bf00225461b3dc06981a8073b9a96ac0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?= <msso@fhi.no>
Date: Wed, 15 Apr 2026 10:14:51 +0200
Subject: [PATCH 11/15] Oppdater @release-it/conventional-changelog

---
 packages/fhi-designsystem/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fhi-designsystem/package.json b/packages/fhi-designsystem/package.json
index 3c076e6a..65e58a01 100644
--- a/packages/fhi-designsystem/package.json
+++ b/packages/fhi-designsystem/package.json
@@ -66,7 +66,7 @@
     "@esm-bundle/chai": "4.3.4-fix.0",
     "@open-wc/testing": "~4.0.0",
     "@playwright/test": "^1.57.0",
-    "@release-it/conventional-changelog": "~10.0.2",
+    "@release-it/conventional-changelog": "~10.0.6",
     "@storybook/addon-docs": "^10.2.8",
     "@storybook/web-components-vite": "^10.2.8",
     "@types/mocha": "~10.0.10",

From a9b8231b6b583760fb34a9470806bbc9b37d3a1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?= <msso@fhi.no>
Date: Thu, 16 Apr 2026 08:54:28 +0200
Subject: [PATCH 12/15] refaktorering

---
 .../fhi-text-input.component.ts               | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index 8ebaa5f7..962f70db 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -384,22 +384,18 @@ export class FhiTextInput extends LitElement {
         }
       }
 
-      ::slotted([slot='start']) {
+      slot[name='start'] {
         color: var(--fhi-color-neutral-text-subtle);
       }
 
-      input:not([disabled]):not([readonly]):hover ~ ::slotted([slot='start']),
-      input:not([disabled]):not([readonly]):focus ~ ::slotted([slot='start']) {
+      input:not([disabled]):not([readonly]):hover ~ slot[name='start'],
+      input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {
         color: var(--fhi-color-accent-text-subtle);
       }
-      input:not([disabled]):not([readonly]):active ~ ::slotted([slot='start']) {
+      input:not([disabled]):not([readonly]):active ~ slot[name='start'] {
         color: var(--fhi-color-accent-text-default);
       }
 
-      ::slotted([slot='end']) {
-        color: var(--fhi-color-neutral-text-subtle);
-      }
-
       .message {
         margin: var(--dimension-message-margin-top) 0 0 0;
         color: var(--color-message-text);
@@ -443,6 +439,7 @@ export class FhiTextInput extends LitElement {
         margin-right: 8px;
         height: fit-content;
         pointer-events: none;
+        color: var(--fhi-color-neutral-text-subtle);
       }
     }
 
@@ -486,14 +483,14 @@ export class FhiTextInput extends LitElement {
       .help-text {
         color: var(--color-help-text-text-error);
       }
-      ::slotted([slot='start']) {
+      slot[name='start'] {
         color: var(--fhi-color-danger-text-subtle);
       }
 
-      input:not([disabled]):not([readonly]):hover ~ ::slotted([slot='start']) {
+      input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {
         color: var(--fhi-color-danger-text-subtle);
       }
-      input:not([disabled]):not([readonly]):focus ~ ::slotted([slot='start']) {
+      input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {
         color: var(--fhi-color-danger-text-subtle);
       }
     }

From 72a2c12393d1d775364264fed1f6616b95bc1022 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?= <msso@fhi.no>
Date: Thu, 16 Apr 2026 10:12:29 +0200
Subject: [PATCH 13/15] Endret focus styling

---
 .../components/fhi-text-input/fhi-text-input.component.ts   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index 962f70db..5ba9ffc3 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -388,11 +388,11 @@ export class FhiTextInput extends LitElement {
         color: var(--fhi-color-neutral-text-subtle);
       }
 
-      input:not([disabled]):not([readonly]):hover ~ slot[name='start'],
-      input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {
+      input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {
         color: var(--fhi-color-accent-text-subtle);
       }
-      input:not([disabled]):not([readonly]):active ~ slot[name='start'] {
+      input:not([disabled]):not([readonly]):active ~ slot[name='start'],
+      input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {
         color: var(--fhi-color-accent-text-default);
       }
 

From 328ac72f440b2c5c9ed038b538de511b16efe2e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?= <msso@fhi.no>
Date: Mon, 20 Apr 2026 08:32:39 +0200
Subject: [PATCH 14/15] Revert "Oppdater @release-it/conventional-changelog"

This reverts commit 82917148bf00225461b3dc06981a8073b9a96ac0.
---
 packages/fhi-designsystem/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fhi-designsystem/package.json b/packages/fhi-designsystem/package.json
index 65e58a01..3c076e6a 100644
--- a/packages/fhi-designsystem/package.json
+++ b/packages/fhi-designsystem/package.json
@@ -66,7 +66,7 @@
     "@esm-bundle/chai": "4.3.4-fix.0",
     "@open-wc/testing": "~4.0.0",
     "@playwright/test": "^1.57.0",
-    "@release-it/conventional-changelog": "~10.0.6",
+    "@release-it/conventional-changelog": "~10.0.2",
     "@storybook/addon-docs": "^10.2.8",
     "@storybook/web-components-vite": "^10.2.8",
     "@types/mocha": "~10.0.10",

From 8ca4f9b929b2003d7ecbe4fba67169b003f54140 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marthe=20S=C3=B8vdsnes?= <msso@fhi.no>
Date: Tue, 21 Apr 2026 08:14:03 +0200
Subject: [PATCH 15/15] Refaktorering

---
 .../src/components/fhi-text-input/fhi-text-input.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index 5ba9ffc3..b0604470 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -487,10 +487,10 @@ export class FhiTextInput extends LitElement {
         color: var(--fhi-color-danger-text-subtle);
       }
 
-      input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {
+      input:hover ~ slot[name='start'] {
         color: var(--fhi-color-danger-text-subtle);
       }
-      input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {
+      input:focus ~ slot[name='start'] {
         color: var(--fhi-color-danger-text-subtle);
       }
     }