@oslokommune/punkt-elements 12.38.1 → 12.39.0

package/CHANGELOG.md

@@ -5,6 +5,41 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.39.0](https://github.com/oslokommune/punkt/compare/12.38.2...12.39.0) (2025-05-15)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Nye muligheter i Modal: Skuff og gjennomsiktig backdrop (Pluss animert åpning/lukking) (#2548). 
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [12.38.2](https://github.com/oslokommune/punkt/compare/12.38.1...12.38.2) (2025-05-14)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.38.1](https://github.com/oslokommune/punkt/compare/12.38.0...12.38.1) (2025-05-14)
 
 ### ⚠ BREAKING CHANGES

package/dist/{button-D1zx8gKd.js → button-BOSdkRWa.js}

@@ -95,13 +95,13 @@ s([
   a({ type: String })
 ], i.prototype, "variant", 2);
 s([
-  a({ type: String })
+  a({ type: String, reflect: !0 })
 ], i.prototype, "state", 2);
 s([
   a({ type: String, reflect: !0 })
 ], i.prototype, "type", 2);
 s([
-  a({ type: Boolean })
+  a({ type: Boolean, reflect: !0 })
 ], i.prototype, "isLoading", 2);
 s([
   a({ type: Boolean, reflect: !0 })

package/dist/{button-DEadihVm.cjs → button-DeAuj8qB.cjs}

@@ -9,4 +9,4 @@
         <span class="pkt-btn__text" ${d.n(this.defaultSlot)}></span>
         ${this.variant==="icons-right-and-left"?i.x`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`:i.E}
       </div>
-    `}updateElementClasses(){const t=new Set,s=this.getAttribute("class");t.add("pkt-btn"),s&&s.split(" ").forEach(n=>t.add(n)),this.size&&t.add(`pkt-btn--${this.size}`),this.skin&&t.add(`pkt-btn--${this.skin}`),this.variant&&t.add(`pkt-btn--${this.variant}`),this.color&&t.add(`pkt-btn--${this.color}`),this.isLoading&&t.add("pkt-btn--active"),this.state&&t.add(`pkt-btn--${this.state}`),this.disabled&&t.add("pkt-btn--disabled"),this.className=[...t].join(" ")}handleClick(t){if(this.disabled||this.isLoading){t.preventDefault(),t.stopImmediatePropagation();return}if(this.type==="submit"&&this.internals.form){this.internals.form.requestSubmit();return}if(this.type==="reset"&&this.internals.form){this.internals.form.reset();return}this.onClick&&typeof this.onClick=="function"&&this.onClick!==this.handleClick&&this.onClick(t),this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0,detail:{originalEvent:t}}))}handleKeydown(t){if(!(this.disabled||this.isLoading)&&(t.key==="Enter"||t.key===" ")){t.preventDefault();const s=t.target;s&&s.click()}}};exports.PktButton.formAssociated=!0;e([i.n({type:String})],exports.PktButton.prototype,"iconName",2);e([i.n({type:String})],exports.PktButton.prototype,"secondIconName",2);e([i.n({type:String})],exports.PktButton.prototype,"mode",2);e([i.n({type:String})],exports.PktButton.prototype,"size",2);e([i.n({type:String})],exports.PktButton.prototype,"color",2);e([i.n({type:String})],exports.PktButton.prototype,"skin",2);e([i.n({type:String})],exports.PktButton.prototype,"variant",2);e([i.n({type:String})],exports.PktButton.prototype,"state",2);e([i.n({type:String,reflect:!0})],exports.PktButton.prototype,"type",2);e([i.n({type:Boolean})],exports.PktButton.prototype,"isLoading",2);e([i.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"disabled",2);exports.PktButton=e([i.t("pkt-button")],exports.PktButton);
+    `}updateElementClasses(){const t=new Set,s=this.getAttribute("class");t.add("pkt-btn"),s&&s.split(" ").forEach(n=>t.add(n)),this.size&&t.add(`pkt-btn--${this.size}`),this.skin&&t.add(`pkt-btn--${this.skin}`),this.variant&&t.add(`pkt-btn--${this.variant}`),this.color&&t.add(`pkt-btn--${this.color}`),this.isLoading&&t.add("pkt-btn--active"),this.state&&t.add(`pkt-btn--${this.state}`),this.disabled&&t.add("pkt-btn--disabled"),this.className=[...t].join(" ")}handleClick(t){if(this.disabled||this.isLoading){t.preventDefault(),t.stopImmediatePropagation();return}if(this.type==="submit"&&this.internals.form){this.internals.form.requestSubmit();return}if(this.type==="reset"&&this.internals.form){this.internals.form.reset();return}this.onClick&&typeof this.onClick=="function"&&this.onClick!==this.handleClick&&this.onClick(t),this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0,detail:{originalEvent:t}}))}handleKeydown(t){if(!(this.disabled||this.isLoading)&&(t.key==="Enter"||t.key===" ")){t.preventDefault();const s=t.target;s&&s.click()}}};exports.PktButton.formAssociated=!0;e([i.n({type:String})],exports.PktButton.prototype,"iconName",2);e([i.n({type:String})],exports.PktButton.prototype,"secondIconName",2);e([i.n({type:String})],exports.PktButton.prototype,"mode",2);e([i.n({type:String})],exports.PktButton.prototype,"size",2);e([i.n({type:String})],exports.PktButton.prototype,"color",2);e([i.n({type:String})],exports.PktButton.prototype,"skin",2);e([i.n({type:String})],exports.PktButton.prototype,"variant",2);e([i.n({type:String,reflect:!0})],exports.PktButton.prototype,"state",2);e([i.n({type:String,reflect:!0})],exports.PktButton.prototype,"type",2);e([i.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"isLoading",2);e([i.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"disabled",2);exports.PktButton=e([i.t("pkt-button")],exports.PktButton);

package/dist/{consent-B4r94Z8d.cjs → consent-B3jbzwS_.cjs}

@@ -1,4 +1,4 @@
-"use strict";const s=require("./element-BSypUpzA.cjs");require("./button-DEadihVm.cjs");require("./icon-BnKGwYjj.cjs");const g={i18n:{nb:{contentPresentation:{title:"Oslo kommune bruker informasjonskapsler",description:["For at nettstedet skal fungere og være trygt, bruker Oslo kommune informasjonskapsler. Noen er teknisk nødvendige, mens andre sikrer ulik funksjonalitet.","Godtar du alle informasjonskapsler, tillater du også at vi samler inn data om statistikk og brukeradferd. Da hjelper du oss med å lage et bedre nettsted uten at du trenger å dele noe personlig informasjon med oss."],buttons:{accept:"Godta alle",reject:"Kun nødvendige",settings:"Innstillinger for informasjonskapsler"}},contentSettings:{title:"Innstillinger for informasjonskapsler",description:["Her kan du velge hvilke typer informasjonskapsler du vil tillate. Tillatelsen gjelder i 90 dager. Husk at nødvendige informasjonskapsler ikke kan velges bort.","Du kan når som helst endre innstillingene og finne mer informasjon nederst på nettstedet under «Innstillinger for informasjonskapsler» og «Personvern og informasjonskapsler»."],buttons:{back:"Tilbake",save:"Lagre innstillinger"}}},en:{contentPresentation:{title:"Before you visit Oslo kommune ...",description:["This website uses cookies to make improvements. In this context, we need your consent to measure the traffic on the website in relation to statistics and feedback.","To read more about what we use cookies for, go to our privacy declaration which you will find at the bottom of our websites."],buttons:{accept:"Yes, I accept",reject:"Only necessary",settings:"Go to settings"}},contentSettings:{title:"Her kan du aktivt velge mellom ulike informasjonskapsler",description:["For å lese mer om hva vi bruker informasjonskapsler til gå til vår personvernserklering som du finner på våre nettsider"],buttons:{back:"Back",save:"Save settings"}}}}},c=globalThis,d=c.__cookieEvents||{events:{},on(n,e){this.events[n]||(this.events[n]=[]),this.events[n].push(e)},off(n,e){this.events[n]&&(this.events[n]=this.events[n].filter(t=>t!==e))},once(n,e){const t=o=>{this.off(n,t),e(o)};this.on(n,t)},emit(n,e){this.events[n]&&this.events[n].forEach(t=>t(e))}};c.__cookieEvents=d;const k=d;var u=Object.defineProperty,p=Object.getOwnPropertyDescriptor,a=(n,e,t,o)=>{for(var i=o>1?void 0:o?p(e,t):e,r=n.length-1,l;r>=0;r--)(l=n[r])&&(i=(o?l(e,t,i):l(i))||i);return o&&i&&u(e,t,i),i};exports.PktConsent=class extends s.PktElement{constructor(){super(),this.hotjarId=null,this.googleAnalyticsId=null,this.triggerType="button",this.triggerText=null,this.i18nLanguage="nb"}connectedCallback(){super.connectedCallback(),this.triggerText=this.triggerText||g.i18n[this.i18nLanguage].contentPresentation.buttons.settings,this.googleAnalyticsId&&(window.googleAnalyticsId=this.googleAnalyticsId),this.hotjarId&&(window.hotjarId=this.hotjarId),k.on("CookieManager.setCookie",e=>{this.emitCookieConsents(e)})}returnJsonOrObject(e){let t;try{t=JSON.parse(e)}catch{t=e}return t}emitCookieConsents(e){const o=this.returnJsonOrObject(e.value).items.reduce((i,r)=>(i[r.name]=r.consent,i),{});this.dispatchEvent(new CustomEvent("toggle-consent",{detail:o,bubbles:!0,composed:!0}))}firstUpdated(e){if(!document.querySelector("#oslo-consent-script")&&window.location.hostname.toLowerCase().includes("oslo.kommune.no")){window.googleAnalyticsId=this.googleAnalyticsId,window.hotjarId=this.hotjarId;const t=document.createElement("script");t.src="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.js",t.id="oslo-consent-script",t.onload=()=>{this.triggerInit()},document.head.appendChild(t);const o=document.createElement("link");o.href="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.css",o.type="text/css",o.rel="stylesheet",o.id="oslo-consent-styles",document.head.appendChild(o)}}triggerInit(){window.document.dispatchEvent(new Event("DOMContentLoaded",{bubbles:!0,cancelable:!0})),window.cookieBanner.cookieConsent.validateConsentCookie().then(e=>{if(e){const o={value:window.cookieBanner.cookieConsent.getConsentCookie()};this.emitCookieConsents(o)}})}openModal(e){e.preventDefault(),window.cookieBanner.cookieConsent||this.triggerInit(),setTimeout(()=>window.cookieBanner.openCookieModal())}render(){return this.triggerType==="link"?s.x`<a href="#" class="pkt-link" @click=${this.openModal}>${this.triggerText}</a>`:this.triggerType==="footerlink"?s.x`<a href="#" class="pkt-footer__link" @click=${this.openModal}>
+"use strict";const s=require("./element-BSypUpzA.cjs");require("./button-DeAuj8qB.cjs");require("./icon-BnKGwYjj.cjs");const g={i18n:{nb:{contentPresentation:{title:"Oslo kommune bruker informasjonskapsler",description:["For at nettstedet skal fungere og være trygt, bruker Oslo kommune informasjonskapsler. Noen er teknisk nødvendige, mens andre sikrer ulik funksjonalitet.","Godtar du alle informasjonskapsler, tillater du også at vi samler inn data om statistikk og brukeradferd. Da hjelper du oss med å lage et bedre nettsted uten at du trenger å dele noe personlig informasjon med oss."],buttons:{accept:"Godta alle",reject:"Kun nødvendige",settings:"Innstillinger for informasjonskapsler"}},contentSettings:{title:"Innstillinger for informasjonskapsler",description:["Her kan du velge hvilke typer informasjonskapsler du vil tillate. Tillatelsen gjelder i 90 dager. Husk at nødvendige informasjonskapsler ikke kan velges bort.","Du kan når som helst endre innstillingene og finne mer informasjon nederst på nettstedet under «Innstillinger for informasjonskapsler» og «Personvern og informasjonskapsler»."],buttons:{back:"Tilbake",save:"Lagre innstillinger"}}},en:{contentPresentation:{title:"Before you visit Oslo kommune ...",description:["This website uses cookies to make improvements. In this context, we need your consent to measure the traffic on the website in relation to statistics and feedback.","To read more about what we use cookies for, go to our privacy declaration which you will find at the bottom of our websites."],buttons:{accept:"Yes, I accept",reject:"Only necessary",settings:"Go to settings"}},contentSettings:{title:"Her kan du aktivt velge mellom ulike informasjonskapsler",description:["For å lese mer om hva vi bruker informasjonskapsler til gå til vår personvernserklering som du finner på våre nettsider"],buttons:{back:"Back",save:"Save settings"}}}}},c=globalThis,d=c.__cookieEvents||{events:{},on(n,e){this.events[n]||(this.events[n]=[]),this.events[n].push(e)},off(n,e){this.events[n]&&(this.events[n]=this.events[n].filter(t=>t!==e))},once(n,e){const t=o=>{this.off(n,t),e(o)};this.on(n,t)},emit(n,e){this.events[n]&&this.events[n].forEach(t=>t(e))}};c.__cookieEvents=d;const k=d;var u=Object.defineProperty,p=Object.getOwnPropertyDescriptor,a=(n,e,t,o)=>{for(var i=o>1?void 0:o?p(e,t):e,r=n.length-1,l;r>=0;r--)(l=n[r])&&(i=(o?l(e,t,i):l(i))||i);return o&&i&&u(e,t,i),i};exports.PktConsent=class extends s.PktElement{constructor(){super(),this.hotjarId=null,this.googleAnalyticsId=null,this.triggerType="button",this.triggerText=null,this.i18nLanguage="nb"}connectedCallback(){super.connectedCallback(),this.triggerText=this.triggerText||g.i18n[this.i18nLanguage].contentPresentation.buttons.settings,this.googleAnalyticsId&&(window.googleAnalyticsId=this.googleAnalyticsId),this.hotjarId&&(window.hotjarId=this.hotjarId),k.on("CookieManager.setCookie",e=>{this.emitCookieConsents(e)})}returnJsonOrObject(e){let t;try{t=JSON.parse(e)}catch{t=e}return t}emitCookieConsents(e){const o=this.returnJsonOrObject(e.value).items.reduce((i,r)=>(i[r.name]=r.consent,i),{});this.dispatchEvent(new CustomEvent("toggle-consent",{detail:o,bubbles:!0,composed:!0}))}firstUpdated(e){if(!document.querySelector("#oslo-consent-script")&&window.location.hostname.toLowerCase().includes("oslo.kommune.no")){window.googleAnalyticsId=this.googleAnalyticsId,window.hotjarId=this.hotjarId;const t=document.createElement("script");t.src="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.js",t.id="oslo-consent-script",t.onload=()=>{this.triggerInit()},document.head.appendChild(t);const o=document.createElement("link");o.href="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.css",o.type="text/css",o.rel="stylesheet",o.id="oslo-consent-styles",document.head.appendChild(o)}}triggerInit(){window.document.dispatchEvent(new Event("DOMContentLoaded",{bubbles:!0,cancelable:!0})),window.cookieBanner.cookieConsent.validateConsentCookie().then(e=>{if(e){const o={value:window.cookieBanner.cookieConsent.getConsentCookie()};this.emitCookieConsents(o)}})}openModal(e){e.preventDefault(),window.cookieBanner.cookieConsent||this.triggerInit(),setTimeout(()=>window.cookieBanner.openCookieModal())}render(){return this.triggerType==="link"?s.x`<a href="#" class="pkt-link" @click=${this.openModal}>${this.triggerText}</a>`:this.triggerType==="footerlink"?s.x`<a href="#" class="pkt-footer__link" @click=${this.openModal}>
         <pkt-icon name="chevron-right" class="pkt-footer__link-icon"></pkt-icon>
         ${this.triggerText}
       </a>`:this.triggerType==="icon"?s.x`<pkt-button

package/dist/{consent-DDcfVjC6.js → consent-B4vlcsFJ.js}

@@ -1,5 +1,5 @@
 import { P as k, x as l, n as a, a as u } from "./element-DjjF_tEh.js";
-import "./button-D1zx8gKd.js";
+import "./button-BOSdkRWa.js";
 import "./icon-Beoxup8E.js";
 const h = {
   i18n: {

package/dist/index.d.ts

@@ -266,6 +266,9 @@ declare interface IPktModal {
     closeOnBackdropClick?: boolean;
     closeButtonSkin?: 'blue' | 'yellow-filled';
     size?: TPktSize;
+    variant?: 'dialog' | 'drawer';
+    drawerPosition?: 'left' | 'right';
+    transparentBackdrop?: boolean;
 }
 
 export declare interface IPktProgressbar {
@@ -948,6 +951,9 @@ export declare class PktModal extends PktElement implements IPktModal {
     closeOnBackdropClick?: boolean;
     closeButtonSkin?: 'blue' | 'yellow-filled';
     size?: TPktSize;
+    variant?: 'dialog' | 'drawer';
+    drawerPosition?: 'left' | 'right';
+    transparentBackdrop?: boolean;
     defaultSlot: Ref<HTMLElement>;
     dialogRef: Ref<HTMLDialogElement>;
     _isOpen: boolean;

package/dist/{modal-sbobjlRZ.js → modal-8bEB_CoY.js}

@@ -1,10 +1,10 @@
 import { e as c } from "./class-map-KyMqi0fa.js";
-import { P as k, E as h, x as p, n as d, a as g } from "./element-DjjF_tEh.js";
+import { P as f, E as u, x as p, n, a as g } from "./element-DjjF_tEh.js";
 import { r as v } from "./state-BtbpSrdV.js";
 import { P as _ } from "./pkt-slot-controller-DtDaD9q_.js";
-import { e as m, n as f } from "./ref-iIffqQAI.js";
+import { e as m, n as k } from "./ref-iIffqQAI.js";
 import "./icon-Beoxup8E.js";
-const b = {
+const y = {
   hideCloseButton: {
     default: !1
   },
@@ -14,17 +14,17 @@ const b = {
   size: {
     default: "medium"
   }
-}, u = {
-  props: b
+}, h = {
+  props: y
 };
-var y = Object.defineProperty, C = Object.getOwnPropertyDescriptor, n = (t, e, o, i) => {
-  for (var s = i > 1 ? void 0 : i ? C(e, o) : e, r = t.length - 1, a; r >= 0; r--)
-    (a = t[r]) && (s = (i ? a(e, o, s) : a(s)) || s);
-  return i && s && y(e, o, s), s;
+var w = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (t, e, o, i) => {
+  for (var l = i > 1 ? void 0 : i ? b(e, o) : e, r = t.length - 1, d; r >= 0; r--)
+    (d = t[r]) && (l = (i ? d(e, o, l) : d(l)) || l);
+  return i && l && w(e, o, l), l;
 };
-let l = class extends k {
+let s = 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) => {
+    super(), this.headingText = "", this.removePadding = !1, this.hideCloseButton = h.props.hideCloseButton.default, this.closeOnBackdropClick = h.props.closeOnBackdropClick.default, this.closeButtonSkin = "blue", this.size = h.props.size.default, this.variant = "dialog", this.drawerPosition = "right", this.transparentBackdrop = !1, this.defaultSlot = m(), this.dialogRef = m(), this._isOpen = !1, this.close = (t, e = !1) => {
       var i;
       if (!this._isOpen) return;
       this._isOpen = !1, document.body.classList.remove("pkt-modal--open");
@@ -45,7 +45,7 @@ let l = class extends k {
     }, this.slotController = new _(this, this.defaultSlot), this._isOpen = !1;
   }
   async connectedCallback() {
-    super.connectedCallback(), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleBackdropClick);
+    super.connectedCallback(), document.addEventListener("keydown", this.handleKeyDown.bind(this)), document.addEventListener("click", this.handleBackdropClick.bind(this));
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("click", this.handleBackdropClick);
@@ -60,8 +60,8 @@ let l = class extends k {
     t.key === "Escape" && this.close(t);
   }
   handleBackdropClick(t) {
-    var e;
-    this.closeOnBackdropClick && t.target === ((e = this.dialogRef) == null ? void 0 : e.value) && this.close(t);
+    var e, o;
+    console.log("Event target:", t.target, (e = this.dialogRef) == null ? void 0 : e.value), this.closeOnBackdropClick && t.target === ((o = this.dialogRef) == null ? void 0 : o.value) && this.close(t);
   }
   isElementInViewport(t) {
     const e = t.getBoundingClientRect();
@@ -72,14 +72,18 @@ let l = class extends k {
       "pkt-modal": !0,
       "pkt-modal--removePadding": this.removePadding ?? !1,
       "pkt-modal--noHeadingText": this.headingText === "" || this.headingText === void 0,
-      [`pkt-modal--${this.size}`]: this.size !== void 0
+      "pkt-modal--noShadow": this.closeButtonSkin === "yellow-filled",
+      "pkt-modal--transparentBackdrop": this.transparentBackdrop ?? !1,
+      [`pkt-modal--${this.size}`]: this.size !== void 0,
+      [`pkt-modal__${this.variant}`]: this.variant !== void 0,
+      [`pkt-modal__drawer--${this.drawerPosition}`]: this.variant === "drawer"
     }, e = {
       "pkt-modal__headingText": !0,
       "pkt-txt-24": !0
     }, o = {
       "pkt-modal__content": !0,
       "pkt-txt-18-light": !0
-    }, i = this.closeButtonSkin === "blue", s = {
+    }, i = this.closeButtonSkin === "blue", l = {
       "pkt-modal__closeButton": !0,
       [`pkt-modal__closeButton--${this.closeButtonSkin}`]: !0
     }, r = {
@@ -91,62 +95,74 @@ let l = class extends k {
     return p`
       <dialog
         class=${c(t)}
-        ${f(this.dialogRef)}
+        ${k(this.dialogRef)}
         aria-labelledby="pkt-modal__headingText"
         aria-describedby="pkt-modal__content"
-        @close=${(a) => this.close(a, !0)}
+        @close=${(d) => this.close(d, !0)}
       >
-        <div class="pkt-modal__header">
-          <div class="pkt-modal__header-background"></div>
-          ${this.headingText ? p`<h1 id="pkt-modal__headingText" class=${c(e)}>
-                ${this.headingText}
-              </h1>` : h}
-          ${this.hideCloseButton ? h : p`<div class="${c(s)}">
-                <pkt-button
-                  @click=${(a) => this.close(a)}
-                  class=${c(r)}
-                  aria-label="close"
-                  iconname="close"
-                  variant="icon-only"
-                >
-                </pkt-button>
-              </div>`}
-        </div>
-        <div class="pkt-modal__container">
-          <div
-            id="pkt-modal__content"
-            class=${c(o)}
-            ${f(this.defaultSlot)}
-          ></div>
+        <div class="pkt-modal__wrapper">
+          ${this.headingText || !this.hideCloseButton ? p`<div class="pkt-modal__header">
+                <div class="pkt-modal__header-background"></div>
+                ${this.headingText ? p`<h1 id="pkt-modal__headingText" class=${c(e)}>
+                      ${this.headingText}
+                    </h1>` : p`<div class="pkt-modal__headingText"></div>`}
+                ${this.hideCloseButton ? u : p`<div class="${c(l)}">
+                      <pkt-button
+                        @click=${(d) => this.close(d)}
+                        class=${c(r)}
+                        aria-label="close"
+                        iconname="close"
+                        variant="icon-only"
+                      >
+                        Lukk
+                      </pkt-button>
+                    </div>`}
+              </div>` : u}
+          <div class="pkt-modal__container">
+            <div
+              id="pkt-modal__content"
+              class=${c(o)}
+              ${k(this.defaultSlot)}
+            ></div>
+          </div>
         </div>
       </dialog>
     `;
   }
 };
-n([
-  d({ type: String, reflect: !0 })
-], l.prototype, "headingText", 2);
-n([
-  d({ type: Boolean, reflect: !0 })
-], l.prototype, "removePadding", 2);
-n([
-  d({ type: Boolean, reflect: !0 })
-], l.prototype, "hideCloseButton", 2);
-n([
-  d({ type: Boolean, reflect: !0 })
-], l.prototype, "closeOnBackdropClick", 2);
-n([
-  d({ type: String, reflect: !0 })
-], l.prototype, "closeButtonSkin", 2);
-n([
-  d({ type: String, reflect: !0 })
-], l.prototype, "size", 2);
-n([
+a([
+  n({ type: String })
+], s.prototype, "headingText", 2);
+a([
+  n({ type: Boolean })
+], s.prototype, "removePadding", 2);
+a([
+  n({ type: Boolean })
+], s.prototype, "hideCloseButton", 2);
+a([
+  n({ type: Boolean })
+], s.prototype, "closeOnBackdropClick", 2);
+a([
+  n({ type: String })
+], s.prototype, "closeButtonSkin", 2);
+a([
+  n({ type: String })
+], s.prototype, "size", 2);
+a([
+  n({ type: String })
+], s.prototype, "variant", 2);
+a([
+  n({ type: String })
+], s.prototype, "drawerPosition", 2);
+a([
+  n({ type: Boolean })
+], s.prototype, "transparentBackdrop", 2);
+a([
   v()
-], l.prototype, "_isOpen", 2);
-l = n([
+], s.prototype, "_isOpen", 2);
+s = a([
   g("pkt-modal")
-], l);
+], s);
 export {
-  l as P
+  s as P
 };

package/dist/modal-B6VJdIeY.cjs

@@ -0,0 +1,36 @@
+"use strict";const d=require("./class-map-DCyaICmy.cjs"),i=require("./element-BSypUpzA.cjs"),u=require("./state-B5KCNjEd.cjs"),k=require("./pkt-slot-controller-Da-RgXfS.cjs"),r=require("./ref-BvbyvXRH.cjs");require("./icon-BnKGwYjj.cjs");const m={hideCloseButton:{default:!1},closeOnBackdropClick:{default:!1},size:{default:"medium"}},h={props:m};var v=Object.defineProperty,g=Object.getOwnPropertyDescriptor,l=(c,t,e,o)=>{for(var s=o>1?void 0:o?g(t,e):t,n=c.length-1,a;n>=0;n--)(a=c[n])&&(s=(o?a(t,e,s):a(s))||s);return o&&s&&v(t,e,s),s};exports.PktModal=class extends i.PktElement{constructor(){super(),this.headingText="",this.removePadding=!1,this.hideCloseButton=h.props.hideCloseButton.default,this.closeOnBackdropClick=h.props.closeOnBackdropClick.default,this.closeButtonSkin="blue",this.size=h.props.size.default,this.variant="dialog",this.drawerPosition="right",this.transparentBackdrop=!1,this.defaultSlot=r.e(),this.dialogRef=r.e(),this._isOpen=!1,this.close=(t,e=!1)=>{var s;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()},this.showModal=(t=null)=>{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())}),e&&document.body.classList.add("pkt-modal--open"),this.dispatchEvent(new CustomEvent("showModal",{detail:{origin:t},bubbles:!0,composed:!0})),this.requestUpdate()},this.slotController=new k.PktSlotController(this,this.defaultSlot),this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown.bind(this)),document.addEventListener("click",this.handleBackdropClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("click",this.handleBackdropClick)}async firstUpdated(t){super.firstUpdated(t),this.dialogRef.value&&!window.HTMLDialogElement&&!this.dialogRef.value.showModal&&("document"in window&&"createElement"in document&&(await Promise.resolve().then(()=>require("./dialog-polyfill.esm-CPKZe7AL.cjs")).then(o=>o.default)).registerDialog(this.dialogRef.value),this.dialogRef.value.addEventListener("close",()=>{this.close(new Event("close"),!0)}))}handleKeyDown(t){t.key==="Escape"&&this.close(t)}handleBackdropClick(t){var e,o;console.log("Event target:",t.target,(e=this.dialogRef)==null?void 0:e.value),this.closeOnBackdropClick&&t.target===((o=this.dialogRef)==null?void 0:o.value)&&this.close(t)}isElementInViewport(t){const e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){const t={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===""||this.headingText===void 0,"pkt-modal--noShadow":this.closeButtonSkin==="yellow-filled","pkt-modal--transparentBackdrop":this.transparentBackdrop??!1,[`pkt-modal--${this.size}`]:this.size!==void 0,[`pkt-modal__${this.variant}`]:this.variant!==void 0,[`pkt-modal__drawer--${this.drawerPosition}`]:this.variant==="drawer"},e={"pkt-modal__headingText":!0,"pkt-txt-24":!0},o={"pkt-modal__content":!0,"pkt-txt-18-light":!0},s=this.closeButtonSkin==="blue",n={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0},a={"pkt-btn":!0,[`pkt-btn--${s?"tertiary":"primary"}`]:!0,"pkt-btn--icon-only":!0,"pkt-btn--medium":!0};return i.x`
+      <dialog
+        class=${d.e(t)}
+        ${r.n(this.dialogRef)}
+        aria-labelledby="pkt-modal__headingText"
+        aria-describedby="pkt-modal__content"
+        @close=${p=>this.close(p,!0)}
+      >
+        <div class="pkt-modal__wrapper">
+          ${this.headingText||!this.hideCloseButton?i.x`<div class="pkt-modal__header">
+                <div class="pkt-modal__header-background"></div>
+                ${this.headingText?i.x`<h1 id="pkt-modal__headingText" class=${d.e(e)}>
+                      ${this.headingText}
+                    </h1>`:i.x`<div class="pkt-modal__headingText"></div>`}
+                ${this.hideCloseButton?i.E:i.x`<div class="${d.e(n)}">
+                      <pkt-button
+                        @click=${p=>this.close(p)}
+                        class=${d.e(a)}
+                        aria-label="close"
+                        iconname="close"
+                        variant="icon-only"
+                      >
+                        Lukk
+                      </pkt-button>
+                    </div>`}
+              </div>`:i.E}
+          <div class="pkt-modal__container">
+            <div
+              id="pkt-modal__content"
+              class=${d.e(o)}
+              ${r.n(this.defaultSlot)}
+            ></div>
+          </div>
+        </div>
+      </dialog>
+    `}};l([i.n({type:String})],exports.PktModal.prototype,"headingText",2);l([i.n({type:Boolean})],exports.PktModal.prototype,"removePadding",2);l([i.n({type:Boolean})],exports.PktModal.prototype,"hideCloseButton",2);l([i.n({type:Boolean})],exports.PktModal.prototype,"closeOnBackdropClick",2);l([i.n({type:String})],exports.PktModal.prototype,"closeButtonSkin",2);l([i.n({type:String})],exports.PktModal.prototype,"size",2);l([i.n({type:String})],exports.PktModal.prototype,"variant",2);l([i.n({type:String})],exports.PktModal.prototype,"drawerPosition",2);l([i.n({type:Boolean})],exports.PktModal.prototype,"transparentBackdrop",2);l([u.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=l([i.t("pkt-modal")],exports.PktModal);

package/dist/pkt-button.cjs

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

package/dist/pkt-button.js

@@ -1,4 +1,4 @@
-import { P as t } from "./button-D1zx8gKd.js";
+import { P as t } from "./button-BOSdkRWa.js";
 const a = t;
 export {
   t as PktButton,

package/dist/pkt-consent.cjs

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

package/dist/pkt-consent.js

@@ -1,4 +1,4 @@
-import { P as t } from "./consent-DDcfVjC6.js";
+import { P as t } from "./consent-B4vlcsFJ.js";
 const o = t;
 export {
   t as PktConsent,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-C2EPmB0W.cjs"),l=require("./accordionitem-RFwXQC_0.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-DEadihVm.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-Di1MQneh.cjs"),g=require("./combobox-yUrUarU_.cjs"),h=require("./consent-B4r94Z8d.cjs"),f=require("./checkbox-zqd3KVfz.cjs"),t=require("./element-BSypUpzA.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-BvbyvXRH.cjs"),O=require("./class-map-DCyaICmy.cjs"),j=require("./datepicker-CH5ZmFhf.cjs"),q=require("./helptext-bMgnhZ1R.cjs"),x=require("./heading-BnJhJDMD.cjs"),C=require("./icon-BnKGwYjj.cjs"),v=require("./input-wrapper-B-f_SotM.cjs"),S=require("./link-nesPZCIx.cjs"),$=require("./linkcard-s9yoOq90.cjs"),L=require("./loader-Bk4XPiOY.cjs"),_=require("./messagebox-B0kgftoP.cjs"),A=require("./modal-DZY4gZCQ.cjs"),B=require("./progressbar-DiRfScnB.cjs"),p=require("./radiobutton-CI2xaqAB.cjs"),T=require("./tag-B9kFYxHg.cjs"),I=require("./textarea-DxbylapQ.cjs"),M=require("./textinput-B__c4c1z.cjs"),R=require("./select-BCL790jM.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-C2EPmB0W.cjs"),l=require("./accordionitem-RFwXQC_0.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-DeAuj8qB.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-Di1MQneh.cjs"),g=require("./combobox-yUrUarU_.cjs"),h=require("./consent-B3jbzwS_.cjs"),f=require("./checkbox-zqd3KVfz.cjs"),t=require("./element-BSypUpzA.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-BvbyvXRH.cjs"),O=require("./class-map-DCyaICmy.cjs"),j=require("./datepicker-CH5ZmFhf.cjs"),q=require("./helptext-bMgnhZ1R.cjs"),x=require("./heading-BnJhJDMD.cjs"),C=require("./icon-BnKGwYjj.cjs"),v=require("./input-wrapper-B-f_SotM.cjs"),S=require("./link-nesPZCIx.cjs"),$=require("./linkcard-s9yoOq90.cjs"),L=require("./loader-Bk4XPiOY.cjs"),_=require("./messagebox-B0kgftoP.cjs"),A=require("./modal-B6VJdIeY.cjs"),B=require("./progressbar-DiRfScnB.cjs"),p=require("./radiobutton-CI2xaqAB.cjs"),T=require("./tag-B9kFYxHg.cjs"),I=require("./textarea-DxbylapQ.cjs"),M=require("./textinput-B__c4c1z.cjs"),R=require("./select-BCL790jM.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.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="${O.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -1,12 +1,12 @@
 import { P as A } from "./alert-C33z1kBf.js";
 import { P as B, a as E } from "./accordionitem-vmwqD9rr.js";
 import { P as O } from "./backlink-hvyJmwrO.js";
-import { P as T } from "./button-D1zx8gKd.js";
+import { P as T } from "./button-BOSdkRWa.js";
 import { c as f } from "./calendar-KDcOWD6V.js";
 import { P as D } from "./calendar-KDcOWD6V.js";
 import { P as G } from "./card-CZG7XGlj.js";
 import { P as K } from "./combobox-B6x7Qukm.js";
-import { P as U } from "./consent-DDcfVjC6.js";
+import { P as U } from "./consent-B4vlcsFJ.js";
 import { P as q } from "./checkbox-Ds1FrhqK.js";
 import { P as k, t as h, x as P, n, a as c } from "./element-DjjF_tEh.js";
 import { P as x } from "./pkt-slot-controller-DtDaD9q_.js";
@@ -21,7 +21,7 @@ import { P as ot } from "./link-DCYJhFKJ.js";
 import { P as at } from "./linkcard-Bt-Qa_SP.js";
 import { P as it } from "./loader-C9EtX_mK.js";
 import { P as lt } from "./messagebox-DZDP8XZt.js";
-import { P as mt } from "./modal-sbobjlRZ.js";
+import { P as mt } from "./modal-8bEB_CoY.js";
 import { P as ft } from "./progressbar-BKt_aj7f.js";
 import { P as ht, P as ct } from "./radiobutton-CYJawqxD.js";
 import { P as ut } from "./tag-Cu8afZy8.js";

package/dist/pkt-modal.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./modal-DZY4gZCQ.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-B6VJdIeY.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-sbobjlRZ.js";
+import { P as a } from "./modal-8bEB_CoY.js";
 const t = a;
 export {
   a as PktModal,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.38.1",
+  "version": "12.39.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.37.0",
-    "@oslokommune/punkt-css": "^12.38.0",
+    "@oslokommune/punkt-css": "^12.39.0",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.18",
@@ -59,5 +59,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "bbffeef32589486551e5e1eaf611c6740adc85d7"
+  "gitHead": "ddb0e674ed86b95519a7a40e5785c05b85047504"
 }

package/src/components/button/button.ts

@@ -66,9 +66,9 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
   @property({ type: String }) color?: TPktButtonColor
   @property({ type: String }) skin: TPktButtonSkin = 'primary'
   @property({ type: String }) variant: TPktButtonVariant = 'label-only'
-  @property({ type: String }) state?: TPktButtonState = 'normal'
+  @property({ type: String, reflect: true }) state?: TPktButtonState = 'normal'
   @property({ type: String, reflect: true }) type: TPktButtonType = 'button'
-  @property({ type: Boolean }) isLoading: Booleanish = false
+  @property({ type: Boolean, reflect: true }) isLoading: Booleanish = false
   @property({ type: Boolean, reflect: true }) disabled: Booleanish = false
 
   // Lifecycle

package/src/components/modal/modal.ts

@@ -16,19 +16,25 @@ export interface IPktModal {
   closeOnBackdropClick?: boolean
   closeButtonSkin?: 'blue' | 'yellow-filled'
   size?: TPktSize
+  variant?: 'dialog' | 'drawer'
+  drawerPosition?: 'left' | 'right'
+  transparentBackdrop?: boolean
 }
 
 @customElement('pkt-modal')
 export class PktModal extends PktElement implements IPktModal {
   // Public properties"
-  @property({ type: String, reflect: true }) headingText?: string = ''
-  @property({ type: Boolean, reflect: true }) removePadding?: boolean = false
-  @property({ type: Boolean, reflect: true }) hideCloseButton?: boolean =
-    specs.props.hideCloseButton.default
-  @property({ type: Boolean, reflect: true })
+  @property({ type: String }) headingText?: string = ''
+  @property({ type: Boolean }) removePadding?: boolean = false
+  @property({ type: Boolean }) hideCloseButton?: boolean = specs.props.hideCloseButton.default
+  @property({ type: Boolean })
   closeOnBackdropClick?: boolean = specs.props.closeOnBackdropClick.default
-  @property({ type: String, reflect: true }) closeButtonSkin?: 'blue' | 'yellow-filled' = 'blue'
-  @property({ type: String, reflect: true }) size?: TPktSize = specs.props.size.default as TPktSize
+  @property({ type: String }) closeButtonSkin?: 'blue' | 'yellow-filled' = 'blue'
+  @property({ type: String }) size?: TPktSize = specs.props.size.default as TPktSize
+  @property({ type: String }) variant?: 'dialog' | 'drawer' = 'dialog'
+  @property({ type: String }) drawerPosition?: 'left' | 'right' = 'right'
+  @property({ type: Boolean }) transparentBackdrop?: boolean = false
+
   defaultSlot: Ref<HTMLElement> = createRef()
   dialogRef: Ref<HTMLDialogElement> = createRef()
 
@@ -42,8 +48,8 @@ export class PktModal extends PktElement implements IPktModal {
 
   async connectedCallback(): Promise<void> {
     super.connectedCallback()
-    document.addEventListener('keydown', this.handleKeyDown)
-    document.addEventListener('click', this.handleBackdropClick)
+    document.addEventListener('keydown', this.handleKeyDown.bind(this))
+    document.addEventListener('click', this.handleBackdropClick.bind(this))
   }
 
   disconnectedCallback(): void {
@@ -73,6 +79,7 @@ export class PktModal extends PktElement implements IPktModal {
   }
 
   private handleBackdropClick(event: MouseEvent) {
+    console.log('Event target:', event.target, this.dialogRef?.value)
     if (this.closeOnBackdropClick && event.target === this.dialogRef?.value) {
       this.close(event)
     }
@@ -135,7 +142,11 @@ export class PktModal extends PktElement implements IPktModal {
       'pkt-modal': true,
       'pkt-modal--removePadding': this.removePadding ?? false,
       'pkt-modal--noHeadingText': this.headingText === '' || this.headingText === undefined,
+      'pkt-modal--noShadow': this.closeButtonSkin === 'yellow-filled',
+      'pkt-modal--transparentBackdrop': this.transparentBackdrop ?? false,
       [`pkt-modal--${this.size}`]: this.size !== undefined,
+      [`pkt-modal__${this.variant}`]: this.variant !== undefined,
+      [`pkt-modal__drawer--${this.drawerPosition}`]: this.variant === 'drawer',
     }
 
     const headingClasses = {
@@ -169,32 +180,37 @@ export class PktModal extends PktElement implements IPktModal {
         aria-describedby="pkt-modal__content"
         @close=${(event: Event) => this.close(event, true)}
       >
-        <div class="pkt-modal__header">
-          <div class="pkt-modal__header-background"></div>
-          ${this.headingText
-            ? html`<h1 id="pkt-modal__headingText" class=${classMap(headingClasses)}>
-                ${this.headingText}
-              </h1>`
-            : nothing}
-          ${!this.hideCloseButton
-            ? html`<div class="${classMap(closeButtonClasses)}">
-                <pkt-button
-                  @click=${(event: Event) => this.close(event)}
-                  class=${classMap(buttonClasses)}
-                  aria-label="close"
-                  iconname="close"
-                  variant="icon-only"
-                >
-                </pkt-button>
+        <div class="pkt-modal__wrapper">
+          ${this.headingText || !this.hideCloseButton
+            ? html`<div class="pkt-modal__header">
+                <div class="pkt-modal__header-background"></div>
+                ${this.headingText
+                  ? html`<h1 id="pkt-modal__headingText" class=${classMap(headingClasses)}>
+                      ${this.headingText}
+                    </h1>`
+                  : html`<div class="pkt-modal__headingText"></div>`}
+                ${!this.hideCloseButton
+                  ? html`<div class="${classMap(closeButtonClasses)}">
+                      <pkt-button
+                        @click=${(event: Event) => this.close(event)}
+                        class=${classMap(buttonClasses)}
+                        aria-label="close"
+                        iconname="close"
+                        variant="icon-only"
+                      >
+                        Lukk
+                      </pkt-button>
+                    </div>`
+                  : nothing}
               </div>`
             : nothing}
-        </div>
-        <div class="pkt-modal__container">
-          <div
-            id="pkt-modal__content"
-            class=${classMap(contentClasses)}
-            ${ref(this.defaultSlot)}
-          ></div>
+          <div class="pkt-modal__container">
+            <div
+              id="pkt-modal__content"
+              class=${classMap(contentClasses)}
+              ${ref(this.defaultSlot)}
+            ></div>
+          </div>
         </div>
       </dialog>
     `

package/dist/modal-DZY4gZCQ.cjs

@@ -1,33 +0,0 @@
-"use strict";const d=require("./class-map-DCyaICmy.cjs"),i=require("./element-BSypUpzA.cjs"),h=require("./state-B5KCNjEd.cjs"),k=require("./pkt-slot-controller-Da-RgXfS.cjs"),r=require("./ref-BvbyvXRH.cjs");require("./icon-BnKGwYjj.cjs");const m={hideCloseButton:{default:!1},closeOnBackdropClick:{default:!1},size:{default:"medium"}},p={props:m};var f=Object.defineProperty,g=Object.getOwnPropertyDescriptor,l=(c,e,t,o)=>{for(var s=o>1?void 0:o?g(e,t):e,n=c.length-1,a;n>=0;n--)(a=c[n])&&(s=(o?a(e,t,s):a(s))||s);return o&&s&&f(e,t,s),s};exports.PktModal=class extends i.PktElement{constructor(){super(),this.headingText="",this.removePadding=!1,this.hideCloseButton=p.props.hideCloseButton.default,this.closeOnBackdropClick=p.props.closeOnBackdropClick.default,this.closeButtonSkin="blue",this.size=p.props.size.default,this.defaultSlot=r.e(),this.dialogRef=r.e(),this._isOpen=!1,this.close=(e,t=!1)=>{var s;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:e},bubbles:!0,composed:!0})),t||(s=this.dialogRef.value)==null||s.close(),this.requestUpdate()},this.showModal=(e=null)=>{var o;this._isOpen=!0,(o=this.dialogRef.value)==null||o.showModal();const t=document.querySelector(".pkt-modal");requestAnimationFrame(()=>{var s;this.dialogRef.value&&((s=this.dialogRef.value)==null||s.focus())}),t&&document.body.classList.add("pkt-modal--open"),this.dispatchEvent(new CustomEvent("showModal",{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this.slotController=new k.PktSlotController(this,this.defaultSlot),this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleBackdropClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("click",this.handleBackdropClick)}async firstUpdated(e){super.firstUpdated(e),this.dialogRef.value&&!window.HTMLDialogElement&&!this.dialogRef.value.showModal&&("document"in window&&"createElement"in document&&(await Promise.resolve().then(()=>require("./dialog-polyfill.esm-CPKZe7AL.cjs")).then(o=>o.default)).registerDialog(this.dialogRef.value),this.dialogRef.value.addEventListener("close",()=>{this.close(new Event("close"),!0)}))}handleKeyDown(e){e.key==="Escape"&&this.close(e)}handleBackdropClick(e){var t;this.closeOnBackdropClick&&e.target===((t=this.dialogRef)==null?void 0:t.value)&&this.close(e)}isElementInViewport(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){const e={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===""||this.headingText===void 0,[`pkt-modal--${this.size}`]:this.size!==void 0},t={"pkt-modal__headingText":!0,"pkt-txt-24":!0},o={"pkt-modal__content":!0,"pkt-txt-18-light":!0},s=this.closeButtonSkin==="blue",n={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0},a={"pkt-btn":!0,[`pkt-btn--${s?"tertiary":"primary"}`]:!0,"pkt-btn--icon-only":!0,"pkt-btn--medium":!0};return i.x`
-      <dialog
-        class=${d.e(e)}
-        ${r.n(this.dialogRef)}
-        aria-labelledby="pkt-modal__headingText"
-        aria-describedby="pkt-modal__content"
-        @close=${u=>this.close(u,!0)}
-      >
-        <div class="pkt-modal__header">
-          <div class="pkt-modal__header-background"></div>
-          ${this.headingText?i.x`<h1 id="pkt-modal__headingText" class=${d.e(t)}>
-                ${this.headingText}
-              </h1>`:i.E}
-          ${this.hideCloseButton?i.E:i.x`<div class="${d.e(n)}">
-                <pkt-button
-                  @click=${u=>this.close(u)}
-                  class=${d.e(a)}
-                  aria-label="close"
-                  iconname="close"
-                  variant="icon-only"
-                >
-                </pkt-button>
-              </div>`}
-        </div>
-        <div class="pkt-modal__container">
-          <div
-            id="pkt-modal__content"
-            class=${d.e(o)}
-            ${r.n(this.defaultSlot)}
-          ></div>
-        </div>
-      </dialog>
-    `}};l([i.n({type:String,reflect:!0})],exports.PktModal.prototype,"headingText",2);l([i.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"removePadding",2);l([i.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"hideCloseButton",2);l([i.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"closeOnBackdropClick",2);l([i.n({type:String,reflect:!0})],exports.PktModal.prototype,"closeButtonSkin",2);l([i.n({type:String,reflect:!0})],exports.PktModal.prototype,"size",2);l([h.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=l([i.t("pkt-modal")],exports.PktModal);