@oslokommune/punkt-elements 12.29.1 → 12.29.3

package/dist/alert-CP5oN7df.cjs

@@ -0,0 +1,27 @@
+"use strict";const d=require("./class-map-Dzci3Pfe.cjs"),e=require("./element-r-PeQ419.cjs"),k=require("./state-B77EXPZ9.cjs"),u=require("./pkt-slot-controller-Oc32unDk.cjs"),c=require("./ref-BUWgvhgU.cjs"),h=require("./classutils-BwNK82ZQ.cjs");require("./icon-DcJIqTIY.cjs");const v="pkt-alert",f=!0,m={onClose:{description:"React: Klikk-event for 'Lukk'-knappen"},close:{description:"Vue: Klikk-event for 'Lukk'-knappen"}},b={title:{name:"Tittel",description:"Tittelen som vises øverst i på meldingen",type:"string"},skin:{name:"Utseende",description:"Hvordan type melding er dette?",type:["info","success","warning","error"],default:"info"},date:{name:"Sist oppdatert",description:"Dato som vises nederst i på meldingen",type:"string"},ariaLive:{name:"aria-live",description:"Hvordan skal skjermleseren lese opp meldingen?",type:["off","polite","assertive"],default:"polite"},compact:{name:"Kompakt",description:"Gjør meldingen mindre",type:"boolean",default:!1},closeAlert:{name:"Vis 'Lukk'-knapp",description:"Viser 'Lukk'-knappen",type:"boolean",default:!1}},y={default:{description:"Innholdet i meldingen"}},a={name:v,"css-class":"pkt-alert","dark-mode":!0,isElement:f,events:m,props:b,slots:y};var _=Object.defineProperty,C=Object.getOwnPropertyDescriptor,s=(n,t,r,i)=>{for(var l=i>1?void 0:i?C(t,r):t,o=n.length-1,p;o>=0;o--)(p=n[o])&&(l=(i?p(t,r,l):p(l))||l);return i&&l&&_(t,r,l),l};exports.PktAlert=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.compact=a.props.compact.default,this.title="",this.skin=a.props.skin.default,this.ariaLive=a.props.ariaLive.default,this["aria-live"]=null,this.closeAlert=a.props.closeAlert.default,this.date=null,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0,composed:!0}))},this.slotController=new u.PktSlotController(this,this.defaultSlot),this._isClosed=!1}connectedCallback(){super.connectedCallback(),this["aria-live"]=this.getAttribute("aria-live")||this.ariaLive}attributeChangedCallback(t,r,i){t==="ariaLive"&&(this["aria-live"]=i),super.attributeChangedCallback(t,r,i)}updated(t){super.updated(t),t.has("ariaLive")&&(this["aria-live"]=this.ariaLive),t.has("_isClosed")&&h.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const t={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed};return e.x`
+      <div class=${d.e(t)}>
+        <pkt-icon
+          class="pkt-alert__icon"
+          name=${this.skin==="info"?"alert-information":`alert-${this.skin}`}
+        ></pkt-icon>
+
+        ${this.closeAlert?e.x`
+              <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>
+            `:e.E}
+        ${this.title?e.x`<div class="pkt-alert__title">${this.title}</div>`:e.E}
+
+        <div class="pkt-alert__text" ${c.n(this.defaultSlot)}></div>
+
+        ${this.date?e.x`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:e.E}
+      </div>
+    `}};s([e.n({type:Boolean,reflect:!1})],exports.PktAlert.prototype,"compact",2);s([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"title",2);s([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"skin",2);s([e.n({type:String})],exports.PktAlert.prototype,"ariaLive",2);s([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"aria-live",2);s([e.n({type:Boolean,reflect:!0})],exports.PktAlert.prototype,"closeAlert",2);s([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"date",2);s([k.r()],exports.PktAlert.prototype,"_isClosed",2);exports.PktAlert=s([e.t("pkt-alert")],exports.PktAlert);

package/dist/{alert-C_FCsFfo.js → alert-CugVni4g.js}

@@ -3,15 +3,16 @@ import { P as m, x as n, E as u, n as r, a as h } from "./element-D_ZgQsSr.js";
 import { r as f } from "./state-DuS4ffEQ.js";
 import { P as v } from "./pkt-slot-controller-Clbye6cM.js";
 import { e as b, n as y } from "./ref-BSGI8ogR.js";
+import { u as _ } from "./classutils-RQs1k6D9.js";
 import "./icon-BBFK-d-X.js";
-const _ = "pkt-alert", g = !0, C = {
+const C = "pkt-alert", g = !0, $ = {
   onClose: {
     description: "React: Klikk-event for 'Lukk'-knappen"
   },
   close: {
     description: "Vue: Klikk-event for 'Lukk'-knappen"
   }
-}, $ = {
+}, L = {
   title: {
     name: "Tittel",
     description: "Tittelen som vises øverst i på meldingen",
@@ -55,23 +56,23 @@ const _ = "pkt-alert", g = !0, C = {
     type: "boolean",
     default: !1
   }
-}, L = {
+}, S = {
   default: {
     description: "Innholdet i meldingen"
   }
 }, p = {
-  name: _,
+  name: C,
   "css-class": "pkt-alert",
   "dark-mode": !0,
   isElement: g,
-  events: C,
-  props: $,
-  slots: L
+  events: $,
+  props: L,
+  slots: S
 };
-var S = Object.defineProperty, P = Object.getOwnPropertyDescriptor, i = (t, a, l, o) => {
-  for (var s = o > 1 ? void 0 : o ? P(a, l) : a, c = t.length - 1, d; c >= 0; c--)
+var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (t, a, l, o) => {
+  for (var s = o > 1 ? void 0 : o ? E(a, l) : a, c = t.length - 1, d; c >= 0; c--)
     (d = t[c]) && (s = (o ? d(a, l, s) : d(s)) || s);
-  return o && s && S(a, l, s), s;
+  return o && s && A(a, l, s), s;
 };
 let e = class extends m {
   constructor() {
@@ -83,6 +84,7 @@ let e = class extends m {
       );
     }, this.slotController = new v(this, this.defaultSlot), this._isClosed = !1;
   }
+  // Lifecycle
   connectedCallback() {
     super.connectedCallback(), this["aria-live"] = this.getAttribute("aria-live") || this.ariaLive;
   }
@@ -90,8 +92,9 @@ let e = class extends m {
     t === "ariaLive" && (this["aria-live"] = l), super.attributeChangedCallback(t, a, l);
   }
   updated(t) {
-    super.updated(t), t.has("ariaLive") && (this["aria-live"] = this.ariaLive);
+    super.updated(t), t.has("ariaLive") && (this["aria-live"] = this.ariaLive), t.has("_isClosed") && _(this, "pkt-hide", this._isClosed);
   }
+  // Render
   render() {
     const t = {
       "pkt-alert": !0,

package/dist/classutils-BwNK82ZQ.cjs

@@ -0,0 +1 @@
+"use strict";function a(s,e,i){const r=s.getAttribute("class")||"",t=new Set(r.split(/\s+/).filter(Boolean));i?t.add(e):t.delete(e),s.setAttribute("class",Array.from(t).join(" "))}exports.updateClassAttribute=a;

package/dist/classutils-RQs1k6D9.js

@@ -0,0 +1,7 @@
+function a(s, e, r) {
+  const i = s.getAttribute("class") || "", t = new Set(i.split(/\s+/).filter(Boolean));
+  r ? t.add(e) : t.delete(e), s.setAttribute("class", Array.from(t).join(" "));
+}
+export {
+  a as u
+};

package/dist/index.d.ts

@@ -14,6 +14,16 @@ import { TZDate } from '@date-fns/tz';
  */
 declare type ElementProps<Element, PropKeys extends keyof Element> = Partial<Pick<Element, PropKeys>>;
 
+declare interface IPktAlert {
+    skin?: TAlertSkin;
+    closeAlert?: boolean;
+    title?: string;
+    date?: string | null;
+    ariaLive?: TAriaLive | null;
+    'aria-live'?: TAriaLive | null;
+    compact?: boolean;
+}
+
 export declare interface IPktButton {
     iconName?: string;
     secondIconName?: string;
@@ -37,6 +47,44 @@ declare interface IPktLinkCard {
     skin?: TLinkCardSkin;
 }
 
+export declare interface IPktLoader {
+    /**
+     * The `delay` prop controls how much time the loading should be given before the loader is displayed.
+     * This is handy for situations where the load time might be so short that loader is not necessary.
+     * Delay time is in milliseconds.
+     */
+    delay?: number;
+    /**
+     * The `inline` prop decides whether the loader should be displayed inline or not.
+     */
+    inline?: boolean;
+    /**
+     * The boolean 'isLoading' decides whether the loader or the children will be displayed.
+     * If set to false, the children will be displayed.
+     */
+    isLoading?: boolean;
+    /**
+     * The message to display when the loader is loading.
+     */
+    message?: string | null;
+    /**
+     * The size of the loader. Default is "medium".
+     */
+    size?: TPktSize;
+    /**
+     * The variant of the loader. Default is "shapes" which is the OSLO wave loader.
+     * Other variants are "blue" and "rainbow" which are spinner variants.
+     */
+    variant?: TPktLoaderVariant;
+}
+
+declare interface IPktMessagebox {
+    skin?: TMessageboxSkin;
+    title?: string;
+    compact?: boolean;
+    closable?: boolean;
+}
+
 declare interface IPktModal {
     headingText?: string;
     removePadding?: boolean;
@@ -77,22 +125,22 @@ declare interface IPktTag {
     ariaLabel?: string;
 }
 
-export declare class PktAlert extends PktElement {
+export declare class PktAlert extends PktElement implements IPktAlert {
     defaultSlot: Ref<HTMLElement>;
     constructor();
     compact: boolean;
     title: string;
     skin: TAlertSkin;
     ariaLive: TAriaLive;
-    'aria-live': TAriaLive;
+    'aria-live': TAriaLive | null;
     closeAlert: boolean;
     date: string | null;
     _isClosed: boolean;
-    private close;
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     protected updated(_changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
+    private close;
 }
 
 export declare class PktButton extends PktElement<IPktButton> implements IPktButton {
@@ -113,7 +161,7 @@ export declare class PktButton extends PktElement<IPktButton> implements IPktBut
     disabled: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    updated(changedProps: Map<string | number | symbol, unknown>): void;
+    protected updated(_changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
     private updateElementClasses;
     private handleClick;
@@ -504,7 +552,24 @@ export declare class PktLinkCard extends PktElement implements IPktLinkCard {
     render(): TemplateResult<1>;
 }
 
-export declare class PktMessagebox extends PktElement {
+export declare class PktLoader extends PktElement implements IPktLoader {
+    defaultSlot: Ref<HTMLElement>;
+    constructor();
+    delay: number;
+    inline: boolean;
+    isLoading: boolean;
+    message: string | null;
+    size: TPktSize;
+    variant: TPktLoaderVariant;
+    private _shouldDisplayLoader;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): TemplateResult<1>;
+    private getVariant;
+    private setupLoader;
+}
+
+export declare class PktMessagebox extends PktElement implements IPktMessagebox {
     defaultSlot: Ref<HTMLElement>;
     constructor();
     closable: boolean;
@@ -512,8 +577,9 @@ export declare class PktMessagebox extends PktElement {
     title: string;
     skin: TMessageboxSkin;
     _isClosed: boolean;
-    private close;
+    protected updated(_changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
+    private close;
 }
 
 export declare class PktModal extends PktElement implements IPktModal {
@@ -694,7 +760,7 @@ declare type Props_5 = ElementProps<PktTextinput, 'value' | 'type' | 'size' | 'a
 
 declare type TAlertSkin = 'error' | 'success' | 'warning' | 'info';
 
-declare type TAriaLive = 'off' | 'polite' | 'assertive' | null;
+declare type TAriaLive = 'off' | 'polite' | 'assertive';
 
 declare type TCardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue';
 
@@ -718,6 +784,8 @@ export declare type TPktButtonType = 'button' | 'submit' | 'reset';
 
 export declare type TPktButtonVariant = 'label-only' | 'icon-left' | 'icon-right' | 'icon-only' | 'icons-right-and-left';
 
+export declare type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes';
+
 declare type TPktSize = 'small' | 'medium' | 'large';
 
 export declare type TProgressbarRole = 'progressbar' | 'meter';

package/dist/loader-ChVEsONa.js

@@ -0,0 +1,85 @@
+import { P as u, x as d, E as y, n as o, a as c } from "./element-D_ZgQsSr.js";
+import { e as h } from "./class-map-BYCG9U47.js";
+import { r as m } from "./state-DuS4ffEQ.js";
+import { e as f, n as v } from "./ref-BSGI8ogR.js";
+import { P as _ } from "./pkt-slot-controller-Clbye6cM.js";
+import "./icon-BBFK-d-X.js";
+var g = Object.defineProperty, L = Object.getOwnPropertyDescriptor, s = (e, a, l, r) => {
+  for (var i = r > 1 ? void 0 : r ? L(a, l) : a, p = e.length - 1, n; p >= 0; p--)
+    (n = e[p]) && (i = (r ? n(a, l, i) : n(i)) || i);
+  return r && i && g(a, l, i), i;
+};
+let t = class extends u {
+  constructor() {
+    super(), this.defaultSlot = f(), this.delay = 0, this.inline = !1, this.isLoading = !0, this.message = null, this.size = "medium", this.variant = "shapes", this._shouldDisplayLoader = !1, this.slotController = new _(this, this.defaultSlot);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._shouldDisplayLoader = this.delay === 0, this.delay > 0 && this.setupLoader();
+  }
+  updated(e) {
+    e.has("delay") && this.setupLoader();
+  }
+  render() {
+    const e = h({
+      "pkt-loader": !0,
+      [`pkt-loader--${this.inline ? "inline" : "box"}`]: !0,
+      [`pkt-loader--${this.size}`]: !0
+    }), a = h({
+      "pkt-contents": !0,
+      "pkt-hide": this.isLoading
+    });
+    return d`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${e}>
+      ${this.isLoading && this._shouldDisplayLoader ? d`<div class="pkt-loader__spinner">
+            <pkt-icon
+              name=${this.getVariant(this.variant)}
+              path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
+              class="pkt-loader__svg pkt-loader__${this.variant}"
+            ></pkt-icon>
+            ${this.message && d`<p>${this.message}</p>`}
+          </div>` : y}
+      <div class=${a} ${v(this.defaultSlot)}></div>
+    </div>`;
+  }
+  getVariant(e) {
+    switch (e) {
+      case "blue":
+        return "spinner-blue";
+      case "rainbow":
+        return "spinner";
+      default:
+        return "loader";
+    }
+  }
+  setupLoader() {
+    this.delay > 0 && (this._shouldDisplayLoader = !1, setTimeout(() => {
+      this._shouldDisplayLoader = !0, this.requestUpdate();
+    }, this.delay));
+  }
+};
+s([
+  o({ type: Number })
+], t.prototype, "delay", 2);
+s([
+  o({ type: Boolean })
+], t.prototype, "inline", 2);
+s([
+  o({ type: Boolean })
+], t.prototype, "isLoading", 2);
+s([
+  o({ type: String })
+], t.prototype, "message", 2);
+s([
+  o({ type: String })
+], t.prototype, "size", 2);
+s([
+  o({ type: String })
+], t.prototype, "variant", 2);
+s([
+  m()
+], t.prototype, "_shouldDisplayLoader", 2);
+t = s([
+  c("pkt-loader")
+], t);
+export {
+  t as P
+};

package/dist/loader-DQV1hMM3.cjs

@@ -0,0 +1,11 @@
+"use strict";const e=require("./element-r-PeQ419.cjs"),d=require("./class-map-Dzci3Pfe.cjs"),u=require("./state-B77EXPZ9.cjs"),p=require("./ref-BUWgvhgU.cjs"),h=require("./pkt-slot-controller-Oc32unDk.cjs");require("./icon-DcJIqTIY.cjs");var c=Object.defineProperty,y=Object.getOwnPropertyDescriptor,s=(o,t,r,i)=>{for(var a=i>1?void 0:i?y(t,r):t,l=o.length-1,n;l>=0;l--)(n=o[l])&&(a=(i?n(t,r,a):n(a))||a);return i&&a&&c(t,r,a),a};exports.PktLoader=class extends e.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size="medium",this.variant="shapes",this._shouldDisplayLoader=!1,this.slotController=new h.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(t){t.has("delay")&&this.setupLoader()}render(){const t=d.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),r=d.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return e.x`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${t}>
+      ${this.isLoading&&this._shouldDisplayLoader?e.x`<div class="pkt-loader__spinner">
+            <pkt-icon
+              name=${this.getVariant(this.variant)}
+              path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
+              class="pkt-loader__svg pkt-loader__${this.variant}"
+            ></pkt-icon>
+            ${this.message&&e.x`<p>${this.message}</p>`}
+          </div>`:e.E}
+      <div class=${r} ${p.n(this.defaultSlot)}></div>
+    </div>`}getVariant(t){switch(t){case"blue":return"spinner-blue";case"rainbow":return"spinner";default:return"loader"}}setupLoader(){this.delay>0&&(this._shouldDisplayLoader=!1,setTimeout(()=>{this._shouldDisplayLoader=!0,this.requestUpdate()},this.delay))}};s([e.n({type:Number})],exports.PktLoader.prototype,"delay",2);s([e.n({type:Boolean})],exports.PktLoader.prototype,"inline",2);s([e.n({type:Boolean})],exports.PktLoader.prototype,"isLoading",2);s([e.n({type:String})],exports.PktLoader.prototype,"message",2);s([e.n({type:String})],exports.PktLoader.prototype,"size",2);s([e.n({type:String})],exports.PktLoader.prototype,"variant",2);s([u.r()],exports.PktLoader.prototype,"_shouldDisplayLoader",2);exports.PktLoader=s([e.t("pkt-loader")],exports.PktLoader);

package/dist/loader.d.ts

@@ -0,0 +1,15 @@
+export { }
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
+declare global {
+    interface Window {
+        pktTz: string;
+    }
+}

package/dist/messagebox-BSyLVNas.cjs

@@ -0,0 +1,12 @@
+"use strict";const s=require("./element-r-PeQ419.cjs"),b=require("./pkt-slot-controller-Oc32unDk.cjs"),c=require("./ref-BUWgvhgU.cjs"),d=require("./class-map-Dzci3Pfe.cjs"),k=require("./state-B77EXPZ9.cjs");require("./icon-DcJIqTIY.cjs");const u=require("./classutils-BwNK82ZQ.cjs"),m="pkt-messagebox",g=!0,h={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},f={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},x={default:{description:"Innholdet i meldingsboksen"}},p={name:m,"css-class":"pkt-messagebox",isElement:g,events:h,props:f,slots:x};var v=Object.defineProperty,_=Object.getOwnPropertyDescriptor,o=(i,e,n,l)=>{for(var t=l>1?void 0:l?_(e,n):e,a=i.length-1,r;a>=0;a--)(r=i[a])&&(t=(l?r(e,n,t):r(t))||t);return l&&t&&v(e,n,t),t};exports.PktMessagebox=class extends s.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closable=p.props.closable.default,this.compact=p.props.compact.default,this.title="",this.skin=p.props.skin.default,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0}))},this.slotController=new b.PktSlotController(this,this.defaultSlot),this._isClosed=!1}updated(e){super.updated(e),e.has("_isClosed")&&u.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const e={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return s.x`<div class=${d.e(e)}>
+      ${this.closable?s.x`<div class="pkt-messagebox__close">
+            <button
+              @click=${this.close}
+              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+            >
+              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
+            </button>
+          </div>`:s.E}
+      ${this.title?s.x`<div class="pkt-messagebox__title">${this.title}</div>`:s.E}
+      <div class="pkt-messagebox__text" ${c.n(this.defaultSlot)}></div>
+    </div>`}};o([s.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"closable",2);o([s.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"compact",2);o([s.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"title",2);o([s.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"skin",2);o([k.r()],exports.PktMessagebox.prototype,"_isClosed",2);exports.PktMessagebox=o([s.t("pkt-messagebox")],exports.PktMessagebox);

package/dist/{messagebox-BgLZ5zul.js → messagebox-Di7LUz4C.js}

@@ -1,17 +1,18 @@
-import { P as b, x as c, E as d, n, a as k } from "./element-D_ZgQsSr.js";
-import { P as u } from "./pkt-slot-controller-Clbye6cM.js";
-import { e as g, n as f } from "./ref-BSGI8ogR.js";
-import { e as h } from "./class-map-BYCG9U47.js";
+import { P as b, x as c, E as m, n, a as u } from "./element-D_ZgQsSr.js";
+import { P as k } from "./pkt-slot-controller-Clbye6cM.js";
+import { e as h, n as f } from "./ref-BSGI8ogR.js";
+import { e as g } from "./class-map-BYCG9U47.js";
 import { r as v } from "./state-DuS4ffEQ.js";
 import "./icon-BBFK-d-X.js";
-const _ = "pkt-messagebox", x = !0, y = {
+import { u as _ } from "./classutils-RQs1k6D9.js";
+const x = "pkt-messagebox", y = !0, C = {
   onClose: {
     description: "React: Event som trigges når meldingsboksen lukkes"
   },
   "on-close": {
     description: "Vue: Event som trigges når meldingsboksen lukkes"
   }
-}, C = {
+}, E = {
   title: {
     name: "Tittel",
     description: "Tittelen på meldingsboksen",
@@ -40,29 +41,34 @@ const _ = "pkt-messagebox", x = !0, y = {
     type: "boolean",
     default: !1
   }
-}, E = {
+}, P = {
   default: {
     description: "Innholdet i meldingsboksen"
   }
-}, m = {
-  name: _,
+}, d = {
+  name: x,
   "css-class": "pkt-messagebox",
-  isElement: x,
-  events: y,
-  props: C,
-  slots: E
+  isElement: y,
+  events: C,
+  props: E,
+  slots: P
 };
-var P = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, o = (e, l, p, i) => {
-  for (var t = i > 1 ? void 0 : i ? $(l, p) : l, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (t = (i ? a(l, p, t) : a(t)) || t);
-  return i && t && P(l, p, t), t;
+var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, o = (e, i, p, l) => {
+  for (var t = l > 1 ? void 0 : l ? S(i, p) : i, a = e.length - 1, r; a >= 0; a--)
+    (r = e[a]) && (t = (l ? r(i, p, t) : r(t)) || t);
+  return l && t && $(i, p, t), t;
 };
 let s = class extends b {
   constructor() {
-    super(), this.defaultSlot = g(), this.closable = m.props.closable.default, this.compact = m.props.compact.default, this.title = "", this.skin = m.props.skin.default, this._isClosed = !1, this.close = (e) => {
+    super(), this.defaultSlot = h(), this.closable = d.props.closable.default, this.compact = d.props.compact.default, this.title = "", this.skin = d.props.skin.default, this._isClosed = !1, this.close = (e) => {
       this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", { detail: { origin: e }, bubbles: !0 })), this.dispatchEvent(new CustomEvent("on-close", { detail: { origin: e }, bubbles: !0 }));
-    }, this.slotController = new u(this, this.defaultSlot), this._isClosed = !1;
+    }, this.slotController = new k(this, this.defaultSlot), this._isClosed = !1;
+  }
+  // Lifecycle
+  updated(e) {
+    super.updated(e), e.has("_isClosed") && _(this, "pkt-hide", this._isClosed);
   }
+  // Render
   render() {
     const e = {
       "pkt-messagebox": !0,
@@ -71,7 +77,7 @@ let s = class extends b {
       "pkt-messagebox--closable": this.closable,
       "pkt-hide": this._isClosed
     };
-    return c`<div class=${h(e)}>
+    return c`<div class=${g(e)}>
       ${this.closable ? c`<div class="pkt-messagebox__close">
             <button
               @click=${this.close}
@@ -79,8 +85,8 @@ let s = class extends b {
             >
               <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
             </button>
-          </div>` : d}
-      ${this.title ? c`<div class="pkt-messagebox__title">${this.title}</div>` : d}
+          </div>` : m}
+      ${this.title ? c`<div class="pkt-messagebox__title">${this.title}</div>` : m}
       <div class="pkt-messagebox__text" ${f(this.defaultSlot)}></div>
     </div>`;
   }
@@ -101,7 +107,7 @@ o([
   v()
 ], s.prototype, "_isClosed", 2);
 s = o([
-  k("pkt-messagebox")
+  u("pkt-messagebox")
 ], s);
 export {
   s as P

package/dist/{modal-CV3LSNHb.cjs → modal-CblCiNUi.cjs}

@@ -12,13 +12,14 @@
                 ${this.headingText}
               </h1>`:s.E}
           ${this.hideCloseButton?s.E:s.x`<div class="${d.e(i)}">
-                <button
+                <pkt-button
                   @click=${p=>this.close(p)}
                   class=${d.e(a)}
                   aria-label="close"
+                  iconname="close"
+                  variant="icon-only"
                 >
-                  <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
-                </button>
+                </pkt-button>
               </div>`}
         </div>
         <div class="pkt-modal__container">

package/dist/{modal-CnSYSYsQ.js → modal-DZUQb_yG.js}

@@ -1,5 +1,5 @@
 import { e as c } from "./class-map-BYCG9U47.js";
-import { P as f, x as p, E as k, n as d, a as g } from "./element-D_ZgQsSr.js";
+import { P as f, x as p, E as k, n as r, a as g } from "./element-D_ZgQsSr.js";
 import { r as v } from "./state-DuS4ffEQ.js";
 import { P as b } from "./pkt-slot-controller-Clbye6cM.js";
 import { e as m, n as h } from "./ref-BSGI8ogR.js";
@@ -60,28 +60,28 @@ const y = "pkt-modal", _ = !0, C = {
   props: B,
   slots: w
 };
-var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (t, e, o, s) => {
-  for (var n = s > 1 ? void 0 : s ? S(e, o) : e, r = t.length - 1, a; r >= 0; r--)
-    (a = t[r]) && (n = (s ? a(e, o, n) : a(n)) || n);
-  return s && n && E(e, o, n), n;
+var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (t, e, o, n) => {
+  for (var s = n > 1 ? void 0 : n ? S(e, o) : e, d = t.length - 1, a; d >= 0; d--)
+    (a = t[d]) && (s = (n ? a(e, o, s) : a(s)) || s);
+  return n && s && E(e, o, s), s;
 };
 let i = class extends f {
   constructor() {
     super(), this.headingText = "", this.removePadding = !1, this.hideCloseButton = u.props.hideCloseButton.default, this.closeOnBackdropClick = u.props.closeOnBackdropClick.default, this.closeButtonSkin = "blue", this.size = u.props.size.default, this.defaultSlot = m(), this.dialogRef = m(), this._isOpen = !1, this.close = (t, e = !1) => {
-      var s;
+      var n;
       if (!this._isOpen) return;
       this._isOpen = !1, document.body.classList.remove("pkt-modal--open");
       const o = document.activeElement;
       o && !this.isElementInViewport(o) && o.scrollIntoView({ behavior: "smooth", block: "nearest" }), this.dispatchEvent(
         new CustomEvent("close", { detail: { origin: t }, bubbles: !0, composed: !0 })
-      ), e || (s = this.dialogRef.value) == null || s.close(), this.requestUpdate();
+      ), e || (n = this.dialogRef.value) == null || n.close(), this.requestUpdate();
     }, this.showModal = (t) => {
       var o;
       this._isOpen = !0, (o = this.dialogRef.value) == null || o.showModal();
       const e = document.querySelector(".pkt-modal");
       requestAnimationFrame(() => {
-        var s;
-        this.dialogRef.value && ((s = this.dialogRef.value) == null || s.focus());
+        var n;
+        this.dialogRef.value && ((n = this.dialogRef.value) == null || n.focus());
       }), e && document.body.classList.add("pkt-modal--open"), this.dispatchEvent(
         new CustomEvent("showModal", { detail: { origin: t }, bubbles: !0, composed: !0 })
       ), this.requestUpdate();
@@ -117,12 +117,12 @@ let i = class extends f {
     }, o = {
       "pkt-modal__content": !0,
       "pkt-txt-18-light": !0
-    }, s = this.closeButtonSkin === "blue", n = {
+    }, n = this.closeButtonSkin === "blue", s = {
       "pkt-modal__closeButton": !0,
       [`pkt-modal__closeButton--${this.closeButtonSkin}`]: !0
-    }, r = {
+    }, d = {
       "pkt-btn": !0,
-      [`pkt-btn--${s ? "tertiary" : "primary"}`]: !0,
+      [`pkt-btn--${n ? "tertiary" : "primary"}`]: !0,
       "pkt-btn--icon-only": !0,
       "pkt-btn--medium": !0
     };
@@ -139,14 +139,15 @@ let i = class extends f {
           ${this.headingText ? p`<h1 id="pkt-modal__headingText" class=${c(e)}>
                 ${this.headingText}
               </h1>` : k}
-          ${this.hideCloseButton ? k : p`<div class="${c(n)}">
-                <button
+          ${this.hideCloseButton ? k : p`<div class="${c(s)}">
+                <pkt-button
                   @click=${(a) => this.close(a)}
-                  class=${c(r)}
+                  class=${c(d)}
                   aria-label="close"
+                  iconname="close"
+                  variant="icon-only"
                 >
-                  <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
-                </button>
+                </pkt-button>
               </div>`}
         </div>
         <div class="pkt-modal__container">
@@ -161,22 +162,22 @@ let i = class extends f {
   }
 };
 l([
-  d({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], i.prototype, "headingText", 2);
 l([
-  d({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], i.prototype, "removePadding", 2);
 l([
-  d({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], i.prototype, "hideCloseButton", 2);
 l([
-  d({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], i.prototype, "closeOnBackdropClick", 2);
 l([
-  d({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], i.prototype, "closeButtonSkin", 2);
 l([
-  d({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], i.prototype, "size", 2);
 l([
   v()

package/dist/pkt-alert.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-Cx7AYawa.cjs"),t=e.PktAlert;Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-CP5oN7df.cjs"),t=e.PktAlert;Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});exports.default=t;

package/dist/pkt-alert.js

@@ -1,4 +1,4 @@
-import { P as t } from "./alert-C_FCsFfo.js";
+import { P as t } from "./alert-CugVni4g.js";
 const e = t;
 export {
   t as PktAlert,

package/dist/pkt-index.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./alert-Cx7AYawa.cjs"),d=require("./button-DPb5WL9h.cjs"),c=require("./calendar-DUkAC9Hx.cjs"),k=require("./card-Bxe-jQD_.cjs"),P=require("./checkbox-CDMUepTW.cjs"),t=require("./element-r-PeQ419.cjs"),b=require("./pkt-slot-controller-Oc32unDk.cjs"),i=require("./ref-BUWgvhgU.cjs"),h=require("./class-map-Dzci3Pfe.cjs"),m=require("./datepicker-D6ifQ2so.cjs"),g=require("./helptext-C0mrdhRi.cjs"),f=require("./icon-DcJIqTIY.cjs"),y=require("./input-wrapper-Dqj4uers.cjs"),x=require("./link-C_bwx1Ml.cjs"),C=require("./linkcard-C6mZOE0R.cjs"),O=require("./messagebox-DJzOyZwE.cjs"),j=require("./modal-CV3LSNHb.cjs"),q=require("./progressbar-C_q48_qh.cjs"),v=require("./radiobutton-3e105CXX.cjs"),S=require("./tag-BMyii4Da.cjs"),$=require("./textarea-DxpzI67n.cjs"),_=require("./textinput-BRupcl9v.cjs"),T=require("./select-DJu4Wr1y.cjs");var L=Object.defineProperty,M=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?M(e,r):e,l=a.length-1,u;l>=0;l--)(u=a[l])&&(n=(s?u(e,r,n):u(n))||n);return s&&n&&L(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new b.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
-      <div class="${h.e(e)}">
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./alert-CP5oN7df.cjs"),d=require("./button-DPb5WL9h.cjs"),c=require("./calendar-DUkAC9Hx.cjs"),P=require("./card-Bxe-jQD_.cjs"),k=require("./checkbox-CDMUepTW.cjs"),t=require("./element-r-PeQ419.cjs"),b=require("./pkt-slot-controller-Oc32unDk.cjs"),i=require("./ref-BUWgvhgU.cjs"),m=require("./class-map-Dzci3Pfe.cjs"),g=require("./datepicker-D6ifQ2so.cjs"),h=require("./helptext-C0mrdhRi.cjs"),f=require("./icon-DcJIqTIY.cjs"),y=require("./input-wrapper-Dqj4uers.cjs"),x=require("./link-C_bwx1Ml.cjs"),O=require("./linkcard-C6mZOE0R.cjs"),j=require("./loader-DQV1hMM3.cjs"),q=require("./messagebox-BSyLVNas.cjs"),C=require("./modal-CblCiNUi.cjs"),v=require("./progressbar-C_q48_qh.cjs"),S=require("./radiobutton-3e105CXX.cjs"),$=require("./tag-BMyii4Da.cjs"),_=require("./textarea-DxpzI67n.cjs"),L=require("./textinput-BRupcl9v.cjs"),T=require("./select-DJu4Wr1y.cjs");var M=Object.defineProperty,B=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?B(e,r):e,l=a.length-1,u;l>=0;l--)(u=a[l])&&(n=(s?u(e,r,n):u(n))||n);return s&&n&&M(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new b.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+      <div class="${m.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 
         <h2 class="pkt-txt-22">Innhold fra attributter og funksjoner</h2>
@@ -26,4 +26,4 @@
       <ul>
         ${e.map(r=>t.x`<li>${r}</li>`)}
       </ul>
-    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:c.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>p.PktAlert});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>d.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>c.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>k.PktCard});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>P.PktCheckbox});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>m.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>g.PktHelptext});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>f.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>y.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>x.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>C.PktLinkCard});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>O.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>j.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>q.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>v.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>S.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>$.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>_.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>T.PktSelect});
+    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:c.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>p.PktAlert});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>d.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>c.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>P.PktCard});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>k.PktCheckbox});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>g.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>h.PktHelptext});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>f.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>y.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>x.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>O.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>j.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>q.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>C.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>v.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>S.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>$.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>_.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>L.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>T.PktSelect});

package/dist/pkt-index.js

@@ -1,4 +1,4 @@
-import { P as w } from "./alert-C_FCsFfo.js";
+import { P as w } from "./alert-CugVni4g.js";
 import { P as O } from "./button-BnmFhao8.js";
 import { c as d } from "./calendar-DevhqUoj.js";
 import { P as j } from "./calendar-DevhqUoj.js";
@@ -6,7 +6,7 @@ import { P as B } from "./card-Db2Ex1cH.js";
 import { P as I } from "./checkbox-Dw2CX5zY.js";
 import { P as f, x as m, t as k, n, a as c } from "./element-D_ZgQsSr.js";
 import { P as x } from "./pkt-slot-controller-Clbye6cM.js";
-import { e as h, n as P } from "./ref-BSGI8ogR.js";
+import { e as P, n as h } from "./ref-BSGI8ogR.js";
 import { e as u } from "./class-map-BYCG9U47.js";
 import { P as G } from "./datepicker-gZ_eVIyS.js";
 import { P as M } from "./helptext-RPq_TKzJ.js";
@@ -14,14 +14,15 @@ import { P as N } from "./icon-BBFK-d-X.js";
 import { P as W } from "./input-wrapper-D-pEAZaj.js";
 import { P as z } from "./link-CDkU7zsB.js";
 import { P as J } from "./linkcard-Dr5iKZrV.js";
-import { P as V } from "./messagebox-BgLZ5zul.js";
-import { P as Y } from "./modal-CnSYSYsQ.js";
-import { P as tt } from "./progressbar-CuZj4FWi.js";
-import { P as rt } from "./radiobutton-CcZ2-z8q.js";
-import { P as ot } from "./tag-DVk69673.js";
-import { P as nt } from "./textarea-C8-lnWwu.js";
-import { P as pt } from "./textinput-DRkv93vp.js";
-import { P as mt } from "./select-CnizDIYN.js";
+import { P as V } from "./loader-ChVEsONa.js";
+import { P as Y } from "./messagebox-Di7LUz4C.js";
+import { P as tt } from "./modal-DZUQb_yG.js";
+import { P as rt } from "./progressbar-CuZj4FWi.js";
+import { P as ot } from "./radiobutton-CcZ2-z8q.js";
+import { P as nt } from "./tag-DVk69673.js";
+import { P as pt } from "./textarea-C8-lnWwu.js";
+import { P as mt } from "./textinput-DRkv93vp.js";
+import { P as ht } from "./select-CnizDIYN.js";
 var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (t, e, i, a) => {
   for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);
@@ -29,7 +30,7 @@ var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (t, e, i
 };
 let s = class extends f {
   constructor() {
-    super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot = h(), this.namedSlot = h(), this.slotController = new x(this, this.defaultSlot, this.namedSlot);
+    super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot = P(), this.namedSlot = P(), this.slotController = new x(this, this.defaultSlot, this.namedSlot);
   }
   /**
    * Runs on mount, used to set up various values and whatever you need to run
@@ -57,11 +58,11 @@ let s = class extends f {
         <div>${this.renderList(this.doStuff(this._list))}</div>
 
         <h2 class="pkt-txt-22">Slot</h2>
-        <div ${P(this.defaultSlot)}>defaultSlotRef</div>
+        <div ${h(this.defaultSlot)}>defaultSlotRef</div>
         <h2 class="pkt-txt-22">Named slot</h2>
         <select
           name="named-slot"
-          ${P(this.namedSlot)}
+          ${h(this.namedSlot)}
           @change=${(e) => alert(e.target.value)}
         >
           namedSlotRef
@@ -126,12 +127,13 @@ export {
   W as PktInputWrapper,
   z as PktLink,
   J as PktLinkCard,
-  V as PktMessagebox,
-  Y as PktModal,
-  tt as PktProgressbar,
-  rt as PktRadioButton,
-  mt as PktSelect,
-  ot as PktTag,
-  nt as PktTextarea,
-  pt as PktTextinput
+  V as PktLoader,
+  Y as PktMessagebox,
+  tt as PktModal,
+  rt as PktProgressbar,
+  ot as PktRadioButton,
+  ht as PktSelect,
+  nt as PktTag,
+  pt as PktTextarea,
+  mt as PktTextinput
 };

package/dist/pkt-loader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./loader-DQV1hMM3.cjs"),t=e.PktLoader;Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>e.PktLoader});exports.default=t;

package/dist/pkt-loader.js

@@ -0,0 +1,6 @@
+import { P as a } from "./loader-ChVEsONa.js";
+const t = a;
+export {
+  a as PktLoader,
+  t as default
+};

package/dist/pkt-messagebox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./messagebox-DJzOyZwE.cjs"),t=e.PktMessagebox;Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>e.PktMessagebox});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./messagebox-BSyLVNas.cjs"),t=e.PktMessagebox;Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>e.PktMessagebox});exports.default=t;

package/dist/pkt-messagebox.js

@@ -1,4 +1,4 @@
-import { P as s } from "./messagebox-BgLZ5zul.js";
+import { P as s } from "./messagebox-Di7LUz4C.js";
 const a = s;
 export {
   s as PktMessagebox,

package/dist/pkt-modal.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./modal-CV3LSNHb.cjs"),t=e.PktModal;Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>e.PktModal});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./modal-CblCiNUi.cjs"),t=e.PktModal;Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>e.PktModal});exports.default=t;

package/dist/pkt-modal.js

@@ -1,4 +1,4 @@
-import { P as a } from "./modal-CnSYSYsQ.js";
+import { P as a } from "./modal-DZUQb_yG.js";
 const t = a;
 export {
   a as PktModal,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.29.1",
+  "version": "12.29.3",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "9210493fb17b0e217f6e369c36e253f6a00d91de"
+  "gitHead": "59a0d70f10e765285167342a739bbe6b126a9882"
 }

package/src/components/alert/alert.ts

@@ -5,7 +5,7 @@ import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { ref, createRef, Ref } from 'lit/directives/ref.js'
 import { TAriaLive } from '@/types/aria'
-
+import { updateClassAttribute } from '@/utils/classutils'
 import specs from 'componentSpecs/alert.json'
 
 import '@/components/icon'
@@ -16,13 +16,13 @@ export interface IPktAlert {
   skin?: TAlertSkin
   closeAlert?: boolean
   title?: string
-  date?: string
-  ariaLive?: TAriaLive
-  'aria-live'?: TAriaLive
+  date?: string | null
+  ariaLive?: TAriaLive | null
+  'aria-live'?: TAriaLive | null
   compact?: boolean
 }
 @customElement('pkt-alert')
-export class PktAlert extends PktElement {
+export class PktAlert extends PktElement implements IPktAlert {
   defaultSlot: Ref<HTMLElement> = createRef()
 
   constructor() {
@@ -31,27 +31,20 @@ export class PktAlert extends PktElement {
     this._isClosed = false
   }
 
+  // Properties
+
   @property({ type: Boolean, reflect: false }) compact = specs.props.compact.default
   @property({ type: String, reflect: true }) title: string = ''
   @property({ type: String, reflect: true }) skin: TAlertSkin = specs.props.skin
     .default as TAlertSkin
   @property({ type: String }) ariaLive: TAriaLive = specs.props.ariaLive.default as TAriaLive
-  @property({ type: String, reflect: true }) 'aria-live': TAriaLive = null
+  @property({ type: String, reflect: true }) 'aria-live': TAriaLive | null = null
   @property({ type: Boolean, reflect: true }) closeAlert = specs.props.closeAlert.default
   @property({ type: String, reflect: true }) date: string | null = null
 
   @state() _isClosed: boolean = false
 
-  private close = (event: MouseEvent) => {
-    this._isClosed = true
-    this.dispatchEvent(
-      new CustomEvent('close', { detail: { origin: event }, bubbles: true, composed: true }),
-    )
-    // Historical support of old Vue implementations…
-    this.dispatchEvent(
-      new CustomEvent('on-close', { detail: { origin: event }, bubbles: true, composed: true }),
-    )
-  }
+  // Lifecycle
 
   connectedCallback(): void {
     super.connectedCallback()
@@ -70,8 +63,13 @@ export class PktAlert extends PktElement {
     if (_changedProperties.has('ariaLive')) {
       this['aria-live'] = this.ariaLive
     }
+    if (_changedProperties.has('_isClosed')) {
+      updateClassAttribute(this, 'pkt-hide', this._isClosed)
+    }
   }
 
+  // Render
+
   render() {
     const classes = {
       'pkt-alert': true,
@@ -112,4 +110,17 @@ export class PktAlert extends PktElement {
       </div>
     `
   }
+
+  // Methods
+
+  private close = (event: MouseEvent) => {
+    this._isClosed = true
+    this.dispatchEvent(
+      new CustomEvent('close', { detail: { origin: event }, bubbles: true, composed: true }),
+    )
+    // Historical support of old Vue implementations…
+    this.dispatchEvent(
+      new CustomEvent('on-close', { detail: { origin: event }, bubbles: true, composed: true }),
+    )
+  }
 }

package/src/components/button/button.ts

@@ -1,6 +1,6 @@
 import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
-import { html, nothing } from 'lit'
+import { html, nothing, PropertyValues } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { createRef, Ref, ref } from 'lit/directives/ref.js'
 
@@ -80,8 +80,8 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
     this.removeEventListener('keydown', this.handleKeydown as EventListener)
   }
 
-  updated(changedProps: Map<string | number | symbol, unknown>) {
-    super.updated(changedProps)
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties)
 
     this.setAttribute('role', 'button')
 
@@ -100,7 +100,6 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
         this.setAttribute('aria-disabled', 'false')
       }
     }
-
     if (this.isLoading) {
       if (this.getAttribute('aria-busy') !== 'true') {
         this.setAttribute('aria-busy', 'true')

package/src/components/index.ts

@@ -11,6 +11,7 @@ export { PktIcon } from '@/components/icon'
 export { PktInputWrapper } from '@/components/input-wrapper'
 export { PktLink } from '@/components/link'
 export { PktLinkCard } from '@/components/linkcard'
+export { PktLoader } from '@/components/loader'
 export { PktMessagebox } from '@/components/messagebox'
 export { PktModal } from '@/components/modal'
 export { PktProgressbar } from '@/components/progressbar'
@@ -20,7 +21,8 @@ export { PktTextarea } from '@/components/textarea'
 export { PktTextinput } from '@/components/textinput'
 export { PktSelect } from '@/components/select'
 
-// Export types
+// Export component types
+
 
 export type {
   IPktButton,
@@ -33,6 +35,7 @@ export type {
   TPktButtonType,
 } from '@/components/button'
 
+
 export type {
   IPktProgressbar,
   TProgressbarRole,
@@ -45,3 +48,5 @@ export type {
 export type { TTagSkin, TTagType } from '@/components/tag'
 
 export type { TSelectOption } from '@/components/select'
+
+export type { IPktLoader, TPktLoaderVariant } from '@/components/loader'

package/src/components/loader/index.ts

@@ -0,0 +1,5 @@
+import { PktLoader } from './loader'
+export { PktLoader } from './loader'
+export default PktLoader
+
+export type { IPktLoader, TPktLoaderVariant } from './loader'

package/src/components/loader/loader.ts

@@ -0,0 +1,125 @@
+import { PktElement } from '@/base-elements/element'
+import { classMap } from 'lit/directives/class-map.js'
+import { customElement, property, state } from 'lit/decorators.js'
+import { createRef, ref, Ref } from 'lit/directives/ref.js'
+import { html, nothing } from 'lit'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { TPktSize } from '@/types/size'
+import '@/components/icon'
+
+export type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes'
+
+export interface IPktLoader {
+  /**
+   * The `delay` prop controls how much time the loading should be given before the loader is displayed.
+   * This is handy for situations where the load time might be so short that loader is not necessary.
+   * Delay time is in milliseconds.
+   */
+  delay?: number
+  /**
+   * The `inline` prop decides whether the loader should be displayed inline or not.
+   */
+  inline?: boolean
+  /**
+   * The boolean 'isLoading' decides whether the loader or the children will be displayed.
+   * If set to false, the children will be displayed.
+   */
+  isLoading?: boolean
+  /**
+   * The message to display when the loader is loading.
+   */
+  message?: string | null
+  /**
+   * The size of the loader. Default is "medium".
+   */
+  size?: TPktSize
+  /**
+   * The variant of the loader. Default is "shapes" which is the OSLO wave loader.
+   * Other variants are "blue" and "rainbow" which are spinner variants.
+   */
+  variant?: TPktLoaderVariant
+}
+
+@customElement('pkt-loader')
+export class PktLoader extends PktElement implements IPktLoader {
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  @property({ type: Number }) delay: number = 0
+  @property({ type: Boolean }) inline: boolean = false
+  @property({ type: Boolean }) isLoading: boolean = true
+  @property({ type: String }) message: string | null = null
+  @property({ type: String }) size: TPktSize = 'medium'
+  @property({ type: String }) variant: TPktLoaderVariant = 'shapes'
+
+  @state() private _shouldDisplayLoader: boolean = false
+
+  connectedCallback() {
+    super.connectedCallback()
+    this._shouldDisplayLoader = this.delay === 0
+
+    if (this.delay > 0) {
+      this.setupLoader()
+    }
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('delay')) {
+      this.setupLoader()
+    }
+  }
+
+  render() {
+    const classes = classMap({
+      'pkt-loader': true,
+      [`pkt-loader--${this.inline ? 'inline' : 'box'}`]: true,
+      [`pkt-loader--${this.size}`]: true,
+    })
+
+    const slotClasses = classMap({
+      'pkt-contents': true,
+      'pkt-hide': this.isLoading,
+    })
+
+    return html`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${classes}>
+      ${this.isLoading && this._shouldDisplayLoader
+        ? html`<div class="pkt-loader__spinner">
+            <pkt-icon
+              name=${this.getVariant(this.variant)}
+              path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
+              class="pkt-loader__svg pkt-loader__${this.variant}"
+            ></pkt-icon>
+            ${this.message && html`<p>${this.message}</p>`}
+          </div>`
+        : nothing}
+      <div class=${slotClasses} ${ref(this.defaultSlot)}></div>
+    </div>`
+  }
+
+  private getVariant(variant: TPktLoaderVariant): string {
+    switch (variant) {
+      case 'blue':
+        return 'spinner-blue'
+      case 'rainbow':
+        return 'spinner'
+      default:
+        return 'loader'
+    }
+  }
+
+  private setupLoader() {
+    if (this.delay > 0) {
+      this._shouldDisplayLoader = false
+      setTimeout(() => {
+        this._shouldDisplayLoader = true
+        this.requestUpdate()
+      }, this.delay)
+    }
+  }
+}
+
+export default PktLoader

package/src/components/messagebox/messagebox.ts

@@ -2,12 +2,13 @@ import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { ref } from 'lit/directives/ref.js'
 import { Ref, createRef } from 'lit/directives/ref.js'
-import { html, nothing } from 'lit'
+import { html, nothing, PropertyValues } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import specs from 'componentSpecs/messagebox.json'
 
 import '@/components/icon'
+import { updateClassAttribute } from '@/utils/classutils'
 
 export type TMessageboxSkin = 'beige' | 'blue' | 'red' | 'green'
 
@@ -19,7 +20,7 @@ export interface IPktMessagebox {
 }
 
 @customElement('pkt-messagebox')
-export class PktMessagebox extends PktElement {
+export class PktMessagebox extends PktElement implements IPktMessagebox {
   defaultSlot: Ref<HTMLElement> = createRef()
 
   constructor() {
@@ -28,6 +29,8 @@ export class PktMessagebox extends PktElement {
     this._isClosed = false
   }
 
+  // Properties
+
   @property({ type: Boolean, reflect: true }) closable = specs.props.closable.default
   @property({ type: Boolean, reflect: true }) compact = specs.props.compact.default
   @property({ type: String, reflect: true }) title = ''
@@ -35,13 +38,18 @@ export class PktMessagebox extends PktElement {
 
   @state() _isClosed: boolean = false
 
-  private close = (event: MouseEvent) => {
-    this._isClosed = true
-    this.dispatchEvent(new CustomEvent('close', { detail: { origin: event }, bubbles: true }))
-    // Historical support of old Vue implementations…
-    this.dispatchEvent(new CustomEvent('on-close', { detail: { origin: event }, bubbles: true }))
+  // Lifecycle
+
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties)
+
+    if (_changedProperties.has('_isClosed')) {
+      updateClassAttribute(this, 'pkt-hide', this._isClosed)
+    }
   }
 
+  // Render
+
   render() {
     const classes = {
       'pkt-messagebox': true,
@@ -66,4 +74,12 @@ export class PktMessagebox extends PktElement {
       <div class="pkt-messagebox__text" ${ref(this.defaultSlot)}></div>
     </div>`
   }
+
+  // Methods
+  private close = (event: MouseEvent) => {
+    this._isClosed = true
+    this.dispatchEvent(new CustomEvent('close', { detail: { origin: event }, bubbles: true }))
+    // Historical support of old Vue implementations…
+    this.dispatchEvent(new CustomEvent('on-close', { detail: { origin: event }, bubbles: true }))
+  }
 }

package/src/components/modal/modal.ts

@@ -166,13 +166,14 @@ export class PktModal extends PktElement implements IPktModal {
             : nothing}
           ${!this.hideCloseButton
             ? html`<div class="${classMap(closeButtonClasses)}">
-                <button
+                <pkt-button
                   @click=${(event: Event) => this.close(event)}
                   class=${classMap(buttonClasses)}
                   aria-label="close"
+                  iconname="close"
+                  variant="icon-only"
                 >
-                  <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
-                </button>
+                </pkt-button>
               </div>`
             : nothing}
         </div>

package/dist/alert-Cx7AYawa.cjs

@@ -1,27 +0,0 @@
-"use strict";const d=require("./class-map-Dzci3Pfe.cjs"),t=require("./element-r-PeQ419.cjs"),k=require("./state-B77EXPZ9.cjs"),u=require("./pkt-slot-controller-Oc32unDk.cjs"),c=require("./ref-BUWgvhgU.cjs");require("./icon-DcJIqTIY.cjs");const h="pkt-alert",v=!0,f={onClose:{description:"React: Klikk-event for 'Lukk'-knappen"},close:{description:"Vue: Klikk-event for 'Lukk'-knappen"}},m={title:{name:"Tittel",description:"Tittelen som vises øverst i på meldingen",type:"string"},skin:{name:"Utseende",description:"Hvordan type melding er dette?",type:["info","success","warning","error"],default:"info"},date:{name:"Sist oppdatert",description:"Dato som vises nederst i på meldingen",type:"string"},ariaLive:{name:"aria-live",description:"Hvordan skal skjermleseren lese opp meldingen?",type:["off","polite","assertive"],default:"polite"},compact:{name:"Kompakt",description:"Gjør meldingen mindre",type:"boolean",default:!1},closeAlert:{name:"Vis 'Lukk'-knapp",description:"Viser 'Lukk'-knappen",type:"boolean",default:!1}},b={default:{description:"Innholdet i meldingen"}},n={name:h,"css-class":"pkt-alert","dark-mode":!0,isElement:v,events:f,props:m,slots:b};var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(a,e,l,s)=>{for(var r=s>1?void 0:s?_(e,l):e,o=a.length-1,p;o>=0;o--)(p=a[o])&&(r=(s?p(e,l,r):p(r))||r);return s&&r&&y(e,l,r),r};exports.PktAlert=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.compact=n.props.compact.default,this.title="",this.skin=n.props.skin.default,this.ariaLive=n.props.ariaLive.default,this["aria-live"]=null,this.closeAlert=n.props.closeAlert.default,this.date=null,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new u.PktSlotController(this,this.defaultSlot),this._isClosed=!1}connectedCallback(){super.connectedCallback(),this["aria-live"]=this.getAttribute("aria-live")||this.ariaLive}attributeChangedCallback(e,l,s){e==="ariaLive"&&(this["aria-live"]=s),super.attributeChangedCallback(e,l,s)}updated(e){super.updated(e),e.has("ariaLive")&&(this["aria-live"]=this.ariaLive)}render(){const e={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed};return t.x`
-      <div class=${d.e(e)}>
-        <pkt-icon
-          class="pkt-alert__icon"
-          name=${this.skin==="info"?"alert-information":`alert-${this.skin}`}
-        ></pkt-icon>
-
-        ${this.closeAlert?t.x`
-              <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>
-            `:t.E}
-        ${this.title?t.x`<div class="pkt-alert__title">${this.title}</div>`:t.E}
-
-        <div class="pkt-alert__text" ${c.n(this.defaultSlot)}></div>
-
-        ${this.date?t.x`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:t.E}
-      </div>
-    `}};i([t.n({type:Boolean,reflect:!1})],exports.PktAlert.prototype,"compact",2);i([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"title",2);i([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"skin",2);i([t.n({type:String})],exports.PktAlert.prototype,"ariaLive",2);i([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"aria-live",2);i([t.n({type:Boolean,reflect:!0})],exports.PktAlert.prototype,"closeAlert",2);i([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"date",2);i([k.r()],exports.PktAlert.prototype,"_isClosed",2);exports.PktAlert=i([t.t("pkt-alert")],exports.PktAlert);

package/dist/messagebox-DJzOyZwE.cjs

@@ -1,12 +0,0 @@
-"use strict";const e=require("./element-r-PeQ419.cjs"),b=require("./pkt-slot-controller-Oc32unDk.cjs"),p=require("./ref-BUWgvhgU.cjs"),k=require("./class-map-Dzci3Pfe.cjs"),d=require("./state-B77EXPZ9.cjs");require("./icon-DcJIqTIY.cjs");const u="pkt-messagebox",m=!0,g={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},h={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},f={default:{description:"Innholdet i meldingsboksen"}},c={name:u,"css-class":"pkt-messagebox",isElement:m,events:g,props:h,slots:f};var x=Object.defineProperty,v=Object.getOwnPropertyDescriptor,o=(i,t,n,l)=>{for(var s=l>1?void 0:l?v(t,n):t,r=i.length-1,a;r>=0;r--)(a=i[r])&&(s=(l?a(t,n,s):a(s))||s);return l&&s&&x(t,n,s),s};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.closable=c.props.closable.default,this.compact=c.props.compact.default,this.title="",this.skin=c.props.skin.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0}))},this.slotController=new b.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return e.x`<div class=${k.e(t)}>
-      ${this.closable?e.x`<div class="pkt-messagebox__close">
-            <button
-              @click=${this.close}
-              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
-            >
-              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
-            </button>
-          </div>`:e.E}
-      ${this.title?e.x`<div class="pkt-messagebox__title">${this.title}</div>`:e.E}
-      <div class="pkt-messagebox__text" ${p.n(this.defaultSlot)}></div>
-    </div>`}};o([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"closable",2);o([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"compact",2);o([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"title",2);o([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"skin",2);o([d.r()],exports.PktMessagebox.prototype,"_isClosed",2);exports.PktMessagebox=o([e.t("pkt-messagebox")],exports.PktMessagebox);