nve-designsystem 3.2.0 → 3.3.0

package/components/nve-message-card/nve-message-card.component.js

@@ -1,107 +1,77 @@
-import { a as p, x as i } from "../../chunks/lit-element.js";
-import { n as s, t as u } from "../../chunks/property.js";
-import { e as h } from "../../chunks/class-map.js";
-import m from "./nve-message-card.styles.js";
+import { a as e, t } from "../../chunks/lit.js";
+import { o as n, s as r, t as i } from "../../chunks/decorate.js";
+import { t as a } from "../../chunks/class-map.js";
 import "../nve-icon/nve-icon.component.js";
-var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (a, n, l, o) => {
-  for (var r = o > 1 ? void 0 : o ? g(n, l) : n, c = a.length - 1, d; c >= 0; c--)
-    (d = a[c]) && (r = (o ? d(n, l, r) : d(r)) || r);
-  return o && r && v(n, l, r), r;
-};
-let e = class extends p {
-  constructor() {
-    super(), this.testId = "", this.saturation = null, this.size = "default", this.closable = !1, this.showIcon = "true", this.label = "", this.iconTitle = "", this.variant = "primary";
-  }
-  handleClose() {
-    const a = this.shadowRoot?.querySelector(".message-card");
-    a?.classList.add("message-card-remove"), this.dispatchEvent(
-      new CustomEvent("nve-hide", {
-        detail: { message: "Message card is being hidden" },
-        bubbles: !0,
-        composed: !0
-      })
-    ), a?.addEventListener(
-      "transitionend",
-      () => {
-        this.remove();
-      },
-      { once: !0 }
-    );
-  }
-  determineIcon() {
-    if (this.iconTitle)
-      return this.iconTitle;
-    switch (this.variant) {
-      case "neutral":
-      case "primary":
-        return "info";
-      case "warning":
-        return "warning";
-      case "danger":
-        return "error";
-      case "success":
-        return "check_circle";
-    }
-  }
-  render() {
-    return i`
+import o from "./nve-message-card.styles.js";
+//#region src/components/nve-message-card/nve-message-card.component.ts
+var s = class extends t {
+	static {
+		this.styles = [o];
+	}
+	constructor() {
+		super(), this.testId = "", this.saturation = null, this.size = "default", this.closable = !1, this.showIcon = "true", this.label = "", this.iconTitle = "", this.variant = "primary";
+	}
+	handleClose() {
+		let e = this.shadowRoot?.querySelector(".message-card");
+		e?.classList.add("message-card-remove"), this.dispatchEvent(new CustomEvent("nve-hide", {
+			detail: { message: "Message card is being hidden" },
+			bubbles: !0,
+			composed: !0
+		})), e?.addEventListener("transitionend", () => {
+			this.remove();
+		}, { once: !0 });
+	}
+	determineIcon() {
+		if (this.iconTitle) return this.iconTitle;
+		switch (this.variant) {
+			case "neutral":
+			case "primary": return "info";
+			case "warning": return "warning";
+			case "danger": return "error";
+			case "success": return "check_circle";
+		}
+	}
+	render() {
+		return e`
       <div
         part="base"
-        class="${h({
-      "message-card": !0,
-      "message-card--neutral": this.variant === "neutral",
-      "message-card--primary": this.variant === "primary",
-      "message-card--warning": this.variant === "warning",
-      "message-card--danger": this.variant === "danger",
-      "message-card--success": this.variant === "success"
-    })}"
+        class="${a({
+			"message-card": !0,
+			"message-card--neutral": this.variant === "neutral",
+			"message-card--primary": this.variant === "primary",
+			"message-card--warning": this.variant === "warning",
+			"message-card--danger": this.variant === "danger",
+			"message-card--success": this.variant === "success"
+		})}"
       >
         <div class="message-card__header-container">
           <div part="header" class="message-card__header">
             <slot part="subheader" name="subheader" class="message-card__subheader"></slot>
             <div part="label" class="message-card__header-label">
