@oslokommune/punkt-elements 12.21.5 → 12.22.0

package/dist/index.d.ts

@@ -20,6 +20,7 @@ declare interface IPktModal {
     removePadding?: boolean;
     hideCloseButton?: boolean;
     closeOnBackdropClick?: boolean;
+    closeButtonSkin?: 'blue' | 'yellow-filled';
     size?: TPktSize;
 }
 
@@ -443,6 +444,7 @@ export declare class PktModal extends PktElement implements IPktModal {
     removePadding?: boolean;
     hideCloseButton?: boolean;
     closeOnBackdropClick?: boolean;
+    closeButtonSkin?: 'blue' | 'yellow-filled';
     size?: TPktSize;
     defaultSlot: Ref<HTMLElement>;
     dialogRef: Ref<HTMLDialogElement>;

package/dist/{modal-qKsbHYy3.js → modal-CYv8Qk0Y.js}

@@ -1,8 +1,8 @@
 import { e as c } from "./class-map-CQzsZCwS.js";
-import { P as g, x as p, E as h, n as a, t as f } from "./element-BKrU5soj.js";
+import { P as f, x as p, E as m, n as a, t as g } from "./element-BKrU5soj.js";
 import { r as v } from "./state-C36ZmZgt.js";
 import { P as b } from "./pkt-slot-controller-DhwCJd_0.js";
-import { e as k, n as u } from "./ref-D5qG7OFB.js";
+import { e as k, n as h } from "./ref-D5qG7OFB.js";
 import "./icon-Bsb0MB2h.js";
 const y = "pkt-modal", _ = !0, C = {
   "background-click": {
@@ -11,7 +11,7 @@ const y = "pkt-modal", _ = !0, C = {
   close: {
     description: "Event som trigges når meldingsboksen lukkes"
   }
-}, E = {
+}, B = {
   headingText: {
     name: "Heading text",
     description: "Heading tekst på modalen",
@@ -29,6 +29,15 @@ const y = "pkt-modal", _ = !0, C = {
     type: "boolean",
     default: !1
   },
+  closeButtonSkin: {
+    name: "Stil på lukkeknappen",
+    description: "Stil på lukkeknappen",
+    type: [
+      "blue",
+      "yellow-filled"
+    ],
+    default: "blue"
+  },
   size: {
     name: "Størrelse",
     description: "Størrelsen på modalen",
@@ -39,26 +48,26 @@ const y = "pkt-modal", _ = !0, C = {
     ],
     default: "medium"
   }
-}, w = {
+}, E = {
   default: {
     description: "Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen."
   }
-}, m = {
+}, u = {
   name: y,
   "css-class": "pkt-modal",
   isElements: _,
   events: C,
-  props: E,
-  slots: w
+  props: B,
+  slots: E
 };
-var B = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (e, t, o, i) => {
-  for (var s = i > 1 ? void 0 : i ? x(t, o) : t, d = e.length - 1, r; d >= 0; d--)
-    (r = e[d]) && (s = (i ? r(t, o, s) : r(s)) || s);
-  return i && s && B(t, o, s), s;
+var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (e, t, o, n) => {
+  for (var s = n > 1 ? void 0 : n ? S(t, o) : t, d = e.length - 1, r; d >= 0; d--)
+    (r = e[d]) && (s = (n ? r(t, o, s) : r(s)) || s);
+  return n && s && w(t, o, s), s;
 };
-let n = class extends g {
+let i = class extends f {
   constructor() {
-    super(), this.headingText = "", this.removePadding = !1, this.hideCloseButton = m.props.hideCloseButton.default, this.closeOnBackdropClick = m.props.closeOnBackdropClick.default, this.size = m.props.size.default, this.defaultSlot = k(), this.dialogRef = k(), this._isOpen = !1, this.close = (e, t = !1) => {
+    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 = k(), this.dialogRef = k(), this._isOpen = !1, this.close = (e, t = !1) => {
       var s;
       this._isOpen = !1, t || (s = this.dialogRef.value) == null || s.close();
       const o = document.activeElement;
@@ -67,7 +76,12 @@ let n = class extends g {
       ), document.querySelector(".pkt-modal") && document.body.classList.remove("pkt-modal--open"), this.requestUpdate();
     }, this.showModal = (e) => {
       var o;
-      this._isOpen = !0, (o = this.dialogRef.value) == null || o.showModal(), document.querySelector(".pkt-modal") && document.body.classList.add("pkt-modal--open"), this.dispatchEvent(
+      this._isOpen = !0, (o = this.dialogRef.value) == null || o.showModal();
+      const t = document.querySelector(".pkt-modal");
+      requestAnimationFrame(() => {
+        var n;
+        this.dialogRef.value && ((n = this.dialogRef.value) == null || n.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 b(this, this.defaultSlot), this._isOpen = !1;
@@ -104,60 +118,73 @@ let n = class extends g {
     }, o = {
       "pkt-modal__content": !0,
       "pkt-txt-18-light": !0
+    }, n = this.closeButtonSkin === "blue", s = {
+      "pkt-modal__closeButton": !0,
+      [`pkt-modal__closeButton--${this.closeButtonSkin}`]: !0
+    }, d = {
+      "pkt-btn": !0,
+      [`pkt-btn--${n ? "tertiary" : "primary"}`]: !0,
+      "pkt-btn--icon-only": !0,
+      "pkt-btn--medium": !0
     };
     return p`
       <dialog
         class=${c(e)}
         aria-modal=${this._isOpen}
-        ${u(this.dialogRef)}
+        ${h(this.dialogRef)}
         aria-labelledby="pkt-modal__headingText"
         aria-describedby="pkt-modal__content"
-        autofocus
       >
         <div class="pkt-modal__header">
+          <div class="pkt-modal__header-background"></div>
           ${this.headingText ? p`<h1 id="pkt-modal__headingText" class=${c(t)}>
                 ${this.headingText}
-              </h1>` : h}
-          ${this.hideCloseButton ? h : p`<div class="pkt-modal__closeButton">
+              </h1>` : m}
+          ${this.hideCloseButton ? m : p`<div class="${c(s)}">
                 <button
-                  @click=${(i) => this.close(i)}
-                  class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+                  @click=${(r) => this.close(r)}
+                  class=${c(d)}
                   aria-label="close"
                 >
                   <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
                 </button>
               </div>`}
         </div>
-        <div
-          id="pkt-modal__content"
-          class=${c(o)}
-          ${u(this.defaultSlot)}
-        ></div>
+        <div class="pkt-modal__container">
+          <div
+            id="pkt-modal__content"
+            class=${c(o)}
+            ${h(this.defaultSlot)}
+          ></div>
+        </div>
       </dialog>
     `;
   }
 };
 l([
   a({ type: String, reflect: !0 })
-], n.prototype, "headingText", 2);
+], i.prototype, "headingText", 2);
 l([
   a({ type: Boolean, reflect: !0 })
-], n.prototype, "removePadding", 2);
+], i.prototype, "removePadding", 2);
 l([
   a({ type: Boolean, reflect: !0 })
-], n.prototype, "hideCloseButton", 2);
+], i.prototype, "hideCloseButton", 2);
 l([
   a({ type: Boolean, reflect: !0 })
-], n.prototype, "closeOnBackdropClick", 2);
+], i.prototype, "closeOnBackdropClick", 2);
+l([
+  a({ type: String, reflect: !0 })
+], i.prototype, "closeButtonSkin", 2);
 l([
   a({ type: String, reflect: !0 })
-], n.prototype, "size", 2);
+], i.prototype, "size", 2);
 l([
   v()
-], n.prototype, "_isOpen", 2);
-n = l([
-  f("pkt-modal")
-], n);
+], i.prototype, "_isOpen", 2);
+i = l([
+  g("pkt-modal")
+], i);
 export {
-  n as P
+  i as P
 };

