nve-designsystem 2.10.4 → 2.12.0

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

@@ -7,6 +7,8 @@ export default class NveDrawer extends SlDrawer implements INveComponent {
     testId: string | undefined;
     static styles: import('lit').CSSResultGroup[];
     constructor();
+    firstUpdated(): void;
+    private updateCloseIcon;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,26 +1,43 @@
-import { n as a, t as v } from "../../chunks/property.js";
-import d from "./nve-drawer.styles.js";
-import { d as i } from "../../chunks/chunk.SAPQLUO4.js";
+import { n as i, t as u } from "../../chunks/property.js";
+import m from "./nve-drawer.styles.js";
+import { d as a } from "../../chunks/chunk.SAPQLUO4.js";
 import "../../chunks/chunk.RWUUFNUL.js";
 import "../../chunks/chunk.6CTB5ZDJ.js";
 import "../../chunks/chunk.YHLNUJ7P.js";
 import "../../chunks/chunk.4TUIT776.js";
-var n = Object.defineProperty, u = Object.getOwnPropertyDescriptor, m = (l, t, o, e) => {
-  for (var r = e > 1 ? void 0 : e ? u(t, o) : t, p = l.length - 1, f; p >= 0; p--)
-    (f = l[p]) && (r = (e ? f(t, o, r) : f(r)) || r);
-  return e && r && n(t, o, r), r;
+var d = Object.defineProperty, f = Object.getOwnPropertyDescriptor, c = (n, t, r, e) => {
+  for (var o = e > 1 ? void 0 : e ? f(t, r) : t, l = n.length - 1, p; l >= 0; l--)
+    (p = n[l]) && (o = (e ? p(t, r, o) : p(o)) || o);
+  return e && o && d(t, r, o), o;
 };
-let s = class extends i {
+let s = class extends a {
   constructor() {
     super(), this.testId = void 0;
   }
+  firstUpdated() {
+    super.firstUpdated(), this.updateCloseIcon();
+  }
+  updateCloseIcon() {
+    requestAnimationFrame(() => {
+      const t = this?.shadowRoot?.querySelector('[part="close-button"]')?.shadowRoot?.querySelector("button");
+      if (!t) return;
+      t.setAttribute("title", "Lukk"), t.style.color = "inherit";
+      const r = {
+        start: "left_panel_close",
+        end: "right_panel_close",
+        top: "top_panel_close",
+        bottom: "bottom_panel_close"
+      }, e = document.createElement("nve-icon");
+      e.setAttribute("name", r[this.placement]), t.replaceChildren(e);
+    });
+  }
 };
-s.styles = [i.styles, d];
-m([
-  a({ reflect: !0, type: String })
+s.styles = [a.styles, m];
+c([
+  i({ reflect: !0, type: String })
 ], s.prototype, "testId", 2);
-s = m([
-  v("nve-drawer")
+s = c([
+  u("nve-drawer")
 ], s);
 export {
   s as default

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

@@ -1,46 +1,51 @@
 import { i as r } from "../../chunks/lit-element.js";
-const o = r`
-  :host::part(panel) {
-    padding: var(--spacing-x-large) var(--spacing-large) var(--spacing-x-large) var(--spacing-large);
-    background-color: var(--neutrals-background-primary);
-    color: var(--neutrals-foreground-primary);
-  }
+const d = r`
+    :host {
+        --drawer-padding-block: var(--spacing-large);
+        --drawer-padding-inline: var(--spacing-medium);
+    }
 
-  :host::part(header) {
-    padding-bottom: var(--spacing-x-small);
-    border-bottom: 1px solid var(--Neutrals-Border-Subtle, #e4e5e7);
-  }
+    :host::part(title) {
+        display: flex;
+        align-items: center;
+        font-size: var(--font-size-small);
+        font-weight: var(--font-weight-semibold);
+        padding: 0;
+    }
 
-  :host::part(title) {
-    display: flex;
-    align-items: center;
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-semibold);
-    padding: 0;
-  }
+    :host::part(header) {
+        padding: var(--drawer-padding-block) var(--drawer-padding-inline);
+        border-bottom: 1px solid var(--neutrals-border-subtle);
+    }
 
-  :host::part(header-actions) {
-    display: flex;
-    align-items: center;
-    padding: 0;
-  }
+    :host::part(header-actions) {
+        display: flex;
+        align-items: center;
+        padding: 0;
+    }
 
-  :host::part(close-button):hover {
-    background-color: var(--interactive-ghost-background-hover);
-    border-radius: var(--border-radius-small, 4px);
-    transition: background-color 0.3s ease;
-  }
+    :host::part(panel) {
+        background-color: var(--neutrals-background-primary);
+        color: var(--neutrals-foreground-primary);
+    }
 
-  .drawer__body {
-    padding: 0;
-    padding-top: var(--spacing-large);
-  }
+    :host::part(body) {
+        padding: var(--drawer-padding-block) var(--drawer-padding-inline);
+    }
 
-  :host::part(footer),
-  ::slotted([slot='footer']) {
-    padding: 0;
-  }
+    :host::part(footer) {
+        display: flex;
+        gap: var(--spacing-small);
+        padding: var(--drawer-padding-block) var(--drawer-padding-inline);
+        justify-content: flex-start;
+    }
+
+    :host::part(close-button):hover {
+        background-color: var(--interactive-ghost-background-hover);
+        border-radius: var(--border-radius-small, 4px);
+        transition: background-color 0.3s ease;
+    }
 `;
 export {
-  o as default
+  d as default
 };

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

@@ -16,11 +16,6 @@ import { CSSResultArray, LitElement, TemplateResult } from 'lit';
  * @csspart control Element rundt bryteren
  * @csspart thumb Bryter-indikatoren
  * @csspart label Tekst bak bryteren
- *
- * @cssproperty --nve-switch-on-color - Bakgrunnsfarge når switch er PÅ
- * @cssproperty --nve-switch-off-color - Bakgrunnsfarge når switch er AV
- * @cssproperty --nve-switch-thumb-on-color- Farge på bryter når switch er PÅ
- * @cssproperty --nve-switch-thumb-off-color - Farge på bryter når switch er AV
  */
 export default class NveSwitch extends LitElement implements INveComponent {
     constructor();
@@ -36,6 +31,10 @@ export default class NveSwitch extends LitElement implements INveComponent {
     disabled: boolean;
     /** Verdien til switchen. */
     checked: boolean;
+    /** Bestemmer fargevariant */
+    variant: 'primary' | 'default';
+    /** Plassering av label-tekst i forhold til bryteren */
+    labelPosition: 'start' | 'end';
     static styles: CSSResultArray;
     private emit;
     private handleBlur;

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

@@ -1,29 +1,29 @@
-import { n as h, t as n } from "../../chunks/property.js";
+import { n as i, t as n } from "../../chunks/property.js";
 import { r as p } from "../../chunks/state.js";
-import { e as d } from "../../chunks/query.js";
-import { a as u, x as f } from "../../chunks/lit-element.js";
+import { e as u } from "../../chunks/query.js";
+import { a as d, x as f } from "../../chunks/lit-element.js";
 import { w as m } from "../../chunks/watch.js";
 import { o as b } from "../../chunks/if-defined.js";
 import { l as w } from "../../chunks/live.js";
-import { e as k } from "../../chunks/class-map.js";
-import y from "./nve-switch.styles.js";
-var _ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (e, c, o, a) => {
-  for (var i = a > 1 ? void 0 : a ? v(c, o) : c, l = e.length - 1, r; l >= 0; l--)
-    (r = e[l]) && (i = (a ? r(c, o, i) : r(i)) || i);
-  return a && i && _(c, o, i), i;
+import { e as y } from "../../chunks/class-map.js";
+import k from "./nve-switch.styles.js";
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (s, a, o, c) => {
+  for (var h = c > 1 ? void 0 : c ? _(a, o) : a, l = s.length - 1, r; l >= 0; l--)
+    (r = s[l]) && (h = (c ? r(a, o, h) : r(h)) || h);
+  return c && h && v(a, o, h), h;
 };
-let t = class extends u {
+let t = class extends d {
   constructor() {
-    super(), this.testId = "", this.hasFocus = !1, this.title = "", this.name = "", this.value = "", this.disabled = !1, this.checked = !1;
+    super(), this.testId = "", this.hasFocus = !1, this.title = "", this.name = "", this.value = "", this.disabled = !1, this.checked = !1, this.variant = "default", this.labelPosition = "end";
   }
-  emit(e) {
-    const c = new CustomEvent(e, {
+  emit(s) {
+    const a = new CustomEvent(s, {
       bubbles: !0,
       cancelable: !1,
       composed: !0,
       detail: {}
     });
-    this.dispatchEvent(c);
+    this.dispatchEvent(a);
   }
   handleBlur() {
     this.hasFocus = !1;
@@ -36,8 +36,8 @@ let t = class extends u {
   handleFocus() {
     this.hasFocus = !0;
   }
-  handleKeyDown(e) {
-    e.key === "ArrowLeft" && (e.preventDefault(), this.checked = !1, this.emit("change"), this.emit("input")), e.key === "ArrowRight" && (e.preventDefault(), this.checked = !0, this.emit("change"), this.emit("input"));
+  handleKeyDown(s) {
+    s.key === "ArrowLeft" && (s.preventDefault(), this.checked = !1, this.emit("change"), this.emit("input")), s.key === "ArrowRight" && (s.preventDefault(), this.checked = !0, this.emit("change"), this.emit("input"));
   }
   handleCheckedChange() {
     this.input.checked = this.checked;
@@ -46,8 +46,8 @@ let t = class extends u {
   click() {
     this.input.click();
   }
-  focus(e) {
-    this.input.focus(e);
+  focus(s) {
+    this.input.focus(s);
   }
   blur() {
     this.input.blur();
@@ -56,12 +56,14 @@ let t = class extends u {
     return f`<div>
       <label
         part="base"
-        class=${k({
+        class=${y({
       switch: !0,
       "switch--checked": this.checked,
       "switch--disabled": this.disabled,
-      "switch--focused": this.hasFocus
-    })}
+      "switch--focused": this.hasFocus,
+      [`switch--${this.variant}`]: !0,
+      [`switch--label-${this.labelPosition}`]: !0
+    })} 
       >
         <input
           class="switch__input"
@@ -86,42 +88,48 @@ let t = class extends u {
           <span class="switch__icon switch__onicon"><slot name="onicon"></slot></span>
         </span>
 
-        <div part="label" class="">
+        <div part="label">
           <slot></slot>
         </div>
       </label>
     </div>`;
   }
 };
-t.styles = [y];
-s([
-  h({ reflect: !0, type: String })
+t.styles = [k];
+e([
+  i({ reflect: !0, type: String })
 ], t.prototype, "testId", 2);
-s([
-  d('input[type="checkbox"]')
+e([
+  u('input[type="checkbox"]')
 ], t.prototype, "input", 2);
-s([
+e([
   p()
 ], t.prototype, "hasFocus", 2);
-s([
-  h()
+e([
+  i()
 ], t.prototype, "title", 2);
-s([
-  h()
+e([
+  i()
 ], t.prototype, "name", 2);
-s([
-  h()
+e([
+  i()
 ], t.prototype, "value", 2);
-s([
-  h({ type: Boolean, reflect: !0 })
+e([
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
-s([
-  h({ type: Boolean, reflect: !0 })
+e([
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "checked", 2);
-s([
+e([
+  i()
+], t.prototype, "variant", 2);
+e([
+  i({ attribute: "label-position" })
+], t.prototype, "labelPosition", 2);
+e([
   m("checked", { waitUntilFirstUpdate: !0 })
 ], t.prototype, "handleCheckedChange", 1);
-t = s([
+t = e([
   n("nve-switch")
 ], t);
 export {

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

@@ -21,9 +21,9 @@ const e = o`
     --left: calc(0% + 4px);
     width: 48px;
     --label-color: var(--neutrals-foreground-primary);
-    --on-color: var(--nve-switch-on-color, var(--neutrals-foreground-subtle));
-    --off-color: var(--nve-switch-off-color, var(--neutrals-background-secondary));
-    --thumb-color: var(--nve-switch-thumb-off-color, var(--on-color));
+    --on-color: var(--neutrals-foreground-subtle);
+    --off-color:  var(--neutrals-background-secondary);
+    --thumb-color:  var(--on-color);
     background-color: var(--off-color);
     transition: background-color 0.3s ease-in-out;
   }
@@ -35,9 +35,10 @@ const e = o`
   .switch--checked .switch__control {
     /* 100% - bredde på thumb + 4px */
     --left: calc(100% - var(--font-size-xsmall) - 4px);
-    --thumb-color: var(--nve-switch-thumb-on-color, var(--off-color));
+    --thumb-color:  var(--off-color);
     background-color: var(--on-color);
   }
+    
   .switch__thumb {
     position: absolute;
     left: var(--left);
@@ -78,12 +79,10 @@ const e = o`
     clip: rect(0, 0, 0, 0);
     position: absolute;
   }
-  .switch__label {
-    font: var(--label-medium-light);
-    color: var(--label-color);
-  }
+ 
   .switch.switch--focused:has(:focus-visible) .switch__control {
     outline: 2px solid var(--interactive-links-focus);
+    outline-offset: 1px;
   }
   .switch:not(.switch--disabled):hover {
     --hover-offset: 2px;
@@ -93,6 +92,18 @@ const e = o`
   }
   .switch.switch--disabled {
     opacity: var(--disabled);
+  } 
+    
+ .switch--label-start {
+    justify-content: flex-end;
+    flex-direction: row-reverse;
+  }
+ 
+  .switch--primary {
+    &.switch--checked .switch__control {
+      --on-color: var(--interactive-primary-foreground-border-focus);
+      --off-color: var(--neutrals-background-secondary);
+    }
   }
 `;
 export {

package/custom-elements.json

@@ -70,127 +70,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/nve-accordion-item/nve-accordion-item.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.",
-          "name": "NveAccordionItem",
-          "members": [
-            {
-              "kind": "field",
-              "name": "testId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "undefined"
-            },
-            {
-              "kind": "field",
-              "name": "leftStroke",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "tykk strek på venstre side"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
-              },
-              "default": "'none'",
-              "description": "Setter farge på bakgrunn og tekst"
-            },
-            {
-              "kind": "field",
-              "name": "border",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Vis en ramme rundt hele komponenten"
-            },
-            {
-              "kind": "field",
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
-            },
-            {
-              "kind": "field",
-              "name": "styles",
-              "type": {
-                "text": "array"
-              },
-              "static": true,
-              "default": "[SlDetails.styles, styles]"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "testId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": ""
-            },
-            {
-              "name": "leftStroke",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "tykk strek på venstre side"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
-              },
-              "description": "Setter farge på bakgrunn og tekst"
-            },
-            {
-              "name": "border",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Vis en ramme rundt hele komponenten"
-            },
-            {
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
-            }
-          ],
-          "superclass": {
-            "name": "SlDetails",
-            "package": "@shoelace-style/shoelace"
-          },
-          "tagNameWithoutPrefix": "accordion-item",
-          "tagName": "nve-accordion-item",
-          "customElement": true,
-          "jsDoc": "/**\n * Viser et kort sammendrag og utvides for å vise ekstra innhold.\n * Kan brukes som en selvstendig komponent eller som en del av nve-accordion.\n */"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "NveAccordionItem",
-            "module": "components/nve-accordion-item/nve-accordion-item.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/nve-alert/nve-alert.js",
@@ -591,6 +470,127 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/nve-accordion-item/nve-accordion-item.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.",
+          "name": "NveAccordionItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "testId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined"
+            },
+            {
+              "kind": "field",
+              "name": "leftStroke",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "tykk strek på venstre side"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
+              },
+              "default": "'none'",
+              "description": "Setter farge på bakgrunn og tekst"
+            },
+            {
+              "kind": "field",
+              "name": "border",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Vis en ramme rundt hele komponenten"
+            },
+            {
+              "kind": "field",
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "array"
+              },
+              "static": true,
+              "default": "[SlDetails.styles, styles]"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "testId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": ""
+            },
+            {
+              "name": "leftStroke",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "tykk strek på venstre side"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
+              },
+              "description": "Setter farge på bakgrunn og tekst"
+            },
+            {
+              "name": "border",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Vis en ramme rundt hele komponenten"
+            },
+            {
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
+            }
+          ],
+          "superclass": {
+            "name": "SlDetails",
+            "package": "@shoelace-style/shoelace"
+          },
+          "tagNameWithoutPrefix": "accordion-item",
+          "tagName": "nve-accordion-item",
+          "customElement": true,
+          "jsDoc": "/**\n * Viser et kort sammendrag og utvides for å vise ekstra innhold.\n * Kan brukes som en selvstendig komponent eller som en del av nve-accordion.\n */"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NveAccordionItem",
+            "module": "components/nve-accordion-item/nve-accordion-item.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/nve-badge/nve-badge.js",
@@ -2590,6 +2590,15 @@
               },
               "static": true,
               "default": "[SlDrawer.styles, styles]"
+            },
+            {
+              "kind": "method",
+              "name": "firstUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "updateCloseIcon",
+              "privacy": "private"
             }
           ],
           "attributes": [
@@ -5006,24 +5015,6 @@
           "kind": "class",
           "description": "En vippe-bryter med støtte for ikoner.",
           "name": "NveSwitch",
-          "cssProperties": [
-            {
-              "description": "Bakgrunnsfarge når switch er PÅ",
-              "name": "--nve-switch-on-color"
-            },
-            {
-              "description": "Bakgrunnsfarge når switch er AV",
-              "name": "--nve-switch-off-color"
-            },
-            {
-              "description": "Farge på bryter når switch er PÅ",
-              "name": "--nve-switch-thumb-on-color-"
-            },
-            {
-              "description": "Farge på bryter når switch er AV",
-              "name": "--nve-switch-thumb-off-color"
-            }
-          ],
           "cssParts": [
             {
               "description": "Topp-element",
@@ -5125,6 +5116,24 @@
               "default": "false",
               "description": "Verdien til switchen."
             },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'default'"
+              },
+              "default": "'default'",
+              "description": "Bestemmer fargevariant"
+            },
+            {
+              "kind": "field",
+              "name": "labelPosition",
+              "type": {
+                "text": "'start' | 'end'"
+              },
+              "default": "'end'",
+              "description": "Plassering av label-tekst i forhold til bryteren"
+            },
             {
               "kind": "field",
               "name": "styles",
@@ -5289,6 +5298,20 @@
                 "text": "any"
               },
               "description": "Verdien til switchen."
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'default'"
+              },
+              "description": "Bestemmer fargevariant"
+            },
+            {
+              "name": "labelPosition",
+              "type": {
+                "text": "'start' | 'end'"
+              },
+              "description": "Plassering av label-tekst i forhold til bryteren"
             }
           ],
           "superclass": {
@@ -5298,7 +5321,7 @@
           "tagNameWithoutPrefix": "switch",
           "tagName": "nve-switch",
           "customElement": true,
-          "jsDoc": "/**\n * En vippe-bryter med støtte for ikoner.\n *\n * @slot - Tekst etter bryteren\n * @slot onicon - Det første ikonet (til venstre). Synlig når status er PÅ\n * @slot officon - Det andre ikonet (til høyre). Synlig når status er AV\n *\n * @event blur Bryter mister fokus\n * @event change Bryter endres\n * @event input Bryter endres\n * @event focus Bryter får fokus\n *\n * @csspart base Topp-element\n * @csspart control Element rundt bryteren\n * @csspart thumb Bryter-indikatoren\n * @csspart label Tekst bak bryteren\n *\n * @cssproperty --nve-switch-on-color - Bakgrunnsfarge når switch er PÅ\n * @cssproperty --nve-switch-off-color - Bakgrunnsfarge når switch er AV\n * @cssproperty --nve-switch-thumb-on-color- Farge på bryter når switch er PÅ\n * @cssproperty --nve-switch-thumb-off-color - Farge på bryter når switch er AV\n */"
+          "jsDoc": "/**\n * En vippe-bryter med støtte for ikoner.\n *\n * @slot - Tekst etter bryteren\n * @slot onicon - Det første ikonet (til venstre). Synlig når status er PÅ\n * @slot officon - Det andre ikonet (til høyre). Synlig når status er AV\n *\n * @event blur Bryter mister fokus\n * @event change Bryter endres\n * @event input Bryter endres\n * @event focus Bryter får fokus\n *\n * @csspart base Topp-element\n * @csspart control Element rundt bryteren\n * @csspart thumb Bryter-indikatoren\n * @csspart label Tekst bak bryteren\n */"
         }
       ],
       "exports": [
@@ -7169,7 +7192,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "2.10.3",
+    "version": "2.11.0",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/package.json

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

package/vscode.css-custom-data.json

@@ -17,26 +17,6 @@
       "description": "Størrelse på ikonet. 16px er standard.",
       "values": []
     },
