@oslokommune/punkt-elements 16.2.0 → 16.4.0

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.3.0](https://github.com/oslokommune/punkt/compare/16.2.0...16.3.0) (2026-03-24)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.1.0](https://github.com/oslokommune/punkt/compare/16.0.5...16.1.0) (2026-03-18)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -421,6 +421,7 @@ declare interface IPktMessagebox {
 }
 
 declare interface IPktModal {
+    open?: boolean;
     headingText?: string;
     removePadding?: boolean;
     hideCloseButton?: boolean;
@@ -1439,6 +1440,7 @@ export declare class PktMessagebox extends PktElementWithSlot implements IPktMes
 }
 
 export declare class PktModal extends PktElementWithSlot implements IPktModal {
+    open?: boolean;
     headingText?: string;
     removePadding?: boolean;
     hideCloseButton?: boolean;
@@ -1453,6 +1455,7 @@ export declare class PktModal extends PktElementWithSlot implements IPktModal {
     constructor();
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
     protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
     private handleKeyDown;
     private handleBackdropClick;

package/dist/{modal-p1rvuP8e.js → modal-D3u6ueP5.js}

@@ -1,35 +1,30 @@
-import { e as c } from "./class-map-3ADKve8g.js";
-import { A as u, b as r, n as l, t as m } from "./element-CV9utnHJ.js";
+import { e as p } from "./class-map-3ADKve8g.js";
+import { A as u, b as r, n, t as m } from "./element-CV9utnHJ.js";
 import { r as k } from "./state-l4hGZdFJ.js";
-import { P as v, s as f } from "./element-with-slot-1djk8KXi.js";
+import { P as f, s as v } from "./element-with-slot-1djk8KXi.js";
 import { e as g, n as _ } from "./ref-DBGHvw2G.js";
 import "./icon-D0IQAVwS.js";
 const y = { hideCloseButton: { default: !1 }, closeOnBackdropClick: { default: !1 }, size: { default: "medium" } }, h = {
   props: y
 };
-var w = Object.defineProperty, B = Object.getOwnPropertyDescriptor, a = (e, t, o, i) => {
-  for (var n = i > 1 ? void 0 : i ? B(t, o) : t, d = e.length - 1, p; d >= 0; d--)
-    (p = e[d]) && (n = (i ? p(t, o, n) : p(n)) || n);
-  return i && n && w(t, o, n), n;
+var w = Object.defineProperty, B = Object.getOwnPropertyDescriptor, i = (e, t, s, a) => {
+  for (var l = a > 1 ? void 0 : a ? B(t, s) : t, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (l = (a ? c(t, s, l) : c(l)) || l);
+  return a && l && w(t, s, l), l;
 };
-let s = class extends v {
+let o = class extends f {
   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.dialogRef = g(), this._isOpen = !1, this.close = (e, t = !1) => {
-      var i;
+    super(), this.open = !1, 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.dialogRef = g(), this._isOpen = !1, this.close = (e, t = !1) => {
+      var a;
       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(
+      this._isOpen = !1, this.open = !1, document.body.classList.remove("pkt-modal--open");
+      const s = document.activeElement;
+      s && !this.isElementInViewport(s) && s.scrollIntoView({ behavior: "smooth", block: "nearest" }), this.dispatchEvent(
         new CustomEvent("close", { detail: { origin: e }, bubbles: !0, composed: !0 })
-      ), t || (i = this.dialogRef.value) == null || i.close(), this.requestUpdate();
+      ), t || (a = this.dialogRef.value) == null || a.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 i;
-        this.dialogRef.value && ((i = this.dialogRef.value) == null || i.focus());
-      }), t && document.body.classList.add("pkt-modal--open"), this.dispatchEvent(
+      var t;
+      this._isOpen = !0, this.open = !0, (t = this.dialogRef.value) == null || t.showModal(), document.body.classList.add("pkt-modal--open"), this.dispatchEvent(
         new CustomEvent("showModal", { detail: { origin: e }, bubbles: !0, composed: !0 })
       ), this.requestUpdate();
     }, this._isOpen = !1;
@@ -40,8 +35,11 @@ let s = class extends v {
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("click", this.handleBackdropClick);
   }
+  updated(e) {
+    super.updated(e), e.has("open") && (this.open && !this._isOpen ? this.showModal() : !this.open && this._isOpen && this.close(new Event("close"), !1));
+  }
   async firstUpdated(e) {
-    super.firstUpdated(e), this.dialogRef.value && !window.HTMLDialogElement && !this.dialogRef.value.showModal && ("document" in window && "createElement" in document && (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((o) => o.default)).registerDialog(this.dialogRef.value), this.dialogRef.value.addEventListener("close", () => {
+    super.firstUpdated(e), this.dialogRef.value && !window.HTMLDialogElement && !this.dialogRef.value.showModal && ("document" in window && "createElement" in document && (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((s) => s.default)).registerDialog(this.dialogRef.value), this.dialogRef.value.addEventListener("close", () => {
       this.close(new Event("close"), !0);
     }));
   }
@@ -70,35 +68,35 @@ let s = class extends v {
     }, t = {
       "pkt-modal__headingText": !0,
       "pkt-txt-24": !0
-    }, o = {
+    }, s = {
       "pkt-modal__content": !0,
       "pkt-txt-18-light": !0
-    }, i = this.closeButtonSkin === "blue", n = {
+    }, a = this.closeButtonSkin === "blue", l = {
       "pkt-modal__closeButton": !0,
       [`pkt-modal__closeButton--${this.closeButtonSkin}`]: !0
     };
     return r`
       <dialog
-        class=${c(e)}
+        class=${p(e)}
         ${_(this.dialogRef)}
-        aria-labelledby="pkt-modal__headingText"
+        aria-labelledby=${this.headingText ? "pkt-modal__headingText" : u}
         aria-describedby="pkt-modal__content"
         @close=${(d) => this.close(d, !0)}
       >
         <div class="pkt-modal__wrapper">
           ${this.headingText || !this.hideCloseButton ? r`<div class="pkt-modal__header">
                 <div class="pkt-modal__header-background"></div>
-                ${this.headingText ? r`<h1 id="pkt-modal__headingText" class=${c(t)}>
+                ${this.headingText ? r`<h1 id="pkt-modal__headingText" class=${p(t)}>
                       ${this.headingText}
                     </h1>` : r`<div class="pkt-modal__headingText"></div>`}
-                ${this.hideCloseButton ? r`<div class="pkt-modal__noCloseButton"></div>` : r`<div class="${c(n)}">
+                ${this.hideCloseButton ? r`<div class="pkt-modal__noCloseButton"></div>` : r`<div class="${p(l)}">
                       <pkt-button
                         @click=${(d) => this.close(d)}
                         aria-label="close"
                         iconname="close"
                         variant="icon-only"
                         size="medium"
-                        skin=${i ? "tertiary" : "primary"}
+                        skin=${a ? "tertiary" : "primary"}
                       >
                         Lukk
                       </pkt-button>
@@ -107,47 +105,50 @@ let s = class extends v {
           <div class="pkt-modal__container">
             <div
               id="pkt-modal__content"
-              class=${c(o)}
-            >${f(this)}</div>
+              class=${p(s)}
+            >${v(this)}</div>
           </div>
         </div>
       </dialog>
     `;
   }
 };
-a([
-  l({ type: String })
-], s.prototype, "headingText", 2);
-a([
-  l({ type: Boolean })
-], s.prototype, "removePadding", 2);
-a([
-  l({ type: Boolean })
-], s.prototype, "hideCloseButton", 2);
-a([
-  l({ type: Boolean })
-], s.prototype, "closeOnBackdropClick", 2);
-a([
-  l({ type: String })
-], s.prototype, "closeButtonSkin", 2);
-a([
-  l({ type: String })
-], s.prototype, "size", 2);
-a([
-  l({ type: String })
-], s.prototype, "variant", 2);
-a([
-  l({ type: String })
-], s.prototype, "drawerPosition", 2);
-a([
-  l({ type: Boolean })
-], s.prototype, "transparentBackdrop", 2);
-a([
+i([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+i([
+  n({ type: String })
+], o.prototype, "headingText", 2);
+i([
+  n({ type: Boolean })
+], o.prototype, "removePadding", 2);
+i([
+  n({ type: Boolean })
+], o.prototype, "hideCloseButton", 2);
+i([
+  n({ type: Boolean })
+], o.prototype, "closeOnBackdropClick", 2);
+i([
+  n({ type: String })
+], o.prototype, "closeButtonSkin", 2);
+i([
+  n({ type: String })
+], o.prototype, "size", 2);
+i([
+  n({ type: String })
+], o.prototype, "variant", 2);
+i([
+  n({ type: String })
+], o.prototype, "drawerPosition", 2);
+i([
+  n({ type: Boolean })
+], o.prototype, "transparentBackdrop", 2);
+i([
   k()
-], s.prototype, "_isOpen", 2);
-s = a([
+], o.prototype, "_isOpen", 2);
+o = i([
   m("pkt-modal")
-], s);
+], o);
 export {
-  s as P
+  o as P
 };

package/dist/modal-mWn5pjs8.cjs

@@ -0,0 +1,36 @@
+"use strict";const d=require("./class-map-Bokp1SoS.cjs"),o=require("./element-CMTfByxQ.cjs"),u=require("./state-BNgpvY-A.cjs"),p=require("./element-with-slot-yT8k1Z37.cjs"),h=require("./ref-DahIePMT.cjs");require("./icon-Dj0oZZSa.cjs");const k={hideCloseButton:{default:!1},closeOnBackdropClick:{default:!1},size:{default:"medium"}},c={props:k};var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(r,e,t,i)=>{for(var s=i>1?void 0:i?v(e,t):e,l=r.length-1,a;l>=0;l--)(a=r[l])&&(s=(i?a(e,t,s):a(s))||s);return i&&s&&m(e,t,s),s};exports.PktModal=class extends p.PktElementWithSlot{constructor(){super(),this.open=!1,this.headingText="",this.removePadding=!1,this.hideCloseButton=c.props.hideCloseButton.default,this.closeOnBackdropClick=c.props.closeOnBackdropClick.default,this.closeButtonSkin="blue",this.size=c.props.size.default,this.variant="dialog",this.drawerPosition="right",this.transparentBackdrop=!1,this.dialogRef=h.e(),this._isOpen=!1,this.close=(e,t=!1)=>{var s;if(!this._isOpen)return;this._isOpen=!1,this.open=!1,document.body.classList.remove("pkt-modal--open");const i=document.activeElement;i&&!this.isElementInViewport(i)&&i.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 t;this._isOpen=!0,this.open=!0,(t=this.dialogRef.value)==null||t.showModal(),document.body.classList.add("pkt-modal--open"),this.dispatchEvent(new CustomEvent("showModal",{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},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)}updated(e){super.updated(e),e.has("open")&&(this.open&&!this._isOpen?this.showModal():!this.open&&this._isOpen&&this.close(new Event("close"),!1))}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(i=>i.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--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"},t={"pkt-modal__headingText":!0,"pkt-txt-24":!0},i={"pkt-modal__content":!0,"pkt-txt-18-light":!0},s=this.closeButtonSkin==="blue",l={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0};return o.b`
+      <dialog
+        class=${d.e(e)}
+        ${h.n(this.dialogRef)}
+        aria-labelledby=${this.headingText?"pkt-modal__headingText":o.A}
+        aria-describedby="pkt-modal__content"
+        @close=${a=>this.close(a,!0)}
+      >
+        <div class="pkt-modal__wrapper">
+          ${this.headingText||!this.hideCloseButton?o.b`<div class="pkt-modal__header">
+                <div class="pkt-modal__header-background"></div>
+                ${this.headingText?o.b`<h1 id="pkt-modal__headingText" class=${d.e(t)}>
+                      ${this.headingText}
+                    </h1>`:o.b`<div class="pkt-modal__headingText"></div>`}
+                ${this.hideCloseButton?o.b`<div class="pkt-modal__noCloseButton"></div>`:o.b`<div class="${d.e(l)}">
+                      <pkt-button
+                        @click=${a=>this.close(a)}
+                        aria-label="close"
+                        iconname="close"
+                        variant="icon-only"
+                        size="medium"
+                        skin=${s?"tertiary":"primary"}
+                      >
+                        Lukk
+                      </pkt-button>
+                    </div>`}
+              </div>`:o.A}
+          <div class="pkt-modal__container">
+            <div
+              id="pkt-modal__content"
+              class=${d.e(i)}
+            >${p.slotContent(this)}</div>
+          </div>
+        </div>
+      </dialog>
+    `}};n([o.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"open",2);n([o.n({type:String})],exports.PktModal.prototype,"headingText",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"removePadding",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"hideCloseButton",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"closeOnBackdropClick",2);n([o.n({type:String})],exports.PktModal.prototype,"closeButtonSkin",2);n([o.n({type:String})],exports.PktModal.prototype,"size",2);n([o.n({type:String})],exports.PktModal.prototype,"variant",2);n([o.n({type:String})],exports.PktModal.prototype,"drawerPosition",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"transparentBackdrop",2);n([u.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=n([o.t("pkt-modal")],exports.PktModal);

package/dist/pkt-index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./alert-C95U_RZ0.cjs"),t=require("./accordionitem-D7sWqDM_.cjs"),a=require("./backlink-CQoNgoa-.cjs"),P=require("./button-BXN_JPaH.cjs"),i=require("./calendar-43Y_6FD8.cjs"),c=require("./card-DfHo45CG.cjs"),b=require("./combobox-TKL44xnV.cjs"),k=require("./consent-CIhFwuFO.cjs"),d=require("./checkbox-mmn3v9ry.cjs"),r=require("./datepicker-oN9L0Wnm.cjs"),e=require("./pkt-header.cjs"),l=require("./helptext-B366oeR9.cjs"),s=require("./heading-B0XRE0lq.cjs"),p=require("./icon-Dj0oZZSa.cjs"),g=require("./input-wrapper-BdFdJU-k.cjs"),m=require("./link-DLjXMpvi.cjs"),f=require("./linkcard-C20WC6Nw.cjs"),y=require("./loader-DxAGCcNF.cjs"),j=require("./messagebox-B8LW0PSQ.cjs"),O=require("./modal-Bfk_ncLQ.cjs"),q=require("./progressbar-CC9Qr82_.cjs"),n=require("./radiobutton-BUDQYAH-.cjs"),x=require("./tag-DeE1OpmF.cjs"),o=require("./tabitem-Jenus4Qd.cjs"),T=require("./textarea-DtiYQWjy.cjs"),C=require("./textinput-cKrjvbJW.cjs"),H=require("./select-PuEeK4jQ.cjs");Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>u.PktAlert});exports.PktAccordion=t.PktAccordion;exports.PktAccordionItem=t.PktAccordionItem_default;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>a.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>P.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>i.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>c.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>b.PktCombobox});Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>k.PktConsent});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>d.PktCheckbox});Object.defineProperty(exports,"PktDateTags",{enumerable:!0,get:()=>r.PktDateTags});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>r.PktDatepicker});Object.defineProperty(exports,"PktHeader",{enumerable:!0,get:()=>e.PktHeader});Object.defineProperty(exports,"PktHeaderService",{enumerable:!0,get:()=>e.PktHeaderService});Object.defineProperty(exports,"PktHeaderUserMenu",{enumerable:!0,get:()=>e.PktHeaderUserMenu});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>l.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>s.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>p.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>g.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>m.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>f.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>y.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>j.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>O.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>q.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>n.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>n.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>x.PktTag});exports.PktTabItem=o.PktTabItem_default;exports.PktTabs=o.PktTabs;Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>T.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>C.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>H.PktSelect});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./alert-C95U_RZ0.cjs"),t=require("./accordionitem-D7sWqDM_.cjs"),a=require("./backlink-CQoNgoa-.cjs"),P=require("./button-BXN_JPaH.cjs"),i=require("./calendar-43Y_6FD8.cjs"),c=require("./card-DfHo45CG.cjs"),b=require("./combobox-TKL44xnV.cjs"),k=require("./consent-CIhFwuFO.cjs"),d=require("./checkbox-mmn3v9ry.cjs"),r=require("./datepicker-oN9L0Wnm.cjs"),e=require("./pkt-header.cjs"),l=require("./helptext-B366oeR9.cjs"),s=require("./heading-B0XRE0lq.cjs"),p=require("./icon-Dj0oZZSa.cjs"),g=require("./input-wrapper-BdFdJU-k.cjs"),m=require("./link-DLjXMpvi.cjs"),f=require("./linkcard-C20WC6Nw.cjs"),y=require("./loader-DxAGCcNF.cjs"),j=require("./messagebox-B8LW0PSQ.cjs"),O=require("./modal-mWn5pjs8.cjs"),q=require("./progressbar-CC9Qr82_.cjs"),n=require("./radiobutton-BUDQYAH-.cjs"),x=require("./tag-DeE1OpmF.cjs"),o=require("./tabitem-Jenus4Qd.cjs"),T=require("./textarea-DtiYQWjy.cjs"),C=require("./textinput-cKrjvbJW.cjs"),H=require("./select-PuEeK4jQ.cjs");Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>u.PktAlert});exports.PktAccordion=t.PktAccordion;exports.PktAccordionItem=t.PktAccordionItem_default;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>a.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>P.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>i.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>c.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>b.PktCombobox});Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>k.PktConsent});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>d.PktCheckbox});Object.defineProperty(exports,"PktDateTags",{enumerable:!0,get:()=>r.PktDateTags});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>r.PktDatepicker});Object.defineProperty(exports,"PktHeader",{enumerable:!0,get:()=>e.PktHeader});Object.defineProperty(exports,"PktHeaderService",{enumerable:!0,get:()=>e.PktHeaderService});Object.defineProperty(exports,"PktHeaderUserMenu",{enumerable:!0,get:()=>e.PktHeaderUserMenu});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>l.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>s.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>p.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>g.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>m.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>f.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>y.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>j.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>O.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>q.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>n.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>n.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>x.PktTag});exports.PktTabItem=o.PktTabItem_default;exports.PktTabs=o.PktTabs;Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>T.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>C.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>H.PktSelect});

package/dist/pkt-index.js

@@ -17,7 +17,7 @@ import { P as q } from "./link-oGYvBLYL.js";
 import { P as y } from "./linkcard-BhVIc18n.js";
 import { P as E } from "./loader-BHt9i5Xp.js";
 import { P as G } from "./messagebox-DkspcMQg.js";
-import { P as K } from "./modal-p1rvuP8e.js";
+import { P as K } from "./modal-D3u6ueP5.js";
 import { P as O } from "./progressbar-CcX-xiPI.js";
 import { P as V, P as X } from "./radiobutton-RW3h0tJj.js";
 import { P as Z } from "./tag-CIWBLpjv.js";

package/dist/pkt-modal.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "16.2.0",
+  "version": "16.4.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -42,7 +42,7 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.25.9",
     "@oslokommune/punkt-assets": "^16.0.0",
-    "@oslokommune/punkt-css": "^16.2.0",
+    "@oslokommune/punkt-css": "^16.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@typescript-eslint/eslint-plugin": "^8.46.0",
     "@typescript-eslint/parser": "^8.46.0",
@@ -79,5 +79,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "554167272be133d1486fb9b041b3afe0980c5069"
+  "gitHead": "7ea157177224bb319ade35eb479b90e10940fdc6"
 }

package/src/components/modal/modal.ts

@@ -10,6 +10,7 @@ import specs from 'componentSpecs/modal.json'
 import '@/components/icon'
 
 export interface IPktModal {
+  open?: boolean
   headingText?: string
   removePadding?: boolean
   hideCloseButton?: boolean
@@ -23,7 +24,8 @@ export interface IPktModal {
 
 @customElement('pkt-modal')
 export class PktModal extends PktElementWithSlot implements IPktModal {
-  // Public properties"
+  // Public properties
+  @property({ type: Boolean, reflect: true }) open?: boolean = false
   @property({ type: String }) headingText?: string = ''
   @property({ type: Boolean }) removePadding?: boolean = false
   @property({ type: Boolean }) hideCloseButton?: boolean = specs.props.hideCloseButton.default
@@ -56,6 +58,17 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
     document.removeEventListener('click', this.handleBackdropClick)
   }
 
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties)
+    if (changedProperties.has('open')) {
+      if (this.open && !this._isOpen) {
+        this.showModal()
+      } else if (!this.open && this._isOpen) {
+        this.close(new Event('close'), false)
+      }
+    }
+  }
+
   protected async firstUpdated(_changedProperties: PropertyValues): Promise<void> {
     super.firstUpdated(_changedProperties)
     if (this.dialogRef.value && !window.HTMLDialogElement && !this.dialogRef.value.showModal) {
@@ -96,6 +109,7 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
   public close = (event: Event, bypassNativeClose: boolean = false) => {
     if (!this._isOpen) return
     this._isOpen = false
+    this.open = false
 
     document.body.classList.remove('pkt-modal--open')
 
@@ -115,19 +129,10 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
 
   public showModal = (event: Event | null = null) => {
     this._isOpen = true
+    this.open = true
     this.dialogRef.value?.showModal()
-    const modal = document.querySelector('.pkt-modal')
 
-    // Prevent the first focusable child from being auto-focused
-    requestAnimationFrame(() => {
-      if (this.dialogRef.value) {
-        this.dialogRef.value?.focus()
-      }
-    })
-
-    if (modal) {
-      document.body.classList.add('pkt-modal--open')
-    }
+    document.body.classList.add('pkt-modal--open')
     this.dispatchEvent(
       new CustomEvent('showModal', { detail: { origin: event }, bubbles: true, composed: true }),
     )
@@ -166,7 +171,7 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
       <dialog
         class=${classMap(classes)}
         ${ref(this.dialogRef)}
-        aria-labelledby="pkt-modal__headingText"
+        aria-labelledby=${this.headingText ? 'pkt-modal__headingText' : nothing}
         aria-describedby="pkt-modal__content"
         @close=${(event: Event) => this.close(event, true)}
       >

package/dist/modal-Bfk_ncLQ.cjs

@@ -1,36 +0,0 @@
-"use strict";const d=require("./class-map-Bokp1SoS.cjs"),o=require("./element-CMTfByxQ.cjs"),u=require("./state-BNgpvY-A.cjs"),p=require("./element-with-slot-yT8k1Z37.cjs"),h=require("./ref-DahIePMT.cjs");require("./icon-Dj0oZZSa.cjs");const k={hideCloseButton:{default:!1},closeOnBackdropClick:{default:!1},size:{default:"medium"}},c={props:k};var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(r,e,t,i)=>{for(var s=i>1?void 0:i?v(e,t):e,l=r.length-1,a;l>=0;l--)(a=r[l])&&(s=(i?a(e,t,s):a(s))||s);return i&&s&&m(e,t,s),s};exports.PktModal=class extends p.PktElementWithSlot{constructor(){super(),this.headingText="",this.removePadding=!1,this.hideCloseButton=c.props.hideCloseButton.default,this.closeOnBackdropClick=c.props.closeOnBackdropClick.default,this.closeButtonSkin="blue",this.size=c.props.size.default,this.variant="dialog",this.drawerPosition="right",this.transparentBackdrop=!1,this.dialogRef=h.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 i=document.activeElement;i&&!this.isElementInViewport(i)&&i.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 i;this._isOpen=!0,(i=this.dialogRef.value)==null||i.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._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(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(i=>i.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--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"},t={"pkt-modal__headingText":!0,"pkt-txt-24":!0},i={"pkt-modal__content":!0,"pkt-txt-18-light":!0},s=this.closeButtonSkin==="blue",l={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0};return o.b`
-      <dialog
-        class=${d.e(e)}
-        ${h.n(this.dialogRef)}
-        aria-labelledby="pkt-modal__headingText"
-        aria-describedby="pkt-modal__content"
-        @close=${a=>this.close(a,!0)}
-      >
-        <div class="pkt-modal__wrapper">
-          ${this.headingText||!this.hideCloseButton?o.b`<div class="pkt-modal__header">
-                <div class="pkt-modal__header-background"></div>
-                ${this.headingText?o.b`<h1 id="pkt-modal__headingText" class=${d.e(t)}>
-                      ${this.headingText}
-                    </h1>`:o.b`<div class="pkt-modal__headingText"></div>`}
-                ${this.hideCloseButton?o.b`<div class="pkt-modal__noCloseButton"></div>`:o.b`<div class="${d.e(l)}">
-                      <pkt-button
-                        @click=${a=>this.close(a)}
-                        aria-label="close"
-                        iconname="close"
-                        variant="icon-only"
-                        size="medium"
-                        skin=${s?"tertiary":"primary"}
-                      >
-                        Lukk
-                      </pkt-button>
-                    </div>`}
-              </div>`:o.A}
-          <div class="pkt-modal__container">
-            <div
-              id="pkt-modal__content"
-              class=${d.e(i)}
-            >${p.slotContent(this)}</div>
-          </div>
-        </div>
-      </dialog>
-    `}};n([o.n({type:String})],exports.PktModal.prototype,"headingText",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"removePadding",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"hideCloseButton",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"closeOnBackdropClick",2);n([o.n({type:String})],exports.PktModal.prototype,"closeButtonSkin",2);n([o.n({type:String})],exports.PktModal.prototype,"size",2);n([o.n({type:String})],exports.PktModal.prototype,"variant",2);n([o.n({type:String})],exports.PktModal.prototype,"drawerPosition",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"transparentBackdrop",2);n([u.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=n([o.t("pkt-modal")],exports.PktModal);