nve-designsystem 3.1.0 → 3.3.0

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

@@ -1,292 +1,212 @@
-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 { a as e, n as t, t as n } from "../../chunks/lit.js";
+import { a as r, o as i, s as a, t as o } from "../../chunks/decorate.js";
+import { t as s } from "../../chunks/class-map.js";
+import { t as c } from "../../chunks/if-defined.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 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() {
-    super(), this.testId = void 0, this.background = !1, this.size = "large", this.activeTab = null, this.isOverflow = !1, this.canScrollBack = !1, this.canScrollForward = !1, this.isBackground = !1, this.tabs = [], this.panels = [], this.buttonContainerWidth = 40;
-  }
-  firstUpdated() {
-    this.syncTabsAndPanels();
-    const t = this.shadowRoot?.querySelector(".tab-group__nav");
-    t && this.resizeObserver && (this.resizeObserver.observe(t), t.addEventListener("scroll", () => this.updateScrollState()));
-  }
-  async updated(t) {
-    super.updated?.(t), (t.has("canScrollBack") || t.has("isOverflow")) && await this.removeTabIndexFromBackwardScrollButton(), (t.has("canScrollForward") || t.has("isOverflow")) && await this.removeTabIndexFromForwardScrollButton();
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.style.setProperty("--button-container-width", `${this.buttonContainerWidth}px`), this.setAttribute("role", "tablist"), this.resizeObserver = new ResizeObserver(() => this.checkOverflow()), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.resizeObserver?.disconnect();
-    const t = this.shadowRoot?.querySelector(".tab-group__nav");
-    t && t.removeEventListener("scroll", () => this.updateScrollState()), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
-  }
-  /**
-   * @internal
-   * Håndterer klikk på faner i tab gruppen.
-   * Setter aktiv fane basert på klikket element.
-   * @param event Klikkeventet.
-   */
-  handleClick(t) {
-    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 && (o instanceof y && o.disabled || o && o.panel && this.setActiveTab(o.panel));
-  }
-  /**
-   * @internal
-   * Håndterer tastetrykk på faner i tab gruppen.
-   * Setter aktiv fane basert på tastetrykket.
-   * @param event Tastetrykk eventet.
-   */
-  handleKeyDown(t) {
-    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) && 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;
-      let i;
-      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());
-    }
-  }
-  /**
-   * Henter alle paneler i tab gruppen.
-   * @returns En liste over alle paneler i tab gruppen.
-   */
-  getPanels() {
-    const t = this.shadowRoot?.querySelector("slot:not([name])");
-    return t ? t.assignedElements({ flatten: !0 }).filter((o) => o.tagName.toLowerCase() === "nve-tab-panel") : [];
-  }
-  /**
-   * Henter alle faner i tab gruppen.
-   * @returns En liste over alle faner i tab gruppen.
-   */
-  getTabs() {
-    const t = this.shadowRoot?.querySelector('slot[name="nav"]');
-    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.
-   * @param panelName Navnet på panelet som skal aktiveres.
-   */
-  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,
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  updateIndicator() {
-    if (this.isBackground) return;
-    const t = this.shadowRoot?.querySelector(".tab-group__nav"), e = this.tabs.find((o) => o.getAttribute("aria-selected") === "true");
-    if (t && e) {
-      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`);
-    }
-  }
-  /**
-   * Setter aria-controls og aria-labelledby attributter på faner og paneler.
-   * Dette er viktig for tilgjengelighet slik at skjermlesere kan forstå sammenhengen mellom faner og deres tilhørende paneler.
-   */
-  setAriaLabels() {
-    this.tabs.forEach((t) => {
-      const e = this.panels.find((o) => o.name === t.panel);
-      e && (t.setAttribute("aria-controls", e.id), e.setAttribute("aria-labelledby", t.id));
-    });
-  }
-  /**
-   * Oppdaterer faner og paneler i tab gruppen.
-   * Kalles når komponenten oppdateres eller når faner/paneler endres.
-   */
-  async syncTabsAndPanels() {
-    if (await customElements.whenDefined("nve-tab"), await customElements.whenDefined("nve-tab-panel"), this.tabs = this.getTabs(), this.panels = this.getPanels(), this.setAriaLabels(), this.tabs.forEach((t) => {
-      t.background = t.background ? t.background : this.background;
-    }), this.isBackground = this.tabs.some((t) => t.background) || this.background, this.tabs.forEach((t) => {
-      t.size = this.size;
-    }), this.activeTab)
-      this.setActiveTab(this.activeTab);
-    else {
-      const t = this.tabs.length > 0 ? this.tabs[0].panel : null;
-      t && this.setActiveTab(t);
-    }
-  }
-  /**
-   * Fjerner tabindex fra fremover scroll-knappen.
-   */
-  async removeTabIndexFromForwardScrollButton() {
-    const e = this.shadowRoot?.querySelector(".tab-group__nav-button--forward")?.querySelector("nve-button");
-    if (e) {
-      await e.updateComplete;
-      const o = e.shadowRoot?.querySelector('[part="base"]');
-      o && o.setAttribute("tabindex", "-1");
-    }
-  }
-  /**
-   * Fjerner tabindex fra bakover scroll-knappen.
-   */
-  async removeTabIndexFromBackwardScrollButton() {
-    const e = this.shadowRoot?.querySelector(".tab-group__nav-button--backward")?.querySelector("nve-button");
-    if (e) {
-      await e.updateComplete;
-      const o = e.shadowRoot?.querySelector('[part="base"]');
-      o && o.setAttribute("tabindex", "-1");
-    }
-  }
-  /**
-   * Sjekker om tab gruppen har overflow og oppdaterer tilstanden for scroll knappene.
-   * Kalles ved endring av størrelse på tab gruppen.
-   */
-  checkOverflow() {
-    const t = this.shadowRoot?.querySelector(".tab-group__nav");
-    if (!t) return;
-    const e = t.scrollWidth > t.clientWidth;
-    this.isOverflow = e, this.updateScrollState();
-  }
-  /**
-   * Oppdaterer tilstanden for scroll knappene basert på gjeldende scroll posisjon.
-   * Kalles når brukeren scroller i tab gruppen.
-   */
-  updateScrollState() {
-    const t = this.shadowRoot?.querySelector(".tab-group__nav");
-    t && (this.canScrollBack = t.scrollLeft > 0, this.canScrollForward = t.scrollLeft + t.clientWidth + 5 < t.scrollWidth);
-  }
-  /**
-   * Ruller navigasjonslisten fremover. Flytter den siste fanen som er full synlig (den blir den første nå).
-   */
-  scrollNavForward() {
-    const t = this.shadowRoot?.querySelector(".tab-group__nav");
-    if (!t || !this.tabs.length) return;
-    const e = t.scrollLeft, o = t.clientWidth, a = e + o;
-    for (let s of this.tabs)
-      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"
-        });
-        return;
-      }
-  }
-  /**
-   * Ruller navigasjonslisten bakover. Flytter den første fanen som er full synlig (den blir den første nå).
-   */
-  scrollNavBackward() {
-    const t = this.shadowRoot?.querySelector(".tab-group__nav");
-    if (!t || !this.tabs.length) return;
-    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: i - e + this.buttonContainerWidth,
-          behavior: "smooth"
-        });
-        return;
-      }
-    }
-  }
-  render() {
-    return u`
+import l from "../nve-tab/nve-tab.component.js";
+import u from "./nve-tab-group.styles.js";
+//#region src/components/nve-tab-group/nve-tab-group.component.ts
+var d = class extends n {
+	static {
+		this.styles = [u];
+	}
+	firstUpdated() {
+		this.syncTabsAndPanels();
+		let e = this.shadowRoot?.querySelector(".tab-group__nav");
+		e && this.resizeObserver && (this.resizeObserver.observe(e), e.addEventListener("scroll", () => this.updateScrollState()));
+	}
+	async updated(e) {
+		super.updated?.(e), (e.has("canScrollBack") || e.has("isOverflow")) && await this.removeTabIndexFromBackwardScrollButton(), (e.has("canScrollForward") || e.has("isOverflow")) && await this.removeTabIndexFromForwardScrollButton();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.style.setProperty("--button-container-width", `${this.buttonContainerWidth}px`), this.setAttribute("role", "tablist"), this.resizeObserver = new ResizeObserver(() => this.checkOverflow()), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.resizeObserver?.disconnect();
+		let e = this.shadowRoot?.querySelector(".tab-group__nav");
+		e && e.removeEventListener("scroll", () => this.updateScrollState()), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+	}
+	constructor() {
+		super(), this.testId = void 0, this.background = !1, this.size = "large", this.activeTab = null, this.isOverflow = !1, this.canScrollBack = !1, this.canScrollForward = !1, this.isBackground = !1, this.tabs = [], this.panels = [], this.buttonContainerWidth = 40;
+	}
+	handleClick(e) {
+		let t = e.composedPath(), n = t.find((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "nve-tab");
+		t.find((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "nve-tab-group") === this && (n instanceof l && n.disabled || n && n.panel && this.setActiveTab(n.panel));
+	}
+	handleKeyDown(e) {
+		let t = e.composedPath(), n = t.find((e) => e instanceof HTMLElement && e.closest && e.closest("nve-tab") === e) || null;
+		if (t.find((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "nve-tab-group") === this && (["Enter", " "].includes(e.key) && n && n.panel && (this.setActiveTab(n.panel), e.preventDefault()), [
+			"ArrowLeft",
+			"ArrowRight",
+			"Home",
+			"End"
+		].includes(e.key))) {
+			let t = this.tabs.find((e) => e === n);
+			if (!t) return;
+			let r, i = this.tabs.filter((e) => !e.disabled), a = i.indexOf(t);
+			e.key === "ArrowLeft" && (r = a > 0 ? i[a - 1] : i[i.length - 1]), e.key === "ArrowRight" && (r = a < i.length - 1 ? i[a + 1] : i[0]), e.key === "Home" && (r = i[0]), e.key === "End" && (r = i[i.length - 1]), r && (r.focus(), e.preventDefault());
+		}
+	}
+	getPanels() {
+		let e = this.shadowRoot?.querySelector("slot:not([name])");
+		return e ? e.assignedElements({ flatten: !0 }).filter((e) => e.tagName.toLowerCase() === "nve-tab-panel") : [];
+	}
+	getTabs() {
+		let e = this.shadowRoot?.querySelector("slot[name=\"nav\"]");
+		return e ? e.assignedElements({ flatten: !0 }).filter((e) => e.tagName.toLowerCase() === "nve-tab") : [];
+	}
+	setActiveTab(e) {
+		this.tabs.forEach((t) => t.setAttribute("aria-selected", `${t.panel === e}`)), this.tabs.forEach((t) => t.setAttribute("tabindex", t.panel === e ? "0" : "-1")), this.panels.forEach((t) => t.classList.toggle("tab-panel--hidden", t.name !== e)), this.activeTab = e, requestAnimationFrame(() => {
+			this.updateIndicator();
+		}), requestAnimationFrame(() => {
+			let e = this.tabs.find((e) => e.getAttribute("aria-selected") === "true");
+			if (e) {
+				let t = this.shadowRoot?.querySelector(".tab-group__nav");
+				if (t) {
+					let n = e.offsetLeft, r = e.offsetLeft + e.offsetWidth;
+					(n < t.scrollLeft || r > t.scrollLeft + t.clientWidth) && t.scrollTo({
+						left: n,
+						behavior: "smooth"
+					});
+				}
+			}
+		}), this.dispatchEvent(new CustomEvent("nve-tab-change", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	updateIndicator() {
+		if (this.isBackground) return;
+		let e = this.shadowRoot?.querySelector(".tab-group__nav"), t = this.tabs.find((e) => e.getAttribute("aria-selected") === "true");
+		if (e && t) {
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect().left - n.left + e.scrollLeft, i = t.offsetWidth;
+			e.style.setProperty("--indicator-x", `${r}px`), e.style.setProperty("--indicator-width", `${i}px`);
+		}
+	}
+	setAriaLabels() {
+		this.tabs.forEach((e) => {
+			let t = this.panels.find((t) => t.name === e.panel);
+			t && (e.setAttribute("aria-controls", t.id), t.setAttribute("aria-labelledby", e.id));
+		});
+	}
+	async syncTabsAndPanels() {
+		if (await customElements.whenDefined("nve-tab"), await customElements.whenDefined("nve-tab-panel"), this.tabs = this.getTabs(), this.panels = this.getPanels(), this.setAriaLabels(), this.tabs.forEach((e) => {
+			e.background = e.background ? e.background : this.background;
+		}), this.isBackground = this.tabs.some((e) => e.background) || this.background, this.tabs.forEach((e) => {
+			e.size = this.size;
+		}), this.activeTab) this.setActiveTab(this.activeTab);
+		else {
+			let e = this.tabs.length > 0 ? this.tabs[0].panel : null;
+			e && this.setActiveTab(e);
+		}
+	}
+	async removeTabIndexFromForwardScrollButton() {
+		let e = (this.shadowRoot?.querySelector(".tab-group__nav-button--forward"))?.querySelector("nve-button");
+		if (e) {
+			await e.updateComplete;
+			let t = e.shadowRoot?.querySelector("[part=\"base\"]");
+			t && t.setAttribute("tabindex", "-1");
+		}
+	}
+	async removeTabIndexFromBackwardScrollButton() {
+		let e = (this.shadowRoot?.querySelector(".tab-group__nav-button--backward"))?.querySelector("nve-button");
+		if (e) {
+			await e.updateComplete;
+			let t = e.shadowRoot?.querySelector("[part=\"base\"]");
+			t && t.setAttribute("tabindex", "-1");
+		}
+	}
+	checkOverflow() {
+		let e = this.shadowRoot?.querySelector(".tab-group__nav");
+		if (!e) return;
+		let t = e.scrollWidth > e.clientWidth;
+		this.isOverflow = t, this.updateScrollState();
+	}
+	updateScrollState() {
+		let e = this.shadowRoot?.querySelector(".tab-group__nav");
+		e && (this.canScrollBack = e.scrollLeft > 0, this.canScrollForward = e.scrollLeft + e.clientWidth + 5 < e.scrollWidth);
+	}
+	scrollNavForward() {
+		let e = this.shadowRoot?.querySelector(".tab-group__nav");
+		if (!e || !this.tabs.length) return;
+		let t = e.scrollLeft + e.clientWidth;
+		for (let n of this.tabs) if (n.offsetLeft + n.offsetWidth > t) {
+			let t = this.tabs[this.tabs.indexOf(n) - 1], r = t ? t.offsetLeft : 0;
+			e.scrollTo({
+				left: r - this.buttonContainerWidth,
+				behavior: "smooth"
+			});
+			return;
+		}
+	}
+	scrollNavBackward() {
+		let e = this.shadowRoot?.querySelector(".tab-group__nav");
+		if (!e || !this.tabs.length) return;
+		let t = e.clientWidth, n = e.scrollLeft;
+		for (let r of this.tabs) {
+			let i = r.offsetLeft, a = i + r.offsetWidth;
+			if (i > n) {
+				e.scrollTo({
+					left: a - t + this.buttonContainerWidth,
+					behavior: "smooth"
+				});
+				return;
+			}
+		}
+	}
+	render() {
+		return e`
       <div
         part="base"
         class="tab-group"
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
-        testId=${k(this.testId)}
+        testId=${c(this.testId)}
       >
         <div class="tab-group__nav-container">
           <div
             part="nav"
-            class=${v({ "tab-group__nav": !0, "tab-group__nav--background": this.isBackground })}
+            class=${s({
+			"tab-group__nav": !0,
+			"tab-group__nav--background": this.isBackground
+		})}
           >
             <slot name="nav"></slot>
           </div>
-          ${this.canScrollBack && this.isOverflow ? u`
+          ${this.canScrollBack && this.isOverflow ? e`
                 <div
                   aria-hidden="true"
                   part="button-backward-base"
                   class="tab-group__nav-button tab-group__nav-button--backward"
                 >
-                  <nve-button @click=${this.scrollNavBackward} variant="text">
+                  <nve-button @click=${this.scrollNavBackward} variant="ghost">
                     <nve-icon name="chevron_backward"></nve-icon>
                   </nve-button>
                 </div>
-              ` : f}
-          ${this.canScrollForward && this.isOverflow ? u`
+              ` : t}
+          ${this.canScrollForward && this.isOverflow ? e`
                 <div
                   part="button-forward-base"
                   aria-hidden="true"
-                  class=${v({
-      "tab-group__nav-button tab-group__nav-button--forward": !0
-    })}
+                  class=${s({ "tab-group__nav-button tab-group__nav-button--forward": !0 })}
                 >
-                  <nve-button variant="text" @click=${this.scrollNavForward}
-                    ><nve-icon name="chevron_forward"></nve-icon
-                  ></nve-button>
+                  <nve-button variant="ghost" @click=${this.scrollNavForward}>
+                    <nve-icon name="chevron_forward"></nve-icon>
+                  </nve-button>
                 </div>
-              ` : f}
+              ` : t}
         </div>
         <slot part="body"></slot>
       </div>
     `;
-  }
-};
-n.styles = [m];
-c([
-  d({ type: String })
-], n.prototype, "testId", 2);
-c([
-  d({ type: Boolean })
-], n.prototype, "background", 2);
-c([
-  d({ type: String })
-], n.prototype, "size", 2);
-c([
-  d({ type: String, reflect: !0 })
-], n.prototype, "activeTab", 2);
-c([
-  b()
-], n.prototype, "isOverflow", 2);
-c([
-  b()
-], n.prototype, "canScrollBack", 2);
-c([
-  b()
-], n.prototype, "canScrollForward", 2);
-c([
-  b()
-], n.prototype, "isBackground", 2);
-n = c([
-  g("nve-tab-group")
-], n);
-export {
-  n as default
+	}
 };
+o([i({ type: String })], d.prototype, "testId", void 0), o([i({ type: Boolean })], d.prototype, "background", void 0), o([i({ type: String })], d.prototype, "size", void 0), o([i({
+	type: String,
+	reflect: !0
+})], d.prototype, "activeTab", void 0), o([r()], d.prototype, "isOverflow", void 0), o([r()], d.prototype, "canScrollBack", void 0), o([r()], d.prototype, "canScrollForward", void 0), o([r()], d.prototype, "isBackground", void 0), d = o([a("nve-tab-group")], d);
+var f = d;
+//#endregion
+export { f as default };

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

@@ -1,5 +1,6 @@
-import { i as t } from "../../chunks/lit-element.js";
-const o = t`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-tab-group/nve-tab-group.styles.ts
+var t = e`
   .tab-group__nav-container {
     display: flex;
     position: relative;
@@ -70,6 +71,5 @@ const o = t`
     left: 0;
   }
 `;
-export {
-  o as default
-};
+//#endregion
+export { t as default };

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

@@ -1,34 +1,24 @@
-import { a as d, x as h } from "../../chunks/lit-element.js";
-import { n as p, t as c } from "../../chunks/property.js";
-import m from "./nve-tab-panel.styles.js";
-var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, l = (o, s, n, r) => {
-  for (var t = r > 1 ? void 0 : r ? b(s, n) : s, a = o.length - 1, i; a >= 0; a--)
-    (i = o[a]) && (t = (r ? i(s, n, t) : i(t)) || t);
-  return r && t && v(s, n, t), t;
-};
-let f = 0, e = class extends d {
-  constructor() {
-    super(), this.testId = void 0, this.name = null, this.attrId = ++f, this.componentId = `nve-panel-${this.attrId}`;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "tabpanel"), this.name && this.setAttribute("name", this.name);
-  }
-  render() {
-    return this.id = this.id.length > 0 ? this.id : this.componentId, h`<div class="tab-panel" part="base">
+import { a as e, t } from "../../chunks/lit.js";
+import { o as n, s as r, t as i } from "../../chunks/decorate.js";
+import a from "./nve-tab-panel.styles.js";
+//#region src/components/nve-tab-panel/nve-tab-panel.component.ts
+var o = 0, s = class extends t {
+	static {
+		this.styles = [a];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "tabpanel"), this.name && this.setAttribute("name", this.name);
+	}
+	constructor() {
+		super(), this.testId = void 0, this.name = null, this.attrId = ++o, this.componentId = `nve-panel-${this.attrId}`;
+	}
+	render() {
+		return this.id = this.id.length > 0 ? this.id : this.componentId, e`<div class="tab-panel" part="base">
       <slot></slot>
     </div> `;
-  }
-};
-e.styles = [m];
-l([
-  p({ type: String })
-], e.prototype, "testId", 2);
-l([
-  p({ type: String })
-], e.prototype, "name", 2);
-e = l([
-  c("nve-tab-panel")
-], e);
-export {
-  e as default
+	}
 };
+i([n({ type: String })], s.prototype, "testId", void 0), i([n({ type: String })], s.prototype, "name", void 0), s = i([r("nve-tab-panel")], s);
+var c = s;
+//#endregion
+export { c as default };

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

@@ -1,5 +1,6 @@
-import { i as a } from "../../chunks/lit-element.js";
-const r = a`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-tab-panel/nve-tab-panel.styles.ts
+var t = e`
   :host(.tab-panel--hidden) {
     display: none;
   }
@@ -13,6 +14,5 @@ const r = a`
     padding: var(--spacing-small);
   }
 `;
-export {
-  r as default
-};
+//#endregion
+export { t as default };

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

@@ -27,13 +27,13 @@ export default class NveTag extends LitElement {
     /** Størrelse på komponenten */
     size: 'small' | 'medium';
     /** Ekstra tekst */
-    'extra-text': string;
+    extraText: string;
     /** Viser dot-ikon i prefix */
     dot: boolean;
     /** Viser lukke-knapp */
-    'closeable': boolean;
+    closeable: boolean;
     /** aria-label på lukke-knapp */
-    'close-aria-label': string;
+    closeAriaLabel: string;
     private closeButtonClick;
     render(): import('lit-html').TemplateResult<1>;
 }