nve-designsystem 2.13.4 → 2.14.1

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

@@ -95,6 +95,10 @@ const a = r`
     gap: var(--spacing-xx-small);
     margin-inline-start: unset;
   }
+
+  :host::part(clear-button) {
+    font-size: var(--font-size-medium);
+  }
 `;
 export {
   a as default

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

@@ -92,6 +92,9 @@ const e = r`
     font-size: var(--font-size-medium);
     fill: currentColor;
   }
+  :host::part(clear-button) {
+    font-size: var(--font-size-medium);
+  }
 `;
 export {
   e as default

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

@@ -18,6 +18,8 @@ export default class NveTab extends LitElement implements INveComponent {
     size: 'large' | 'small';
     /** Om fanen skal ha bakgrunn */
     background: boolean;
+    /** Faner kan være disabled */
+    disabled: boolean;
     /** @internal */
     private readonly attrId;
     /** @internal */

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

@@ -1,24 +1,26 @@
-import { a as d, x as c } from "../../chunks/lit-element.js";
-import { n as a, t as b } from "../../chunks/property.js";
+import { a as n, x as b } from "../../chunks/lit-element.js";
+import { n as r, t as c } from "../../chunks/property.js";
 import h from "./nve-tab.styles.js";
-import { e as u } from "../../chunks/class-map.js";
-var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (p, s, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? m(s, i) : s, l = p.length - 1, n; l >= 0; l--)
-    (n = p[l]) && (t = (o ? n(s, i, t) : n(t)) || t);
-  return o && t && f(s, i, t), t;
+import { e as f } from "../../chunks/class-map.js";
+var u = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (d, a, o, i) => {
+  for (var e = i > 1 ? void 0 : i ? m(a, o) : a, l = d.length - 1, p; l >= 0; l--)
+    (p = d[l]) && (e = (i ? p(a, o, e) : p(e)) || e);
+  return i && e && u(a, o, e), e;
 };
-let v = 0, e = class extends d {
+let v = 0, t = class extends n {
   constructor() {
-    super(), this.testId = void 0, this.panel = null, this.size = "large", this.background = !1, this.attrId = ++v, this.componentId = `nve-tab-${this.attrId}`;
+    super(), this.testId = void 0, this.panel = null, this.size = "large", this.background = !1, this.disabled = !1, this.attrId = ++v, this.componentId = `nve-tab-${this.attrId}`;
   }
   connectedCallback() {
     super.connectedCallback(), this.setAttribute("role", "tab");
   }
   render() {
-    return this.id = this.id.length > 0 ? this.id : this.componentId, c`
+    return this.id = this.id.length > 0 ? this.id : this.componentId, b`
       <div
         part="base"
-        class=${u({ tab: !0, "tab--large": this.size === "large", "tab--background": this.background })}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        disabled=${this.disabled ? "true" : "false"}
+        class=${f({ tab: !0, "tab--large": this.size === "large", "tab--background": this.background })}
       >
         <slot name="prefix"></slot>
         <slot></slot>
@@ -27,22 +29,25 @@ let v = 0, e = class extends d {
     `;
   }
 };
-e.styles = [h];
-r([
-  a({ type: String })
-], e.prototype, "testId", 2);
-r([
-  a({ type: String })
-], e.prototype, "panel", 2);
-r([
-  a({ type: String })
-], e.prototype, "size", 2);
-r([
-  a({ type: Boolean })
-], e.prototype, "background", 2);
-e = r([
-  b("nve-tab")
-], e);
+t.styles = [h];
+s([
+  r({ type: String })
+], t.prototype, "testId", 2);
+s([
+  r({ type: String })
+], t.prototype, "panel", 2);
+s([
+  r({ type: String })
+], t.prototype, "size", 2);
+s([
+  r({ type: Boolean })
+], t.prototype, "background", 2);
+s([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+t = s([
+  c("nve-tab")
+], t);
 export {
-  e as default
+  t as default
 };

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

@@ -72,6 +72,14 @@ const e = r`
     font: var(--label-medium-light);
     color: var(--neutrals-foreground-muted);
   }
+  :host([disabled]) .tab {
+    cursor: not-allowed;
+    color: var(--neutrals-foreground-disabled);
+    opacity: var(--opacity-disabled);
+  }
+  :host([disabled]) .tab:hover {
+    border-bottom: var(--border-bottom) solid var(--neutrals-border-subtle);
+  }
 `;
 export {
   e as default

package/components/nve-tab-group/nve-tab-group.component.js

@@ -1,14 +1,16 @@
-import { a as w, E as f, x as b } from "../../chunks/lit-element.js";
-import { n as l, t as g } from "../../chunks/property.js";
-import { r as h } from "../../chunks/state.js";
-import y from "./nve-tab-group.styles.js";
+import { a as w, E as f, x as u } from "../../chunks/lit-element.js";
+import { n as d, t as g } from "../../chunks/property.js";
+import { r as b } from "../../chunks/state.js";
+import m from "./nve-tab-group.styles.js";
+import y from "../nve-tab/nve-tab.component.js";
+import "../nve-icon/nve-icon.component.js";
 import "../nve-button/nve-button.component.js";
 import { e as v } from "../../chunks/class-map.js";
-import { o as m } from "../../chunks/if-defined.js";
-var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, c = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? S(e, a) : e, o = t.length - 1, i; o >= 0; o--)
-    (i = t[o]) && (s = (r ? i(e, a, s) : i(s)) || s);
-  return r && s && k(e, a, s), s;
+import { o as k } from "../../chunks/if-defined.js";
+var S = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, c = (t, e, o, a) => {
+  for (var s = a > 1 ? void 0 : a ? _(e, o) : e, i = t.length - 1, r; i >= 0; i--)
+    (r = t[i]) && (s = (a ? r(e, o, s) : r(s)) || s);
+  return a && s && S(e, o, s), s;
 };
 let n = class extends w {
   constructor() {
@@ -37,12 +39,12 @@ let n = class extends w {
    * @param event Klikkeventet.
    */
   handleClick(t) {
-    const e = t.composedPath(), a = e.find(
+    const e = t.composedPath(), o = e.find(
       (s) => s instanceof HTMLElement && s.tagName.toLowerCase() === "nve-tab"
     );
     e.find(
       (s) => s instanceof HTMLElement && s.tagName.toLowerCase() === "nve-tab-group"
-    ) === this && a && a.panel && this.setActiveTab(a.panel);
+    ) === this && (o instanceof y && o.disabled || o && o.panel && this.setActiveTab(o.panel));
   }
   /**
    * @internal
@@ -51,15 +53,15 @@ let n = class extends w {
    * @param event Tastetrykk eventet.
    */
   handleKeyDown(t) {
-    const e = t.composedPath(), a = e.find((s) => s instanceof HTMLElement && s.closest && s.closest("nve-tab") === s) || null;
+    const e = t.composedPath(), o = e.find((s) => s instanceof HTMLElement && s.closest && s.closest("nve-tab") === s) || null;
     if (e.find(
       (s) => s instanceof HTMLElement && s.tagName.toLowerCase() === "nve-tab-group"
-    ) === this && (["Enter", " "].includes(t.key) && a && a.panel && (this.setActiveTab(a.panel), t.preventDefault()), ["ArrowLeft", "ArrowRight", "Home", "End"].includes(t.key))) {
-      const s = this.tabs.find((d) => d === a);
+    ) === this && (["Enter", " "].includes(t.key) && o && o.panel && (this.setActiveTab(o.panel), t.preventDefault()), ["ArrowLeft", "ArrowRight", "Home", "End"].includes(t.key))) {
+      const s = this.tabs.find((l) => l === o);
       if (!s) return;
-      const o = this.tabs.indexOf(s);
       let i;
-      t.key === "ArrowLeft" && (i = o > 0 ? this.tabs[o - 1] : this.tabs[this.tabs.length - 1]), t.key === "ArrowRight" && (i = o < this.tabs.length - 1 ? this.tabs[o + 1] : this.tabs[0]), t.key === "Home" && (i = this.tabs[0]), t.key === "End" && (i = this.tabs[this.tabs.length - 1]), i && (i.focus(), t.preventDefault());
+      const r = this.tabs.filter((l) => !l.disabled), h = r.indexOf(s);
+      t.key === "ArrowLeft" && (i = h > 0 ? r[h - 1] : r[r.length - 1]), t.key === "ArrowRight" && (i = h < r.length - 1 ? r[h + 1] : r[0]), t.key === "Home" && (i = r[0]), t.key === "End" && (i = r[r.length - 1]), i && (i.focus(), t.preventDefault());
     }
   }
   /**
@@ -68,7 +70,7 @@ let n = class extends w {
    */
   getPanels() {
     const t = this.shadowRoot?.querySelector("slot:not([name])");
-    return t ? t.assignedElements({ flatten: !0 }).filter((a) => a.tagName.toLowerCase() === "nve-tab-panel") : [];
+    return t ? t.assignedElements({ flatten: !0 }).filter((o) => o.tagName.toLowerCase() === "nve-tab-panel") : [];
   }
   /**
    * Henter alle faner i tab gruppen.
@@ -76,7 +78,7 @@ let n = class extends w {
    */
   getTabs() {
     const t = this.shadowRoot?.querySelector('slot[name="nav"]');
-    return t ? t.assignedElements({ flatten: !0 }).filter((a) => a.tagName.toLowerCase() === "nve-tab") : [];
+    return t ? t.assignedElements({ flatten: !0 }).filter((o) => o.tagName.toLowerCase() === "nve-tab") : [];
   }
   /** Setter aria-selected og tabindex på fanene. Kun aktiv fane skal bli fokusert. Gjemmer inaktive paneller.
    * Sender en nve-tab-change event med navnet på den aktive fanen.
@@ -85,6 +87,15 @@ let n = class extends w {
   setActiveTab(t) {
     this.tabs.forEach((e) => e.setAttribute("aria-selected", `${e.panel === t}`)), this.tabs.forEach((e) => e.setAttribute("tabindex", e.panel === t ? "0" : "-1")), this.panels.forEach((e) => e.classList.toggle("tab-panel--hidden", e.name !== t)), this.activeTab = t, requestAnimationFrame(() => {
       this.updateIndicator();
+    }), requestAnimationFrame(() => {
+      const e = this.tabs.find((o) => o.getAttribute("aria-selected") === "true");
+      if (e) {
+        const o = this.shadowRoot?.querySelector(".tab-group__nav");
+        if (o) {
+          const a = e.offsetLeft, s = e.offsetLeft + e.offsetWidth;
+          a < o.scrollLeft ? o.scrollTo({ left: a, behavior: "smooth" }) : s > o.scrollLeft + o.clientWidth && o.scrollTo({ left: a, behavior: "smooth" });
+        }
+      }
     }), this.dispatchEvent(
       new CustomEvent("nve-tab-change", {
         detail: t,
@@ -95,10 +106,10 @@ let n = class extends w {
   }
   updateIndicator() {
     if (this.isBackground) return;
-    const t = this.shadowRoot?.querySelector(".tab-group__nav"), e = this.tabs.find((a) => a.getAttribute("aria-selected") === "true");
+    const t = this.shadowRoot?.querySelector(".tab-group__nav"), e = this.tabs.find((o) => o.getAttribute("aria-selected") === "true");
     if (t && e) {
-      const a = t.getBoundingClientRect(), s = e.getBoundingClientRect().left - a.left + t.scrollLeft, o = e.offsetWidth;
-      t.style.setProperty("--indicator-x", `${s}px`), t.style.setProperty("--indicator-width", `${o}px`);
+      const o = t.getBoundingClientRect(), s = e.getBoundingClientRect().left - o.left + t.scrollLeft, i = e.offsetWidth;
+      t.style.setProperty("--indicator-x", `${s}px`), t.style.setProperty("--indicator-width", `${i}px`);
     }
   }
   /**
@@ -107,7 +118,7 @@ let n = class extends w {
    */
   setAriaLabels() {
     this.tabs.forEach((t) => {
-      const e = this.panels.find((a) => a.name === t.panel);
+      const e = this.panels.find((o) => o.name === t.panel);
       e && (t.setAttribute("aria-controls", e.id), e.setAttribute("aria-labelledby", t.id));
     });
   }
@@ -134,8 +145,8 @@ let n = class extends w {
     const e = this.shadowRoot?.querySelector(".tab-group__nav-button--forward")?.querySelector("nve-button");
     if (e) {
       await e.updateComplete;
-      const a = e.shadowRoot?.querySelector('[part="base"]');
-      a && a.setAttribute("tabindex", "-1");
+      const o = e.shadowRoot?.querySelector('[part="base"]');
+      o && o.setAttribute("tabindex", "-1");
     }
   }
   /**
@@ -145,8 +156,8 @@ let n = class extends w {
     const e = this.shadowRoot?.querySelector(".tab-group__nav-button--backward")?.querySelector("nve-button");
     if (e) {
       await e.updateComplete;
-      const a = e.shadowRoot?.querySelector('[part="base"]');
-      a && a.setAttribute("tabindex", "-1");
+      const o = e.shadowRoot?.querySelector('[part="base"]');
+      o && o.setAttribute("tabindex", "-1");
     }
   }
   /**
@@ -173,10 +184,10 @@ let n = class extends w {
   scrollNavForward() {
     const t = this.shadowRoot?.querySelector(".tab-group__nav");
     if (!t || !this.tabs.length) return;
-    const e = t.scrollLeft, a = t.clientWidth, r = e + a;
+    const e = t.scrollLeft, o = t.clientWidth, a = e + o;
     for (let s of this.tabs)
-      if (s.offsetLeft + s.offsetWidth > r) {
-        const u = this.tabs[this.tabs.indexOf(s) - 1], p = u ? u.offsetLeft : 0;
+      if (s.offsetLeft + s.offsetWidth > a) {
+        const l = this.tabs[this.tabs.indexOf(s) - 1], p = l ? l.offsetLeft : 0;
         t.scrollTo({
           left: p - this.buttonContainerWidth,
           behavior: "smooth"
@@ -190,12 +201,12 @@ let n = class extends w {
   scrollNavBackward() {
     const t = this.shadowRoot?.querySelector(".tab-group__nav");
     if (!t || !this.tabs.length) return;
-    const e = t.clientWidth, a = t.scrollLeft;
-    for (let r of this.tabs) {
-      const s = r.offsetLeft, o = s + r.offsetWidth;
-      if (s > a) {
+    const e = t.clientWidth, o = t.scrollLeft;
+    for (let a of this.tabs) {
+      const s = a.offsetLeft, i = s + a.offsetWidth;
+      if (s > o) {
         t.scrollTo({
-          left: o - e + this.buttonContainerWidth,
+          left: i - e + this.buttonContainerWidth,
           behavior: "smooth"
         });
         return;
@@ -203,13 +214,13 @@ let n = class extends w {
     }
   }
   render() {
-    return b`
+    return u`
       <div
         part="base"
         class="tab-group"
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
-        testId=${m(this.testId)}
+        testId=${k(this.testId)}
       >
         <div class="tab-group__nav-container">
           <div
@@ -218,7 +229,7 @@ let n = class extends w {
           >
             <slot name="nav"></slot>
           </div>
-          ${this.canScrollBack && this.isOverflow ? b`
+          ${this.canScrollBack && this.isOverflow ? u`
                 <div
                   aria-hidden="true"
                   part="button-backward-base"
@@ -229,7 +240,7 @@ let n = class extends w {
                   </nve-button>
                 </div>
               ` : f}
-          ${this.canScrollForward && this.isOverflow ? b`
+          ${this.canScrollForward && this.isOverflow ? u`
                 <div
                   part="button-forward-base"
                   aria-hidden="true"
@@ -248,30 +259,30 @@ let n = class extends w {
     `;
   }
 };
-n.styles = [y];
+n.styles = [m];
 c([
-  l({ type: String })
+  d({ type: String })
 ], n.prototype, "testId", 2);
 c([
-  l({ type: Boolean })
+  d({ type: Boolean })
 ], n.prototype, "background", 2);
 c([
-  l({ type: String })
+  d({ type: String })
 ], n.prototype, "size", 2);
 c([
-  l({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], n.prototype, "activeTab", 2);
 c([
-  h()
+  b()
 ], n.prototype, "isOverflow", 2);
 c([
-  h()
+  b()
 ], n.prototype, "canScrollBack", 2);
 c([
-  h()
+  b()
 ], n.prototype, "canScrollForward", 2);
 c([
-  h()
+  b()
 ], n.prototype, "isBackground", 2);
 n = c([
   g("nve-tab-group")

package/custom-elements.json

@@ -1817,115 +1817,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/nve-carousel-item/nve-carousel-item.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Et karusellelement som representerer bilder eller annet valgfritt innhold i en karusell.\nBruk propertien \"description\" for å legge på bildetekst under bildet.\nAnbefaler å bare godta liggende eller stående formater på bilder i karusellen for best layout.",
-          "name": "NveCarouselItem",
-          "members": [
-            {
-              "kind": "field",
-              "name": "styles",
-              "type": {
-                "text": "array"
-              },
-              "static": true,
-              "default": "[SlCarouselItem.styles, styles]"
-            },
-            {
-              "kind": "field",
-              "name": "testId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "undefined"
-            },
-            {
-              "kind": "field",
-              "name": "description",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Brukes til å legge på beskrivelse på bildene."
-            },
-            {
-              "kind": "method",
-              "name": "updated",
-              "parameters": [
-                {
-                  "name": "changedProperties",
-                  "type": {
-                    "text": "PropertyValues"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "testId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": ""
-            },
-            {
-              "name": "description",
-              "type": {
-                "text": "any"
-              },
-              "description": "Brukes til å legge på beskrivelse på bildene."
-            }
-          ],
-          "superclass": {
-            "name": "SlCarouselItem",
-            "package": "@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.js"
-          },
-          "tagNameWithoutPrefix": "carousel-item",
-          "tagName": "nve-carousel-item",
-          "customElement": true,
-          "jsDoc": "/**\n * Et karusellelement som representerer bilder eller annet valgfritt innhold i en karusell.\n * Bruk propertien \"description\" for å legge på bildetekst under bildet.\n * Anbefaler å bare godta liggende eller stående formater på bilder i karusellen for best layout.\n */",
-          "slots": [
-            {
-              "description": "The carousel item's content..",
-              "name": "",
-              "inheritedFrom": {
-                "name": "SlCarouselItem",
-                "module": "components/carousel-item/carousel-item.js"
-              }
-            }
-          ],
-          "cssProperties": [
-            {
-              "description": "The slide's aspect ratio. Inherited from the carousel by default.",
-              "name": "--aspect-ratio",
-              "inheritedFrom": {
-                "name": "SlCarouselItem",
-                "module": "components/carousel-item/carousel-item.js"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "NveCarouselItem",
-            "module": "components/nve-carousel-item/nve-carousel-item.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/nve-carousel/nve-carousel.js",
@@ -2576,6 +2467,115 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/nve-carousel-item/nve-carousel-item.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Et karusellelement som representerer bilder eller annet valgfritt innhold i en karusell.\nBruk propertien \"description\" for å legge på bildetekst under bildet.\nAnbefaler å bare godta liggende eller stående formater på bilder i karusellen for best layout.",
+          "name": "NveCarouselItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "array"
+              },
+              "static": true,
+              "default": "[SlCarouselItem.styles, styles]"
+            },
+            {
+              "kind": "field",
+              "name": "testId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined"
+            },
+            {
+              "kind": "field",
+              "name": "description",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Brukes til å legge på beskrivelse på bildene."
+            },
+            {
+              "kind": "method",
+              "name": "updated",
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "PropertyValues"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "testId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": ""
+            },
+            {
+              "name": "description",
+              "type": {
+                "text": "any"
+              },
+              "description": "Brukes til å legge på beskrivelse på bildene."
+            }
+          ],
+          "superclass": {
+            "name": "SlCarouselItem",
+            "package": "@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.js"
+          },
+          "tagNameWithoutPrefix": "carousel-item",
+          "tagName": "nve-carousel-item",
+          "customElement": true,
+          "jsDoc": "/**\n * Et karusellelement som representerer bilder eller annet valgfritt innhold i en karusell.\n * Bruk propertien \"description\" for å legge på bildetekst under bildet.\n * Anbefaler å bare godta liggende eller stående formater på bilder i karusellen for best layout.\n */",
+          "slots": [
+            {
+              "description": "The carousel item's content..",
+              "name": "",
+              "inheritedFrom": {
+                "name": "SlCarouselItem",
+                "module": "components/carousel-item/carousel-item.js"
+              }
+            }
+          ],
+          "cssProperties": [
+            {
+              "description": "The slide's aspect ratio. Inherited from the carousel by default.",
+              "name": "--aspect-ratio",
+              "inheritedFrom": {
+                "name": "SlCarouselItem",
+                "module": "components/carousel-item/carousel-item.js"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NveCarouselItem",
+            "module": "components/nve-carousel-item/nve-carousel-item.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/nve-carousel-thumbnail/nve-carousel-thumbnail.js",
@@ -12841,6 +12841,15 @@
               "default": "false",
               "description": "Om fanen skal ha bakgrunn"
             },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Faner kan være disabled"
+            },
             {
               "kind": "field",
               "name": "styles",
@@ -12883,6 +12892,13 @@
                 "text": "boolean"
               },
               "description": "Om fanen skal ha bakgrunn"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Faner kan være disabled"
             }
           ],
           "superclass": {
@@ -14696,7 +14712,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "2.13.3",
+    "version": "2.14.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.13.4",
+  "version": "2.14.1",
   "customElements": "custom-elements.json",
   "exports": {
     ".": {

package/registerIcons/systemLibraryCustomization.js

@@ -79,9 +79,10 @@ const t = {
         <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
     </svg>
   `,
+  /* Clear-ikon for input, select. Merk at denne er kun en x uten sirkel rundt, i motsetning til shoelace sin */
   "x-circle-fill": `
     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7.0625 14L10 11.0625L12.9375 14L14 12.9375L11.0625 10L14 7.0625L12.9375 6L10 8.9375L7.0625 6L6 7.0625L8.9375 10L6 12.9375L7.0625 14ZM10 18C8.90278 18 7.86806 17.7917 6.89583 17.375C5.92361 16.9583 5.07292 16.3854 4.34375 15.6562C3.61458 14.9271 3.04167 14.0764 2.625 13.1042C2.20833 12.1319 2 11.0972 2 10C2 8.88889 2.20833 7.85069 2.625 6.88542C3.04167 5.92014 3.61458 5.07292 4.34375 4.34375C5.07292 3.61458 5.92361 3.04167 6.89583 2.625C7.86806 2.20833 8.90278 2 10 2C11.1111 2 12.1493 2.20833 13.1146 2.625C14.0799 3.04167 14.9271 3.61458 15.6562 4.34375C16.3854 5.07292 16.9583 5.92014 17.375 6.88542C17.7917 7.85069 18 8.88889 18 10C18 11.0972 17.7917 12.1319 17.375 13.1042C16.9583 14.0764 16.3854 14.9271 15.6562 15.6562C14.9271 16.3854 14.0799 16.9583 13.1146 17.375C12.1493 17.7917 11.1111 18 10 18ZM10 16.5C11.8056 16.5 13.3403 15.8681 14.6042 14.6042C15.8681 13.3403 16.5 11.8056 16.5 10C16.5 8.19444 15.8681 6.65972 14.6042 5.39583C13.3403 4.13194 11.8056 3.5 10 3.5C8.19444 3.5 6.65972 4.13194 5.39583 5.39583C4.13194 6.65972 3.5 8.19444 3.5 10C3.5 11.8056 4.13194 13.3403 5.39583 14.6042C6.65972 15.8681 8.19444 16.5 10 16.5Z" fill="currentColor"/>
+      <path d="M6.0625 15L5 13.9375L8.9375 10L5 6.0625L6.0625 5L10 8.9375L13.9375 5L15 6.0625L11.0625 10L15 13.9375L13.9375 15L10 11.0625L6.0625 15Z" fill="currentcolor" />
     </svg>
   `
 };

package/vscode.css-custom-data.json

@@ -2,11 +2,6 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "properties": [
-    {
-      "name": "--aspect-ratio",
-      "description": "The slide's aspect ratio. Inherited from the carousel by default.",
-      "values": []
-    },
     {
       "name": "--pagination-counter-color",
       "description": "Fargen på sidetellerteksten.",
@@ -32,6 +27,11 @@
       "description": "The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint.",
       "values": []
     },
+    {
+      "name": "--aspect-ratio",
+      "description": "The slide's aspect ratio. Inherited from the carousel by default.",
+      "values": []
+    },
     {
       "name": "--width",
       "description": "The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.",

package/vscode.html-custom-data.json

@@ -322,24 +322,6 @@
         }
       ]
     },
-    {
-      "name": "nve-carousel-item",
-      "description": "Et karusellelement som representerer bilder eller annet valgfritt innhold i en karusell.\nBruk propertien \"description\" for å legge på bildetekst under bildet.\nAnbefaler å bare godta liggende eller stående formater på bilder i karusellen for best layout.\n---\n\n\n### **Spor:**\n - _default_ - The carousel item's content..\n\n### **CSS-variabler:**\n - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_",
-      "attributes": [
-        { "name": "testId", "description": "", "values": [] },
-        {
-          "name": "description",
-          "description": "Brukes til å legge på beskrivelse på bildene.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Mer info",
-          "url": "https://designsystem.nve.no/components/nve-carousel-item"
-        }
-      ]
-    },
     {
       "name": "nve-carousel",
       "description": "En karusell for å vise bilder eller annet valgfritt innhold i en serie.\nNve-carousel støtter ikke propertien: orientation=\"vertical\".\n---\n\n\n### **Hendelser:**\n - **sl-slide-change** - Emitted when the active slide changes.\n\n### **Metoder:**\n - **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.\n- **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.\n- **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.\n\n### **Spor:**\n - _default_ - The carousel's main content, one or more `<sl-carousel-item>` elements.\n- **next-icon** - Optional next icon to use instead of the default. Works best with `<sl-icon>`.\n- **previous-icon** - Optional previous icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **CSS-variabler:**\n - **--pagination-counter-color** - Fargen på sidetellerteksten. _(default: undefined)_\n- **--pagination-counter-bg-color** - Bakgrunnsfargen til pagineringstelleren. _(default: undefined)_\n- **--slide-gap** - The space between each slide. _(default: undefined)_\n- **--aspect-ratio** - The aspect ratio of each slide. _(default: 16/9)_\n- **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_\n\n### **Deler:**\n - **base** - The carousel's internal wrapper.\n- **scroll-container** - The scroll container that wraps the slides.\n- **pagination** - The pagination indicators wrapper.\n- **pagination-item** - The pagination indicator.\n- **pagination-item--active** - Applied when the item is active.\n- **navigation** - The navigation wrapper.\n- **navigation-button** - The navigation button.\n- **navigation-button--previous** - Applied to the previous button.\n- **navigation-button--next** - Applied to the next button.",
@@ -403,6 +385,24 @@
         }
       ]
     },
+    {
+      "name": "nve-carousel-item",
+      "description": "Et karusellelement som representerer bilder eller annet valgfritt innhold i en karusell.\nBruk propertien \"description\" for å legge på bildetekst under bildet.\nAnbefaler å bare godta liggende eller stående formater på bilder i karusellen for best layout.\n---\n\n\n### **Spor:**\n - _default_ - The carousel item's content..\n\n### **CSS-variabler:**\n - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_",
+      "attributes": [
+        { "name": "testId", "description": "", "values": [] },
+        {
+          "name": "description",
+          "description": "Brukes til å legge på beskrivelse på bildene.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Mer info",
+          "url": "https://designsystem.nve.no/components/nve-carousel-item"
+        }
+      ]
+    },
     {
       "name": "nve-carousel-thumbnail",
       "description": "En rekke med miniatyrbilder som brukes til å forhåndsvise bildene i nve-carousel.\nDefiner en lik id på nve-carousel og nve-carousel-thumbnail for å koble komponentene sammen.\n---\n",
@@ -1924,6 +1924,11 @@
           "name": "background",
           "description": "Om fanen skal ha bakgrunn",
           "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Faner kan være disabled",
+          "values": []
         }
       ],
       "references": [