nve-designsystem 3.1.0 → 3.3.0

package/components/nve-alert/nve-alert.styles.js

@@ -1,5 +1,6 @@
-import { i as r } from "../../chunks/lit-element.js";
-const a = r`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-alert/nve-alert.styles.ts
+var t = e`
   :host {
     --left-stroke-width: 6px;
   }
@@ -10,7 +11,6 @@ const a = r`
     padding: var(--spacing-medium) var(--spacing-large) var(--spacing-medium)
       calc(var(--spacing-large) - var(--left-stroke-width));
     border-radius: var(--border-radius-small);
-    color: var(--color-feedback-foreground-default-info);
     font: var(--typography-body-medium);
     border-left: var(--left-stroke-width) solid transparent;
   }
@@ -27,7 +27,9 @@ const a = r`
     border: none;
     cursor: pointer;
     margin-left: var(--spacing-x-small);
-    transition: background 0.3s ease;
+    transition:
+      background-color 0.3s ease,
+      color 0.3s ease;
     nve-icon {
       --icon-size: var(--font-size-large);
     }
@@ -56,18 +58,23 @@ const a = r`
   /*variants */
   .alert--primary {
     background-color: var(--color-feedback-background-default-info);
+    color: var(--color-feedback-foreground-on-bg-subtle-info, #142843);
     .alert__button:hover {
       background: var(--color-feedback-background-subtle-info);
     }
   }
   .alert--danger {
     background-color: var(--color-feedback-background-default-error);
+    color: var(--color-feedback-foreground-on-bg-subtle-error, #581d1d);
+
     .alert__button:hover {
       background: var(--color-feedback-background-subtle-error);
     }
   }
   .alert--success {
     background-color: var(--color-feedback-background-default-success);
+    color: var(--color-feedback-foreground-on-bg-subtle-success, #122b21);
+
     .alert__button:hover {
       background: var(--color-feedback-background-subtle-success);
     }
@@ -75,12 +82,15 @@ const a = r`
 
   .alert--neutral {
     background-color: var(--color-feedback-background-default-neutral);
+    color: var(--color-feedback-foreground-on-bg-subtle-neutral, #0d0d0e);
     .alert__button:hover {
       background: var(--color-feedback-background-subtle-neutral);
     }
   }
   .alert--warning {
     background-color: var(--color-feedback-background-default-warning);
+    color: var(--color-feedback-foreground-on-bg-subtle-warning, #54301c);
+
     .alert__button:hover {
       background: var(--color-feedback-background-subtle-warning);
     }
@@ -88,40 +98,45 @@ const a = r`
 
   /* Styling for høyere metningsgrad */
 
-  .alert--emphasized {
-    color: var(--color-feedback-foreground-emphasized-neutral);
-  }
-
   .alert--emphasized.alert--primary {
     background-color: var(--color-feedback-background-emphasized-info);
+    color: var(--color-feedback-foreground-on-bg-emphasized-info, #fff);
+
     .alert__button:hover {
       background: var(--color-feedback-background-subtle-info);
-      color: var(--color-feedback-background-emphasized-info);
+      color: var(--color-feedback-foreground-on-bg-subtle-info);
     }
   }
   .alert--emphasized.alert--danger {
     background-color: var(--color-feedback-background-emphasized-error);
+    color: var(--color-feedback-foreground-on-bg-emphasized-error, #fff);
+
     .alert__button:hover {
       background: var(--color-feedback-background-subtle-error);
-      color: var(--color-feedback-background-emphasized-error);
+      color: var(--color-feedback-foreground-on-bg-subtle-error);
     }
   }
   .alert--emphasized.alert--success {
     background-color: var(--color-feedback-background-emphasized-success);
+    color: var(--color-feedback-foreground-on-bg-emphasized-success, #fff);
+
     .alert__button:hover {
-      background: var(--color-feedback-background-subtle-success);
-      color: var(--color-feedback-background-emphasized-success);
+      background: var(--color-feedback-background-default-success);
+      color: var(--color-feedback-foreground-on-bg-subtle-success,);
     }
   }
   .alert--emphasized.alert--neutral {
     background-color: var(--color-feedback-background-emphasized-neutral);
+    color: var(--color-feedback-foreground-on-bg-emphasized-neutral, #fff);
+
     .alert__button:hover {
       background: var(--color-feedback-background-subtle-neutral);
-      color: var(--color-feedback-background-emphasized-neutral);
+      color: var(--color-feedback-foreground-on-bg-subtle-neutral);
     }
   }
   .alert--emphasized.alert--warning {
-    color: var(--color-feedback-foreground-emphasized-warning);
+    color: var(--color-feedback-foreground-on-bg-emphasized-warning, #0d0d0e);
+
     background-color: var(--color-feedback-background-emphasized-warning);
     .alert__icon {
       color: var(--color-feedback-foreground-emphasized-warning) !important;
@@ -129,6 +144,10 @@ const a = r`
     .alert__button {
       stroke: var(--color-feedback-foreground-emphasized-warning) !important;
     }
+    .alert__button:hover {
+      background: var(--color-feedback-background-subtle-warning);
+      color: var(--color-feedback-foreground-on-bg-subtle-warning);
+    }
   }
 
   /* leftStroke */
@@ -136,38 +155,37 @@ const a = r`
     border-left: 6px solid;
   }
   .alert--left-stroke.alert--primary {
-    border-color: var(--color-feedback-background-emphasized-info);
+    border-color: var(--color-feedback-border-emphasized-info);
   }
   .alert--left-stroke.alert--danger {
-    border-color: var(--color-feedback-background-emphasized-error);
+    border-color: var(--color-feedback-border-emphasized-error);
   }
   .alert--left-stroke.alert--success {
-    border-color: var(--color-feedback-background-emphasized-success);
+    border-color: var(--color-feedback-border-emphasized-succ);
   }
   .alert--left-stroke.alert--neutral {
-    border-color: var(--color-feedback-foreground-default-neutral);
+    border-color: var(--color-feedback-border-emphasized-neutral);
   }
   .alert--left-stroke.alert--warning {
-    border-color: var(--color-feedback-background-emphasized-warning);
+    border-color: var(--color-feedback-border-emphasized-warning);
   }
 
   /* leftStroke and emphasized */
   .alert--left-stroke.alert--emphasized.alert--primary {
-    border-color: var(--color-feedback-background-default-info);
+    border-color: var(--color-feedback-border-subtle-info);
   }
   .alert--left-stroke.alert--emphasized.alert--danger {
-    border-color: var(--color-feedback-background-default-error);
+    border-color: var(--color-feedback-border-subtle-error);
   }
   .alert--left-stroke.alert--emphasized.alert--success {
-    border-color: var(--color-feedback-background-subtle-success);
+    border-color: var(--color-feedback-border-subtle-success);
   }
   .alert--left-stroke.alert--emphasized.alert--neutral {
-    border-color: var(--color-feedback-background-default-neutral);
+    border-color: var(--color-feedback-border-subtle-neutral);
   }
   .alert--left-stroke.alert--emphasized.alert--warning {
-    border-color: var(--color-feedback-background-default-warning);
+    border-color: var(--color-feedback-border-subtle-warning);
   }
 `;
-export {
-  a as default
-};
+//#endregion
+export { t as default };

package/components/nve-badge/nve-badge.component.js

@@ -1,53 +1,49 @@
-import { n as o, t as u } from "../../chunks/property.js";
-import g from "./nve-badge.styles.js";
-import { a as d, x as m } from "../../chunks/lit-element.js";
-import { e as b } from "../../chunks/class-map.js";
-var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (p, r, i, a) => {
-  for (var t = a > 1 ? void 0 : a ? f(r, i) : r, n = p.length - 1, l; n >= 0; n--)
-    (l = p[n]) && (t = (a ? l(r, i, t) : l(t)) || t);
-  return a && t && v(r, i, t), t;
-};
-let e = class extends d {
-  constructor() {
-    super(...arguments), this.variant = "primary", this.size = "medium", this.saturation = null;
-  }
-  render() {
-    return m`
+import { a as e, t } from "../../chunks/lit.js";
+import { o as n, s as r, t as i } from "../../chunks/decorate.js";
+import { t as a } from "../../chunks/class-map.js";
+import o from "./nve-badge.styles.js";
+//#region src/components/nve-badge/nve-badge.component.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "primary", this.size = "medium", this.saturation = null;
+	}
+	static {
+		this.styles = [o];
+	}
+	render() {
+		return e`
       <span
         part="base"
-        class=${b({
-      badge: !0,
-      "badge--primary": this.variant === "primary",
-      "badge--success": this.variant === "success",
-      "badge--neutral": this.variant === "neutral",
-      "badge--warning": this.variant === "warning",
-      "badge--danger": this.variant === "danger",
-      "badge--brand": this.variant === "brand",
-      "badge--small": this.size === "small",
-      "badge--medium": this.size === "medium",
-      "badge--large": this.size === "large",
-      "saturation--subtle": this.saturation === "subtle"
-    })}
+        class=${a({
+			badge: !0,
+			"badge--primary": this.variant === "primary",
+			"badge--success": this.variant === "success",
+			"badge--neutral": this.variant === "neutral",
+			"badge--warning": this.variant === "warning",
+			"badge--danger": this.variant === "danger",
+			"badge--brand": this.variant === "brand",
+			"badge--small": this.size === "small",
+			"badge--medium": this.size === "medium",
+			"badge--large": this.size === "large",
+			"saturation--subtle": this.saturation === "subtle"
+		})}
         role="status"
       >
         <slot></slot>
       </span>
     `;
-  }
-};
-e.styles = [g];
-s([
-  o({ type: String, reflect: !0 })
-], e.prototype, "variant", 2);
-s([
-  o({ type: String, reflect: !0 })
-], e.prototype, "size", 2);
-s([
-  o({ type: String, reflect: !1 })
-], e.prototype, "saturation", 2);
-e = s([
-  u("nve-badge")
-], e);
-export {
-  e as default
+	}
 };
+i([n({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), i([n({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), i([n({
+	type: String,
+	reflect: !1
+})], s.prototype, "saturation", void 0), s = i([r("nve-badge")], s);
+var c = s;
+//#endregion
+export { c as default };

package/components/nve-badge/nve-badge.styles.js

@@ -1,5 +1,6 @@
-import { i as a } from "../../chunks/lit-element.js";
-const o = a`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-badge/nve-badge.styles.ts
+var t = e`
   :host {
     display: inline-flex;
   }
@@ -15,65 +16,67 @@ const o = a`
 
   /* Variant modifiers */
   .badge--brand {
-    background-color: var(--color-brand-background-primary);
-    color: var(--color-interactive-primary-foreground-default);
+    background-color: var(--color-brand-background-secondary);
+    color: var(--color-brand-foreground-primary-on-bg);
   }
 
   .badge--neutral {
-    background-color: var(--color-feedback-background-default-neutral, #e4e5e7);
-    color: var(--color-feedback-foreground-default-neutral, #00131c);
+    background-color: var(--color-feedback-background-emphasized-neutral);
+    color: var(--color-feedback-foreground-on-bg-emphasized-neutral);
   }
 
   .badge--primary {
-    background-color: var(--color-feedback-background-emphasized-info, #1e6fdc);
-    color: var(--color-feedback-foreground-emphasized-info, #fff);
+    background-color: var(--color-feedback-background-emphasized-info);
+    color: var(--color-feedback-foreground-on-bg-emphasized-info);
   }
 
   .badge--success {
-    background-color: var(--color-feedback-background-emphasized-success, #00814b);
-    color: var(--color-feedback-foreground-emphasized-success, #fff);
-  }
-  .badge--warning {
-    background-color: var(--color-feedback-background-emphasized-warning, #ffd046);
-    color: var(--color-feedback-foreground-emphasized-warning, #0d0d0e);
+    background-color: var(--color-feedback-background-emphasized-success);
+    color: var(--color-feedback-foreground-on-bg-emphasized-success);
   }
 
   .badge--danger {
-    background-color: var(--color-feedback-background-emphasized-error, #c00);
-    color: var(--color-feedback-foreground-emphasized-error, #fff);
+    background-color: var(--color-feedback-background-emphasized-error);
+    color: var(--color-feedback-foreground-on-bg-emphasized-error);
   }
-
-  /* Lav metningsgrad */
-  .saturation--subtle {
-    color: var(--color-neutrals-foreground-primary, #00131c);
+  .badge--warning {
+    background-color: var(--color-feedback-background-emphasized-warning);
+    color: var(--color-feedback-foreground-on-bg-emphasized-warning);
   }
 
+  /* Lav metningsgrad */
   .badge--brand.saturation--subtle {
     background-color: var(--color-brand-background-tertiary);
+    color: var(--color-brand-foreground-secondary-on-bg);
   }
 
   .badge--neutral.saturation--subtle {
-    background-color: var(--color-feedback-background-subtle-neutral, #f7f7f8);
+    background-color: var(--color-feedback-background-default-neutral);
+    color: var(--color-feedback-foreground-on-bg-subtle-neutral);
   }
 
   .badge--primary.saturation--subtle {
-    background-color: var(--color-feedback-background-default-info, #ceeaff);
+    background-color: var(--color-feedback-background-default-info);
+    color: var(--color-feedback-foreground-on-bg-subtle-info);
   }
 
   .badge--success.saturation--subtle {
-    background-color: var(--color-feedback-background-default-success, #cbf9cb);
-  }
-  .badge--warning.saturation--subtle {
-    background-color: var(--color-feedback-background-default-warning, #ffe8a5);
+    background-color: var(--color-feedback-background-default-success);
+    color: var(--color-feedback-foreground-on-bg-subtle-success);
   }
   .badge--danger.saturation--subtle {
-    background-color: var(--color-feedback-background-default-error, #ffd8de);
+    background-color: var(--color-feedback-background-default-error);
+    color: var(--color-feedback-foreground-on-bg-subtle-error);
+  }
+  .badge--warning.saturation--subtle {
+    background-color: var(--color-feedback-background-default-warning);
+    color: var(--color-feedback-foreground-on-bg-subtle-warning);
   }
 
   /* Sizing modifiers */
   .badge--small {
     padding: var(--spacing-2x-small, 4px) 6px;
-    font-family: 'Source Sans Pro';
+    font-family: 'Source Sans 3';
     font-size: 12px;
     font-style: normal;
     font-weight: 600;
@@ -91,6 +94,5 @@ const o = a`
     font: var(--typography-label-small);
   }
 `;
-export {
-  o as default
-};
+//#endregion
+export { t as default };

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

@@ -1,17 +1,117 @@
-import { default as SlButton } from '@shoelace-style/shoelace/dist/components/button/button.js';
+import { LitElement, PropertyValues } from 'lit';
 import { INveComponent } from '../../interfaces/NveComponent.interface';
 /**
- * Selveste NVE-knappen.
- * Bruk href for å gjøre den om til en link.
- * Disse feltene skal ikke brukes:caret og pill
- * Circle attributte skal brukes kun når man viser bare et ikon.
+ * Knapp-komponenten brukes til å utføre handlinger eller starte hendelser.
+ * Den gir brukerne en tydelig og gjenkjennelig måte å samhandle med systemet på, for eksempel for å sende inn skjemaer,
+ * bekrefte valg eller gå videre til neste steg i en prosess.
+ *
+ * Knappen renderes som et native button-element når den ikke har en href-attributt.
+ * Hvis href-attributtet er tilstede, renderes den som et a-element for å opprettholde semantikken for lenker.
+ * Noen valgte knapp-attributer kan ikke brukes når den renderes som en lenke, og omvendt.
+ *
+ * Se seksjonen om tilgjengelighet for mer informasjon.
+ * Veiledning om når og hvordan knapper bør brukes finner du i retningslinjene.
+ *
+ * @slot start - Innhold som vises før hovedinnholdet i knappen, for eksempel et ikon.
+ * @slot end - Innhold som vises etter hovedinnholdet i knappen, for eksempel et ikon.
+ *
+ * @event click Simulerer et klikk på native knapp-elementet.
+ * @event focus Simulerer et fokus på native knapp-elementet.
+ * @event blur Simulerer et blur på native knapp-elementet.
+ *
+ * @csspart base Topp-elementet, enten <button> eller <a>.
+ * @csspart label Hoved innholdet i knappen, vanligvis tekst.
+ * @csspart spinner Spinneren som vises når knappen er i loading-tilstand.
+ * @csspart start Innholdet i start-slottet, for eksempel et ikon.
+ * @csspart end Innholdet i end-slottet, for eksempel et ikon.
  */
-export default class NveButton extends SlButton implements INveComponent {
-    constructor();
-    static styles: import('lit').CSSResultGroup[];
-    size: 'small' | 'medium' | 'large';
+export default class NveButton extends LitElement implements INveComponent {
     testId: string | undefined;
-    firstUpdated(): void;
+    /** Om knappen skal være rund. Fungerer kun når det ikke finnes noe tekst og bare et ikon vises */
+    circle: boolean;
+    /** Setter knappen i lastemodus, slik at spinner vises */
+    loading: boolean;
+    /** Størrelse på knappen */
+    size: 'small' | 'medium' | 'large';
+    /** Varianter av knappen */
+    variant: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger';
+    /** Filnavnet for nedlasting når `href` er tilstede. */
+    download?: string;
+    /** URL-en som knappen skal navigere til når den klikkes. */
+    href?: string;
+    /** Språket for den lenkede ressursen. Støttes kun når `href` er tilstede. */
+    hreflang?: string;
+    /** Hvordan henviseren skal håndteres når lenken følges. Støttes kun når `href` er tilstede. */
+    referrerpolicy?: string;
+    /** rel-attributtet for lenken når `href` er tilstede. */
+    rel?: string;
+    /** Hvor lenken skal åpnes. Kun brukt når `href` er tilstede. */
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    /** ID-en til skjemaet som knappen er tilknyttet. Støttes ikke av lenkeknapp.*/
+    form?: string;
+    /** URL-en som skjemaet skal sendes til når knappen klikkes. Støttes ikke av lenkeknapp.*/
+    formAction?: string;
+    /** Hvordan skjemaet skal kodes når det sendes. Støttes ikke av lenkeknapp.*/
+    formEnctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+    /** HTTP-metoden som skal brukes når skjemaet sendes. Støttes ikke av lenkeknapp.*/
+    formMethod?: 'get' | 'post' | 'dialog';
+    /** Om skjemaet ikke skal valideres før sending. Støttes ikke av lenkeknapp.*/
+    formNoValidate: boolean;
+    /** Hvor skjemaet skal åpnes når det sendes. Støttes ikke av lenkeknapp.*/
+    formTarget?: '_self' | '_blank' | '_parent' | '_top';
+    /** Navnet på knappen når den brukes i et skjema. Støttes ikke av lenkeknapp. */
+    name?: string;
+    /** Om knappen skal være i fokus når siden lastes. */
+    autofocus: boolean;
+    /** Om knappen skal være deaktivert. Støttes ikke av lenkeknapp.  */
+    disabled: boolean;
+    /** Knapp-typen. Støttes ikke av lenkeknapp. */
+    type: 'button' | 'submit' | 'reset';
+    /** Verdien til knappen. Brukes i skjemaer. Støttes ikke av lenkeknapp. */
+    value?: string;
+    /**
+     * @internal
+     */
+    ariaControls?: string;
+    /**
+     * @internal
+     */
+    ariaExpanded: 'true' | 'false' | null;
+    /**
+     * @internal
+     */
+    ariaHaspopup: 'true' | 'false' | null;
+    /**
+     * @internal
+     */
+    ariaLabel: string | null;
+    /**
+     * @internal
+     */
+    ariaPressed: 'true' | 'false' | 'mixed' | null;
+    private hasIconOrImgOnly;
+    /**
+     * @internal
+     */
+    button: HTMLButtonElement | HTMLLinkElement;
+    static styles: import('lit').CSSResult[];
+    /** Finn tilknyttet skjema, enten via [form] eller nærmeste <form>-forelder. */
+    private getForm;
+    private constructLightDOMButton;
+    private handleClick;
+    private handleDefaultSlotChange;
+    /** Simulerer et klikk på knappen. */
+    click(): void;
+    /** Setter fokus på knappen. */
+    focus(options?: FocusOptions): void;
+    /** Fjerner fokus fra knappen. */
+    blur(): void;
+    private isLink;
+    private forwardAriaAttributes;
+    constructor();
+    updated(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {