@oslokommune/punkt-react 12.34.0 → 12.34.2

package/dist/punkt-react.es.js

@@ -5679,7 +5679,7 @@ function dL() {
     for (var c = 0; c < o.length && c < a.length; c++) if (!Sa(a[c], o[c])) return !1;
     return !0;
   }
-  function on(a, o, c, m, b, S) {
+  function sn(a, o, c, m, b, S) {
     if (h = S, k = o, o.memoizedState = null, o.updateQueue = null, o.lanes = 0, tn.current = a === null || a.memoizedState === null ? Ph : op, a = c(m, b), ee) {
       S = 0;
       do {
@@ -6135,7 +6135,7 @@ Error generating stack: ` + S.message + `
   function $i(a, o, c, m, b) {
     c = c.render;
     var S = o.ref;
-    return Qn(o, b), m = on(a, o, c, m, S, b), c = jt(), a !== null && !Vr ? (o.updateQueue = a.updateQueue, o.flags &= -2053, a.lanes &= ~b, to(a, o, b)) : (rr && c && wl(o), o.flags |= 1, xa(a, o, m, b), o.child);
+    return Qn(o, b), m = sn(a, o, c, m, S, b), c = jt(), a !== null && !Vr ? (o.updateQueue = a.updateQueue, o.flags &= -2053, a.lanes &= ~b, to(a, o, b)) : (rr && c && wl(o), o.flags |= 1, xa(a, o, m, b), o.child);
   }
   function Ac(a, o, c, m, b) {
     if (a === null) {
@@ -6172,7 +6172,7 @@ Error generating stack: ` + S.message + `
   }
   function xg(a, o, c, m, b) {
     var S = $r(c) ? ja : Hn.current;
-    return S = Ei(o, S), Qn(o, b), c = on(a, o, c, m, S, b), m = jt(), a !== null && !Vr ? (o.updateQueue = a.updateQueue, o.flags &= -2053, a.lanes &= ~b, to(a, o, b)) : (rr && m && wl(o), o.flags |= 1, xa(a, o, c, b), o.child);
+    return S = Ei(o, S), Qn(o, b), c = sn(a, o, c, m, S, b), m = jt(), a !== null && !Vr ? (o.updateQueue = a.updateQueue, o.flags &= -2053, a.lanes &= ~b, to(a, o, b)) : (rr && m && wl(o), o.flags |= 1, xa(a, o, c, b), o.child);
   }
   function Bh(a, o, c, m, b) {
     if ($r(c)) {
@@ -7953,7 +7953,7 @@ Error generating stack: ` + S.message + `
         var m = o.type;
         Pc(a, o), a = o.pendingProps;
         var b = Ei(o, Hn.current);
-        Qn(o, c), b = on(null, o, m, a, b, c);
+        Qn(o, c), b = sn(null, o, m, a, b, c);
         var S = jt();
         return o.flags |= 1, typeof b == "object" && b !== null && typeof b.render == "function" && b.$$typeof === void 0 ? (o.tag = 1, o.memoizedState = null, o.updateQueue = null, $r(m) ? (S = !0, za(o)) : S = !1, o.memoizedState = b.state !== null && b.state !== void 0 ? b.state : null, Zf(o), b.updater = Rh, o.stateNode = b, b._reactInternals = o, sp(o, m, a, c), o = $c(null, o, m, !0, S, c)) : (o.tag = 0, rr && S && wl(o), xa(null, o, b, c), o = o.child), o;
       case 16:
@@ -11231,7 +11231,7 @@ Check the render method of \`` + e + "`." : "";
     ), Ee = (
       /*                        */
       1
-    ), on = (
+    ), sn = (
       /*    */
       2
     ), jt = (
@@ -11335,7 +11335,7 @@ Check the render method of \`` + e + "`." : "";
       {
         if (e & Ee)
           return "Sync";
-        if (e & on)
+        if (e & sn)
           return "InputContinuousHydration";
         if (e & jt)
           return "InputContinuous";
@@ -11364,8 +11364,8 @@ Check the render method of \`` + e + "`." : "";
       switch (Cu(e)) {
         case Ee:
           return Ee;
-        case on:
-          return on;
+        case sn:
+          return sn;
         case jt:
           return jt;
         case Tt:
@@ -11461,7 +11461,7 @@ Check the render method of \`` + e + "`." : "";
     function bg(e, t) {
       switch (e) {
         case Ee:
-        case on:
+        case sn:
         case jt:
           return t + 250;
         case Tt:
@@ -11529,7 +11529,7 @@ Check the render method of \`` + e + "`." : "";
       return (e & lr) === e;
     }
     function Lh(e, t) {
-      var s = on | jt | Tt | It;
+      var s = sn | jt | Tt | It;
       return (t & s) !== ae;
     }
     function Ay(e, t) {
@@ -11615,7 +11615,7 @@ Check the render method of \`` + e + "`." : "";
       var s = Cu(t), u;
       switch (s) {
         case jt:
-          u = on;
+          u = sn;
           break;
         case It:
           u = Tt;
@@ -22466,7 +22466,7 @@ let Jm = class {
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ln = rh(class extends Jm {
+const on = rh(class extends Jm {
   constructor(r) {
     var n;
     if (super(r), r.type !== ql.ATTRIBUTE || r.name !== "class" || ((n = r.strings) == null ? void 0 : n.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
@@ -22680,7 +22680,7 @@ let EL = class extends Jm {
 const hn = () => new TL();
 let TL = class {
 };
-const ND = /* @__PURE__ */ new WeakMap(), sn = rh(class extends EL {
+const ND = /* @__PURE__ */ new WeakMap(), ln = rh(class extends EL {
   render(r) {
     return nt;
   }
@@ -22841,32 +22841,41 @@ let Wl = class extends aa {
       "pkt-alert--compact": this.compact,
       [`pkt-alert--${this.skin}`]: this.skin,
       "pkt-hide": this._isClosed
+    }, i = {
+      "pkt-alert__grid": !0,
+      "pkt-alert__noTitle": !this.title,
+      "pkt-alert__noDate": !this.date
     };
     return Ae`
-      <div class=${ln(n)}>
-        <pkt-icon
-          class="pkt-alert__icon"
-          name=${this.skin === "info" ? "alert-information" : `alert-${this.skin}`}
-        ></pkt-icon>
+      <div class=${on(n)}>
+        <div class=${on(i)}>
+          <pkt-icon
+            class="pkt-alert__icon"
+            aria-hidden="true"
+            name=${this.skin === "info" ? "alert-information" : `alert-${this.skin}`}
+          ></pkt-icon>
 
-        ${this.closeAlert ? Ae`
-              <div class="pkt-alert__close">
-                <button
-                  type="button"
-                  class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
-                  tabindex="0"
-                  aria-label="close"
-                  @click=${this.close}
-                >
-                  <pkt-icon name="close" class="pkt-btn__icon" aria-hidden="true"></pkt-icon>
-                </button>
-              </div>
-            ` : nt}
-        ${this.title ? Ae`<div class="pkt-alert__title">${this.title}</div>` : nt}
+          ${this.closeAlert ? Ae`
+                <div class="pkt-alert__close">
+                  <pkt-button
+                    tabindex="0"
+                    aria-label="close"
+                    size=${this.compact ? "small" : "medium"}
+                    type="button"
+                    skin="tertiary"
+                    iconName="close"
+                    variant="icon-only"
+                    @click=${this.close}
+                  >
+                  </pkt-button>
+                </div>
+              ` : nt}
+          ${this.title ? Ae`<div class="pkt-alert__title">${this.title}</div>` : nt}
 
-        <div class="pkt-alert__text" ${sn(this.defaultSlot)}></div>
+          <div class="pkt-alert__text" ${ln(this.defaultSlot)}></div>
 
-        ${this.date ? Ae`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>` : nt}
+          ${this.date ? Ae`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>` : nt}
+        </div>
       </div>
     `;
   }
@@ -22919,7 +22928,7 @@ let qm = class extends Um {
     return Ae`
       <div
         part="container"
-        class=${ln(n)}
+        class=${on(n)}
         data-testid="pkt-accordion"
         aria-labelledby=${this.ariaLabelledBy}
       >
@@ -22958,10 +22967,10 @@ let hf = class extends aa {
     };
     return Ae`
       <details
-        class=${ln(n)}
+        class=${on(n)}
         id=${this.id}
         ?open=${this.isOpen}
-        ${sn(this.accordionItemRef)}
+        ${ln(this.accordionItemRef)}
       >
         <summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
           ${this.title}
@@ -22976,7 +22985,7 @@ let hf = class extends aa {
           id="pkt-accordion-item__content-${this.id}"
           role="region"
         >
-          <div class="pkt-accordion-item__content-inner" ${sn(this.defaultSlot)}></div>
+          <div class="pkt-accordion-item__content-inner" ${ln(this.defaultSlot)}></div>
         </div>
       </details>
     `;
@@ -23074,7 +23083,7 @@ let uo = class extends aa {
               path="https://punkt-cdn.oslo.kommune.no/12.34/animations/"
             ></pkt-icon>` : nt}
         ${this.variant !== "label-only" ? Ae`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>` : nt}
-        <span class="pkt-btn__text" ${sn(this.defaultSlot)}></span>
+        <span class="pkt-btn__text" ${ln(this.defaultSlot)}></span>
         ${this.variant === "icons-right-and-left" ? Ae`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>` : nt}
       </div>
     `;
@@ -24777,7 +24786,7 @@ let or = class extends aa {
       "pkt-cal-in-range-last": this.range && this.selected.length === 2 && v === this.selected[1],
       "pkt-cal-range-hover": this.rangeHovered !== null && v === Qa(this.rangeHovered)
     };
-    return Ae`<td class=${ln(R)}>
+    return Ae`<td class=${on(R)}>
       <div
         ?aria-selected=${x}
         role="gridcell"
@@ -25103,20 +25112,20 @@ let Ks = class extends aa {
     };
     return this.closeTag ? Ae`
         <button
-          class=${ln(i)}
+          class=${on(i)}
           type=${this.type}
           @click=${this.close}
           aria-label=${En(this.ariaLabel || void 0)}
           aria-description=${En(this._ariaDescription || void 0)}
         >
           ${this.iconName && Ae`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
-          <span ${sn(this.defaultSlot)}></span>
+          <span ${ln(this.defaultSlot)}></span>
           <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
         </button>
       ` : Ae`
-        <span class=${ln(n)}>
+        <span class=${on(n)}>
           ${this.iconName && Ae`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
-          <span ${sn(this.defaultSlot)}></span>
+          <span ${ln(this.defaultSlot)}></span>
         </span>
       `;
   }
@@ -25183,7 +25192,7 @@ let td = class extends aa {
       [`pkt-card--${this.direction}`]: this.direction
     };
     return Ae`
-      <div class=${ln(n)}>
+      <div class=${on(n)}>
         ${this.image.src && Ae`
           <div class="pkt-card__image">
             <img src=${this.image.src} alt=${this.image.alt || ""} />
@@ -25208,7 +25217,7 @@ let td = class extends aa {
               ` : nt}
           ${this.heading && Ae`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
           ${this.subheading && Ae`<p class="pkt-txt-20-light">${this.subheading}</p>`}
-          ${this.defaultSlot && Ae`<div class="pkt-card__content" ${sn(this.defaultSlot)}></div>`}
+          ${this.defaultSlot && Ae`<div class="pkt-card__content" ${ln(this.defaultSlot)}></div>`}
         </div>
       </div>
     `;
@@ -25604,7 +25613,7 @@ let mf = class extends aa {
             <span class="pkt-btn__text">${Yk(this.helptextDropdownButton)}</span>
           </button>
           <div
-            class="${ln({
+            class="${on({
       "pkt-inputwrapper__helptext": !0,
       "pkt-inputwrapper__helptext-expandable-open": this.isHelpTextOpen,
       "pkt-inputwrapper__helptext-expandable-closed": !this.isHelpTextOpen
@@ -25615,7 +25624,7 @@ let mf = class extends aa {
         </div>` : nt;
     return Ae`${Ae`<div class="pkt-inputwrapper__helptext-container">
         <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
-          <div class="pkt-contents" ${sn(this.defaultSlot)} name="helptext"></div>
+          <div class="pkt-contents" ${ln(this.defaultSlot)} name="helptext"></div>
           ${this.helptext && Yk(this.helptext)}
         </div>
         ${n()}
@@ -25667,7 +25676,7 @@ let kr = class extends aa {
       "pkt-tag--thin-text": !0,
       "pkt-tag--blue-light": this.optionalTag,
       "pkt-tag--beige": !this.optionalTag && this.requiredTag
-    }, l = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : nt, d = () => this.optionalTag || this.requiredTag ? Ae`<span class=${ln(i)}
+    }, l = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : nt, d = () => this.optionalTag || this.requiredTag ? Ae`<span class=${on(i)}
           >${this.optionalTag ? this.optionalText : this.requiredTag ? this.requiredText : nt}</span
         >` : nt, g = () => this.useWrapper ? this.hasFieldset ? Ae`<legend
             class="pkt-inputwrapper__legend"
@@ -25698,7 +25707,7 @@ let kr = class extends aa {
           @toggleHelpText=${(N) => {
       this.toggleDropdown(N);
     }}
-          ${sn(this.helptextSlot)}
+          ${ln(this.helptextSlot)}
           name="helptext"
         ></pkt-helptext>
       `, D = () => this.counter ? Ae`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
@@ -25716,12 +25725,12 @@ let kr = class extends aa {
         </div>` : nt, E = () => Ae`
         ${g()} ${v()}
         ${this.counterPosition === "top" ? D() : nt}
-        <div class="pkt-contents" ${sn(this.defaultSlot)}></div>
+        <div class="pkt-contents" ${ln(this.defaultSlot)}></div>
         ${this.counterPosition === "bottom" ? D() : nt} ${x()}
       `, A = () => this.hasFieldset ? Ae`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${l}">
             ${E()}
           </fieldset>` : Ae`<div class="pkt-inputwrapper__fieldset">${E()}</div>`;
-    return Ae`<div class=${ln(n)}>${A()}</div> `;
+    return Ae`<div class=${on(n)}>${A()}</div> `;
   }
   toggleDropdown(n) {
     this.dispatchEvent(
@@ -25836,7 +25845,7 @@ let hi = class extends aa {
   render() {
     return Ae`
       <div
-        class=${ln({
+        class=${on({
       "pkt-listbox": !0,
       "pkt-listbox__open": this.isOpen,
       "pkt-txt-16-light": !0
@@ -25880,7 +25889,7 @@ let hi = class extends aa {
       }}
             aria-selected=${n.selected ? "true" : "false"}
             @keydown=${this.handleOptionKeydown}
-            class=${ln({
+            class=${on({
         "pkt-listbox__option": !0,
         "pkt-listbox__option--selected": !!(!this.isMultiSelect && n.selected),
         "pkt-listbox__option--checkBox": this.isMultiSelect
@@ -26233,10 +26242,10 @@ let Gr = class extends cn {
         class="pkt-combobox__wrapper"
         @labelClick=${this.handleInputClick}
       >
-        <div class="pkt-contents" ${sn(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" ${ln(this.helptextSlot)} name="helptext" slot="helptext"></div>
         <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
           <div
-            class=${ln({
+            class=${on({
       "pkt-combobox__input": !0,
       "pkt-combobox__input--fullwidth": this.fullwidth,
       "pkt-combobox__input--open": this._isOptionsOpen,
@@ -26253,7 +26262,7 @@ let Gr = class extends cn {
               @click=${this.handleArrowClick}
               @keydown=${this.handleArrowClick}
               id="${this.id}-arrow"
-              ${sn(this.arrowRef)}
+              ${ln(this.arrowRef)}
               aria-expanded=${this._isOptionsOpen}
               aria-controls="${this.id}-listbox"
               aria-haspopup="listbox"
@@ -26264,14 +26273,14 @@ let Gr = class extends cn {
               tabindex="${this.disabled ? "-1" : "0"}"
             >
               <pkt-icon
-                class=${ln({
+                class=${on({
       "pkt-combobox__arrow-icon": !0,
       "pkt-combobox__arrow-icon--open": this._isOptionsOpen
     })}
                 name="chevron-thin-down"
               ></pkt-icon>
             </div>
-            <div ${sn(this.focusRef)} tabindex="-1" @keydown=${this.handleArrowClick}></div>
+            <div ${ln(this.focusRef)} tabindex="-1" @keydown=${this.handleArrowClick}></div>
           </div>
 
           <pkt-listbox
@@ -26292,7 +26301,7 @@ let Gr = class extends cn {
             @close-options=${() => this._isOptionsOpen = !1}
             .searchValue=${this._search || null}
             .maxLength=${this.maxlength || 0}
-            ${sn(this.listboxRef)}
+            ${ln(this.listboxRef)}
           ></pkt-listbox>
         </div>
 
@@ -26322,7 +26331,7 @@ let Gr = class extends cn {
               aria-activedescendant=${En(
       this._value[0] && this.findValueInOptions(this._value[0]) ? `${this.id}-listbox-${this.findIndexInOptions(this._value[0])}` : void 0
     )}
-              ${sn(this.inputRef)}
+              ${ln(this.inputRef)}
             />
           </div>
         ` : Ae`
@@ -26331,7 +26340,7 @@ let Gr = class extends cn {
             id="${this.id}-input"
             name=${(this.name || this.id) + "-input"}
             .value=${this._value.join(",")}
-            ${sn(this.inputRef)}
+            ${ln(this.inputRef)}
           />
         `;
   }
@@ -26658,14 +26667,14 @@ let Js = class extends cn {
     n.has("defaultChecked") && !this.checked && (this.checked = this.defaultChecked), super.firstUpdated(n);
   }
   render() {
-    const n = ln({
+    const n = on({
       "pkt-input-check__input": !0,
       "pkt-input-check__input--tile": this.hasTile,
       "pkt-input-check__input--tile-disabled": this.disabled && this.hasTile
-    }), i = ln({
+    }), i = on({
       "pkt-input-check__input-checkbox": !0,
       "pkt-input-check__input-checkbox--error": this.hasError
-    }), l = ln({
+    }), l = on({
       "pkt-input-check__input-label": !0,
       "pkt-input-check__input-label--left": this.labelPosition === "left",
       "pkt-input-check__input-label--right": this.labelPosition === "right",
@@ -26686,7 +26695,7 @@ let Js = class extends cn {
             type="checkbox"
             ?disabled=${this.disabled}
             name=${this.name + "-internal"}
-            ${sn(this.inputRef)}
+            ${ln(this.inputRef)}
             @change=${this.toggleChecked}
             @blur=${this.onBlur}
             @focus=${this.onFocus}
@@ -26809,7 +26818,7 @@ let Yr = class extends cn {
   renderInput() {
     return Ae`
       <input
-        class="${ln(this.inputClasses)}"
+        class="${on(this.inputClasses)}"
         .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0] ?? ""}
@@ -26836,7 +26845,7 @@ let Yr = class extends cn {
         @change=${(n) => {
       n.stopImmediatePropagation();
     }}
-        ${sn(this.inputRef)}
+        ${ln(this.inputRef)}
       />
     `;
   }
@@ -26848,7 +26857,7 @@ let Yr = class extends cn {
     return Ae`
       ${this.showRangeLabels ? Ae` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : nt}
       <input
-        class=${ln(this.inputClasses)}
+        class=${on(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0] ?? ""}
@@ -26879,14 +26888,14 @@ let Yr = class extends cn {
         @change=${(i) => {
       i.stopImmediatePropagation();
     }}
-        ${sn(this.inputRef)}
+        ${ln(this.inputRef)}
       />
-      <div class="${ln(n)}" id="${this.id}-to-label">
+      <div class="${on(n)}" id="${this.id}-to-label">
         ${this.strings.generic.to}
       </div>
       ${this.showRangeLabels ? nt : Ae` <div class="pkt-input-separator">–</div> `}
       <input
-        class=${ln(this.inputClasses)}
+        class=${on(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-to"
         aria-labelledby="${this.id}-to-label"
@@ -26928,14 +26937,14 @@ let Yr = class extends cn {
         @change=${(i) => {
       i.stopImmediatePropagation();
     }}
-        ${sn(this.inputRefTo)}
+        ${ln(this.inputRefTo)}
       />
     `;
   }
   renderMultipleInput() {
     return Ae`
       <input
-        class=${ln(this.inputClasses)}
+        class=${on(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
         min=${En(this.min)}
@@ -26960,7 +26969,7 @@ let Yr = class extends cn {
         @change=${(n) => {
       n.stopImmediatePropagation();
     }}
-        ${sn(this.inputRef)}
+        ${ln(this.inputRef)}
       />
     `;
   }
@@ -26996,7 +27005,7 @@ let Yr = class extends cn {
       this.calendarOpen && this.handleFocusOut(n);
     }}
       id="${this.id}-popup"
-      ${sn(this.popupRef)}
+      ${ln(this.popupRef)}
     >
       <pkt-calendar
         id="${this.id}-calendar"
@@ -27017,7 +27026,7 @@ let Yr = class extends cn {
         @close=${() => {
       this.onBlur(), this.hideCalendar();
     }}
-        ${sn(this.calRef)}
+        ${ln(this.calRef)}
       ></pkt-calendar>
     </div>`;
   }
@@ -27058,7 +27067,7 @@ let Yr = class extends cn {
         .ariaDescribedBy=${this.ariaDescribedBy}
         class="pkt-datepicker"
       >
-        <div class="pkt-contents" ${sn(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" ${ln(this.helptextSlot)} name="helptext" slot="helptext"></div>
         ${this.multiple ? this.renderTags() : nt}
         <div
           class="pkt-datepicker__inputs ${this.range && this.showRangeLabels ? "pkt-input__range-inputs" : ""}"
@@ -27066,11 +27075,11 @@ let Yr = class extends cn {
           <div class="pkt-input__container">
             ${this.range ? this.renderRangeInput() : this.multiple ? this.renderMultipleInput() : this.renderInput()}
             <button
-              class="${ln(this.buttonClasses)}"
+              class="${on(this.buttonClasses)}"
               type="button"
               @click=${this.toggleCalendar}
               ?disabled=${this.disabled}
-              ${sn(this.btnRef)}
+              ${ln(this.btnRef)}
             >
               <pkt-icon name="calendar"></pkt-icon>
               <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
@@ -27196,12 +27205,12 @@ let gf = class extends aa {
       "pkt-link--external": this.external
     };
     return Ae`<a
-      class=${ln(n)}
+      class=${on(n)}
       href=${this.href}
       @click=${this.handleClick}
       .target=${this.target}
       .rel=${this.external ? "noopener noreferrer" : nt}
-      >${this.iconName ? Ae`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>` : ""} <span ${sn(this.defaultSlot)}>Link</span></a
+      >${this.iconName ? Ae`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>` : ""} <span ${ln(this.defaultSlot)}>Link</span></a
     >`;
   }
   handleClick() {
@@ -27252,7 +27261,7 @@ let nd = class extends aa {
         ${this.iconName && Ae`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
         ${this.title && Ae`<div class=${i}>${this.title}</div>`}
 
-        <div class="pkt-linkcard__text" ${sn(this.defaultSlot)}></div>
+        <div class="pkt-linkcard__text" ${ln(this.defaultSlot)}></div>
       </a>
     `;
   }
@@ -27294,11 +27303,11 @@ let Gu = class extends aa {
     r.has("delay") && this.setupLoader();
   }
   render() {
-    const r = ln({
+    const r = on({
       "pkt-loader": !0,
       [`pkt-loader--${this.inline ? "inline" : "box"}`]: !0,
       [`pkt-loader--${this.size}`]: !0
-    }), n = ln({
+    }), n = on({
       "pkt-contents": !0,
       "pkt-hide": this.isLoading
     });
@@ -27311,7 +27320,7 @@ let Gu = class extends aa {
             ></pkt-icon>
             ${this.message && Ae`<p>${this.message}</p>`}
           </div>` : nt}
-      <div class=${n} ${sn(this.defaultSlot)}></div>
+      <div class=${n} ${ln(this.defaultSlot)}></div>
     </div>`;
   }
   getVariant(r) {
@@ -27391,7 +27400,7 @@ let vf = class extends aa {
       "pkt-messagebox--closable": this.closable,
       "pkt-hide": this._isClosed
     };
-    return Ae`<div class=${ln(r)}>
+    return Ae`<div class=${on(r)}>
       ${this.closable ? Ae`<div class="pkt-messagebox__close">
             <button
               @click=${this.close}
@@ -27401,7 +27410,7 @@ let vf = class extends aa {
             </button>
           </div>` : nt}
       ${this.title ? Ae`<div class="pkt-messagebox__title">${this.title}</div>` : nt}
-      <div class="pkt-messagebox__text" ${sn(this.defaultSlot)}></div>
+      <div class="pkt-messagebox__text" ${ln(this.defaultSlot)}></div>
     </div>`;
   }
 };
@@ -27504,21 +27513,21 @@ let Yu = class extends aa {
     };
     return Ae`
       <dialog
-        class=${ln(n)}
-        ${sn(this.dialogRef)}
+        class=${on(n)}
+        ${ln(this.dialogRef)}
         aria-labelledby="pkt-modal__headingText"
         aria-describedby="pkt-modal__content"
         @close=${(D) => this.close(D, !0)}
       >
         <div class="pkt-modal__header">
           <div class="pkt-modal__header-background"></div>
-          ${this.headingText ? Ae`<h1 id="pkt-modal__headingText" class=${ln(i)}>
+          ${this.headingText ? Ae`<h1 id="pkt-modal__headingText" class=${on(i)}>
                 ${this.headingText}
               </h1>` : nt}
-          ${this.hideCloseButton ? nt : Ae`<div class="${ln(g)}">
+          ${this.hideCloseButton ? nt : Ae`<div class="${on(g)}">
                 <pkt-button
                   @click=${(D) => this.close(D)}
-                  class=${ln(v)}
+                  class=${on(v)}
                   aria-label="close"
                   iconname="close"
                   variant="icon-only"
@@ -27529,8 +27538,8 @@ let Yu = class extends aa {
         <div class="pkt-modal__container">
           <div
             id="pkt-modal__content"
-            class=${ln(l)}
-            ${sn(this.defaultSlot)}
+            class=${on(l)}
+            ${ln(this.defaultSlot)}
           ></div>
         </div>
       </dialog>
@@ -27608,16 +27617,16 @@ let ra = class extends aa {
     super.updated(r), r.has("valueCurrent") && this.labelRef.value && (this.labelWidth = this.labelRef.value.getBoundingClientRect().width || 0), r.has("id") && this.id && (this.progressBarId = this.id), (r.has("statusType") || r.has("id") || r.has("ariaLabelledby")) && (this.progressbarId = this.id || Xp(), this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`), (r.has("ariaValueText") || r.has("valueCurrent") || r.has("valueMax")) && (this.computedAriaValueText = this.statusType === "fraction" && !this.ariaValueText ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}` : this.ariaValueText || ""), this.syncAttributes();
   }
   render() {
-    const r = this.statusType !== "none", n = this.valueMax - this.valueMin, i = this.valueCurrent / n * 100, l = this.statusType === "fraction" ? Math.round(i) : Math.round((this.valueCurrent - this.valueMin) / (this.valueMax - this.valueMin) * 100), d = `${this.valueCurrent} av ${n}`, g = ln({
+    const r = this.statusType !== "none", n = this.valueMax - this.valueMin, i = this.valueCurrent / n * 100, l = this.statusType === "fraction" ? Math.round(i) : Math.round((this.valueCurrent - this.valueMin) / (this.valueMax - this.valueMin) * 100), d = `${this.valueCurrent} av ${n}`, g = on({
       "pkt-progressbar__bar": !0,
       [`pkt-progressbar__bar--${this.skin}`]: !!this.skin
-    }), v = ln({
+    }), v = on({
       "pkt-progressbar__title": !0,
       "pkt-progressbar__title-center": this.titlePosition === "center"
-    }), D = ln({
+    }), D = on({
       "pkt-progressbar__status": !0,
       "pkt-progressbar__status--center": this.statusPlacement === "center"
-    }), x = ln({
+    }), x = on({
       "pkt-progressbar__status-placement--following": this.statusPlacement === "following",
       "pkt-progressbar__status-placement--center": this.statusPlacement === "center",
       "pkt-progressbar__status-placement--left": this.statusPlacement === "left"
@@ -27637,7 +27646,7 @@ let ra = class extends aa {
       </div>
 
       ${r ? Ae`<div class=${D}>
-            <span class=${x} ${sn(this.labelRef)}>
+            <span class=${x} ${ln(this.labelRef)}>
               ${this.statusType === "percentage" ? `${l}%` : d}
             </span>
           </div>` : nt}
@@ -27730,11 +27739,11 @@ let Qu = class extends cn {
     r.has("checked") && this.checked !== null && (this._checked = this.checked === "" || this.checked === "true" || this.checked === !0, (r.get("checked") === "" || r.get("checked") === "true" || r.get("checked") === !0) !== this._checked && this.toggleChecked()), super.updated(r);
   }
   render() {
-    const r = ln({
+    const r = on({
       "pkt-input-check__input": !0,
       "pkt-input-check__input--tile": this.hasTile,
       "pkt-input-check__input--tile-disabled": this.disabled && this.hasTile
-    }), n = ln({
+    }), n = on({
       "pkt-input-check__input-checkbox": !0,
       "pkt-input-check__input-checkbox--error": this.hasError
     });
@@ -27748,7 +27757,7 @@ let Qu = class extends cn {
             role="radio"
             ?disabled=${this.disabled}
             name=${this.name + "-internal"}
-            ${sn(this.inputRef)}
+            ${ln(this.inputRef)}
             @change=${this.toggleChecked}
             @input=${this.onInput}
             @blur=${this.onBlur}
@@ -27832,7 +27841,7 @@ let eh = class extends cn {
     super.updated(n), n.has("value") && (this.counterCurrent = ((i = this.value) == null ? void 0 : i.length) || 0, this.valueChanged(this.value, n.get("value"))), n.has("id") && !this.name && this.id && (this.name = this.id);
   }
   render() {
-    const n = ln({
+    const n = on({
       "pkt-input": !0,
       "pkt-input--fullwidth": this.fullwidth,
       "pkt-input--counter-error": this.counter && this.counterMaxLength && this.value.length && this.value.length > this.counterMaxLength
@@ -27859,9 +27868,9 @@ let eh = class extends cn {
       .requiredText=${this.requiredText}
       class="pkt-textarea"
     >
-      <div class="pkt-contents" ${sn(this.helptextSlot)} name="helptext" slot="helptext"></div>
+      <div class="pkt-contents" ${ln(this.helptextSlot)} name="helptext" slot="helptext"></div>
       <textarea
-        ${sn(this.inputRef)}
+        ${ln(this.inputRef)}
         class=${n}
         id=${this.id + "-input"}
         name=${(this.name || this.id) + "-input"}
@@ -27924,7 +27933,7 @@ let Zs = class extends cn {
     super.updated(n), n.has("value") && (this.counterCurrent = ((i = this.value) == null ? void 0 : i.length) || 0, this.valueChanged(this.value, n.get("value"))), n.has("id") && !this.name && this.id && (this.name = this.id);
   }
   render() {
-    const n = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, i = ln({
+    const n = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, i = on({
       "pkt-input": !0,
       "pkt-input--fullwidth": this.fullwidth,
       "pkt-input--counter-error": this.counter && this.counterMaxLength && this.value.length && this.value.length > this.counterMaxLength
@@ -27953,11 +27962,11 @@ let Zs = class extends cn {
         .requiredText=${this.requiredText}
         class="pkt-textinput"
       >
-        <div class="pkt-contents" ${sn(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" ${ln(this.helptextSlot)} name="helptext" slot="helptext"></div>
         <div class="pkt-input__container">
           ${this.prefix ? Ae`<div class="pkt-input-prefix">${this.prefix}</div>` : nt}
           <input
-            ${sn(this.inputRef)}
+            ${ln(this.inputRef)}
             class=${i}
             type=${this.type}
             name=${(this.name || this.id) + "-input"}
@@ -28112,7 +28121,7 @@ let Gm = class extends cn {
           @blur=${(n) => {
       this.onBlur(), n.stopImmediatePropagation();
     }}
-          ${sn(this.inputRef)}
+          ${ln(this.inputRef)}
         >
           ${this._options.length > 0 && this._options.map(
       (n) => Ae`<option
@@ -28124,7 +28133,7 @@ let Gm = class extends cn {
               </option>`
     )}
         </select>
-        <div class="pkt-contents" ${sn(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" ${ln(this.helptextSlot)} name="helptext" slot="helptext"></div>
       </pkt-input-wrapper>
     `;
   }
@@ -28168,7 +28177,7 @@ let Ym = class extends aa {
       "pkt-darkmode": this.darkmode
     };
     return Ae`
-      <div class="${ln(r)}">
+      <div class="${on(r)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 
         <h2 class="pkt-txt-22">Innhold fra attributter og funksjoner</h2>
@@ -28176,11 +28185,11 @@ let Ym = class extends aa {
         <div>${this.renderList(this.doStuff(this._list))}</div>
 
         <h2 class="pkt-txt-22">Slot</h2>
-        <div ${sn(this.defaultSlot)}>defaultSlotRef</div>
+        <div ${ln(this.defaultSlot)}>defaultSlotRef</div>
         <h2 class="pkt-txt-22">Named slot</h2>
         <select
           name="named-slot"
-          ${sn(this.namedSlot)}
+          ${ln(this.namedSlot)}
           @change=${(n) => alert(n.target.value)}
         >
           namedSlotRef
@@ -32228,9 +32237,9 @@ Expected it to be ${C}.`;
           if (Ee.length === 0) throw new Error("Must contain one or more image candidate strings.");
           return Ee;
         }
-        ae = we, k = Ve(au), C = [], k.slice(-1) === "," ? (k = k.replace(Yi, ""), jt()) : on();
+        ae = we, k = Ve(au), C = [], k.slice(-1) === "," ? (k = k.replace(Yi, ""), jt()) : sn();
       }
-      function on() {
+      function sn() {
         for (Ve(dl), $ = "", I = "in descriptor"; ; ) {
           if (ee = f.charAt(we), I === "in descriptor") if (Vo(ee)) $ && (C.push($), $ = "", I = "after descriptor");
           else if (ee === ",") {
@@ -32266,16 +32275,16 @@ Expected it to be ${C}.`;
     }
     var Et = { width: "w", height: "h", density: "x" }, Ke = Object.keys(Et);
     function At(f) {
-      let h = De(f), k = Ke.filter((Ee) => h.some((on) => Object.prototype.hasOwnProperty.call(on, Ee)));
+      let h = De(f), k = Ke.filter((Ee) => h.some((sn) => Object.prototype.hasOwnProperty.call(sn, Ee)));
       if (k.length > 1) throw new Error("Mixed descriptor in srcset is not supported");
       let [C] = k, $ = Et[C], I = h.map((Ee) => Ee.source.value), ee = Math.max(...I.map((Ee) => Ee.length)), we = h.map((Ee) => Ee[C] ? String(Ee[C].value) : ""), ae = we.map((Ee) => {
-        let on = Ee.indexOf(".");
-        return on === -1 ? Ee.length : on;
+        let sn = Ee.indexOf(".");
+        return sn === -1 ? Ee.length : sn;
       }), Ve = Math.max(...ae);
-      return zi(Ln([",", Yt], I.map((Ee, on) => {
-        let jt = [Ee], Tt = we[on];
+      return zi(Ln([",", Yt], I.map((Ee, sn) => {
+        let jt = [Ee], Tt = we[sn];
         if (Tt) {
-          let It = ee - Ee.length + 1, Vn = Ve - ae[on], lr = " ".repeat(It + Vn);
+          let It = ee - Ee.length + 1, Vn = Ve - ae[sn], lr = " ".repeat(It + Vn);
           jt.push(wn(lr, " "), Tt + $);
         }
         return jt;
@@ -32437,7 +32446,7 @@ Expected it to be ${C}.`;
       var C;
       let { node: $ } = f;
       if (!Qi($.attrs)) return $.isSelfClosing ? " " : "";
-      let I = ((C = $.prev) == null ? void 0 : C.type) === "comment" && sc($.prev.value), ee = typeof I == "boolean" ? () => I : Array.isArray(I) ? (on) => I.includes(on.rawName) : () => !1, we = f.map(({ node: on }) => ee(on) ? me(h.originalText.slice(iu(on), ou(on))) : k(), "attrs"), ae = $.type === "element" && $.fullName === "script" && $.attrs.length === 1 && $.attrs[0].fullName === "src" && $.children.length === 0, Ve = h.singleAttributePerLine && $.attrs.length > 1 && !ei($, h) ? dn : Yt, Ee = [ot([ae ? " " : Yt, Ln(Ve, we)])];
+      let I = ((C = $.prev) == null ? void 0 : C.type) === "comment" && sc($.prev.value), ee = typeof I == "boolean" ? () => I : Array.isArray(I) ? (sn) => I.includes(sn.rawName) : () => !1, we = f.map(({ node: sn }) => ee(sn) ? me(h.originalText.slice(iu(sn), ou(sn))) : k(), "attrs"), ae = $.type === "element" && $.fullName === "script" && $.attrs.length === 1 && $.attrs[0].fullName === "src" && $.children.length === 0, Ve = h.singleAttributePerLine && $.attrs.length > 1 && !ei($, h) ? dn : Yt, Ee = [ot([ae ? " " : Yt, Ln(Ve, we)])];
       return $.firstChild && lc($.firstChild) || $.isSelfClosing && pl($.parent) || ae ? Ee.push($.isSelfClosing ? " " : "") : Ee.push(h.bracketSameLine ? $.isSelfClosing ? " " : "" : $.isSelfClosing ? Yt : gn), Ee;
     }
     function pd(f) {
@@ -32592,8 +32601,8 @@ Expected it to be ${C}.`;
           }
           return Sa(I, h, k);
         }
-        let ae = [], Ve = [], Ee = [], on = [], jt = we.prev ? Cs(we.prev, we) : "", Tt = we.next ? Cs(we, we.next) : "";
-        return jt && (Vi(we.prev) ? ae.push(dn, dn) : jt === dn ? ae.push(dn) : gr(we.prev) ? Ve.push(jt) : Ve.push(wn("", gn, { groupId: $[ee - 1] }))), Tt && (Vi(we) ? gr(we.next) && on.push(dn, dn) : Tt === dn ? gr(we.next) && on.push(dn) : Ee.push(Tt)), [...ae, Qe([...Ve, Qe([Sa(I, h, k), ...Ee], { id: $[ee] })]), ...on];
+        let ae = [], Ve = [], Ee = [], sn = [], jt = we.prev ? Cs(we.prev, we) : "", Tt = we.next ? Cs(we, we.next) : "";
+        return jt && (Vi(we.prev) ? ae.push(dn, dn) : jt === dn ? ae.push(dn) : gr(we.prev) ? Ve.push(jt) : Ve.push(wn("", gn, { groupId: $[ee - 1] }))), Tt && (Vi(we) ? gr(we.next) && sn.push(dn, dn) : Tt === dn ? gr(we.next) && sn.push(dn) : Ee.push(Tt)), [...ae, Qe([...Ve, Qe([Sa(I, h, k), ...Ee], { id: $[ee] })]), ...sn];
       }, "children");
     }
     function vd(f, h, k) {
@@ -33825,7 +33834,7 @@ If '${f}' is a directive input, make sure the directive is imported by the curre
         let I = (Tt) => (It, ...Vn) => Tt(It.toLowerCase(), ...Vn), ee = C ? this.getTagDefinition : I(this.getTagDefinition), we = (Tt) => ee(Tt).getContentType(), ae = C ? $ : I($), Ve = ri(f, h, $ ? (Tt, It, Vn, lr) => {
           let yr = ae(Tt, It, Vn, lr);
           return yr !== void 0 ? yr : we(Tt);
-        } : we, k), Ee = k && k.canSelfClose || !1, on = k && k.allowHtmComponentClosingTags || !1, jt = new xr(Ve.tokens, ee, Ee, on, C);
+        } : we, k), Ee = k && k.canSelfClose || !1, sn = k && k.allowHtmComponentClosingTags || !1, jt = new xr(Ve.tokens, ee, Ee, sn, C);
         return jt.build(), new Sh(jt.rootNodes, Ve.errors.concat(jt.errors));
       }
     }, xr = class pA {
@@ -33928,8 +33937,8 @@ If '${f}' is a directive input, make sure the directive is imported by the curre
           let Tt = this.getTagDefinition(I);
           this.canSelfClose || Tt.canSelfClose || ni(I) !== null || Tt.isVoid || this.errors.push(Ur.create(I, h.sourceSpan, `Only void, custom and foreign elements can be self closed "${h.parts[1]}"`));
         } else this._peek.type === 1 && (this._advance(), ee = !1);
-        let we = this._peek.sourceSpan.fullStart, ae = new en(h.sourceSpan.start, we, h.sourceSpan.fullStart), Ve = new en(h.sourceSpan.start, we, h.sourceSpan.fullStart), Ee = new en(h.sourceSpan.start.moveBy(1), h.sourceSpan.end), on = new Jo(I, $, [], ae, Ve, void 0, Ee), jt = this._getContainer();
-        this._pushContainer(on, jt instanceof Jo && this.getTagDefinition(jt.name).isClosedByChild(on.name)), ee ? this._popContainer(I, Jo, ae) : h.type === 4 && (this._popContainer(I, Jo, null), this.errors.push(Ur.create(I, ae, `Opening tag "${I}" not terminated.`)));
+        let we = this._peek.sourceSpan.fullStart, ae = new en(h.sourceSpan.start, we, h.sourceSpan.fullStart), Ve = new en(h.sourceSpan.start, we, h.sourceSpan.fullStart), Ee = new en(h.sourceSpan.start.moveBy(1), h.sourceSpan.end), sn = new Jo(I, $, [], ae, Ve, void 0, Ee), jt = this._getContainer();
+        this._pushContainer(sn, jt instanceof Jo && this.getTagDefinition(jt.name).isClosedByChild(sn.name)), ee ? this._popContainer(I, Jo, ae) : h.type === 4 && (this._popContainer(I, Jo, null), this.errors.push(Ur.create(I, ae, `Opening tag "${I}" not terminated.`)));
       }
       _pushContainer(h, k) {
         k && this._containerStack.pop(), this._addToParent(h), this._containerStack.push(h);
@@ -34190,20 +34199,20 @@ ${h}`, k), I = C;
       (f.type === "plural" || f.type === "select") && (f.clause = f.type, f.type = "angularIcuExpression"), f.type === "expansionCase" && (f.type = "angularIcuCase");
     }
     function Su(f, h, k) {
-      let { name: C, canSelfClose: $ = !0, normalizeTagName: I = !1, normalizeAttributeName: ee = !1, allowHtmComponentClosingTags: we = !1, isTagNameCaseSensitive: ae = !1, shouldParseAsRawText: Ve } = h, { rootNodes: Ee, errors: on } = Fd(f, { canSelfClose: $, allowHtmComponentClosingTags: we, isTagNameCaseSensitive: ae, getTagContentType: Ve ? (...dt) => Ve(...dt) ? Ci.RAW_TEXT : void 0 : void 0, tokenizeAngularBlocks: C === "angular" ? !0 : void 0, tokenizeAngularLetDeclaration: C === "angular" ? !0 : void 0 });
+      let { name: C, canSelfClose: $ = !0, normalizeTagName: I = !1, normalizeAttributeName: ee = !1, allowHtmComponentClosingTags: we = !1, isTagNameCaseSensitive: ae = !1, shouldParseAsRawText: Ve } = h, { rootNodes: Ee, errors: sn } = Fd(f, { canSelfClose: $, allowHtmComponentClosingTags: we, isTagNameCaseSensitive: ae, getTagContentType: Ve ? (...dt) => Ve(...dt) ? Ci.RAW_TEXT : void 0 : void 0, tokenizeAngularBlocks: C === "angular" ? !0 : void 0, tokenizeAngularLetDeclaration: C === "angular" ? !0 : void 0 });
       if (C === "vue") {
         if (Ee.some((pr) => pr.type === "docType" && pr.value === "html" || pr.type === "element" && pr.name.toLowerCase() === "html")) return Su(f, Sc, k);
         let dt, nn = () => dt ?? (dt = Fd(f, { canSelfClose: $, allowHtmComponentClosingTags: we, isTagNameCaseSensitive: ae })), br = (pr) => nn().rootNodes.find(({ startSourceSpan: Hr }) => Hr && Hr.start.offset === pr.startSourceSpan.start.offset) ?? pr;
         for (let [pr, Hr] of Ee.entries()) {
           let { endSourceSpan: ns, startSourceSpan: Nd } = Hr;
-          if (ns === null) on = nn().errors, Ee[pr] = br(Hr);
+          if (ns === null) sn = nn().errors, Ee[pr] = br(Hr);
           else if (xl(Hr, k)) {
             let xc = nn().errors.find((Ls) => Ls.span.start.offset > Nd.start.offset && Ls.span.start.offset < ns.end.offset);
             xc && $d(xc), Ee[pr] = br(Hr);
           }
         }
       }
-      on.length > 0 && $d(on[0]);
+      sn.length > 0 && $d(sn[0]);
       let jt = (dt) => {
         let nn = dt.name.startsWith(":") ? dt.name.slice(1).split(":")[0] : null, br = dt.nameSpan.toString(), pr = nn !== null && br.startsWith(`${nn}:`), Hr = pr ? br.slice(nn.length + 1) : br;
         dt.name = Hr, dt.namespace = nn, dt.hasExplicitNamespace = pr;
@@ -34260,7 +34269,7 @@ ${h}`, k), I = C;
         let jt = new kd(ee, 0, 0, 0), Tt = jt.moveBy($.raw.length);
         $.sourceSpan = new en(jt, Tt), Ve.children.unshift($);
       }
-      let Ee = new ai(Ve), on = (jt, Tt) => {
+      let Ee = new ai(Ve), sn = (jt, Tt) => {
         let { offset: It } = Tt, Vn = V(!1, f.slice(0, It), /[^\n\r]/gu, " "), lr = Os(Vn + jt, h, k, !1);
         lr.sourceSpan = new en(Tt, sr(!1, lr.children, -1).sourceSpan.end);
         let yr = lr.children[0];
@@ -34268,7 +34277,7 @@ ${h}`, k), I = C;
       };
       return Ee.walk((jt) => {
         if (jt.type === "comment") {
-          let Tt = ts(jt, on);
+          let Tt = ts(jt, sn);
           Tt && jt.parent.replaceChild(jt, Tt);
         }
         kc(jt), _o(jt), wc(jt);