-    {
-      "name": "--nve-switch-on-color",
-      "description": "Bakgrunnsfarge når switch er PÅ",
-      "values": []
-    },
-    {
-      "name": "--nve-switch-off-color",
-      "description": "Bakgrunnsfarge når switch er AV",
-      "values": []
-    },
-    {
-      "name": "--nve-switch-thumb-on-color-",
-      "description": "Farge på bryter når switch er PÅ",
-      "values": []
-    },
-    {
-      "name": "--nve-switch-thumb-off-color",
-      "description": "Farge på bryter når switch er AV",
-      "values": []
-    },
     {
       "name": "--scroll-button-background",
       "description": "farge på bakover og fremoverknappene. Standard er #fff og #1b1b1f for dark modus.",

package/vscode.html-custom-data.json

@@ -13,46 +13,6 @@
         }
       ]
     },
-    {
-      "name": "nve-accordion-item",
-      "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.\n---\n",
-      "attributes": [
-        { "name": "testId", "description": "", "values": [] },
-        {
-          "name": "leftStroke",
-          "description": "tykk strek på venstre side",
-          "values": []
-        },
-        {
-          "name": "variant",
-          "description": "Setter farge på bakgrunn og tekst",
-          "values": [
-            { "name": "none" },
-            { "name": "neutral" },
-            { "name": "info" },
-            { "name": "success" },
-            { "name": "warning" },
-            { "name": "error" }
-          ]
-        },
-        {
-          "name": "border",
-          "description": "Vis en ramme rundt hele komponenten",
-          "values": []
-        },
-        {
-          "name": "compact",
-          "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Mer info",
-          "url": "https://designsystem.nve.no/components/nve-accordion-item"
-        }
-      ]
-    },
     {
       "name": "nve-alert",
       "description": "Brukes til å vise viktige beskjeder som toast. Dette er en komponent som bruker alert-rollen.\nHvis du trenger å vise en statisk varsling med mer informasjon, bruk nve-message-card.\nLes mer i seksjonen om universel utforming.\n---\n\n\n### **Hendelser:**\n - **sl-show** - Når alerten blir vist\n- **sl-hide** - Når alerten blir skjult\n- **sl-after-show** - Etter allerten er vist\n- **sl-after-hide** - Etter allerten er skjult\n\n### **Metoder:**\n - **show(): __** - Viser alerten med animasjon.\nSetter `open` til true, kjører visningsanimasjonen, og starter eventuell auto-hide timer.\nSender ut eventen `sl-after-show` når animasjonen er ferdig.\n- **hide(): __** - Skjuler alerten med animasjon.\nKjører skjuleanimasjonen før `open` settes til false.\nSender ut eventen `sl-after-hide` når animasjonen og oppdateringen er ferdig.\nStopper eventuell auto-hide timer.\n- **toast(): __** - Viser alerten som en toast-melding.\nLegger alerten i toast-stacken, venter til den er rendret, og viser den med animasjon.\nFjerner alerten fra toast-stacken når den skjules, og fjerner stacken hvis det ikke er flere alerts igjen.\n\n### **Spor:**\n - _default_ - tekst - Hoved teksten i alerten.\n- **icon** - Det første ikonet (til venstre).\n- **label** - Overskriften for alerten.\n\n### **Deler:**\n - **base** - Topp-element\n- **icon** - Ikonet til venstre\n- **label** - Overskriften\n- **message** - Hoved tekst",
@@ -119,6 +79,46 @@
         }
       ]
     },
