@oslokommune/punkt-elements 12.37.3 → 12.37.5

package/CHANGELOG.md

@@ -5,6 +5,40 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.37.5](https://github.com/oslokommune/punkt/compare/12.37.4...12.37.5) (2025-05-12)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [12.37.4](https://github.com/oslokommune/punkt/compare/12.37.3...12.37.4) (2025-05-12)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.37.3](https://github.com/oslokommune/punkt/compare/12.37.2...12.37.3) (2025-05-09)
 
 ### ⚠ BREAKING CHANGES

package/dist/{button-sf_Yzx3X.js → button-D39TTsjJ.js}

@@ -1,21 +1,27 @@
-import { n as s, P as c, E as p, x as l, a as u } from "./element-DjjF_tEh.js";
-import { P as b } from "./pkt-slot-controller-DtDaD9q_.js";
-import { e as f, n as k } from "./ref-iIffqQAI.js";
-var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (t, n, r, o) => {
-  for (var a = o > 1 ? void 0 : o ? y(n, r) : n, d = t.length - 1, h; d >= 0; d--)
-    (h = t[d]) && (a = (o ? h(n, r, a) : h(a)) || a);
-  return o && a && m(n, r, a), a;
+import { n as a, P as b, E as p, x as l, a as c } from "./element-DjjF_tEh.js";
+import { P as f } from "./pkt-slot-controller-DtDaD9q_.js";
+import { e as u, n as k } from "./ref-iIffqQAI.js";
+var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (t, e, n, o) => {
+  for (var r = o > 1 ? void 0 : o ? m(e, n) : e, d = t.length - 1, h; d >= 0; d--)
+    (h = t[d]) && (r = (o ? h(e, n, r) : h(r)) || r);
+  return o && r && y(e, n, r), r;
 };
-let i = class extends c {
+let i = class extends b {
   constructor() {
-    super(), this.internals = this.attachInternals(), this.defaultSlot = f(), this.iconName = "user", this.secondIconName = "user", this.mode = "light", this.size = "medium", this.skin = "primary", this.variant = "label-only", this.state = "normal", this.type = "button", this.isLoading = !1, this.disabled = !1, this.slotController = new b(this, this.defaultSlot), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown);
+    super(), this.internals = this.attachInternals(), this.defaultSlot = u(), this.iconName = "user", this.secondIconName = "user", this.mode = "light", this.size = "medium", this.skin = "primary", this.variant = "label-only", this.state = "normal", this.type = "button", this.isLoading = !1, this.disabled = !1, this.slotController = new f(this, this.defaultSlot), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown);
   }
   // Lifecycle
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeydown);
   }
