@oslokommune/punkt-elements 12.38.2 → 12.39.1

package/CHANGELOG.md

@@ -5,6 +5,24 @@ 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

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-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-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-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

@@ -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.2",
+  "version": "12.39.1",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -31,8 +31,8 @@
     "urlpattern-polyfill": "^10.0.0"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^12.37.0",
-    "@oslokommune/punkt-css": "^12.38.2",
+    "@oslokommune/punkt-assets": "^12.39.1",
+    "@oslokommune/punkt-css": "^12.39.1",
     "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": "8fbbad35ae8acad17550674f96d23f8b77044c8d"
+  "gitHead": "f00768b66e00983a704053c635fefa6b717889ee"
 }

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);