nve-designsystem 3.2.0 → 3.3.0

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

@@ -1,5 +1,6 @@
-import { i as r } from "../../chunks/lit-element.js";
-const o = r`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-textarea/nve-textarea.styles.ts
+var t = e`
   :host {
     display: flex;
     --textarea-required-content: '*Obligatorisk';
@@ -93,6 +94,11 @@ const o = r`
     color: var(--color-feedback-background-emphasized-error);
   }
 
+  .textarea__hint {
+    font: var(--typography-label-x-small-light);
+    color: var(--color-neutrals-foreground-primary);
+  }
+
   .textarea__icon__container {
     position: relative; /** trengs for å posisjonere ikonen */
   }
@@ -108,6 +114,5 @@ const o = r`
     width: unset;
   }
 `;
-export {
-  o as default
-};
+//#endregion
+export { t as default };

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

@@ -1,30 +1,2 @@
-import { t as f } from "../../chunks/chunk.URTPIBTY.js";
-import "../../chunks/chunk.5JY5FUCG.js";
-import "../../chunks/chunk.6CTB5ZDJ.js";
-import "../../chunks/chunk.4TUIT776.js";
-import { n as m, t as n } from "../../chunks/property.js";
-import "../nve-icon/nve-icon.component.js";
-import u from "./nve-tooltip.styles.js";
-var v = Object.defineProperty, c = Object.getOwnPropertyDescriptor, a = (l, e, p, o) => {
-  for (var t = o > 1 ? void 0 : o ? c(e, p) : e, s = l.length - 1, i; s >= 0; s--)
-    (i = l[s]) && (t = (o ? i(e, p, t) : i(t)) || t);
-  return o && t && v(e, p, t), t;
-};
-let r = class extends f {
-  constructor() {
-    super(), this.variant = "neutral", this.saturation = "emphasized";
-  }
-};
-r.styles = [f.styles, u];
-a([
-  m({ reflect: !0 })
-], r.prototype, "variant", 2);
-a([
-  m({ reflect: !0 })
-], r.prototype, "saturation", 2);
-r = a([
-  n("nve-tooltip")
-], r);
-export {
-  r as default
-};
+import { t as e } from "../../chunks/nve-tooltip.component.js";
+export { e as default };

package/components/nve-tooltip/nve-tooltip.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-tooltip/nve-tooltip.styles.ts
+var t = e`
   :host {
     --sl-tooltip-border-radius: 40px;
     --sl-tooltip-background-color: var(--_bg-color);
@@ -114,6 +115,5 @@ const a = r`
     --_border-color: var(--color-feedback-background-emphasized-error);
   }
 `;
-export {
-  a as default
-};
+//#endregion
+export { t as default };

package/components/nve-warning-level/nve-warning-level.component.js

@@ -1,78 +1,2 @@
-import { a as c, E as d, x as h } from "../../chunks/lit-element.js";
-import { n as l, t as v } from "../../chunks/property.js";
-import C from "./nve-warning-level.styles.js";
-import { e as p } from "../../chunks/class-map.js";
-import { o as w } from "../../chunks/if-defined.js";
-const f = "data:image/svg+xml,%3csvg%20width='30'%20height='31'%20viewBox='0%200%2030%2031'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1.5%2026.0249L15%203.5249L28.5%2026.0249H1.5Z'%20fill='%2300131C'/%3e%3cpath%20d='M14.9934%2022.2749C15.3103%2022.2749%2015.5781%2022.1677%2015.7969%2021.9534C16.0156%2021.739%2016.125%2021.4734%2016.125%2021.1565C16.125%2020.8396%2016.0178%2020.5718%2015.8035%2020.353C15.5891%2020.1343%2015.3235%2020.0249%2015.0066%2020.0249C14.6897%2020.0249%2014.4219%2020.1321%2014.2031%2020.3464C13.9844%2020.5608%2013.875%2020.8264%2013.875%2021.1433C13.875%2021.4602%2013.9822%2021.728%2014.1965%2021.9468C14.4109%2022.1655%2014.6765%2022.2749%2014.9934%2022.2749ZM13.875%2018.5249H16.125V12.5249H13.875V18.5249Z'%20fill='white'/%3e%3c/svg%3e", m = "data:image/svg+xml,%3csvg%20width='21'%20height='21'%20viewBox='0%200%2021%2021'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0.966146'%20y='1.30843'%20width='18.3333'%20height='18.3333'%20rx='9.16667'%20fill='white'/%3e%3crect%20x='0.966146'%20y='1.30843'%20width='18.3333'%20height='18.3333'%20rx='9.16667'%20stroke='%2300131C'%20stroke-width='1.66667'/%3e%3cpath%20d='M10.1292%2016.5467C9.77038%2016.5467%209.46447%2016.4189%209.2115%2016.1634C8.95852%2015.9078%208.83203%2015.6006%208.83203%2015.2418C8.83203%2014.883%208.9598%2014.5771%209.21533%2014.3241C9.47087%2014.0711%209.77805%2013.9446%2010.1369%2013.9446C10.4957%2013.9446%2010.8016%2014.0724%2011.0546%2014.3279C11.3076%2014.5835%2011.4341%2014.8906%2011.4341%2015.2495C11.4341%2015.6083%2011.3063%2015.9142%2011.0508%2016.1672C10.7952%2016.4202%2010.488%2016.5467%2010.1292%2016.5467ZM8.83203%2012.2099V4.40381H11.4341V12.2099H8.83203Z'%20fill='%2300131C'/%3e%3c/svg%3e";
-var b = Object.defineProperty, u = Object.getOwnPropertyDescriptor, i = (a, t, s, n) => {
-  for (var r = n > 1 ? void 0 : n ? u(t, s) : t, o = a.length - 1, g; o >= 0; o--)
-    (g = a[o]) && (r = (n ? g(t, s, r) : g(r)) || r);
-  return n && r && b(t, s, r), r;
-};
-let e = class extends c {
-  constructor() {
-    super(), this.testId = void 0, this.level = "1", this.border = !1, this.warningBadge = null, this.ariaLabel = null;
-  }
-  /**
-   * @internal
-   * Sjekker om komponent er plassert innen en knapp eller lenke.
-   */
-  get isDirectParentButton() {
-    const a = this.parentElement;
-    if (!a) return !1;
-    const t = a.tagName.toLowerCase();
-    return t === "button" || t === "a";
-  }
-  render() {
-    return h`
-      <div
-        class=${p({
-      "warning-level": !0,
-      [`warning-level--${this.level}`]: !0,
-      border: this.border,
-      "inside-button": this.isDirectParentButton
-    })}
-        part="base"
-        role="img"
-        testId=${w(this.testId)}
-        aria-label=${w(this.ariaLabel)}
-      >
-        ${this.level === "unknown" ? "?" : this.level}
-        ${this.warningBadge ? h`
-              <img
-                part="warning-badge"
-                alt=""
-                class=${p({
-      "warning-level-badge": !0,
-      "warning-level-badge--circle": this.warningBadge === "circle",
-      "warning-level-badge--triangle": this.warningBadge === "triangle"
-    })}
-                src=${this.warningBadge === "triangle" ? f : m}
-              />
-            ` : d}
-      </div>
-    `;
-  }
-};
-e.styles = [C];
-i([
-  l({ type: String })
-], e.prototype, "testId", 2);
-i([
-  l()
-], e.prototype, "level", 2);
-i([
-  l({ type: Boolean })
-], e.prototype, "border", 2);
-i([
-  l({ type: String })
-], e.prototype, "warningBadge", 2);
-i([
-  l({ type: String, attribute: "aria-label" })
-], e.prototype, "ariaLabel", 2);
-e = i([
-  v("nve-warning-level")
-], e);
-export {
-  e as default
-};
+import { t as e } from "../../chunks/nve-warning-level.component.js";
+export { e as default };

package/components/nve-warning-level/nve-warning-level.styles.js

@@ -1,5 +1,6 @@
-import { i as e } from "../../chunks/lit-element.js";
-const o = e`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-warning-level/nve-warning-level.styles.ts
+var t = e`
   :host {
     --size: 34px;
     --font-size: 20px;
@@ -22,7 +23,7 @@ const o = e`
     justify-content: center;
     align-items: center;
     color: var(--color-dangerlevel-foreground-default-level1);
-    font-family: 'Source Sans Pro';
+    font-family: 'Source Sans 3';
     font-size: var(--font-size);
     font-style: normal;
     font-weight: 600;
@@ -84,7 +85,7 @@ const o = e`
   }
 
   .border {
-    border: var(--border-width) solid var(--color-Sdangerlevel-foreground-default-level1);
+    border: var(--border-width) solid var(--color-dangerlevel-foreground-default-level1);
   }
 
   .warning-level-badge {
@@ -111,6 +112,5 @@ const o = e`
     min-height: 17px;
   }
 `;
-export {
-  o as default
-};
+//#endregion
+export { t as default };

package/css/global.css

@@ -1,58 +1,15 @@
-@import '../nve-designsystem.css';
-
-@import url('https://fonts.cdnfonts.com/css/source-sans-pro');
-/* Hvis du ikke vil at applikasjonen henter fonter fra nettet under kjøring, kan du laste dem ned på forhånd og legge dem i prosjektet ditt.
-   Bytt ut linja under med @font-face for hver av fontene som du laster lokalt. 
-   Designsystemet bruker Source Sans Pro med font-vekt 400 og 600*/
+@import './shoelace-styles.css';
+
+@font-face {
+  font-family: 'Source Sans 3';
+  src: url('../fonts/SourceSans3-VariableFont_wght.woff2') format('woff2-variations');
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+}
 
 :root {
   --transition-time: 0.3s;
-
-  --sl-focus-ring-color: var(--color-interactive-links-focus);
-  --sl-focus-ring-style: solid;
-  --sl-focus-ring-width: 2px;
-  --sl-focus-ring-offset: -1px;
-  --sl-border-radius-medium: var(--border-radius-small);
-  --sl-border-radius-small: var(--border-radius-small);
-  --sl-input-height-small: var(--sizing-fixed-sizing-medium);
-  --sl-input-height-medium: var(--sizing-fixed-sizing-large);
-  --sl-input-height-large: var(--sizing-fixed-sizing-x-large);
-
-  --sl-input-background-color: var(--color-neutrals-background-primary, #fff);
-  --sl-input-background-color-focus: var(--color-neutrals-background-primary, #fff);
-  --sl-input-background-color-hover: var(--color-neutrals-background-primary, #fff);
-  --sl-input-background-color-disabled: var(--color-neutrals-background-primary, #fff);
-  --sl-input-color: var(--color-neutrals-foreground-primary, #00131c);
-  --sl-input-color-focus: var(--color-neutrals-foreground-primary, #00131c);
-  --sl-input-color-hover: var(--color-neutrals-foreground-primary, #00131c);
-  --sl-input-color-disabled: var(--color-interactive-secondary-foreground-disabled, #00131c);
-  --sl-input-icon-color: var(--color-neutrals-foreground-primary, #00131c);
-  --sl-input-icon-color-hover: var(--color-neutrals-foreground-primary, #00131c);
-  --sl-input-icon-color-focus: var(--color-neutrals-foreground-primary, #00131c);
-  --sl-input-placeholder-color: var(--sl-color-neutral-500);
-  --sl-input-placeholder-color-disabled: var(--color-interactive-secondary-foreground-disabled, #00131c);
-  --sl-input-focus-ring-color: var(--color-interactive-links-focus);
-  --sl-input-border-color: var(--color-neutrals-border-default, #878c94);
-  --sl-input-border-color-focus: var(--color-interactive-links-focus);
-  --sl-input-border-color-hover: var(--color-neutrals-border-subtle, #c8eaf9);
-  --sl-input-border-color-disabled: var(--color-neutrals-border-disabled, #878c94);
-  --sl-input-focus-ring-offset: -1px;
-
-  --sl-input-filled-background-color: var(--color-neutrals-background-primary-contrast, #eff8fc);
-  --sl-input-filled-background-color-hover: var(--color-neutrals-background-primary-contrast, #eff8fc);
-  --sl-input-filled-background-color-focus: var(--color-neutrals-background-primary-contrast, #eff8fc);
-  --sl-input-filled-background-color-disabled: var(--color-neutrals-background-primary-contrast, #eff8fc);
-  --sl-input-filled-color: var(--color-neutrals-foreground-primary, #00131c);
-  --sl-input-filled-color-hover: var(--color-neutrals-foreground-primary, #00131c);
-  --sl-input-filled-color-focus: var(--color-neutrals-foreground-primary, #00131c);
-  --sl-input-filled-color-disabled: var(--color-interactive-secondary-foreground-disabled, #00131c);
-
-  --sl-input-font-family: var(--sl-font-sans);
-  --sl-input-font-weight: var(--sl-font-weight-normal);
-  --sl-input-font-size-small: var(--sl-font-size-small);
-  --sl-input-font-size-medium: var(--sl-font-size-medium);
-  --sl-input-font-size-large: var(--sl-font-size-large);
-  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
 }
 
 /* Brukes på lenkene som ikke er i Shadow-DOMen som f.eks de som skal wrappe <nve-link-card> */
@@ -60,14 +17,15 @@ a {
   color: var(--color-neutrals-foreground-primary, #0d0d0e);
 }
 
-/* Brukes for å fjerne standard linje i <a>  som ikke er i Shadow-DOMen som f.eks de som skal wrappe <nve-link-card> */
-a:has(nve-link-card) {
+/* Brukes for å fjerne standard linje i <a>  som ikke er i Shadow-DOMen som f.eks de som skal wrappe <nve-link-card> og <nve-navigation-card> */
+a:has(nve-link-card),
+a:has(nve-navigation-card) {
   text-decoration: unset;
 }
 
 /* Brukes for å overskrive standard lenke visited styling som ikke er i Shadow-DOMen som f.eks de som skal wrappe <nve-link-card> */
 a:visited {
-  color: var(--color-interactive-links-visited);
+  color: var(--color-interactive-foreground-link-visited);
 }
 
 /* Brukes i nve-alert for å vise toast*/