nve-designsystem 0.2.11 → 0.2.13

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

@@ -12,6 +12,8 @@ export default class NveIcon extends LitElement {
     library: 'Outlined' | 'Sharp';
     /** Navnet på ikonet i Material Symbols-biblioteket */
     name: string;
+    /** Boolean som angir om ikonet har hatt tid til å laste. */
+    private iconLoaded;
     protected firstUpdated(): void;
     render(): import('lit-html').TemplateResult<1>;
 }

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

@@ -1,35 +1,146 @@
-import { h as m, k as c } from "../../chunks/lit-element.js";
-import { n as p, t as y } from "../../chunks/property.js";
-import f from "./nve-icon.styles.js";
-var h = Object.defineProperty, d = Object.getOwnPropertyDescriptor, n = (e, s, o, a) => {
-  for (var t = a > 1 ? void 0 : a ? d(s, o) : s, i = e.length - 1, l; i >= 0; i--)
-    (l = e[i]) && (t = (a ? l(s, o, t) : l(t)) || t);
-  return a && t && h(s, o, t), t;
+import { h as U, k as z } from "../../chunks/lit-element.js";
+import { n as F, t as H } from "../../chunks/property.js";
+import { r as J } from "../../chunks/state.js";
+import K from "./nve-icon.styles.js";
+function R(r) {
+  return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, "default") ? r.default : r;
+}
+var $ = { exports: {} };
+(function(r) {
+  (function() {
+    function i(e, n) {
+      document.addEventListener ? e.addEventListener("scroll", n, !1) : e.attachEvent("scroll", n);
+    }
+    function L(e) {
+      document.body ? e() : document.addEventListener ? document.addEventListener("DOMContentLoaded", function n() {
+        document.removeEventListener("DOMContentLoaded", n), e();
+      }) : document.attachEvent("onreadystatechange", function n() {
+        (document.readyState == "interactive" || document.readyState == "complete") && (document.detachEvent("onreadystatechange", n), e());
+      });
+    }
+    function p(e) {
+      this.g = document.createElement("div"), this.g.setAttribute("aria-hidden", "true"), this.g.appendChild(document.createTextNode(e)), this.h = document.createElement("span"), this.i = document.createElement("span"), this.m = document.createElement("span"), this.j = document.createElement("span"), this.l = -1, this.h.style.cssText = "max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;", this.i.style.cssText = "max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;", this.j.style.cssText = "max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;", this.m.style.cssText = "display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;", this.h.appendChild(this.m), this.i.appendChild(this.j), this.g.appendChild(this.h), this.g.appendChild(this.i);
+    }
+    function s(e, n) {
+      e.g.style.cssText = "max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;white-space:nowrap;font-synthesis:none;font:" + n + ";";
+    }
+    function x(e) {
+      var n = e.g.offsetWidth, t = n + 100;
+      return e.j.style.width = t + "px", e.i.scrollLeft = t, e.h.scrollLeft = e.h.scrollWidth + 100, e.l !== n ? (e.l = n, !0) : !1;
+    }
+    function y(e, n) {
+      function t() {
+        var l = u;
+        x(l) && l.g.parentNode !== null && n(l.l);
+      }
+      var u = e;
+      i(e.h, t), i(e.i, t), x(e);
+    }
+    function I(e, n, t) {
+      n = n || {}, t = t || window, this.family = e, this.style = n.style || "normal", this.weight = n.weight || "normal", this.stretch = n.stretch || "normal", this.context = t;
+    }
+    var O = null, T = null, P = null, A = null;
+    function q(e) {
+      return T === null && (N(e) && /Apple/.test(window.navigator.vendor) ? (e = /AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(window.navigator.userAgent), T = !!e && 603 > parseInt(e[1], 10)) : T = !1), T;
+    }
+    function N(e) {
+      return A === null && (A = !!e.document.fonts), A;
+    }
+    function v(e, n) {
+      var t = e.style, u = e.weight;
+      if (P === null) {
+        var l = document.createElement("div");
+        try {
+          l.style.font = "condensed 100px sans-serif";
+        } catch {
+        }
+        P = l.style.font !== "";
+      }
+      return [t, u, P ? e.stretch : "", "100px", n].join(" ");
+    }
+    I.prototype.load = function(e, n) {
+      var t = this, u = e || "BESbswy", l = 0, g = n || 3e3, S = (/* @__PURE__ */ new Date()).getTime();
+      return new Promise(function(k, M) {
+        if (N(t.context) && !q(t.context)) {
+          var B = new Promise(function(w, b) {
+            function d() {
+              (/* @__PURE__ */ new Date()).getTime() - S >= g ? b(Error("" + g + "ms timeout exceeded")) : t.context.document.fonts.load(v(t, '"' + t.family + '"'), u).then(function(m) {
+                1 <= m.length ? w() : setTimeout(d, 25);
+              }, b);
+            }
+            d();
+          }), G = new Promise(function(w, b) {
+            l = setTimeout(function() {
+              b(Error("" + g + "ms timeout exceeded"));
+            }, g);
+          });
+          Promise.race([G, B]).then(function() {
+            clearTimeout(l), k(t);
+          }, M);
+        } else L(function() {
+          function w() {
+            var o;
+            (o = c != -1 && h != -1 || c != -1 && f != -1 || h != -1 && f != -1) && ((o = c != h && c != f && h != f) || (O === null && (o = /AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent), O = !!o && (536 > parseInt(o[1], 10) || parseInt(o[1], 10) === 536 && 11 >= parseInt(o[2], 10))), o = O && (c == D && h == D && f == D || c == W && h == W && f == W || c == _ && h == _ && f == _)), o = !o), o && (a.parentNode !== null && a.parentNode.removeChild(a), clearTimeout(l), k(t));
+          }
+          function b() {
+            if ((/* @__PURE__ */ new Date()).getTime() - S >= g) a.parentNode !== null && a.parentNode.removeChild(a), M(Error("" + g + "ms timeout exceeded"));
+            else {
+              var o = t.context.document.hidden;
+              (o === !0 || o === void 0) && (c = d.g.offsetWidth, h = m.g.offsetWidth, f = E.g.offsetWidth, w()), l = setTimeout(b, 50);
+            }
+          }
+          var d = new p(u), m = new p(u), E = new p(u), c = -1, h = -1, f = -1, D = -1, W = -1, _ = -1, a = document.createElement("div");
+          a.dir = "ltr", s(d, v(t, "sans-serif")), s(m, v(t, "serif")), s(E, v(t, "monospace")), a.appendChild(d.g), a.appendChild(m.g), a.appendChild(E.g), t.context.document.body.appendChild(a), D = d.g.offsetWidth, W = m.g.offsetWidth, _ = E.g.offsetWidth, b(), y(d, function(o) {
+            c = o, w();
+          }), s(d, v(t, '"' + t.family + '",sans-serif')), y(m, function(o) {
+            h = o, w();
+          }), s(m, v(t, '"' + t.family + '",serif')), y(E, function(o) {
+            f = o, w();
+          }), s(E, v(t, '"' + t.family + '",monospace'));
+        });
+      });
+    }, r.exports = I;
+  })();
+})($);
+var Q = $.exports;
+const V = /* @__PURE__ */ R(Q);
+var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, j = (r, i, L, p) => {
+  for (var s = p > 1 ? void 0 : p ? Y(i, L) : i, x = r.length - 1, y; x >= 0; x--)
+    (y = r[x]) && (s = (p ? y(i, L, s) : y(s)) || s);
+  return p && s && X(i, L, s), s;
 };
