nve-designsystem 3.2.0 → 3.3.0

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

@@ -1,9 +1,10 @@
-import { i as e } from "../../chunks/lit-element.js";
-const t = e`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-combobox/nve-combobox.styles.ts
+var t = e`
   :host {
     /* Brukt for å gjøre feltet like høyt som nve-select */
     --input-size-offset: 4px;
-    --input-part-base-border: 1px solid var(--color-interactive-links-default);
+    --input-part-base-border: 1px solid var(--color-interactive-foreground-link-enabled);
   }
 
   :host([disabled]) {
@@ -144,6 +145,5 @@ const t = e`
     font: var(--typography-detailtext-caption);
   }
 `;
-export {
-  t as default
-};
+//#endregion
+export { t as default };

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

@@ -1,42 +1,36 @@
-import { a as m, x as n } from "../../chunks/lit-element.js";
-import { n as i, t as h } from "../../chunks/property.js";
-var k = Object.defineProperty, u = Object.getOwnPropertyDescriptor, s = (t, e, d, a) => {
-  for (var o = a > 1 ? void 0 : a ? u(e, d) : e, l = t.length - 1, c; l >= 0; l--)
-    (c = t[l]) && (o = (a ? c(e, d, o) : c(o)) || o);
-  return a && o && k(e, d, o), o;
-};
-let r = class extends m {
-  constructor() {
-    super(), this.testId = "", this.darkmode = !1, this.darkmodeclass = "darkmode", this.localStorageVariable = "preferdarkmode";
-  }
-  toggleDarkmode(t) {
-    this.darkmode = !!t.target.checked, localStorage.setItem(this.localStorageVariable, this.darkmode.toString()), this.darkmode ? document.documentElement.classList.add(this.darkmodeclass) : document.documentElement.classList.remove(this.darkmodeclass);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const t = localStorage.getItem(this.localStorageVariable);
-    let e = !1;
-    t === null ? window.matchMedia("(prefers-color-scheme: dark)").matches && (e = !0) : e = t === "true", e ? (this.darkmode = !0, document.documentElement.classList.add(this.darkmodeclass)) : (this.darkmode = !1, document.documentElement.classList.remove(this.darkmodeclass));
-  }
-  render() {
-    return n`<nve-switch @change=${this.toggleDarkmode} ?checked=${this.darkmode}>
+import { a as e, t } from "../../chunks/lit.js";
+import { o as n, s as r, t as i } from "../../chunks/decorate.js";
+//#region src/components/nve-darkmode-switch/nve-darkmode-switch.component.ts
+var a = class extends t {
+	constructor() {
+		super(), this.testId = "", this.darkmode = !1, this.darkmodeclass = "darkmode", this.localStorageVariable = "preferdarkmode";
+	}
+	toggleDarkmode(e) {
+		let t = e.target;
+		this.darkmode = !!t?.checked, localStorage.setItem(this.localStorageVariable, this.darkmode.toString()), this.darkmode ? document.documentElement.classList.add(this.darkmodeclass) : document.documentElement.classList.remove(this.darkmodeclass);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		let e = localStorage.getItem(this.localStorageVariable), t = !1;
+		e === null ? window.matchMedia("(prefers-color-scheme: dark)").matches && (t = !0) : t = e === "true", t ? (this.darkmode = !0, document.documentElement.classList.add(this.darkmodeclass)) : (this.darkmode = !1, document.documentElement.classList.remove(this.darkmodeclass));
+	}
+	render() {
+		return e`<nve-switch @change=${this.toggleDarkmode} ?checked=${this.darkmode}>
       <nve-icon slot="onicon" name="dark_mode"></nve-icon>
       <nve-icon slot="officon" name="light_mode"></nve-icon>
     </nve-switch>`;
-  }
-};
-s([
-  i({ reflect: !0, type: String })
-], r.prototype, "testId", 2);
-s([
-  i({ attribute: !1, type: Boolean })
-], r.prototype, "darkmode", 2);
-s([
-  i({ attribute: !0, type: String })
-], r.prototype, "darkmodeclass", 2);
-r = s([
-  h("nve-darkmode-switch")
-], r);
-export {
-  r as default
+	}
 };
+i([n({
+	reflect: !0,
+	type: String
+})], a.prototype, "testId", void 0), i([n({
+	attribute: !1,
+	type: Boolean
+})], a.prototype, "darkmode", void 0), i([n({
+	attribute: !0,
+	type: String
+})], a.prototype, "darkmodeclass", void 0), a = i([r("nve-darkmode-switch")], a);
+var o = a;
+//#endregion
+export { o as default };

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

@@ -1,5 +1,6 @@
-import { i as o } from "../../chunks/lit-element.js";
-const r = o`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-dialog/nve-dialog-styles.ts
+var t = e`
   :host {
     --header-spacing: var(--spacing-x-large, 2rem);
     --body-spacing: var(--spacing-x-large, 2rem);
@@ -35,7 +36,7 @@ const r = o`
   .dialog__header-actions sl-icon-button,
   .dialog__header-actions ::slotted(sl-icon-button) {
     color: var(--color-neutrals-foreground-primary, #00131c);
-    font-family: Source Sans Pro;
+    font-family: Source Sans 3;
     font-size: 1.3rem;
     font-style: normal;
     font-weight: bold;
@@ -70,6 +71,5 @@ const r = o`
     fill: var(--color-neutrals-foreground-primary);
   }
 `;
-export {
-  r as default
-};
+//#endregion
+export { t as default };

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

@@ -1,54 +1,2 @@
-import { d as p } from "../../chunks/chunk.KPLQLAWP.js";
-import "../../chunks/chunk.RWUUFNUL.js";
-import "../../chunks/chunk.6CTB5ZDJ.js";
-import "../../chunks/chunk.YHLNUJ7P.js";
-import "../../chunks/chunk.4TUIT776.js";
-import { n as c, t as d } from "../../chunks/property.js";
-import u from "./nve-dialog-styles.js";
-var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (e, o, l, r) => {
-  for (var t = r > 1 ? void 0 : r ? h(o, l) : o, i = e.length - 1, a; i >= 0; i--)
-    (a = e[i]) && (t = (r ? a(o, l, t) : a(t)) || t);
-  return r && t && f(o, l, t), t;
-};
-let s = class extends p {
-  constructor() {
-    super(), this.icon = "", this.disableBackground = !1;
-  }
-  /**
-   * Stjålet fra shoelace eksempel. Hindrer at man lukker dialogen ved å trykke utenfor
-   */
-  handleRequestClose(e) {
-    this.disableBackground && e.detail.source === "overlay" && e.preventDefault();
-  }
-  updated(e) {
-    super.updated(e), e.has("disableBackground") && this.addEventListener("sl-request-close", this.handleRequestClose), this.updateIcon();
-  }
-  /**
-   * Oppdaterer ikonet som vises i dialogens tittel.
-   * Metoden søker først etter tittel-elementet i komponentens skygge-DOM.
-   * Hvis tittel-elementet finnes og `icon`-egenskapen er satt, oppdateres
-   * tittel-elementets stil for å inkludere det angitte ikonet.
-   * Hvis `icon`-egenskapen ikke er satt, settes ikoninnholdet til null
-   * for å unngå å skape unødvendig mellomrom i layouten.
-   */
-  updateIcon() {
-    const e = this.shadowRoot?.querySelector(".dialog__title");
-    if (e instanceof HTMLElement) {
-      const o = this.icon ? `"${this.icon}"` : null;
-      e.style.setProperty("--title-icon", o);
-    }
-  }
-};
-s.styles = [p.styles, u];
-n([
-  c({ type: String, reflect: !0 })
-], s.prototype, "icon", 2);
-n([
-  c({ type: Boolean, reflect: !0 })
-], s.prototype, "disableBackground", 2);
-s = n([
-  d("nve-dialog")
-], s);
-export {
-  s as default
-};
+import { t as e } from "../../chunks/nve-dialog.component.js";
+export { e as default };

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

@@ -1,30 +1,2 @@
-import { d as i } from "../../chunks/chunk.IVVHNXMC.js";
-import "../../chunks/chunk.4TUIT776.js";
-import { i as v } from "../../chunks/lit-element.js";
-import { t as p } from "../../chunks/property.js";
-var c = Object.getOwnPropertyDescriptor, m = (s, o, d, a) => {
-  for (var r = a > 1 ? void 0 : a ? c(o, d) : o, e = s.length - 1, l; e >= 0; e--)
-    (l = s[e]) && (r = l(r) || r);
-  return r;
-};
-let t = class extends i {
-  constructor() {
-    super();
-  }
-};
-t.styles = [
-  i.styles,
-  v`
-      :host {
-        --color: var(--color-neutrals-border-subtle);
-        --width: var(--border-width-default, 1px);
-        --spacing: var(--spacing-2x-small, 0.25rem);
-      }
-    `
-];
-t = m([
-  p("nve-divider")
-], t);
-export {
-  t as default
-};
+import { t as e } from "../../chunks/nve-divider.component.js";
+export { e as default };

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

@@ -1,44 +1,2 @@
-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 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 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 = [a.styles, m];
-c([
-  i({ reflect: !0, type: String })
-], s.prototype, "testId", 2);
-s = c([
-  u("nve-drawer")
-], s);
-export {
-  s as default
-};
+import { t as e } from "../../chunks/nve-drawer.component.js";
+export { e as default };

package/components/nve-drawer/nve-drawer.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-drawer/nve-drawer.styles.ts
+var t = e`
   :host {
     --drawer-padding-block: var(--spacing-large);
     --drawer-padding-inline: var(--spacing-medium);
@@ -43,11 +44,10 @@ const o = r`
     color: var(--color-neutrals-foreground-primary);
   }
   :host::part(close-button):hover {
-    background-color: var(--color-interactive-ghost-background-hover);
+    background-color: var(--color-interactive-background-tertiary-hover);
     border-radius: var(--border-radius-small, 4px);
     transition: background-color 0.3s ease;
   }
 `;
-export {
-  o as default
-};
+//#endregion
+export { t as default };

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

@@ -1,79 +1,2 @@
-import { d as u } from "../../chunks/chunk.UDWRA64J.js";
-import "../../chunks/chunk.5JY5FUCG.js";
-import "../../chunks/chunk.6CTB5ZDJ.js";
-import "../../chunks/chunk.4TUIT776.js";
-import { n as d, t as b } from "../../chunks/property.js";
-import c from "./nve-dropdown.styles.js";
-function l(t) {
-  return !!(t.offsetParent || t.offsetWidth || t.offsetHeight || t.getClientRects().length);
-}
-function g(t) {
-  const e = t.tagName.toLowerCase();
-  return t.getAttribute("tabindex") === "-1" || t.hasAttribute("disabled") || e === "input" && t.getAttribute("type") === "radio" && !t.hasAttribute("checked") || !l(t) || window.getComputedStyle(t).visibility === "hidden" ? !1 : (e === "audio" || e === "video") && t.hasAttribute("controls") || t.hasAttribute("tabindex") || t.hasAttribute("contenteditable") && t.getAttribute("contenteditable") !== "false" ? !0 : ["button", "input", "select", "textarea", "a", "audio", "video", "summary"].includes(e);
-}
-function p(t) {
-  const e = h(t), r = e[0] ?? null, n = e[e.length - 1] ?? null;
-  return { start: r, end: n };
-}
-function h(t) {
-  const e = [];
-  function r(n) {
-    if (n instanceof Element) {
-      if (n.hasAttribute("inert"))
-        return;
-      !e.includes(n) && g(n) && e.push(n);
-      const s = (i) => i.getRootNode({ composed: !0 })?.host !== t;
-      n instanceof HTMLSlotElement && s(n) && n.assignedElements({ flatten: !0 }).forEach((i) => {
-        i instanceof HTMLElement && r(i);
-      }), n.shadowRoot !== null && n.shadowRoot.mode === "open" && r(n.shadowRoot);
-    }
-    [...n.children].forEach((s) => {
-      s instanceof HTMLElement && r(s);
-    });
-  }
-  return r(t), e.sort((n, s) => {
-    const i = Number(n.getAttribute("tabindex")) || 0;
-    return (Number(s.getAttribute("tabindex")) || 0) - i;
-  });
-}
-var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, f = (t, e, r, n) => {
-  for (var s = n > 1 ? void 0 : n ? w(e, r) : e, i = t.length - 1, a; i >= 0; i--)
-    (a = t[i]) && (s = (n ? a(e, r, s) : a(s)) || s);
-  return n && s && m(e, r, s), s;
-};
-let o = class extends u {
-  constructor() {
-    super(), this.testId = "", this.handlePanelSelect = (t) => {
-      const e = t.target;
-      !this.stayOpenOnSelect && e.tagName.toLowerCase() === "nve-menu" && this.focusOnTrigger();
-    };
-  }
-  getMenu() {
-    return this.panel.assignedElements({ flatten: !0 }).find((t) => t.tagName.toLowerCase() === "nve-menu");
-  }
-  updateAccessibleTrigger() {
-    const e = this.trigger.assignedElements({ flatten: !0 }).find((n) => p(n).start);
-    let r;
-    if (e) {
-      switch (e.tagName.toLowerCase()) {
-        // Shoelace buttons have to update the internal button so it's announced correctly by screen readers
-        case "nve-button":
-          r = e.button;
-          break;
-        default:
-          r = e;
-      }
-      r.setAttribute("aria-haspopup", "true"), r.setAttribute("aria-expanded", this.open ? "true" : "false");
-    }
-  }
-};
-o.styles = [u.styles, c];
-f([
-  d({ reflect: !0, type: String })
-], o.prototype, "testId", 2);
-o = f([
-  b("nve-dropdown")
-], o);
-export {
-  o as default
-};
+import { t as e } from "../../chunks/nve-dropdown.component.js";
+export { e as default };

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

@@ -1,9 +1,9 @@
-import { i as o } from "../../chunks/lit-element.js";
-const e = o`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-dropdown/nve-dropdown.styles.ts
+var t = e`
 :host([open]) {
   --icon-rotation: rotate(180deg);
 }
 `;
-export {
-  e as default
-};
+//#endregion
+export { t as default };

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

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+/**
+ * nve-heading gir semantisk og tilgjengelig overskrift med riktig typografi fra designsystemet.
+ * Brukes for å sikre korrekt heading-hierarki (h1–h6) og typografi, og kan overstyres med variant for heading eller subheading.
+ *
+ * @slot - tekst - Selve overskriften (innholdet).
+ *
+ * @csspart nve-heading Hele heading-elementet
+ *
+ * Se designsystemet for alle varianter og tokens.
+ */
+export default class NveHeading extends LitElement implements INveComponent {
+    testId: string | undefined;
+    /** Heading level - Hvilket nivå overskriften skal ha (h1-h6) */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Typografitype - Kan overstyre det som er standard typografi basert på nivå */
+    size?: 'headingXlarge' | 'headingLarge' | 'headingMedium' | 'headingSmall' | 'headingXsmall' | 'subheadingLarge' | 'subheadingMedium' | 'subheadingSmall';
+    static styles: import('lit').CSSResult[];
+    constructor();
+    protected getTagName(): string;
+    protected getDefaultTypographyType(): "headingXlarge" | "headingLarge" | "headingMedium" | "headingSmall" | "headingXsmall";
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-heading': NveHeading;
+    }
+}

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

@@ -0,0 +1,45 @@
+import { t as e } from "../../chunks/lit.js";
+import { o as t, s as n, t as r } from "../../chunks/decorate.js";
+import { n as i, r as a } from "../../chunks/static-html.js";
+import o from "./nve-heading.styles.js";
+//#region src/components/nve-heading/nve-heading.component.ts
+var s = class extends e {
+	static {
+		this.styles = [o];
+	}
+	constructor() {
+		super(), this.testId = void 0, this.level = 1;
+	}
+	getTagName() {
+		return !this.level || this.level < 1 || this.level > 6 || isNaN(this.level) ? "h1" : `h${this.level}`;
+	}
+	getDefaultTypographyType() {
+		switch (this.level) {
+			case 1: return "headingXlarge";
+			case 2: return "headingLarge";
+			case 3: return "headingMedium";
+			case 4: return "headingSmall";
+			case 5: return "headingXsmall";
+			case 6: return "headingXsmall";
+			default: return "headingMedium";
+		}
+	}
+	render() {
+		let e = this.getTagName();
+		return a`
+      <${i(e)} part="nve-heading" data-testid=${this.testId} class="heading ${this.size ? this.size : this.getDefaultTypographyType()}">
+        <slot></slot>
+      </${i(e)}>
+    `;
+	}
+};
+r([t({ type: String })], s.prototype, "testId", void 0), r([t({
+	type: Number,
+	reflect: !0
+})], s.prototype, "level", void 0), r([t({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), s = r([n("nve-heading")], s);
+var c = s;
+//#endregion
+export { c as default };

package/components/nve-heading/nve-heading.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

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

@@ -0,0 +1,41 @@
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-heading/nve-heading.styles.ts
+var t = e`
+  .heading {
+    margin: 0;
+  }
+
+  .headingXlarge {
+    font: var(--typography-heading-x-large);
+  }
+
+  .headingLarge {
+    font: var(--typography-heading-large);
+  }
+
+  .headingMedium {
+    font: var(--typography-heading-medium);
+  }
+
+  .headingSmall {
+    font: var(--typography-heading-small);
+  }
+
+  .headingXsmall {
+    font: var(--typography-heading-x-small);
+  }
+
+  .subheadingLarge {
+    font: var(--typography-subheading-large);
+  }
+
+  .subheadingMedium {
+    font: var(--typography-subheading-medium);
+  }
+
+  .subheadingSmall {
+    font: var(--typography-subheading-small);
+  }
+`;
+//#endregion
+export { t as default };