-              ${this.showIcon === "true" ? i`<nve-icon name=${this.determineIcon()}></nve-icon>` : null}
-              ${this.label ? i`<span>${this.label}</span>` : null}
+              ${this.showIcon === "true" ? e`<nve-icon name=${this.determineIcon()}></nve-icon>` : null}
+              ${this.label ? e`<span>${this.label}</span>` : null}
             </div>
           </div>
-          ${this.closable ? i`<button type="button" class="message-card__close-btn" @click=${this.handleClose}>
+          ${this.closable ? e`<button type="button" class="message-card__close-btn" @click=${this.handleClose}>
                 <nve-icon name="close"></nve-icon>
               </button>` : null}
         </div>
-        ${this.size !== "simple" ? i` <slot part="body" class="message-card__body" aria-live="assertive"></slot>
-              <slot name="footer" part="footer"></slot>` : null}
+        ${this.size === "simple" ? null : e` <slot part="body" class="message-card__body" aria-live="assertive"></slot>
+              <slot name="footer" part="footer"></slot>`}
       </div>
     `;
-  }
-};
-e.styles = [m];
-t([
-  s({ reflect: !0, type: String })
-], e.prototype, "testId", 2);
-t([
-  s({ type: String, reflect: !1 })
-], e.prototype, "saturation", 2);
-t([
-  s({ reflect: !0 })
-], e.prototype, "size", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "closable", 2);
-t([
-  s({ reflect: !0 })
-], e.prototype, "showIcon", 2);
-t([
-  s({ reflect: !0 })
-], e.prototype, "label", 2);
-t([
-  s({ reflect: !0 })
-], e.prototype, "iconTitle", 2);
-t([
-  s({ reflect: !0 })
-], e.prototype, "variant", 2);
-e = t([
-  u("nve-message-card")
-], e);
-export {
-  e as default
+	}
 };
