fix(chore): fikser en del komponenter etter oppdatering til v5.

Author: amish1188

doc-site/components/nve-combobox.md

@@ -9,12 +9,14 @@ For å legge til alternativer i select-komponenten bruk <span class="highlight">
 
 - <span class="highlight">value</span> - en unik identifikator som brukes internt til referanser, fokus og ARIA-koblinger.
 - <span class="highlight">label</span> - er teksten som vises i nedtrekksmenyen.
+- <span class="highlight">disabled</span> - om alternativ er deaktivert.
 - <span class="highlight">textLabel</span> - alternativ teksten som vises i inputfeltet.
 
 ```js
 type Option = {
   value: string;
   label: string;
+  disabled?: boolean;
   textLabel?: string;
 };
 ```
@@ -50,10 +52,15 @@ import type { NveSelectChangeDetail } from 'nve-designsystem/components/nve-comb
 
 Den returnerer:
 
+- <span class="highlight">value</span> - identifikator av et alternativ som endres.
+- <span class="highlight">action</span> – angir om alternativet velges eller velges bort.
+- <span class="highlight">selectedValues</span> - alle verdiene som er valgt.
+
 ```js
 type NveSelectChangeDetail<T> = {
   value: string;
   action: 'select' | 'deselect';
+  selectedValues: string[];
 }
 ```
 
@@ -81,12 +88,12 @@ Det er en combobox standard.
 
 ```html
 <nve-combobox
-  id="nve-avdeling-1"
+  id="nve-avdeling-0"
   label="Velg en avdeling"
   options='[ 
     { "value":"rme","label": "RME" },
     { "value":"ek","label": "EK" },
-    { "value":"tb","label": "TB" },
+    { "value":"c","label": "C", "disabled": true },
     { "value":"h","label": "H" },
     { "value":"ikti","label": "IKTI" },
     { "value":"sv","label": "SV" },
@@ -163,11 +170,12 @@ Når du klikker på en tag, fjernes det tilhørende alternativet fra de valgte v
 <nve-combobox
   id="nve-avdeling-3"
   label="Velg en avdeling"
+  size="large"
   multiple
   options='[ 
     { "value":"rme","label": "RME" },
     { "value":"ek","label": "EK" },
-    { "value":"tb","label": "TB" },
+    { "value":"tb","label": "TB", "disabled": true },
     { "value":"h","label": "H" },
     { "value":"ikti","label": "IKTI" },
     { "value":"sv","label": "SV" },
@@ -475,9 +483,9 @@ Bruk <span class="highlight">hint</span> for å vise hint-tekst under combobox.
 
 </CodeExamplePreview>
 
-### Deaktivert
+### Deaktivert felt
 
-Bruk attributtet <span class="highlight">disabled</span> for å hindre muligheten for å endre verdier.
+Bruk attributtet <span class="highlight">disabled</span> for å deaktivere combobox.
 
 <CodeExamplePreview>
 
@@ -488,6 +496,25 @@ Bruk attributtet <span class="highlight">disabled</span> for å hindre mulighete
 
 </CodeExamplePreview>
 
+### Deaktiverte alternativer
+
+For å vise et bestemt alternativ som deaktivert, må du sette <span class="highlight">disabled: true</span> på alternativet i <span class="highlight">options</span>-arrayet.
+
+Deaktiverte alternativer kan fortsatt få fokus, slik at brukere kan oppfatte at alternativet finnes. De har <span class="highlight">aria-disabled: true</span> og kan ikke aktiveres.
+
+<CodeExamplePreview>
+
+```html
+<nve-combobox
+  id="nve-avdeling-111"
+  label="Velg en avdeling"
+  options='[{ "value":"rme","label": "RME"}, { "value":"h","label": "H", "disabled": true }]'
+>
+</nve-combobox>
+```
+
+</CodeExamplePreview>
+
 ### Skrivebeskyttet
 
 Bruk <span class="highlight">readonly</span> for å stenge mulighet for å endre innholdet.

doc-site/components/nve-input.md

@@ -319,16 +319,23 @@ Bruk <span class="highlight">value</span> for å vise forhåndsutfylt verdi.
 
 </CodeExamplePreview>
 
-### Start-spor
+### Start og end-spor
 
-Bruk <span class="highlight">start</span>-sporet for å legge til et ikon.
+Bruk <span class="highlight">start</span>-sporet for å plassere innhold, for eksempel et ikon, før inputfeltet. <span class="highlight">end</span>-sporet brukes til å plassere innhold etter inputfeltet.
+
+<nve-message-card variant="warning" label="Vær oppmerksom ved bruk av sporene!" size="compact">
+<p>Innhold i disse sporene skal som hovedregel ikke formidle informasjon som kun er tilgjengelig visuelt. Dersom innholdet inneholder viktig informasjon som brukeren trenger for å forstå eller fylle ut feltet, må den samme informasjonen også gjøres tilgjengelig for skjermleserbrukere, for eksempel gjennom hjelpetekst eller hinttekst.</p>
+</nve-message-card>
 
 <CodeExamplePreview>
 
 ```html
 <nve-input label="Saksbehandlers navn">
   <nve-icon slot="start" name="cases"></nve-icon>
 </nve-input>
+<nve-input label="Saksbehandlers navn">
+  <nve-icon slot="end" name="cases"></nve-icon>
+</nve-input>
 ```
 
 </CodeExamplePreview>

src/components/nve-checkbox-group/nve-checkbox-group.component.ts

@@ -209,11 +209,29 @@ export default class NveCheckboxGroup extends LitElement implements FormValidati
         <!-- Hint-tekst og feilmelding -->
         ${
           !this.activeErrorMessage && this.hint
-            ? html`<p part="hint-text" class="field__hint-text" id=${hintTextId}>${this.hint}</p>`
+            ? html`<p
+                part="hint-text"
+                class=${classMap({
+                  'field__hint-text': true,
+                  'field__hint-text--show': !!this.hint,
+                })}
+                id=${hintTextId}
+              >
+                ${this.hint}
+              </p>`
             : nothing
         }
 
-        <p aria-live="assertive" aria-atomic="true" part="error-text" class="field__hint-text" id=${errorTextId}>
+        <p
+          aria-live="assertive"
+          aria-atomic="true"
+          part="error-text"
+          class=${classMap({
+            'field__hint-text': true,
+            'field__hint-text--show': !!this.activeErrorMessage,
+          })}
+          id=${errorTextId}
+        >
           ${this.activeErrorMessage ?? ''}
         </p>
       </fieldset>

src/components/nve-checkbox-group/nve-checkbox-group.styles.ts

@@ -6,7 +6,6 @@ export default css`
     flex-direction: column;
     padding: 0;
     margin: 0;
-    gap: var(--spacing-x-small);
     min-inline-size: unset;
     margin-inline: 0;
     border-width: 0;
@@ -19,6 +18,7 @@ export default css`
 
   .checkbox-group {
     display: flex;
+    margin-top: var(--spacing-x-small);
     gap: var(--spacing-small);
   }