+    {
+      "name": "nve-accordion-item",
+      "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.\n---\n",
+      "attributes": [
+        { "name": "testId", "description": "", "values": [] },
+        {
+          "name": "leftStroke",
+          "description": "tykk strek på venstre side",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "Setter farge på bakgrunn og tekst",
+          "values": [
+            { "name": "none" },
+            { "name": "neutral" },
+            { "name": "info" },
+            { "name": "success" },
+            { "name": "warning" },
+            { "name": "error" }
+          ]
+        },
+        {
+          "name": "border",
+          "description": "Vis en ramme rundt hele komponenten",
+          "values": []
+        },
+        {
+          "name": "compact",
+          "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Mer info",
+          "url": "https://designsystem.nve.no/components/nve-accordion-item"
+        }
+      ]
+    },
     {
       "name": "nve-badge",
       "description": "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.\n---\n",
@@ -944,7 +944,7 @@
     },
     {
       "name": "nve-switch",
-      "description": "En vippe-bryter med støtte for ikoner.\n---\n\n\n### **Hendelser:**\n - **blur** - Bryter mister fokus\n- **change** - Bryter endres\n- **input** - Bryter endres\n- **focus** - Bryter får fokus\n\n### **Metoder:**\n - **click()** - click, focus og blur sendes til input (checkbox)\n\n### **Spor:**\n - _default_ - Tekst etter bryteren\n- **onicon** - Det første ikonet (til venstre). Synlig når status er PÅ\n- **officon** - Det andre ikonet (til høyre). Synlig når status er AV\n\n### **CSS-variabler:**\n - **--nve-switch-on-color** - Bakgrunnsfarge når switch er PÅ _(default: undefined)_\n- **--nve-switch-off-color** - Bakgrunnsfarge når switch er AV _(default: undefined)_\n- **--nve-switch-thumb-on-color-** - Farge på bryter når switch er PÅ _(default: undefined)_\n- **--nve-switch-thumb-off-color** - Farge på bryter når switch er AV _(default: undefined)_\n\n### **Deler:**\n - **base** - Topp-element\n- **control** - Element rundt bryteren\n- **thumb** - Bryter-indikatoren\n- **label** - Tekst bak bryteren",
+      "description": "En vippe-bryter med støtte for ikoner.\n---\n\n\n### **Hendelser:**\n - **blur** - Bryter mister fokus\n- **change** - Bryter endres\n- **input** - Bryter endres\n- **focus** - Bryter får fokus\n\n### **Metoder:**\n - **click()** - click, focus og blur sendes til input (checkbox)\n\n### **Spor:**\n - _default_ - Tekst etter bryteren\n- **onicon** - Det første ikonet (til venstre). Synlig når status er PÅ\n- **officon** - Det andre ikonet (til høyre). Synlig når status er AV\n\n### **Deler:**\n - **base** - Topp-element\n- **control** - Element rundt bryteren\n- **thumb** - Bryter-indikatoren\n- **label** - Tekst bak bryteren",
       "attributes": [
         { "name": "testId", "description": "", "values": [] },
         { "name": "title", "description": "", "values": [] },
@@ -959,6 +959,16 @@
           "name": "checked",
           "description": "Verdien til switchen.",
           "values": []
+        },
+        {
+          "name": "variant",
+          "description": "Bestemmer fargevariant",
+          "values": [{ "name": "primary" }, { "name": "default" }]
+        },
+        {
+          "name": "labelPosition",
+          "description": "Plassering av label-tekst i forhold til bryteren",
+          "values": [{ "name": "start" }, { "name": "end" }]
         }
       ],
       "references": [