+i([n({
+	reflect: !0,
+	type: String
+})], s.prototype, "testId", void 0), i([n({
+	type: String,
+	reflect: !1
+})], s.prototype, "saturation", void 0), i([n({ reflect: !0 })], s.prototype, "size", void 0), i([n({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "closable", void 0), i([n({ reflect: !0 })], s.prototype, "showIcon", void 0), i([n({ reflect: !0 })], s.prototype, "label", void 0), i([n({ reflect: !0 })], s.prototype, "iconTitle", void 0), i([n({ reflect: !0 })], s.prototype, "variant", void 0), s = i([r("nve-message-card")], s);
+var c = s;
+//#endregion
+export { c as default };

package/components/nve-message-card/nve-message-card.styles.js

@@ -1,5 +1,6 @@
-import { i as e } from "../../chunks/lit-element.js";
-const r = e`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-message-card/nve-message-card.styles.ts
+var t = e`
   :host {
     --button-hover: rgba(0, 0, 0, 0.1);
   }
@@ -12,7 +13,6 @@ const r = e`
     padding: var(--spacing-large);
     gap: var(--spacing-small);
     align-self: stretch;
-    color: var(--color-neutrals-foreground-primary, #0d0d0e);
     opacity: 1;
     transition: opacity 0.3s 0s;
   }
@@ -54,7 +54,7 @@ const r = e`
     justify-content: center;
     align-items: center;
     border: none;
-    background: none;
+    background-color: none;
     width: 28px;
     height: 28px;
     font-size: unset;
@@ -69,44 +69,42 @@ const r = e`
     opacity: 0;
   }
 
-  nve-icon::part(icon) {
-    display: unset;
-    font-size: var(--font-size-medium);
-    line-height: 1;
-  }
-
   /** Varianter */
 
   .message-card--neutral {
-    background: var(--color-neutrals-background-primary, #fff);
+    background-color: var(--color-neutrals-background-primary);
+    color: var(--color-neutrals-foreground-primary);
     .message-card__close-btn:hover {
       background-color: var(--button-hover);
     }
   }
 
   .message-card--danger {
-    background: var(--color-feedback-background-default-error);
+    background-color: var(--color-feedback-background-default-error);
+    color: var(--color-feedback-foreground-on-bg-subtle-error);
     .message-card__close-btn:hover {
       background-color: var(--button-hover);
     }
   }
 
   .message-card--warning {
-    background: var(--color-feedback-background-default-warning);
+    background-color: var(--color-feedback-background-default-warning);
+    color: var(--color-feedback-foreground-on-bg-subtle-warning);
     .message-card__close-btn:hover {
       background-color: var(--button-hover);
     }
   }
 
   .message-card--success {
-    background: var(--color-feedback-background-default-success);
+    background-color: var(--color-feedback-background-default-success);
+    color: var(--color-feedback-foreground-on-bg-subtle-success);
     .message-card__close-btn:hover {
       background-color: var(--button-hover);
     }
   }
 
   .message-card--primary {
-    background: var(--color-feedback-background-subtle-info);
+    background-color: var(--color-feedback-background-subtle-info);
     .message-card__close-btn:hover {
       background-color: var(--button-hover);
     }
@@ -115,15 +113,15 @@ const r = e`
   /** Sterkere farger */
 
   :host([saturation='emphasized']) .message-card--neutral {
-    background: var(--color-neutrals-background-secondary);
+    background-color: var(--color-neutrals-background-secondary);
     .message-card__close-btn:hover {
       background-color: var(--button-hover);
     }
   }
 
   :host([saturation='emphasized']) .message-card--danger {
-    color: var(--color-feedback-foreground-emphasized-error);
-    background: var(--color-feedback-background-emphasized-error);
+    color: var(--color-feedback-foreground-on-bg-emphasized-error);
+    background-color: var(--color-feedback-background-emphasized-error);
     .message-card__close-btn:hover {
       background-color: var(--color-feedback-background-default-error);
       color: var(--color-neutrals-foreground-primary);
@@ -131,16 +129,16 @@ const r = e`
   }
 
   :host([saturation='emphasized']) .message-card--warning {
-    color: var(--color-feedback-foreground-emphasized-warning);
-    background: var(--color-feedback-background-emphasized-warning);
+    color: var(--color-feedback-foreground-on-bg-emphasized-warning);
+    background-color: var(--color-feedback-background-emphasized-warning);
     .message-card__close-btn:hover {
       background-color: var(--color-feedback-background-default-warning);
     }
   }
 
   :host([saturation='emphasized']) .message-card--success {
-    color: var(--color-feedback-foreground-emphasized-success);
-    background: var(--color-feedback-background-emphasized-success);
+    color: var(--color-feedback-foreground-on-bg-emphasized-success);
+    background-color: var(--color-feedback-background-emphasized-success);
     .message-card__close-btn:hover {
       background-color: var(--color-feedback-background-default-success);
       color: var(--color-neutrals-foreground-primary);
@@ -148,8 +146,8 @@ const r = e`
   }
 
   :host([saturation='emphasized']) .message-card--primary {
-    color: var(--color-feedback-foreground-emphasized-info);
-    background: var(--color-feedback-background-emphasized-info);
+    color: var(--color-feedback-foreground-on-bg-emphasized-info);
+    background-color: var(--color-feedback-background-emphasized-info);
     .message-card__close-btn:hover {
       background-color: var(--button-hover);
     }
@@ -180,6 +178,5 @@ const r = e`
     font-size: var(--font-size-medium);
   }
 `;
-export {
-  r as default
-};
+//#endregion
+export { t as default };

package/components/nve-navigation-card/nve-navigation-card.component.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+/**
+ * Denne komponenten er ment å brukes som hovednavigasjon på sider, for eksempel transportside (i motsetning til `nve-link-card`, som er mindre og brukes der navigasjonen ikke er hovedfokus).
+ *
+ * Komponenten brukes i grid-oppsett, har minimum høyde, og støtter enten dekorativt ikon (angis via path) eller tilleggstekst (maks 3 linjer, trunkeres automatisk) – aldri begge samtidig.
+ *
+ * Ikon angis med `iconPath`-prop og rendres automatisk med aria-hidden. Bruk kun illustrasjonsikoner fra NVE.
+ *
+ * @csspart navigation-card Topp-elementet for kortet
+ * @csspart label Overskriften på kortet
+ * @csspart leading-icon Ikonet øverst i kortet
+ * @csspart content Innholdet i kortet
+ * @csspart additional-text Ekstra tekst under overskriften
+ */
+export default class NveNavigationCard extends LitElement implements INveComponent {
+    /** Test ID som kan brukes i testing og sporing */
+    testId: string | undefined;
+    /** Tittel som vises øverst på kortet (må settes) */
+    label: string;
+    /**
+     * Lenke for navigasjon (må settes for at kortet skal være klikkbart).
+     * Hvis du bruker komponenten uten å wrappe den i et rammeverks-router-element (f.eks. Vue Router eller React Router), må `href` settes.
+     */
+    href: string;
+    /** Ekstratekst som vises under tittelen (maks 3 linjer, trunkeres) */
+    additionalText: string | undefined;
+    /** Definerer hva som skjer når kortet klikkes: 'internal' (intern lenke), 'download' (nedlasting), 'external' (ekstern lenke) */
+    clickAction: 'internal' | 'download' | 'external';
+    /** Path til ikon som vises øverst i kortet (dekorativt) */
+    iconPath: string | undefined;
+    static styles: import('lit').CSSResult[];
+    /**
+     * Returnerer ikonnavnet som vises på kortet basert på clickAction.
+     */
+    private getIconName;
+    /**
+     * Genererer innholdet i kortet.
+     * Viser ikon (hvis iconPath), tittel og ev. additionalText.
+     */
+    private renderContent;
+    /**
+     * Rendrer kortet som <a> hvis ikke parent er en lenke,
+     * ellers som <div> for å unngå nestede lenker (SPA-routing).
+     */
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-navigation-card': NveNavigationCard;
+    }
+}

package/components/nve-navigation-card/nve-navigation-card.component.js

@@ -0,0 +1,60 @@
+import { a as e, n as t, t as n } from "../../chunks/lit.js";
+import { o as r, s as i, t as a } from "../../chunks/decorate.js";
+import { t as o } from "../../chunks/if-defined.js";
+import "../nve-icon/nve-icon.component.js";
+import s from "./nve-navigation-card.styles.js";
+//#region src/components/nve-navigation-card/nve-navigation-card.component.ts
+var c = class extends n {
+	constructor(...e) {
+		super(...e), this.testId = void 0, this.label = "", this.href = "", this.additionalText = void 0, this.clickAction = "internal", this.iconPath = void 0;
+	}
+	static {
+		this.styles = [s];
+	}
+	getIconName() {
+		switch (this.clickAction) {
+			case "internal": return "arrow_forward";
+			case "download": return "download";
+			case "external": return "open_in_new";
+			default: return "arrow_forward";
+		}
+	}
+	renderContent() {
+		return e`
+      <div part="content" class="navigation-card__content">
+        ${this.iconPath ? e`<img
+              part="leading-icon"
+              src="${this.iconPath}"
+              alt=""
+              aria-hidden="true"
+              class="navigation-card__icon"
+            />` : t}
+        <h2 part="label" class="navigation-card__label">${this.label}</h2>
+        ${!this.iconPath && this.additionalText ? e`<p part="additional-text" class="navigation-card__additional-text">${this.additionalText}</p>` : t}
+      </div>
+      <nve-icon aria-hidden="true" name="${this.getIconName()}" class="navigation-card__arrow" />
+    `;
+	}
+	render() {
+		return this.parentElement?.tagName.toLowerCase() === "a" || this.parentElement?.getAttribute("role") === "link" ? e`
+        <div part="navigation-card" class="navigation-card" testid=${o(this.testId)}>
+          ${this.renderContent()}
+        </div>
+      ` : e`
+      <a
+        testid=${o(this.testId)}
+        ?download=${this.clickAction === "download"}
+        part="navigation-card"
+        class="navigation-card"
+        href="${o(this.href)}"
+        target=${this.clickAction === "external" ? "_blank" : t}
+      >
+        ${this.renderContent()}
+      </a>
+    `;
+	}
+};
+a([r({ type: String })], c.prototype, "testId", void 0), a([r({ type: String })], c.prototype, "label", void 0), a([r({ type: String })], c.prototype, "href", void 0), a([r({ type: String })], c.prototype, "additionalText", void 0), a([r({ type: String })], c.prototype, "clickAction", void 0), a([r({ type: String })], c.prototype, "iconPath", void 0), c = a([i("nve-navigation-card")], c);
+var l = c;
+//#endregion
+export { l as default };

package/components/nve-navigation-card/nve-navigation-card.styles.d.ts

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

package/components/nve-navigation-card/nve-navigation-card.styles.js

@@ -0,0 +1,112 @@
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-navigation-card/nve-navigation-card.styles.ts
+var t = e`
+  :host {
+    --nav-card-arrow-transition:
+      margin-left 0.3s cubic-bezier(0, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0, 0, 0.2, 1);
+    --nav-card-arrow-transition-fast:
+      margin-left 0.3s cubic-bezier(0, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0, 0, 0.2, 1);
+    display: flex;
+    height: 100%;
+  }
+
+  .navigation-card {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--sizing-card-link-card-height-x-large-min-height);
+    padding: var(--spacing-2x-large);
+    gap: var(--spacing-medium);
+    border-radius: var(--border-radius-small);
+    border: var(--border-width-stronger) solid transparent;
+    background: var(--color-neutrals-background-primary);
+    cursor: pointer;
+    text-decoration: none;
+    transition: border-color 0.3s ease;
+  }
+
+  .navigation-card:hover {
+    border-color: var(--color-neutrals-border-subtle);
+  }
+
+  .navigation-card:active {
+    border-color: var(--color-neutrals-border-mute);
+  }
+
+  .navigation-card:focus-visible {
+    outline: var(--color-interactive-border-accessibility-focus) solid 2px;
+  }
+
+  .navigation-card__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacing-medium);
+    align-items: flex-start;
+    align-self: stretch;
+  }
+
+  .navigation-card__icon {
+    width: var(--sizing-icon-3x-large);
+    height: var(--sizing-icon-3x-large);
+  }
+
+  .navigation-card__label {
+    font: var(--typography-heading-small);
+    color: var(--color-neutrals-foreground-primary);
+    transition: color 0.3s ease;
+    margin: 0;
+  }
+
+  .navigation-card:hover .navigation-card__label {
+    color: var(--color-brand-foreground-primary);
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 5%;
+    text-underline-offset: 16%;
+  }
+
+  .navigation-card:active .navigation-card__label {
+    text-decoration-thickness: 10%;
+    text-underline-offset: 16%;
+  }
+
+  .navigation-card__additional-text {
+    font: var(--typography-body-compact-medium-compact);
+    color: var(--color-neutrals-foreground-subtle);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+
+  .navigation-card__arrow {
+    flex-shrink: 0;
+    color: var(--color-brand-foreground-primary);
+    margin-right: var(--spacing-x-small);
+    transition: var(--nav-card-arrow-transition);
+  }
+
+  .navigation-card:hover .navigation-card__arrow {
+    margin-left: var(--spacing-2x-small);
+    margin-right: var(--spacing-2x-small);
+    transition: var(--nav-card-arrow-transition-fast);
+  }
+
+  .navigation-card:active .navigation-card__arrow {
+    margin-left: var(--spacing-x-small);
+    margin-right: 0;
+    transition: var(--nav-card-arrow-transition-fast);
+  }
+
+  nve-icon {
+    --icon-size: 24px;
+  }
+`;
+//#endregion
+export { t as default };

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

@@ -1,41 +1,2 @@
-import { o as a } from "../../chunks/chunk.JXOKFADN.js";
-import "../../chunks/chunk.6CTB5ZDJ.js";
-import "../../chunks/chunk.YHLNUJ7P.js";
-import "../../chunks/chunk.4TUIT776.js";
-import { n as u, t as h } from "../../chunks/property.js";
-import c from "./nve-option.styles.js";
-var b = Object.defineProperty, n = Object.getOwnPropertyDescriptor, f = (r, t, l, s) => {
-  for (var e = s > 1 ? void 0 : s ? n(t, l) : t, o = r.length - 1, p; o >= 0; o--)
-    (p = r[o]) && (e = (s ? p(t, l, e) : p(e)) || e);
-  return s && e && b(t, l, e), e;
-};
-let i = class extends a {
-  constructor() {
-    super(), this.textLabel = void 0;
-  }
-  /**
-   * Setter filled attributt på option når parent-select er filled, for å få annen hover-farge
-   * Setter så hide-checkmark basert på samme logikk
-   */
-  firstUpdated(r) {
-    super.firstUpdated(r);
-    const t = this.closest("nve-select");
-    t && (t.hasAttribute("filled") ? this.toggleAttribute("filled", !0) : this.toggleAttribute("filled", !1), t.hasAttribute("hide-checkmark") ? this.toggleAttribute("hide-checkmark", !0) : this.toggleAttribute("hide-checkmark", !1));
-  }
-  /**
-   * Gir tilbake plain-tekst-label som vises i select
-   */
-  getTextLabel() {
-    return this.textLabel ? this.textLabel : super.getTextLabel();
-  }
-};
-i.styles = [a.styles, c];
-f([
-  u()
-], i.prototype, "textLabel", 2);
-i = f([
-  h("nve-option")
-], i);
-export {
-  i as default
-};
+import { t as e } from "../../chunks/nve-option.component.js";
+export { e as default };

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

@@ -1,5 +1,6 @@
-import { i as o } from "../../chunks/lit-element.js";
-const n = o`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-option/nve-option.styles.ts
+var t = e`
   :host {
     font: var(--typography-body-small);
     --sl-font-sans: var(--font-families-source-sans-pro);
@@ -41,6 +42,5 @@ const n = o`
     color: var(--color-neutrals-foreground-primary, #0d0d0e);
   }
 `;
-export {
-  n as default
-};
+//#endregion
+export { t as default };

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

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+/**
+ * nve-paragraph gir fleksibel og tilgjengelig typografi for avsnitt i designsystemet.
+ * Brukes til brødtekst, mengdetekst og ingress (lead), og gir riktig styling basert på designsystemets tokens.
+ *
+ * Du styrer typografivariant med size-prop, og kan velge mellom ulike varianter for brødtekst (body), ingress (lead) og kompakt tekst (body-compact).
+ *
+ * @slot - tekst - Selve avsnittet (innholdet).
+ *
+ * @csspart paragraph Hele paragraph-elementet
+ *
+ * Se designsystemet for alle varianter og tokens.
+ */
+export default class NveParagraph extends LitElement implements INveComponent {
+    testId: string | undefined;
+    /** Typografivariant for paragrafen */
+    size?: 'leadLargeRegular' | 'leadLargeSemibold' | 'leadMediumRegular' | 'leadMediumSemibold' | 'leadSmallRegular' | 'leadSmallSemibold' | 'bodyLarge' | 'bodyLargeUnderline' | 'bodyMedium' | 'bodyMediumUnderline' | 'bodySmall' | 'bodySmallUnderline' | 'bodyXSmall' | 'bodyXSmallUnderline' | 'bodyLargeCompact' | 'bodyLargeUnderlineCompact' | 'bodyMediumCompact' | 'bodyMediumUnderlineCompact' | 'bodySmallCompact' | 'bodySmallUnderlineCompact' | 'bodyXSmallCompact' | 'bodyXSmallUnderlineCompact';
+    static styles: import('lit').CSSResult[];
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-paragraph': NveParagraph;
+    }
+}

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

@@ -0,0 +1,26 @@
+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-paragraph.styles.js";
+//#region src/components/nve-paragraph/nve-paragraph.component.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.testId = void 0;
+	}
+	static {
+		this.styles = [a];
+	}
+	render() {
+		return e`
+      <p class="paragraph ${this.size ? `${this.size}` : ""}" part="paragraph" data-testid="${this.testId}">
+        <slot></slot>
+      </p>
+    `;
+	}
+};
+i([n({ type: String })], o.prototype, "testId", void 0), i([n({
+	type: String,
+	reflect: !0
+})], o.prototype, "size", void 0), o = i([r("nve-paragraph")], o);
+var s = o;
+//#endregion
+export { s as default };

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

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