nve-designsystem 0.2.4 → 0.2.5

package/components/nve-alert/nve-alert.component.d.ts

@@ -1,5 +1,6 @@
-import SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.js';
+import { default as SlAlert } from '@shoelace-style/shoelace/dist/components/alert/alert.js';
 import { PropertyValues } from 'lit';
+
 /**
  * Brukes til å vise viktige beskjeder enten på en side eller som en enkel popup.
  *
@@ -16,7 +17,7 @@ export default class NveAlert extends SlAlert {
     saturation: 'emphasized' | null;
     /** Ramme linje til venstre  */
     leftStroke: boolean;
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
     updated(changedProperties: PropertyValues): void;
 }
 declare global {

package/components/nve-alert/nve-alert.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-badge/nve-badge.component.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+
 /**
  * En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.
  * @property {string} size = small, medium eller large
@@ -6,14 +7,14 @@ import { LitElement } from 'lit';
  * @property {string} saturation = Setter metningsgrad. subtle er eneste støttede, evt ikke satt.
  */
 export default class NveBadge extends LitElement {
-    static styles: import("lit").CSSResult[];
+    static styles: import('lit').CSSResult[];
     /** Variant */
     variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'brand';
     /** Størrelse på komponenten */
     size: 'small' | 'medium' | 'large';
     /** Viser lav metning, default er at denne ikke er satt */
     saturation: 'subtle' | null;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-badge/nve-badge.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-button/nve-button.component.d.ts

@@ -1,5 +1,6 @@
-import SlButton from '@shoelace-style/shoelace/dist/components/button/button.js';
+import { default as SlButton } from '@shoelace-style/shoelace/dist/components/button/button.js';
 import { INveComponent } from '../../interfaces/NveComponent.interface';
+
 /**
  * Selveste NVE-knappen.
  * Bruk href for å gjøre den om til en link.
@@ -8,7 +9,7 @@ import { INveComponent } from '../../interfaces/NveComponent.interface';
  */
 export default class NveButton extends SlButton implements INveComponent {
     constructor();
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
     size: 'small' | 'medium' | 'large';
     testId: string | undefined;
     firstUpdated(): void;

package/components/nve-button/nve-button.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-checkbox/nve-checkbox.component.d.ts

@@ -1,11 +1,12 @@
-import SlCheckbox from '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
+import { default as SlCheckbox } from '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
+
 /**
  * En avkrysningsboks.
  * Ikke bruk `size`, i NVE bruker vi kun en størrelse på avkrysningsbokser.
  */
 export default class NveCheckbox extends SlCheckbox {
     constructor();
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/components/nve-checkbox/nve-checkbox.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-checkbox-group/nve-checkbox-group.component.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+
 /**
  * Bruk denne for å håndtere flere avkrysningsbokser (nve-checkbox) som hører sammen.
  * selectedValues inneholder `value` til hver av avkrysningsboksene som er valgt i gruppa.
@@ -30,7 +31,7 @@ export default class NveCheckboxGroup extends LitElement {
     protected showErrorMessage: boolean;
     /** Status for tilpasset validering. Den trengs for å kunne kjøre både constraint- og tilpasset validering samtidig. */
     protected isCustomValidationError: boolean;
-    static styles: import("lit").CSSResult[];
+    static styles: import('lit').CSSResult[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
@@ -48,7 +49,7 @@ export default class NveCheckboxGroup extends LitElement {
     private resetValidation;
     private makeInvalid;
     private checkIfRequiredValid;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-checkbox-group/nve-checkbox-group.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-darkmode-switch/nve-darkmode-switch.component.d.ts

@@ -1,5 +1,6 @@
 import { INveComponent } from '../../interfaces/NveComponent.interface';
 import { LitElement, TemplateResult } from 'lit';
+
 /**
  * Komponent for å sette .darkmode-klasse på root.
  * Må kun være en av dem på siden, de vil ikke synkronisere data.

package/components/nve-dialog/nve-dialog-styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-dialog/nve-dialog.component.d.ts

@@ -1,4 +1,5 @@
-import SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
+import { default as SlDialog } from '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
+
 /**
  * En dialogboks.
  * Vil du ha ikon foran overskriften, bruk `icon`.
@@ -32,7 +33,7 @@ export default class NveDialog extends SlDialog {
      * for å unngå å skape unødvendig mellomrom i layouten.
      */
     updateIcon(): void;
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-divider/nve-divider.component.d.ts

@@ -1,10 +1,11 @@
-import SlDivider from '@shoelace-style/shoelace/dist/components/divider/divider.js';
+import { default as SlDivider } from '@shoelace-style/shoelace/dist/components/divider/divider.js';
+
 /**
  * Bruk denne til å skille innhold fra hverandre
  */
 export default class NveDivider extends SlDivider {
     constructor();
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-dropdown/nve-dropdown.component.d.ts

@@ -1,12 +1,13 @@
-import SlDropdown from '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
-import NveMenu from '../nve-menu/nve-menu.component';
+import { default as SlDropdown } from '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
+import { default as NveMenu } from '../nve-menu/nve-menu.component';
 import { INveComponent } from '../../interfaces/NveComponent.interface';
+
 /**
  * TODO: Beskrivelse mangler
  */
 export default class NveDropdown extends SlDropdown implements INveComponent {
     constructor();
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
     testId: string;
     getMenu(): NveMenu | undefined;
     updateAccessibleTrigger(): void;

package/components/nve-dropdown/nve-dropdown.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-icon/nve-icon.component.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+
 /**
  * Et ikon.
  * Vi bruker ikoner fra Material Symbols.
@@ -7,13 +8,13 @@ import { LitElement } from 'lit';
  * @see https://fonts.google.com/icons
  */
 export default class NveIcon extends LitElement {
-    static styles: import("lit").CSSResult[];
+    static styles: import('lit').CSSResult[];
     /** Skarpe eller myke hjørner. Ikonene i ikonsettet skal i utgangspunktet ha skarpe hjørner, men hjørner kan være avrundet om det gjør motivet tydeligere. */
     library: 'Outlined' | 'Sharp';
     /** Navnet på ikonet i Material Symbols-biblioteket */
     name: string;
     protected firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-icon/nve-icon.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-input/nve-input.component.d.ts

@@ -1,5 +1,6 @@
-import SlInput from '@shoelace-style/shoelace/dist/components/input/input.js';
+import { default as SlInput } from '@shoelace-style/shoelace/dist/components/input/input.js';
 import { INveComponent } from '../../interfaces/NveComponent.interface';
+
 /**
  * Et tekstfelt.
  * Vil du ha info-ikon med hjelpetekst etter ledeteksten, putt en nve-label i label-slot.
@@ -28,7 +29,7 @@ export default class NveInput extends SlInput implements INveComponent {
       */
     inputId?: string;
     protected alreadyInvalid: boolean;
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/components/nve-input/nve-input.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-label/nve-label.component.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+
 /**
  * Ledetekst med verktøy-hint (og tilhørende info-ikon)
  *
@@ -37,10 +38,10 @@ export default class NveLabel extends LitElement {
      * Ikon farge
      */
     iconColor: 'default' | 'black';
-    static styles: import("lit").CSSResult[];
+    static styles: import('lit').CSSResult[];
     private renderInfoIconWithTooltip;
     private renderValueProperty;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-label/nve-label.styles.d.ts

@@ -1,4 +1,4 @@
 /**
  * Stiler til nve-label
  */
-export declare const styles: import("lit").CSSResult;
+export declare const styles: import('lit').CSSResult;

package/components/nve-link-card/nve-link-card.component.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+
+/**
+ * Komponent som brukes til å vise lenkekort. Brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.
+ *
+ * Egenskaper som `clickAction` bestemmer oppførselen når kortet klikkes, mens `title` og `additionalText` brukes til å vise innholdet på kortet.
+ */
+export default class NveLinkCard extends LitElement implements INveComponent {
+    /** Tittel som vises øverst på kortet */
+    title: string;
+    /** Tilleggsbeskrivelse som vises under tittelen */
+    additionalText?: string;
+    /** Størrelse på kortet, kan være 'small', 'medium' eller 'large' */
+    size: 'small' | 'medium' | 'large';
+    /** Variant som bestemmer stilen på kortet: 'primary', 'contrast', eller 'secondary' */
+    variant: 'primary' | 'contrast' | 'secondary';
+    /** Test ID som kan brukes i testing og sporing */
+    testId: string | undefined;
+    /** Definerer hva som skjer når kortet klikkes: 'internal' (intern lenke), 'download' (nedlasting), 'external' (ekstern lenke), eller 'mail' (e-post) */
+    clickAction: 'internal' | 'download' | 'external' | 'mail';
+    /** Lenken som brukes for handlinger som intern/ekstern navigering eller e-post */
+    href: string | undefined;
+    /** Valgfri nedlastingsfunksjon som kan overstyres for å implementere spesifikk nedlastingslogikk */
+    downloadHandler: () => void;
+    /** Tilpasset klikk-handler som kan brukes til å overstyre standard atferd (f.eks. i Vue med vue-router) */
+    customClickHandler?: (event: MouseEvent) => void;
+    static styles: import('lit').CSSResult[];
+    constructor();
+    /**
+     * Standard nedlastingsfunksjon som brukes hvis `downloadHandler` ikke er overstyrt.
+     * Bruker lenken (`href`) til å laste ned en fil.
+     */
+    private defaultDownloadHandler;
+    /**
+     * Denne funksjonen bestemmer hva som skjer når kortet blir klikket, basert på verdien av `clickAction`.
+     * Hvis Ctrl, Shift, Alt eller Meta er trykket, følger vi standard bruksmønstre:
+     * Ctrl/Cmd + Klikk: Åpner lenken i en ny fane.
+     * Shift + Klikk: Åpner lenken i et nytt vindu.
+     * Alt + Klikk: Laster ned lenken (hvis det er en fil).
+     * Hvis `customClickHandler` er definert, overstyres standard klikkatferd.
+     */
+    private handleClick;
+    /**
+     * Returnerer ikonnavnet som vises på kortet basert på `clickAction`.
+     */
+    private getIconName;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-link-card': NveLinkCard;
+    }
+}

package/components/nve-link-card/nve-link-card.component.js

@@ -0,0 +1,137 @@
+import { s as h, x as d } from "../../chunks/lit-element.js";
+import { n, t as f } from "../../chunks/property.js";
+import p from "./nve-link-card.styles.js";
+var w = Object.defineProperty, u = Object.getOwnPropertyDescriptor, i = (t, l, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? u(l, o) : l, a = t.length - 1, c; a >= 0; a--)
+    (c = t[a]) && (r = (s ? c(l, o, r) : c(r)) || r);
+  return s && r && w(l, o, r), r;
+};
+let e = class extends h {
+  constructor() {
+    super(), this.title = "", this.size = "medium", this.variant = "primary", this.testId = void 0, this.clickAction = "internal", this.href = void 0, this.downloadHandler = this.defaultDownloadHandler;
+  }
+  /**
+   * Standard nedlastingsfunksjon som brukes hvis `downloadHandler` ikke er overstyrt. 
+   * Bruker lenken (`href`) til å laste ned en fil.
+   */
+  async defaultDownloadHandler() {
+    if (this.href) {
+      const t = this.href, l = t.split("/").pop() || "download";
+      try {
+        const o = await fetch(t, {
+          mode: "cors"
+        });
+        if (!o.ok)
+          throw new Error(`Failed to fetch file: ${o.statusText}`);
+        const s = await o.blob(), r = URL.createObjectURL(s), a = document.createElement("a");
+        a.href = r, a.download = l, document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(r);
+      } catch (o) {
+        console.error("Download failed:", o);
+      }
+    }
+  }
+  /**
+   * Denne funksjonen bestemmer hva som skjer når kortet blir klikket, basert på verdien av `clickAction`.
+   * Hvis Ctrl, Shift, Alt eller Meta er trykket, følger vi standard bruksmønstre:
+   * Ctrl/Cmd + Klikk: Åpner lenken i en ny fane.
+   * Shift + Klikk: Åpner lenken i et nytt vindu.
+   * Alt + Klikk: Laster ned lenken (hvis det er en fil).
+   * Hvis `customClickHandler` er definert, overstyres standard klikkatferd.
+   */
+  handleClick(t) {
+    if (this.customClickHandler) {
+      this.customClickHandler(t);
+      return;
+    }
+    if (this.href && (t.ctrlKey || t.metaKey)) {
+      window.open(this.href, "_blank");
+      return;
+    }
+    if (this.href && t.shiftKey) {
+      window.open(this.href, "_blank", "noopener,noreferrer");
+      return;
+    }
+    if (t.altKey && this.clickAction === "download" && this.href) {
+      this.downloadHandler();
+      return;
+    }
+    switch (this.clickAction) {
+      case "internal":
+        this.href && (window.location.href = this.href);
+        break;
+      case "download":
+        this.downloadHandler && this.downloadHandler();
+        break;
+      case "external":
+        this.href && window.open(this.href, "_blank");
+        break;
+      case "mail":
+        this.href && (window.location.href = `mailto:${this.href}`);
+        break;
+    }
+  }
+  /**
+   * Returnerer ikonnavnet som vises på kortet basert på `clickAction`.
+   */
+  getIconName() {
+    switch (this.clickAction) {
+      case "internal":
+        return "arrow_forward";
+      case "download":
+        return "download";
+      case "external":
+        return "open_in_new";
+      case "mail":
+        return "mail";
+      default:
+        return "arrow_forward";
+    }
+  }
+  render() {
+    return d`
+      <a class="link-card ${this.size} ${this.variant}" @click="${this.handleClick}">
+        <div class="content">
+          <div class="title">${this.title}</div>
+          ${this.additionalText ? d`<div class="additional-text">${this.additionalText}</div>` : null}
+        </div>
+        <div>
+          <nve-icon slot="suffix" name="${this.getIconName()}" style="font-size: 1.5rem;"></nve-icon>
+        </div>
+      </a>
+    `;
+  }
+};
+e.styles = [p];
+i([
+  n({ reflect: !0 })
+], e.prototype, "title", 2);
+i([
+  n({ reflect: !0 })
+], e.prototype, "additionalText", 2);
+i([
+  n({ reflect: !0 })
+], e.prototype, "size", 2);
+i([
+  n({ reflect: !0 })
+], e.prototype, "variant", 2);
+i([
+  n({ reflect: !0 })
+], e.prototype, "testId", 2);
+i([
+  n({ reflect: !0 })
+], e.prototype, "clickAction", 2);
+i([
+  n({ reflect: !0 })
+], e.prototype, "href", 2);
+i([
+  n()
+], e.prototype, "downloadHandler", 2);
+i([
+  n()
+], e.prototype, "customClickHandler", 2);
+e = i([
+  f("nve-link-card")
+], e);
+export {
+  e as default
+};

package/components/nve-link-card/nve-link-card.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/components/nve-link-card/nve-link-card.styles.js

@@ -0,0 +1,94 @@
+import { i as r } from "../../chunks/lit-element.js";
+const e = r`
+  .link-card {
+    border-radius: var(--borderRadius-large, 6px);
+    padding: var(--spacing-medium, 16px) var(--spacing-medium, 16px) var(--spacing-medium, 16px) var(--spacing-large, 24px);
+    transition: background-color 0.3s, border-color 0.3s;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 400px;
+    cursor: pointer;
+  }
+
+  .small {
+    min-height: 40px;
+    padding: var(--spacing-small, 12px) var(--spacing-medium, 16px);
+  }
+
+  .medium {
+    min-height: 60px;
+    padding: var(--spacing-medium, 16px) var(--spacing-medium, 16px) var(--spacing-medium, 16px) var(--spacing-large, 24px);
+  }
+
+  .large {
+    min-height: 70px;
+    padding: var(--spacing-medium, 16px) var(--spacing-medium, 16px) var(--spacing-medium, 16px) var(--spacing-large, 24px);
+  }
+
+  .link-card.small .title {
+    font-size: 0.875rem; 
+  }
+
+  .link-card.medium .title {
+    font-size: 1rem;  
+  }
+
+  .link-card.large .title {
+    font-size: 1.125rem; 
+  }
+
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .title {
+    color: var(--neutrals-foreground-primary, #0D0D0E);
+    font-family: "Source Sans Pro";
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%;
+  }
+
+  .additional-text {
+    color: var(--neutrals-foreground-primary, #0D0D0E);
+    font-family: "Source Sans Pro";
+    font-style: normal;
+    font-weight: 400;
+    line-height: 120%;
+    padding-top: 4px;
+    font-size: 0.875rem; 
+  }
+
+  .primary {
+    background: var(--neutrals-background-primary, #FFF);
+  }
+
+  .primary:hover {
+    background: var(--neutrals-background-secondary, #E4E5E7);  
+  }
+
+  .contrast {
+    background: var(--neutrals-background-primary-contrast, #F7F7F8);  
+  }
+
+  .contrast:hover {
+    background: var(--neutrals-background-secondary, #E4E5E7);  
+  }
+
+  .secondary {
+    background: var(--neutrals-background-secondary, #E4E5E7);  
+  }
+
+  .secondary:hover {
+    border-radius: var(--borderRadius-large, 6px);
+    border: 2px solid var(--neutrals-foreground-primary, #0D0D0E);
+  }
+`;
+export {
+  e as default
+};

package/components/nve-menu/nve-menu.component.d.ts

@@ -1,7 +1,8 @@
-import SlMenu from '@shoelace-style/shoelace/dist/components/menu/menu.js';
+import { default as SlMenu } from '@shoelace-style/shoelace/dist/components/menu/menu.js';
+
 export default class NveMenu extends SlMenu {
     constructor();
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-menu/nve-menu.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-menu-item/nve-menu-item.component.d.ts

@@ -1,4 +1,5 @@
-import SlMenuItem from '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
+import { default as SlMenuItem } from '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
+
 /**
  * En sl-menu-item i NVE-forkledning.
  * Mer info: https://shoelace.style/components/menu-item
@@ -28,7 +29,7 @@ export default class NveMenuItem extends SlMenuItem {
      */
     updated(changedProperties: any): void;
     private handleMouseOver;
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-menu-item/nve-menu-item.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-message-card/nve-message-card.component.d.ts

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import { INveComponent } from '../../interfaces/NveComponent.interface';
+
 /**
 Brukes som veiledning i skjemaer eller som en informasjon til brukere.
 *
@@ -38,11 +39,11 @@ export default class NveMessageCard extends LitElement implements INveComponent
     iconTitle: string;
     /** Bestemmer variant farge */
     variant: 'neutral' | 'primary' | 'warning' | 'danger' | 'success';
-    static styles: import("lit").CSSResult[];
+    static styles: import('lit').CSSResult[];
     constructor();
     private handleClose;
     private determineIcon;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-message-card/nve-message-card.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-option/nve-option.component.d.ts

@@ -1,10 +1,11 @@
-import SlOption from '@shoelace-style/shoelace/dist/components/option/option.js';
+import { default as SlOption } from '@shoelace-style/shoelace/dist/components/option/option.js';
+
 /**
  * Representerer et valg i nve-select.
  */
 export default class NveOption extends SlOption {
     constructor();
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
     firstUpdated(changedProperties: any): void;
 }
 declare global {

package/components/nve-option/nve-option.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-popup/nve-popup.component.d.ts

@@ -1,4 +1,5 @@
-import SlPopup from '@shoelace-style/shoelace/dist/components/popup/popup.js';
+import { default as SlPopup } from '@shoelace-style/shoelace/dist/components/popup/popup.js';
+
 /**
  * TODO: Mangler beskrivelse
  */

package/components/nve-radio/nve-radio.component.d.ts

@@ -1,4 +1,5 @@
-import SlRadio from '@shoelace-style/shoelace/dist/components/radio/radio.js';
+import { default as SlRadio } from '@shoelace-style/shoelace/dist/components/radio/radio.js';
+
 /**
  * En sl-radio med NVE design.
  * Se https://shoelace.style/components/radio
@@ -8,7 +9,7 @@ import SlRadio from '@shoelace-style/shoelace/dist/components/radio/radio.js';
  */
 export default class NveRadio extends SlRadio {
     constructor();
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-radio/nve-radio.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-radio-button/nve-radio-button.component.d.ts

@@ -1,11 +1,12 @@
-import SlRadioButton from '@shoelace-style/shoelace/dist/components/radio-button/radio-button.js';
+import { default as SlRadioButton } from '@shoelace-style/shoelace/dist/components/radio-button/radio-button.js';
+
 /**
  * En sl-radio-button med NVE design.
  * Se https://shoelace.style/components/radio-button
  */
 export default class NveRadioButton extends SlRadioButton {
     constructor();
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
     testId: string;
 }
 declare global {

package/components/nve-radio-group/nve-radio-group.component.d.ts

@@ -1,5 +1,6 @@
-import SlRadioGroup from '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
+import { default as SlRadioGroup } from '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
 import { PropertyValues } from 'lit';
+
 /**
  * Brukes til å gruppere radioknapper som hører sammen. Den kan inneholde både nve-radio og nve-radio-button.
  * Pass på at nve-radio eller nva-radio-button har en value, ellers vil ikke radiogruppa fungere som forventet.
@@ -18,7 +19,7 @@ import { PropertyValues } from 'lit';
  *
  */
 export default class NveRadioGroup extends SlRadioGroup {
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
     constructor();
     /**
      * Om radio knapper skal vises horisontalt eller vertikalt

package/components/nve-radio-group/nve-radio-group.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-select/nve-select.component.d.ts

@@ -1,4 +1,5 @@
-import SlSelect from '@shoelace-style/shoelace/dist/components/select/select.js';
+import { default as SlSelect } from '@shoelace-style/shoelace/dist/components/select/select.js';
+
 /**
  * En nedtrekksliste, også kjent som rullgardin eller drop-down list. Kjært barn har mange navn.
  * TODO: Klarte ikke å sette feil-ikonet når validering feiler. Eneste måte å gjøre det på kunne ha vært å bruke ::after pseudo-element på noen av sl-select partene, men
@@ -18,7 +19,7 @@ export default class NveSelect extends SlSelect {
     connectedCallback(): void;
     disconnectedCallback(): void;
     constructor();
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
     protected firstUpdated(changedProperties: any): void;
     updated(changedProperties: any): void;
     focus(): void;

package/components/nve-select/nve-select.styles.d.ts

@@ -1,5 +1,5 @@
 /** Det er en del repetisjoner med nve-input.styles.ts, men jeg har ikke tid til å rette det nå. Kan også være at vi
  * må lage vår egen nve-select komponent pga feil ikone derfor vil jeg ikke bruke mer tid på komponenten.
  */
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-spinner/nve-spinner.component.d.ts

@@ -1,10 +1,11 @@
-import SlSpinner from '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
+import { default as SlSpinner } from '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
+
 /**
  * Ei snurre
  */
 export default class NveSpinner extends SlSpinner {
     constructor();
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-stepper/nve-step/nve-step.component.d.ts

@@ -1,4 +1,5 @@
 import { CSSResultArray, LitElement, TemplateResult } from 'lit';
+
 /** Enum for å representere tilstanden til et steg */
 export declare enum StepState {
     NotStarted = 0,

package/components/nve-stepper/nve-step/nve-step.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-stepper/nve-stepper-mobile.component.d.ts

@@ -1,5 +1,6 @@
 import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import { StepProps } from './nve-step/nve-step.component';
+
 export default class NveStepperMobile extends LitElement {
     static styles: CSSResultArray;
     /** Steps som skal vises, se StepProps interface for data som skal sendes inn. */

package/components/nve-stepper/nve-stepper-mobile.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-stepper/nve-stepper.component.d.ts

@@ -1,5 +1,6 @@
 import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import { StepProps } from './nve-step/nve-step.component';
+
 /** Interface for stepper-komponenten */
 export interface INveStepper {
     /** Går til neste steg */

package/components/nve-stepper/nve-stepper.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-switch/nve-switch.component.d.ts

@@ -1,5 +1,6 @@
 import { INveComponent } from '../../interfaces/NveComponent.interface';
 import { CSSResultArray, LitElement, TemplateResult } from 'lit';
+
 /**
  * En vippe-bryter med støtte for ikoner.
  *

package/components/nve-switch/nve-switch.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-tag/nve-tag.component.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+
 /**
  * En tag som brukes for å vise litt info eller for filtre. Har en valgfri lukke-knapp
  *
@@ -19,7 +20,7 @@ import { LitElement } from 'lit';
  *
  */
 export default class NveTag extends LitElement {
-    static styles: import("lit").CSSResult[];
+    static styles: import('lit').CSSResult[];
     /** Variant */
     variant: 'neutral' | 'success' | 'info' | 'warning' | 'error';
     /** Saturation - Hvor mettet fargen på tag er */
@@ -35,7 +36,7 @@ export default class NveTag extends LitElement {
     /** aria-label på lukke-knapp */
     'close-aria-label': string;
     private closeButtonClick;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-tag/nve-tag.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-textarea/nve-textarea.component.d.ts

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import { INveComponent } from '../../interfaces/NveComponent.interface';
+
 /**
  * Skal brukes til å lage lang tekstfelt. Min høyde er satt opp til --sizing-2x-small. De fleste attributer som brukes på vanlig textarea
  * burde bli støttet her. Hvis det er noe som mangler, bare å legge til.
@@ -26,7 +27,7 @@ import { INveComponent } from '../../interfaces/NveComponent.interface';
  *
  */
 export default class NveTextarea extends LitElement implements INveComponent {
-    static styles: import("lit").CSSResult[];
+    static styles: import('lit').CSSResult[];
     /** Navnet på tekstområdet, sendt som et navn/verdi-par med skjemadata */
     name: string;
     /** Textarea verdi, sendt som et navn/verdi-par med skjemadata */
@@ -99,7 +100,7 @@ export default class NveTextarea extends LitElement implements INveComponent {
     private resetValidation;
     /** Toggler riktig validering attribute for å vise riktig style */
     private toggleValidationAttributes;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-textarea/nve-textarea.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/components/nve-tooltip/nve-tooltip.component.d.ts

@@ -1,4 +1,5 @@
-import SlTooltip from '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import { default as SlTooltip } from '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+
 /**
  * Et verktøyhint. Kan åpnes og lukkes programmatisk eller automatisk med ulike hendelser. Kan ha ulik farge og metning.
  *
@@ -9,7 +10,7 @@ export default class NveTooltip extends SlTooltip {
     variant: 'neutral' | 'success' | 'info' | 'warning' | 'error';
     /** Saturation - Hvor mettet fargen på tooltip er */
     saturation: 'emphasized' | 'subtle' | 'default';
-    static styles: import("lit").CSSResultGroup[];
+    static styles: import('lit').CSSResultGroup[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/nve-tooltip/nve-tooltip.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import('lit').CSSResult;
 export default _default;

package/custom-elements.json

@@ -4624,6 +4624,154 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/nve-link-card/nve-link-card.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Komponent som brukes til å vise lenkekort. Brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\n\nEgenskaper som `clickAction` bestemmer oppførselen når kortet klikkes, mens `title` og `additionalText` brukes til å vise innholdet på kortet.",
+          "name": "NveLinkCard",
+          "members": [
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Tittel som vises øverst på kortet"
+            },
+            {
+              "kind": "field",
+              "name": "additionalText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tilleggsbeskrivelse som vises under tittelen"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "Størrelse på kortet, kan være 'small', 'medium' eller 'large'"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'contrast' | 'secondary'"
+              },
+              "default": "'primary'",
+              "description": "Variant som bestemmer stilen på kortet: 'primary', 'contrast', eller 'secondary'"
+            },
+            {
+              "kind": "field",
+              "name": "testId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "description": "Test ID som kan brukes i testing og sporing"
+            },
+            {
+              "kind": "field",
+              "name": "clickAction",
+              "type": {
+                "text": "'internal' | 'download' | 'external' | 'mail'"
+              },
+              "default": "'internal'",
+              "description": "Definerer hva som skjer når kortet klikkes: 'internal' (intern lenke), 'download' (nedlasting), 'external' (ekstern lenke), eller 'mail' (e-post)"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "description": "Lenken som brukes for handlinger som intern/ekstern navigering eller e-post"
+            },
+            {
+              "kind": "field",
+              "name": "downloadHandler",
+              "type": {
+                "text": "() => void"
+              },
+              "description": "Valgfri nedlastingsfunksjon som kan overstyres for å implementere spesifikk nedlastingslogikk"
+            },
+            {
+              "kind": "field",
+              "name": "customClickHandler",
+              "type": {
+                "text": "(event: MouseEvent) => void | undefined"
+              },
+              "description": "Tilpasset klikk-handler som kan brukes til å overstyre standard atferd (f.eks. i Vue med vue-router)"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "array"
+              },
+              "static": true,
+              "default": "[styles]"
+            },
+            {
+              "kind": "method",
+              "name": "defaultDownloadHandler",
+              "privacy": "private",
+              "description": "Standard nedlastingsfunksjon som brukes hvis `downloadHandler` ikke er overstyrt. \nBruker lenken (`href`) til å laste ned en fil."
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ],
+              "description": "Denne funksjonen bestemmer hva som skjer når kortet blir klikket, basert på verdien av `clickAction`.\nHvis Ctrl, Shift, Alt eller Meta er trykket, følger vi standard bruksmønstre:\nCtrl/Cmd + Klikk: Åpner lenken i en ny fane.\nShift + Klikk: Åpner lenken i et nytt vindu.\nAlt + Klikk: Laster ned lenken (hvis det er en fil).\nHvis `customClickHandler` er definert, overstyres standard klikkatferd."
+            },
+            {
+              "kind": "method",
+              "name": "getIconName",
+              "privacy": "private",
+              "description": "Returnerer ikonnavnet som vises på kortet basert på `clickAction`."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagNameWithoutPrefix": "link-card",
+          "tagName": "nve-link-card",
+          "customElement": true,
+          "jsDoc": "/**\n * Komponent som brukes til å vise lenkekort. Brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\n *\n * Egenskaper som `clickAction` bestemmer oppførselen når kortet klikkes, mens `title` og `additionalText` brukes til å vise innholdet på kortet.\n */"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NveLinkCard",
+            "module": "components/nve-link-card/nve-link-card.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/nve-menu/nve-menu.js",
@@ -10310,7 +10458,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "0.2.3",
+    "version": "0.2.4",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "MIT",
   "homepage": "https://github.com/NVE/Designsystem/",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "customElements": "custom-elements.json",
   "exports": {
     ".": {

package/registerIcons/systemLibraryCustomization.d.ts

@@ -1,4 +1,5 @@
 import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
+
 interface Icons {
     [name: string]: string;
 }