+  attributeChangedCallback(t, e, n) {
+    super.attributeChangedCallback(t, e, n), t === "disabled" && n === "false" && (this.disabled = !1), (t === "isloading" || t === "isLoading") && n === "false" && (this.isLoading = !1);
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.disabled === "false" && (this.disabled = !1), this.isLoading === "false" && (this.isLoading = !1);
+  }
   updated(t) {
-    super.updated(t), this.setAttribute("role", "button"), this.internals.role = "button", this.disabled ? (this.getAttribute("tabindex") !== "-1" && this.setAttribute("tabindex", "-1"), this.getAttribute("aria-disabled") !== "true" && this.setAttribute("aria-disabled", "true")) : (this.getAttribute("tabindex") !== "0" && this.setAttribute("tabindex", "0"), this.getAttribute("aria-disabled") !== "false" && this.removeAttribute("aria-disabled")), this.isLoading ? this.getAttribute("aria-busy") !== "true" && this.setAttribute("aria-busy", "true") : this.hasAttribute("aria-busy") && this.removeAttribute("aria-busy"), this.updateElementClasses();
+    super.updated(t), this.setAttribute("role", "button"), this.internals.role = "button", this.disabled === "false" && (this.disabled = !1), this.isLoading === "false" && (this.isLoading = !1), this.disabled ? (this.getAttribute("tabindex") !== "-1" && this.setAttribute("tabindex", "-1"), this.getAttribute("aria-disabled") !== "true" && this.setAttribute("aria-disabled", "true")) : (this.getAttribute("tabindex") !== "0" && this.setAttribute("tabindex", "0"), this.getAttribute("aria-disabled") !== "false" && this.removeAttribute("aria-disabled")), this.isLoading ? this.getAttribute("aria-busy") !== "true" && this.setAttribute("aria-busy", "true") : this.hasAttribute("aria-busy") && this.removeAttribute("aria-busy"), this.updateElementClasses();
   }
   // Render
   render() {
@@ -34,8 +40,8 @@ let i = class extends c {
   }
   // Methods
   updateElementClasses() {
-    const t = /* @__PURE__ */ new Set(), n = this.getAttribute("class");
-    t.add("pkt-btn"), n && n.split(" ").forEach((r) => t.add(r)), this.size && t.add(`pkt-btn--${this.size}`), this.skin && t.add(`pkt-btn--${this.skin}`), this.variant && t.add(`pkt-btn--${this.variant}`), this.color && t.add(`pkt-btn--${this.color}`), this.isLoading && t.add("pkt-btn--active"), this.state && t.add(`pkt-btn--${this.state}`), this.disabled && t.add("pkt-btn--disabled"), this.className = [...t].join(" ");
+    const t = /* @__PURE__ */ new Set(), e = this.getAttribute("class");
+    t.add("pkt-btn"), e && e.split(" ").forEach((n) => t.add(n)), this.size && t.add(`pkt-btn--${this.size}`), this.skin && t.add(`pkt-btn--${this.skin}`), this.variant && t.add(`pkt-btn--${this.variant}`), this.color && t.add(`pkt-btn--${this.color}`), this.isLoading && t.add("pkt-btn--active"), this.state && t.add(`pkt-btn--${this.state}`), this.disabled && t.add("pkt-btn--disabled"), this.className = [...t].join(" ");
   }
   handleClick(t) {
     if (this.disabled || this.isLoading) {
@@ -61,47 +67,47 @@ let i = class extends c {
   handleKeydown(t) {
     if (!(this.disabled || this.isLoading) && (t.key === "Enter" || t.key === " ")) {
       t.preventDefault();
-      const n = t.target;
-      n && n.click();
+      const e = t.target;
+      e && e.click();
     }
   }
 };
 i.formAssociated = !0;
-e([
-  s({ type: String })
+s([
+  a({ type: String })
 ], i.prototype, "iconName", 2);
-e([
-  s({ type: String })
+s([
+  a({ type: String })
 ], i.prototype, "secondIconName", 2);
-e([
-  s({ type: String })
+s([
+  a({ type: String })
 ], i.prototype, "mode", 2);
-e([
-  s({ type: String })
+s([
+  a({ type: String })
 ], i.prototype, "size", 2);
-e([
-  s({ type: String })
+s([
+  a({ type: String })
 ], i.prototype, "color", 2);
-e([
-  s({ type: String })
+s([
+  a({ type: String })
 ], i.prototype, "skin", 2);
-e([
-  s({ type: String })
+s([
+  a({ type: String })
 ], i.prototype, "variant", 2);
-e([
-  s({ type: String, reflect: !0 })
+s([
+  a({ type: String })
 ], i.prototype, "state", 2);
-e([
-  s({ type: String, reflect: !0 })
+s([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "type", 2);
-e([
-  s({ type: Boolean, reflect: !0 })
+s([
+  a({ type: Boolean })
 ], i.prototype, "isLoading", 2);
-e([
-  s({ type: Boolean, reflect: !0 })
+s([
+  a({ type: Boolean })
 ], i.prototype, "disabled", 2);
-i = e([
-  u("pkt-button")
+i = s([
+  c("pkt-button")
 ], i);
 export {
   i as P

package/dist/button-ZkEpUrbJ.cjs

@@ -0,0 +1,12 @@
+"use strict";const i=require("./element-BSypUpzA.cjs"),h=require("./pkt-slot-controller-Da-RgXfS.cjs"),d=require("./ref-BvbyvXRH.cjs");var p=Object.defineProperty,u=Object.getOwnPropertyDescriptor,e=(o,t,s,n)=>{for(var a=n>1?void 0:n?u(t,s):t,r=o.length-1,l;r>=0;r--)(l=o[r])&&(a=(n?l(t,s,a):l(a))||a);return n&&a&&p(t,s,a),a};exports.PktButton=class extends i.PktElement{constructor(){super(),this.internals=this.attachInternals(),this.defaultSlot=d.e(),this.iconName="user",this.secondIconName="user",this.mode="light",this.size="medium",this.skin="primary",this.variant="label-only",this.state="normal",this.type="button",this.isLoading=!1,this.disabled=!1,this.slotController=new h.PktSlotController(this,this.defaultSlot),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeydown)}attributeChangedCallback(t,s,n){super.attributeChangedCallback(t,s,n),t==="disabled"&&n==="false"&&(this.disabled=!1),(t==="isloading"||t==="isLoading")&&n==="false"&&(this.isLoading=!1)}firstUpdated(t){super.firstUpdated(t),this.disabled==="false"&&(this.disabled=!1),this.isLoading==="false"&&(this.isLoading=!1)}updated(t){super.updated(t),this.setAttribute("role","button"),this.internals.role="button",this.disabled==="false"&&(this.disabled=!1),this.isLoading==="false"&&(this.isLoading=!1),this.disabled?(this.getAttribute("tabindex")!=="-1"&&this.setAttribute("tabindex","-1"),this.getAttribute("aria-disabled")!=="true"&&this.setAttribute("aria-disabled","true")):(this.getAttribute("tabindex")!=="0"&&this.setAttribute("tabindex","0"),this.getAttribute("aria-disabled")!=="false"&&this.removeAttribute("aria-disabled")),this.isLoading?this.getAttribute("aria-busy")!=="true"&&this.setAttribute("aria-busy","true"):this.hasAttribute("aria-busy")&&this.removeAttribute("aria-busy"),this.updateElementClasses()}render(){return i.x`
+      <div class="pkt-contents">
+        ${this.isLoading?i.x`<pkt-icon
+              class="pkt-btn__icon pkt-btn__spinner"
+              name="spinner-blue"
+              path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
+            ></pkt-icon>`:i.E}
+        ${this.variant!=="label-only"?i.x`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>`:i.E}
+        <span class="pkt-btn__text" ${d.n(this.defaultSlot)}></span>
+        ${this.variant==="icons-right-and-left"?i.x`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`:i.E}
+      </div>
+    `}updateElementClasses(){const t=new Set,s=this.getAttribute("class");t.add("pkt-btn"),s&&s.split(" ").forEach(n=>t.add(n)),this.size&&t.add(`pkt-btn--${this.size}`),this.skin&&t.add(`pkt-btn--${this.skin}`),this.variant&&t.add(`pkt-btn--${this.variant}`),this.color&&t.add(`pkt-btn--${this.color}`),this.isLoading&&t.add("pkt-btn--active"),this.state&&t.add(`pkt-btn--${this.state}`),this.disabled&&t.add("pkt-btn--disabled"),this.className=[...t].join(" ")}handleClick(t){if(this.disabled||this.isLoading){t.preventDefault(),t.stopImmediatePropagation();return}if(this.type==="submit"&&this.internals.form){this.internals.form.requestSubmit();return}if(this.type==="reset"&&this.internals.form){this.internals.form.reset();return}this.onClick&&typeof this.onClick=="function"&&this.onClick!==this.handleClick&&this.onClick(t),this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0,detail:{originalEvent:t}}))}handleKeydown(t){if(!(this.disabled||this.isLoading)&&(t.key==="Enter"||t.key===" ")){t.preventDefault();const s=t.target;s&&s.click()}}};exports.PktButton.formAssociated=!0;e([i.n({type:String})],exports.PktButton.prototype,"iconName",2);e([i.n({type:String})],exports.PktButton.prototype,"secondIconName",2);e([i.n({type:String})],exports.PktButton.prototype,"mode",2);e([i.n({type:String})],exports.PktButton.prototype,"size",2);e([i.n({type:String})],exports.PktButton.prototype,"color",2);e([i.n({type:String})],exports.PktButton.prototype,"skin",2);e([i.n({type:String})],exports.PktButton.prototype,"variant",2);e([i.n({type:String})],exports.PktButton.prototype,"state",2);e([i.n({type:String,reflect:!0})],exports.PktButton.prototype,"type",2);e([i.n({type:Boolean})],exports.PktButton.prototype,"isLoading",2);e([i.n({type:Boolean})],exports.PktButton.prototype,"disabled",2);exports.PktButton=e([i.t("pkt-button")],exports.PktButton);

package/dist/{consent-CTX9zf81.js → consent-CJ2e2TSV.js}

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

package/dist/{consent-BNY1XvpV.cjs → consent-D9VqpDkR.cjs}

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

package/dist/index.d.ts

@@ -8,6 +8,8 @@ import { Ref } from 'lit/directives/ref.js';
 import { TemplateResult } from 'lit-html';
 import { TZDate } from '@date-fns/tz';
 
+declare type Booleanish = boolean | 'true' | 'false';
+
 /**
  * We define all props as optional. Native HTML attributes are optional by default,
  * but the TS definition require either null or value. This way we can support showing a value as optional
@@ -111,8 +113,8 @@ export declare interface IPktButton {
     variant?: TPktButtonVariant;
     state?: TPktButtonState;
     type?: TPktButtonType;
-    isLoading?: boolean;
-    disabled?: boolean;
+    isLoading?: Booleanish;
+    disabled?: Booleanish;
 }
 
 export declare interface IPktCombobox {
@@ -334,9 +336,11 @@ export declare class PktButton extends PktElement<IPktButton> implements IPktBut
     variant: TPktButtonVariant;
     state?: TPktButtonState;
     type: TPktButtonType;
-    isLoading: boolean;
-    disabled: boolean;
+    isLoading: Booleanish;
+    disabled: Booleanish;
     disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected updated(_changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
     private updateElementClasses;

package/dist/{modal-4aQZVxGl.cjs → modal-DZY4gZCQ.cjs}

@@ -1,4 +1,4 @@
-"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,v=Object.getOwnPropertyDescriptor,l=(c,e,t,o)=>{for(var s=o>1?void 0:o?v(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&&("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`
+"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)}

package/dist/{modal-m--Sfj_1.js → modal-sbobjlRZ.js}

@@ -17,28 +17,28 @@ const b = {
 }, u = {
   props: b
 };
-var y = Object.defineProperty, C = Object.getOwnPropertyDescriptor, n = (t, e, o, s) => {
-  for (var i = s > 1 ? void 0 : s ? C(e, o) : e, r = t.length - 1, a; r >= 0; r--)
-    (a = t[r]) && (i = (s ? a(e, o, i) : a(i)) || i);
-  return s && i && y(e, o, i), i;
+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;
 };
 let l = class extends k {
   constructor() {
     super(), this.headingText = "", this.removePadding = !1, this.hideCloseButton = u.props.hideCloseButton.default, this.closeOnBackdropClick = u.props.closeOnBackdropClick.default, this.closeButtonSkin = "blue", this.size = u.props.size.default, this.defaultSlot = m(), this.dialogRef = m(), this._isOpen = !1, this.close = (t, e = !1) => {
-      var s;
+      var i;
       if (!this._isOpen) return;
       this._isOpen = !1, document.body.classList.remove("pkt-modal--open");
       const o = document.activeElement;
       o && !this.isElementInViewport(o) && o.scrollIntoView({ behavior: "smooth", block: "nearest" }), this.dispatchEvent(
         new CustomEvent("close", { detail: { origin: t }, bubbles: !0, composed: !0 })
-      ), e || (s = this.dialogRef.value) == null || s.close(), this.requestUpdate();
+      ), e || (i = this.dialogRef.value) == null || i.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());
+        var i;
+        this.dialogRef.value && ((i = this.dialogRef.value) == null || i.focus());
       }), e && document.body.classList.add("pkt-modal--open"), this.dispatchEvent(
         new CustomEvent("showModal", { detail: { origin: t }, bubbles: !0, composed: !0 })
       ), this.requestUpdate();
@@ -51,7 +51,7 @@ let l = class extends k {
     super.disconnectedCallback(), document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("click", this.handleBackdropClick);
   }
   async firstUpdated(t) {
-    super.firstUpdated(t), this.dialogRef.value && ("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(t), 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", () => {
       this.close(new Event("close"), !0);
     }));
   }
@@ -79,12 +79,12 @@ let l = class extends k {
     }, o = {
       "pkt-modal__content": !0,
       "pkt-txt-18-light": !0
-    }, s = this.closeButtonSkin === "blue", i = {
+    }, i = this.closeButtonSkin === "blue", s = {
       "pkt-modal__closeButton": !0,
       [`pkt-modal__closeButton--${this.closeButtonSkin}`]: !0
     }, r = {
       "pkt-btn": !0,
-      [`pkt-btn--${s ? "tertiary" : "primary"}`]: !0,
+      [`pkt-btn--${i ? "tertiary" : "primary"}`]: !0,
       "pkt-btn--icon-only": !0,
       "pkt-btn--medium": !0
     };
@@ -101,7 +101,7 @@ let l = class extends k {
           ${this.headingText ? p`<h1 id="pkt-modal__headingText" class=${c(e)}>
                 ${this.headingText}
               </h1>` : h}
-          ${this.hideCloseButton ? h : p`<div class="${c(i)}">
+          ${this.hideCloseButton ? h : p`<div class="${c(s)}">
                 <pkt-button
                   @click=${(a) => this.close(a)}
                   class=${c(r)}

package/dist/pkt-button.cjs

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

package/dist/pkt-button.js

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

package/dist/pkt-consent.cjs

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

package/dist/pkt-consent.js

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

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-C2EPmB0W.cjs"),l=require("./accordionitem-RFwXQC_0.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-jdMbbn-e.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-DH-3qNgp.cjs"),g=require("./combobox-BokBs9Jo.cjs"),h=require("./consent-BNY1XvpV.cjs"),f=require("./checkbox-B7ObRUbU.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-B767w-e9.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-BrDbM3GT.cjs"),$=require("./linkcard-s9yoOq90.cjs"),L=require("./loader-Bk4XPiOY.cjs"),_=require("./messagebox-B0kgftoP.cjs"),A=require("./modal-4aQZVxGl.cjs"),B=require("./progressbar-DiRfScnB.cjs"),p=require("./radiobutton-DP6RsaQc.cjs"),T=require("./tag-B9kFYxHg.cjs"),I=require("./textarea-DIZf7CVg.cjs"),M=require("./textinput-DMPRHokX.cjs"),R=require("./select-CQs_BAKs.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-ZkEpUrbJ.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-DH-3qNgp.cjs"),g=require("./combobox-BokBs9Jo.cjs"),h=require("./consent-D9VqpDkR.cjs"),f=require("./checkbox-B7ObRUbU.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-B767w-e9.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-BrDbM3GT.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-DP6RsaQc.cjs"),T=require("./tag-B9kFYxHg.cjs"),I=require("./textarea-DIZf7CVg.cjs"),M=require("./textinput-DMPRHokX.cjs"),R=require("./select-CQs_BAKs.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
       <div class="${O.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -1,12 +1,12 @@
 import { P as A } from "./alert-C33z1kBf.js";
 import { P as B, a as E } from "./accordionitem-vmwqD9rr.js";
 import { P as O } from "./backlink-hvyJmwrO.js";
-import { P as T } from "./button-sf_Yzx3X.js";
+import { P as T } from "./button-D39TTsjJ.js";
 import { c as f } from "./calendar-KDcOWD6V.js";
 import { P as D } from "./calendar-KDcOWD6V.js";
 import { P as G } from "./card-Cyww1yKr.js";
 import { P as K } from "./combobox-CnnTPWcA.js";
-import { P as U } from "./consent-CTX9zf81.js";
+import { P as U } from "./consent-CJ2e2TSV.js";
 import { P as q } from "./checkbox-DCjl4VM0.js";
 import { P as k, t as h, x as P, n, a as c } from "./element-DjjF_tEh.js";
 import { P as x } from "./pkt-slot-controller-DtDaD9q_.js";
@@ -21,7 +21,7 @@ import { P as ot } from "./link-B748tCGi.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-m--Sfj_1.js";
+import { P as mt } from "./modal-sbobjlRZ.js";
 import { P as ft } from "./progressbar-BKt_aj7f.js";
 import { P as ht, P as ct } from "./radiobutton-DKHjKH75.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-4aQZVxGl.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-DZY4gZCQ.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-m--Sfj_1.js";
+import { P as a } from "./modal-sbobjlRZ.js";
 const t = a;
 export {
   a as PktModal,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.37.3",
+  "version": "12.37.5",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -59,5 +59,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "0dd571723528af1b8f3a8ed2c2b95d50b4f46518"
+  "gitHead": "1615cdd90bff58dfa8c9a76cf3a22e88ae77c41c"
 }

package/src/components/button/button.ts

@@ -5,6 +5,7 @@ import { html, nothing, PropertyValues } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { createRef, Ref, ref } from 'lit/directives/ref.js'
 
+type Booleanish = boolean | 'true' | 'false'
 export type TPktButtonMode = 'light' | 'dark'
 export type TPktButtonSize = 'small' | 'medium' | 'large'
 export type TPktButtonColor =
@@ -40,8 +41,8 @@ export interface IPktButton {
   variant?: TPktButtonVariant
   state?: TPktButtonState
   type?: TPktButtonType
-  isLoading?: boolean
-  disabled?: boolean
+  isLoading?: Booleanish
+  disabled?: Booleanish
 }
 @customElement('pkt-button')
 export class PktButton extends PktElement<IPktButton> implements IPktButton {
@@ -65,10 +66,10 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
   @property({ type: String }) color?: TPktButtonColor
   @property({ type: String }) skin: TPktButtonSkin = 'primary'
   @property({ type: String }) variant: TPktButtonVariant = 'label-only'
-  @property({ type: String, reflect: true }) state?: TPktButtonState = 'normal'
+  @property({ type: String }) state?: TPktButtonState = 'normal'
   @property({ type: String, reflect: true }) type: TPktButtonType = 'button'
-  @property({ type: Boolean, reflect: true }) isLoading: boolean = false
-  @property({ type: Boolean, reflect: true }) disabled: boolean = false
+  @property({ type: Boolean }) isLoading: Booleanish = false
+  @property({ type: Boolean }) disabled: Booleanish = false
 
   // Lifecycle
 
@@ -78,12 +79,41 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
     this.removeEventListener('keydown', this.handleKeydown as EventListener)
   }
 
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+    super.attributeChangedCallback(name, _old, value)
+    // Convert strings to booleans
+    if (name === 'disabled' && value === 'false') {
+      this.disabled = false
+    }
+    if ((name === 'isloading' || name === 'isLoading') && value === 'false') {
+      this.isLoading = false
+    }
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties)
+
+    if (this.disabled === 'false') {
+      this.disabled = false
+    }
+    if (this.isLoading === 'false') {
+      this.isLoading = false
+    }
+  }
+
   protected updated(_changedProperties: PropertyValues): void {
     super.updated(_changedProperties)
 
     this.setAttribute('role', 'button')
     this.internals.role = 'button'
 
+    if (this.disabled === 'false') {
+      this.disabled = false
+    }
+    if (this.isLoading === 'false') {
+      this.isLoading = false
+    }
+
     if (this.disabled) {
       if (this.getAttribute('tabindex') !== '-1') {
         this.setAttribute('tabindex', '-1')

package/src/components/modal/modal.ts

@@ -54,7 +54,7 @@ export class PktModal extends PktElement implements IPktModal {
 
   protected async firstUpdated(_changedProperties: PropertyValues): Promise<void> {
     super.firstUpdated(_changedProperties)
-    if (this.dialogRef.value) {
+    if (this.dialogRef.value && !window.HTMLDialogElement && !this.dialogRef.value.showModal) {
       if ('document' in window && 'createElement' in document) {
         const dialogPolyfill = await import('dialog-polyfill').then((module) => module.default)
         dialogPolyfill.registerDialog(this.dialogRef.value)

package/dist/button-jdMbbn-e.cjs

@@ -1,12 +0,0 @@
-"use strict";const e=require("./element-BSypUpzA.cjs"),h=require("./pkt-slot-controller-Da-RgXfS.cjs"),d=require("./ref-BvbyvXRH.cjs");var p=Object.defineProperty,u=Object.getOwnPropertyDescriptor,i=(r,t,s,o)=>{for(var n=o>1?void 0:o?u(t,s):t,a=r.length-1,l;a>=0;a--)(l=r[a])&&(n=(o?l(t,s,n):l(n))||n);return o&&n&&p(t,s,n),n};exports.PktButton=class extends e.PktElement{constructor(){super(),this.internals=this.attachInternals(),this.defaultSlot=d.e(),this.iconName="user",this.secondIconName="user",this.mode="light",this.size="medium",this.skin="primary",this.variant="label-only",this.state="normal",this.type="button",this.isLoading=!1,this.disabled=!1,this.slotController=new h.PktSlotController(this,this.defaultSlot),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeydown)}updated(t){super.updated(t),this.setAttribute("role","button"),this.internals.role="button",this.disabled?(this.getAttribute("tabindex")!=="-1"&&this.setAttribute("tabindex","-1"),this.getAttribute("aria-disabled")!=="true"&&this.setAttribute("aria-disabled","true")):(this.getAttribute("tabindex")!=="0"&&this.setAttribute("tabindex","0"),this.getAttribute("aria-disabled")!=="false"&&this.removeAttribute("aria-disabled")),this.isLoading?this.getAttribute("aria-busy")!=="true"&&this.setAttribute("aria-busy","true"):this.hasAttribute("aria-busy")&&this.removeAttribute("aria-busy"),this.updateElementClasses()}render(){return e.x`
-      <div class="pkt-contents">
-        ${this.isLoading?e.x`<pkt-icon
-              class="pkt-btn__icon pkt-btn__spinner"
-              name="spinner-blue"
-              path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
-            ></pkt-icon>`:e.E}
-        ${this.variant!=="label-only"?e.x`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>`:e.E}
-        <span class="pkt-btn__text" ${d.n(this.defaultSlot)}></span>
-        ${this.variant==="icons-right-and-left"?e.x`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`:e.E}
-      </div>
-    `}updateElementClasses(){const t=new Set,s=this.getAttribute("class");t.add("pkt-btn"),s&&s.split(" ").forEach(o=>t.add(o)),this.size&&t.add(`pkt-btn--${this.size}`),this.skin&&t.add(`pkt-btn--${this.skin}`),this.variant&&t.add(`pkt-btn--${this.variant}`),this.color&&t.add(`pkt-btn--${this.color}`),this.isLoading&&t.add("pkt-btn--active"),this.state&&t.add(`pkt-btn--${this.state}`),this.disabled&&t.add("pkt-btn--disabled"),this.className=[...t].join(" ")}handleClick(t){if(this.disabled||this.isLoading){t.preventDefault(),t.stopImmediatePropagation();return}if(this.type==="submit"&&this.internals.form){this.internals.form.requestSubmit();return}if(this.type==="reset"&&this.internals.form){this.internals.form.reset();return}this.onClick&&typeof this.onClick=="function"&&this.onClick!==this.handleClick&&this.onClick(t),this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0,detail:{originalEvent:t}}))}handleKeydown(t){if(!(this.disabled||this.isLoading)&&(t.key==="Enter"||t.key===" ")){t.preventDefault();const s=t.target;s&&s.click()}}};exports.PktButton.formAssociated=!0;i([e.n({type:String})],exports.PktButton.prototype,"iconName",2);i([e.n({type:String})],exports.PktButton.prototype,"secondIconName",2);i([e.n({type:String})],exports.PktButton.prototype,"mode",2);i([e.n({type:String})],exports.PktButton.prototype,"size",2);i([e.n({type:String})],exports.PktButton.prototype,"color",2);i([e.n({type:String})],exports.PktButton.prototype,"skin",2);i([e.n({type:String})],exports.PktButton.prototype,"variant",2);i([e.n({type:String,reflect:!0})],exports.PktButton.prototype,"state",2);i([e.n({type:String,reflect:!0})],exports.PktButton.prototype,"type",2);i([e.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"isLoading",2);i([e.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"disabled",2);exports.PktButton=i([e.t("pkt-button")],exports.PktButton);