-let r = class extends m {
+let C = class extends U {
   constructor() {
-    super(...arguments), this.library = "Sharp", this.name = "";
+    super(...arguments), this.library = "Sharp", this.name = "", this.iconLoaded = !1;
   }
   firstUpdated() {
     if (!document.getElementById(`material-icons-${this.library.toLowerCase()}`)) {
-      const e = document.createElement("link");
-      e.id = `material-icons-${this.library.toLowerCase()}`, e.rel = "stylesheet", e.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+${this.library}:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200`, document.head.appendChild(e);
+      const i = document.createElement("link");
+      i.id = `material-icons-${this.library.toLowerCase()}`, i.rel = "stylesheet", i.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+${this.library}:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200`, document.head.appendChild(i);
     }
+    new V(`Material Symbols ${this.library}`).load().then(() => {
+      this.iconLoaded = !0, this.requestUpdate();
+    }).catch((i) => {
+      console.error("Failed to load the icon font:", i);
+    });
   }
   render() {
-    return c`<span part="icon" style="font-family:Material Symbols ${this.library}">${this.name}</span>`;
+    return this.iconLoaded ? z`<span part="icon" style="font-family: 'Material Symbols ${this.library}'; ">${this.name}</span>` : z`<nve-skeleton class="placeholder" effect="sheen"></nve-skeleton>`;
   }
 };
-r.styles = [f];
-n([
-  p({ type: String })
-], r.prototype, "library", 2);
-n([
-  p({ reflect: !0 })
-], r.prototype, "name", 2);
-r = n([
-  y("nve-icon")
-], r);
+C.styles = [K];
+j([
+  F({ type: String })
+], C.prototype, "library", 2);
+j([
+  F({ reflect: !0 })
+], C.prototype, "name", 2);
+j([
+  J()
+], C.prototype, "iconLoaded", 2);
+C = j([
+  H("nve-icon")
+], C);
 export {
-  r as default
+  C as default
 };

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

@@ -1,5 +1,5 @@
 import { i as e } from "../../chunks/lit-element.js";
-const o = e`
+const n = e`
   /* Brukes i dropdown. Eneste måten å override shadow dom for å rotere expand_more ikonet når menyen åpner */
   :host([name='expand_more']) {
     transform: var(--icon-rotation, none);
@@ -26,7 +26,13 @@ const o = e`
     line-height: 24px;
     font-weight: var(--font-weight-regular);
   }
+
+  .placeholder::part(indicator) {
+    width: 24px; 
+    height: 24px; 
+    border-radius: 4px;
+  }
 `;
 export {
-  o as default
+  n as default
 };

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

@@ -58,9 +58,10 @@ const a = r`
     font: var(--body-large);
   }
 
-  .form-control label {
-    font: var(--label-medium);
+  .form-control--has-label .form-control__label {
+    font: var(--label-small);
     align-items: center;
+    margin-bottom: var(--spacing-x-small);
   }
 
   /* Riktig fokus-markering også i filled-modus */

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

@@ -79,13 +79,14 @@ const e = r`
   .form-control--has-help-text .form-control__help-text {
     margin-top: var(--spacing-x-small);
   }
-  /* Formaterer "*Obligatorisk" over input-felt og til høyre riktig når required er satt */
+
   .form-control--has-label .form-control__label {
     display: flex;
     width: 100%;
     justify-content: space-between;
     margin-inline-start: unset;
     margin-bottom: var(--spacing-x-small);
+    font: var(--label-small);
   }
 `;
 export {

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

@@ -0,0 +1,15 @@
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+import { default as SlSkeleton } from '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js';
+/**
+ * Skeletons  brukes til å gi en visuell representasjon av hvor innholdet til slutt vil bli tegnet.
+ */
+export default class NveSkeleton extends SlSkeleton implements INveComponent {
+    testId: string | undefined;
+    static styles: import('lit').CSSResultGroup[];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-skeleton': NveSkeleton;
+    }
+}

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

@@ -0,0 +1,113 @@
+import { n as c, t as u } from "../../chunks/property.js";
+import f from "./nve-skeleton.styles.js";
+import { i as v, k as h } from "../../chunks/lit-element.js";
+import { c as k, b as m, S as _ } from "../../chunks/chunk.5THGRZAA.js";
+import { R as y } from "../../chunks/class-map.js";
+var b = v`
+  :host {
+    --border-radius: var(--sl-border-radius-pill);
+    --color: var(--sl-color-neutral-200);
+    --sheen-color: var(--sl-color-neutral-300);
+
+    display: block;
+    position: relative;
+  }
+
+  .skeleton {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 1rem;
+  }
+
+  .skeleton__indicator {
+    flex: 1 1 auto;
+    background: var(--color);
+    border-radius: var(--border-radius);
+  }
+
+  .skeleton--sheen .skeleton__indicator {
+    background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));
+    background-size: 400% 100%;
+    animation: sheen 8s ease-in-out infinite;
+  }
+
+  .skeleton--pulse .skeleton__indicator {
+    animation: pulse 2s ease-in-out 0.5s infinite;
+  }
+
+  /* Forced colors mode */
+  @media (forced-colors: active) {
+    :host {
+      --color: GrayText;
+    }
+  }
+
+  @keyframes sheen {
+    0% {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`, r = class extends _ {
+  constructor() {
+    super(...arguments), this.effect = "none";
+  }
+  render() {
+    return h`
+      <div
+        part="base"
+        class=${y({
+      skeleton: !0,
+      "skeleton--pulse": this.effect === "pulse",
+      "skeleton--sheen": this.effect === "sheen"
+    })}
+      >
+        <div part="indicator" class="skeleton__indicator"></div>
+      </div>
+    `;
+  }
+};
+r.styles = [k, b];
+m([
+  c()
+], r.prototype, "effect", 2);
+var d = r;
+r.define("sl-skeleton");
+var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, p = (i, o, l, t) => {
+  for (var e = t > 1 ? void 0 : t ? x(o, l) : o, a = i.length - 1, n; a >= 0; a--)
+    (n = i[a]) && (e = (t ? n(o, l, e) : n(e)) || e);
+  return t && e && g(o, l, e), e;
+};
+let s = class extends d {
+  constructor() {
+    super(), this.testId = void 0;
+  }
+};
+s.styles = [
+  d.styles,
+  f
+];
+p([
+  c({ reflect: !0, type: String })
+], s.prototype, "testId", 2);
+s = p([
+  u("nve-skeleton")
+], s);
+export {
+  s as default
+};

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

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

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

@@ -0,0 +1,5 @@
+import { i as t } from "../../chunks/lit-element.js";
+const s = t``;
+export {
+  s as default
+};

package/custom-elements.json

@@ -3215,6 +3215,16 @@
               "default": "''",
               "description": "Navnet på ikonet i Material Symbols-biblioteket"
             },
+            {
+              "kind": "field",
+              "name": "iconLoaded",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Boolean som angir om ikonet har hatt tid til å laste."
+            },
             {
               "kind": "method",
               "name": "firstUpdated",
@@ -8616,6 +8626,120 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/nve-skeleton/nve-skeleton.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Skeletons  brukes til å gi en visuell representasjon av hvor innholdet til slutt vil bli tegnet.",
+          "name": "NveSkeleton",
+          "members": [
+            {
+              "kind": "field",
+              "name": "testId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "array"
+              },
+              "static": true,
+              "default": "[ SlSkeleton.styles, styles]"
+            },
+            {
+              "kind": "field",
+              "name": "effect",
+              "type": {
+                "text": "'pulse' | 'sheen' | 'none'"
+              },
+              "default": "'none'",
+              "description": "Determines which effect the skeleton will use.",
+              "attribute": "effect",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "SlSkeleton",
+            "package": "@shoelace-style/shoelace/dist/components/skeleton/skeleton.js"
+          },
+          "tagNameWithoutPrefix": "skeleton",
+          "tagName": "nve-skeleton",
+          "customElement": true,
+          "jsDoc": "/**\n * Skeletons  brukes til å gi en visuell representasjon av hvor innholdet til slutt vil bli tegnet.\n */",
+          "cssProperties": [
+            {
+              "description": "The skeleton's border radius.",
+              "name": "--border-radius",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            },
+            {
+              "description": "The color of the skeleton.",
+              "name": "--color",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            },
+            {
+              "description": "The sheen color when the skeleton is in its loading state.",
+              "name": "--sheen-color",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            },
+            {
+              "description": "The skeleton's indicator which is responsible for its color and animation.",
+              "name": "indicator",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "effect",
+              "type": {
+                "text": "'pulse' | 'sheen' | 'none'"
+              },
+              "default": "'none'",
+              "description": "Determines which effect the skeleton will use.",
+              "fieldName": "effect",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NveSkeleton",
+            "module": "components/nve-skeleton/nve-skeleton.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/nve-spinner/nve-spinner.js",
@@ -10635,7 +10759,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "0.2.10",
+    "version": "0.2.12",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/nve-designsystem.d.ts

@@ -20,6 +20,7 @@ export { default as NveRadio } from './components/nve-radio/nve-radio.component'
 export { default as NveRadioButton } from './components/nve-radio-button/nve-radio-button.component';
 export { default as NveRadioGroup } from './components/nve-radio-group/nve-radio-group.component';
 export { default as NveSelect } from './components/nve-select/nve-select.component';
+export { default as NveSkeleton } from './components/nve-skeleton/nve-skeleton.component';
 export { default as NveSpinner } from './components/nve-spinner/nve-spinner.component';
 export { default as NveStep } from './components/nve-stepper/nve-step/nve-step.component';
 export { default as NveStepper } from './components/nve-stepper/nve-stepper.component';

package/nve-designsystem.js

@@ -6,9 +6,9 @@ import { default as x } from "./components/nve-checkbox-group/nve-checkbox-group
 import { default as v } from "./components/nve-darkmode-switch/nve-darkmode-switch.component.js";
 import { default as N } from "./components/nve-dialog/nve-dialog.component.js";
 import { default as n } from "./components/nve-divider/nve-divider.component.js";
-import { default as S } from "./components/nve-dropdown/nve-dropdown.component.js";
-import { default as D } from "./components/nve-icon/nve-icon.component.js";
-import { default as g } from "./components/nve-input/nve-input.component.js";
+import { default as c } from "./components/nve-dropdown/nve-dropdown.component.js";
+import { default as k } from "./components/nve-icon/nve-icon.component.js";
+import { default as b } from "./components/nve-input/nve-input.component.js";
 import { default as w } from "./components/nve-label/nve-label.component.js";
 import { default as I } from "./components/nve-menu/nve-menu.component.js";
 import { default as T } from "./components/nve-menu-item/nve-menu-item.component.js";
@@ -18,13 +18,14 @@ import { default as O } from "./components/nve-radio/nve-radio.component.js";
 import { default as j } from "./components/nve-radio-button/nve-radio-button.component.js";
 import { default as y } from "./components/nve-radio-group/nve-radio-group.component.js";
 import { default as E } from "./components/nve-select/nve-select.component.js";
-import { default as H } from "./components/nve-spinner/nve-spinner.component.js";
-import { default as K } from "./components/nve-stepper/nve-step/nve-step.component.js";
-import { default as U } from "./components/nve-stepper/nve-stepper.component.js";
-import { default as W } from "./components/nve-switch/nve-switch.component.js";
-import { default as Y } from "./components/nve-tag/nve-tag.component.js";
-import { default as _ } from "./components/nve-textarea/nve-textarea.component.js";
-import { default as ee } from "./components/nve-tooltip/nve-tooltip.component.js";
+import { default as H } from "./components/nve-skeleton/nve-skeleton.component.js";
+import { default as K } from "./components/nve-spinner/nve-spinner.component.js";
+import { default as U } from "./components/nve-stepper/nve-step/nve-step.component.js";
+import { default as W } from "./components/nve-stepper/nve-stepper.component.js";
+import { default as Y } from "./components/nve-switch/nve-switch.component.js";
+import { default as _ } from "./components/nve-tag/nve-tag.component.js";
+import { default as ee } from "./components/nve-textarea/nve-textarea.component.js";
+import { default as te } from "./components/nve-tooltip/nve-tooltip.component.js";
 export {
   t as NveAlert,
   r as NveBadge,
@@ -34,9 +35,9 @@ export {
   v as NveDarkmodeSwitch,
   N as NveDialog,
   n as NveDivider,
-  S as NveDropdown,
-  D as NveIcon,
-  g as NveInput,
+  c as NveDropdown,
+  k as NveIcon,
+  b as NveInput,
   w as NveLabel,
   I as NveMenu,
   T as NveMenuItem,
@@ -46,11 +47,12 @@ export {
   j as NveRadioButton,
   y as NveRadioGroup,
   E as NveSelect,
-  H as NveSpinner,
-  K as NveStep,
-  U as NveStepper,
-  W as NveSwitch,
-  Y as NveTag,
-  _ as NveTextarea,
-  ee as NveTooltip
+  H as NveSkeleton,
+  K as NveSpinner,
+  U as NveStep,
+  W as NveStepper,
+  Y as NveSwitch,
+  _ as NveTag,
+  ee as NveTextarea,
+  te as NveTooltip
 };

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "MIT",
   "homepage": "https://github.com/NVE/Designsystem/",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "customElements": "custom-elements.json",
   "exports": {
     ".": {
@@ -24,6 +24,7 @@
   "scripts": {},
   "dependencies": {
     "@shoelace-style/shoelace": "^2.16.0",
+    "fontfaceobserver": "^2.3.0",
     "lit": "^3.2.0"
   },
   "devDependencies": {},