package/dist/modal-gLMGJSSY.cjs

@@ -0,0 +1,32 @@
+"use strict";const d=require("./class-map-aeZWY44S.cjs"),s=require("./element-B0UgldHm.cjs"),k=require("./state-CG-binsl.cjs"),m=require("./pkt-slot-controller-BEDVscvU.cjs"),r=require("./ref-DDYBJ4EB.cjs");require("./icon-PWn7rnfg.cjs");const h="pkt-modal",g=!0,f={"background-click":{description:"Event som trigges når bakgrunnen trykkes på"},close:{description:"Event som trigges når meldingsboksen lukkes"}},v={headingText:{name:"Heading text",description:"Heading tekst på modalen",type:"string"},hideCloseButton:{name:"Gjem 'Lukk'-knapp",description:"Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.",type:"boolean",default:!1},closeOnBackdropClick:{name:"Lukk modalen når bakgrunnen trykkes på",description:"Lukk modalen når bakgrunnen trykkes på",type:"boolean",default:!1},closeButtonSkin:{name:"Stil på lukkeknappen",description:"Stil på lukkeknappen",type:["blue","yellow-filled"],default:"blue"},size:{name:"Størrelse",description:"Størrelsen på modalen",type:["small","medium","large"],default:"medium"}},b={default:{description:"Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen."}},p={name:h,"css-class":"pkt-modal",isElements:g,events:f,props:v,slots:b};var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(c,e,t,o)=>{for(var n=o>1?void 0:o?_(e,t):e,i=c.length-1,a;i>=0;i--)(a=c[i])&&(n=(o?a(e,t,n):a(n))||n);return o&&n&&y(e,t,n),n};exports.PktModal=class extends s.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 i;this._isOpen=!1,t||(i=this.dialogRef.value)==null||i.close();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})),document.querySelector(".pkt-modal")&&document.body.classList.remove("pkt-modal--open"),this.requestUpdate()},this.showModal=e=>{var o;this._isOpen=!0,(o=this.dialogRef.value)==null||o.showModal();const t=document.querySelector(".pkt-modal");requestAnimationFrame(()=>{var n;this.dialogRef.value&&((n=this.dialogRef.value)==null||n.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 m.PktSlotController(this,this.defaultSlot),this._isOpen=!1}async connectedCallback(){var e;super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown.bind(this)),document.addEventListener("click",this.handleBackdropClick.bind(this)),(e=this.dialogRef.value)==null||e.addEventListener("submit",t=>this.close(t,!0))}disconnectedCallback(){var e;super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown.bind(this)),document.removeEventListener("click",this.handleBackdropClick.bind(this)),(e=this.dialogRef.value)==null||e.removeEventListener("submit",t=>this.close(t,!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},n=this.closeButtonSkin==="blue",i={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0},a={"pkt-btn":!0,[`pkt-btn--${n?"tertiary":"primary"}`]:!0,"pkt-btn--icon-only":!0,"pkt-btn--medium":!0};return s.x`
+      <dialog
+        class=${d.e(e)}
+        aria-modal=${this._isOpen}
+        ${r.n(this.dialogRef)}
+        aria-labelledby="pkt-modal__headingText"
+        aria-describedby="pkt-modal__content"
+      >
+        <div class="pkt-modal__header">
+          <div class="pkt-modal__header-background"></div>
+          ${this.headingText?s.x`<h1 id="pkt-modal__headingText" class=${d.e(t)}>
+                ${this.headingText}
+              </h1>`:s.E}
+          ${this.hideCloseButton?s.E:s.x`<div class="${d.e(i)}">
+                <button
+                  @click=${u=>this.close(u)}
+                  class=${d.e(a)}
+                  aria-label="close"
+                >
+                  <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
+                </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([s.n({type:String,reflect:!0})],exports.PktModal.prototype,"headingText",2);l([s.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"removePadding",2);l([s.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"hideCloseButton",2);l([s.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"closeOnBackdropClick",2);l([s.n({type:String,reflect:!0})],exports.PktModal.prototype,"closeButtonSkin",2);l([s.n({type:String,reflect:!0})],exports.PktModal.prototype,"size",2);l([k.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=l([s.t("pkt-modal")],exports.PktModal);

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-3DZNN48_.cjs"),p=require("./calendar-CPEJ1enc.cjs"),d=require("./card-TZKEU1Th.cjs"),t=require("./element-B0UgldHm.cjs"),P=require("./pkt-slot-controller-BEDVscvU.cjs"),i=require("./ref-DDYBJ4EB.cjs"),k=require("./class-map-aeZWY44S.cjs"),b=require("./datepicker-DjflnHO9.cjs"),g=require("./helptext-XPScYIkx.cjs"),m=require("./icon-PWn7rnfg.cjs"),h=require("./input-wrapper-nvacN4EY.cjs"),f=require("./link-BnL83t0x.cjs"),y=require("./linkcard-RyOjvpmF.cjs"),v=require("./messagebox-CuM1y2P_.cjs"),x=require("./modal-C6b9Q1fe.cjs"),C=require("./progressbar-CkaLjQYa.cjs"),O=require("./radiobutton-HmicLshI.cjs"),j=require("./tag-B0Jd6dQF.cjs"),q=require("./textarea-D7uvC79V.cjs"),S=require("./textinput-C9pkRR6S.cjs"),$=require("./select-B19JEWYw.cjs");var _=Object.defineProperty,T=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?T(e,r):e,l=a.length-1,u;l>=0;l--)(u=a[l])&&(n=(s?u(e,r,n):u(n))||n);return s&&n&&_(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new P.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 c=require("./alert-3DZNN48_.cjs"),p=require("./calendar-CPEJ1enc.cjs"),d=require("./card-TZKEU1Th.cjs"),t=require("./element-B0UgldHm.cjs"),P=require("./pkt-slot-controller-BEDVscvU.cjs"),i=require("./ref-DDYBJ4EB.cjs"),k=require("./class-map-aeZWY44S.cjs"),b=require("./datepicker-DjflnHO9.cjs"),g=require("./helptext-XPScYIkx.cjs"),m=require("./icon-PWn7rnfg.cjs"),h=require("./input-wrapper-nvacN4EY.cjs"),f=require("./link-BnL83t0x.cjs"),y=require("./linkcard-RyOjvpmF.cjs"),v=require("./messagebox-CuM1y2P_.cjs"),x=require("./modal-gLMGJSSY.cjs"),C=require("./progressbar-CkaLjQYa.cjs"),O=require("./radiobutton-HmicLshI.cjs"),j=require("./tag-B0Jd6dQF.cjs"),q=require("./textarea-D7uvC79V.cjs"),S=require("./textinput-C9pkRR6S.cjs"),$=require("./select-B19JEWYw.cjs");var _=Object.defineProperty,T=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?T(e,r):e,l=a.length-1,u;l>=0;l--)(u=a[l])&&(n=(s?u(e,r,n):u(n))||n);return s&&n&&_(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new P.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="${k.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -13,7 +13,7 @@ import { P as M } from "./input-wrapper-CWvzXs6X.js";
 import { P as N } from "./link-B3PDtnXT.js";
 import { P as W } from "./linkcard-C4q7HCwY.js";
 import { P as z } from "./messagebox-BDfhozc3.js";
-import { P as J } from "./modal-qKsbHYy3.js";
+import { P as J } from "./modal-CYv8Qk0Y.js";
 import { P as V } from "./progressbar-DETyIwXf.js";
 import { P as Y } from "./radiobutton-BhQCBJ0I.js";
 import { P as tt } from "./tag-x6f6U6ob.js";

package/dist/pkt-modal.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.21.5",
+  "version": "12.22.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -29,8 +29,8 @@
     "urlpattern-polyfill": "^10.0.0"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^12.21.5",
-    "@oslokommune/punkt-css": "^12.21.5",
+    "@oslokommune/punkt-assets": "^12.21.6",
+    "@oslokommune/punkt-css": "^12.22.0",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.4",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "dc336f095afddad756ac311a7bf0bdbcc03db50e"
+  "gitHead": "33ada1308d3f9b91fe54079e2f43e1370aed6a98"
 }

package/src/components/modal/modal.ts

@@ -9,11 +9,13 @@ import { TPktSize } from '@/types/size'
 import specs from 'componentSpecs/modal.json'
 import '@/components/icon'
 
+// TODO: Exchange <button> here with <pkt-button> when it is available in pkt-elements
 export interface IPktModal {
   headingText?: string
   removePadding?: boolean
   hideCloseButton?: boolean
   closeOnBackdropClick?: boolean
+  closeButtonSkin?: 'blue' | 'yellow-filled'
   size?: TPktSize
 }
 
@@ -26,8 +28,8 @@ export class PktModal extends PktElement implements IPktModal {
     specs.props.hideCloseButton.default
   @property({ type: Boolean, reflect: true })
   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
-
   defaultSlot: Ref<HTMLElement> = createRef()
   dialogRef: Ref<HTMLDialogElement> = createRef()
 
@@ -102,6 +104,14 @@ export class PktModal extends PktElement implements IPktModal {
     this._isOpen = 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')
     }
@@ -129,6 +139,19 @@ export class PktModal extends PktElement implements IPktModal {
       'pkt-txt-18-light': true,
     }
 
+    const isCloseButtonSkinDefault = this.closeButtonSkin === 'blue'
+    const closeButtonClasses = {
+      'pkt-modal__closeButton': true,
+      [`pkt-modal__closeButton--${this.closeButtonSkin}`]: true,
+    }
+
+    const buttonClasses = {
+      'pkt-btn': true,
+      [`pkt-btn--${isCloseButtonSkinDefault ? 'tertiary' : 'primary'}`]: true,
+      'pkt-btn--icon-only': true,
+      'pkt-btn--medium': true,
+    }
+
     return html`
       <dialog
         class=${classMap(classes)}
@@ -136,19 +159,19 @@ export class PktModal extends PktElement implements IPktModal {
         ${ref(this.dialogRef)}
         aria-labelledby="pkt-modal__headingText"
         aria-describedby="pkt-modal__content"
-        autofocus
       >
         <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="pkt-modal__closeButton">
+            ? html`<div class="${classMap(closeButtonClasses)}">
                 <button
                   @click=${(event: Event) => this.close(event)}
-                  class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+                  class=${classMap(buttonClasses)}
                   aria-label="close"
                 >
                   <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
@@ -156,11 +179,13 @@ export class PktModal extends PktElement implements IPktModal {
               </div>`
             : nothing}
         </div>
-        <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>
       </dialog>
     `
   }

package/dist/modal-C6b9Q1fe.cjs

@@ -1,30 +0,0 @@
-"use strict";const c=require("./class-map-aeZWY44S.cjs"),n=require("./element-B0UgldHm.cjs"),k=require("./state-CG-binsl.cjs"),u=require("./pkt-slot-controller-BEDVscvU.cjs"),a=require("./ref-DDYBJ4EB.cjs");require("./icon-PWn7rnfg.cjs");const m="pkt-modal",h=!0,g={"background-click":{description:"Event som trigges når bakgrunnen trykkes på"},close:{description:"Event som trigges når meldingsboksen lukkes"}},f={headingText:{name:"Heading text",description:"Heading tekst på modalen",type:"string"},hideCloseButton:{name:"Gjem 'Lukk'-knapp",description:"Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.",type:"boolean",default:!1},closeOnBackdropClick:{name:"Lukk modalen når bakgrunnen trykkes på",description:"Lukk modalen når bakgrunnen trykkes på",type:"boolean",default:!1},size:{name:"Størrelse",description:"Størrelsen på modalen",type:["small","medium","large"],default:"medium"}},v={default:{description:"Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen."}},p={name:m,"css-class":"pkt-modal",isElements:h,events:g,props:f,slots:v};var b=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(d,e,t,o)=>{for(var s=o>1?void 0:o?y(e,t):e,l=d.length-1,r;l>=0;l--)(r=d[l])&&(s=(o?r(e,t,s):r(s))||s);return o&&s&&b(e,t,s),s};exports.PktModal=class extends n.PktElement{constructor(){super(),this.headingText="",this.removePadding=!1,this.hideCloseButton=p.props.hideCloseButton.default,this.closeOnBackdropClick=p.props.closeOnBackdropClick.default,this.size=p.props.size.default,this.defaultSlot=a.e(),this.dialogRef=a.e(),this._isOpen=!1,this.close=(e,t=!1)=>{var l;this._isOpen=!1,t||(l=this.dialogRef.value)==null||l.close();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})),document.querySelector(".pkt-modal")&&document.body.classList.remove("pkt-modal--open"),this.requestUpdate()},this.showModal=e=>{var o;this._isOpen=!0,(o=this.dialogRef.value)==null||o.showModal(),document.querySelector(".pkt-modal")&&document.body.classList.add("pkt-modal--open"),this.dispatchEvent(new CustomEvent("showModal",{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this.slotController=new u.PktSlotController(this,this.defaultSlot),this._isOpen=!1}async connectedCallback(){var e;super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown.bind(this)),document.addEventListener("click",this.handleBackdropClick.bind(this)),(e=this.dialogRef.value)==null||e.addEventListener("submit",t=>this.close(t,!0))}disconnectedCallback(){var e;super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown.bind(this)),document.removeEventListener("click",this.handleBackdropClick.bind(this)),(e=this.dialogRef.value)==null||e.removeEventListener("submit",t=>this.close(t,!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};return n.x`
-      <dialog
-        class=${c.e(e)}
-        aria-modal=${this._isOpen}
-        ${a.n(this.dialogRef)}
-        aria-labelledby="pkt-modal__headingText"
-        aria-describedby="pkt-modal__content"
-        autofocus
-      >
-        <div class="pkt-modal__header">
-          ${this.headingText?n.x`<h1 id="pkt-modal__headingText" class=${c.e(t)}>
-                ${this.headingText}
-              </h1>`:n.E}
-          ${this.hideCloseButton?n.E:n.x`<div class="pkt-modal__closeButton">
-                <button
-                  @click=${s=>this.close(s)}
-                  class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
-                  aria-label="close"
-                >
-                  <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
-                </button>
-              </div>`}
-        </div>
-        <div
-          id="pkt-modal__content"
-          class=${c.e(o)}
-          ${a.n(this.defaultSlot)}
-        ></div>
-      </dialog>
-    `}};i([n.n({type:String,reflect:!0})],exports.PktModal.prototype,"headingText",2);i([n.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"removePadding",2);i([n.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"hideCloseButton",2);i([n.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"closeOnBackdropClick",2);i([n.n({type:String,reflect:!0})],exports.PktModal.prototype,"size",2);i([k.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=i([n.t("pkt-modal")],exports.PktModal);