@oslokommune/punkt-elements 12.40.9 → 12.41.0

package/CHANGELOG.md

@@ -5,6 +5,40 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.41.0](https://github.com/oslokommune/punkt/compare/12.40.10...12.41.0) (2025-06-10)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [12.40.10](https://github.com/oslokommune/punkt/compare/12.40.9...12.40.10) (2025-06-10)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.40.8](https://github.com/oslokommune/punkt/compare/12.40.7...12.40.8) (2025-06-02)
 
 ### ⚠ BREAKING CHANGES

package/dist/button-KzBZ-Bff.cjs

@@ -0,0 +1,19 @@
+"use strict";const t=require("./element-90YeMNbV.cjs"),h=require("./pkt-slot-controller-Da-RgXfS.cjs"),u=require("./class-map-DWDPOqjO.cjs"),a=require("./if-defined-C8eotHpL.cjs"),d=require("./ref-B-w1vCo8.cjs");var c=Object.defineProperty,k=Object.getOwnPropertyDescriptor,i=(r,n,o,e)=>{for(var s=e>1?void 0:e?k(n,o):n,p=r.length-1,l;p>=0;p--)(l=r[p])&&(s=(e?l(n,o,s):l(s))||s);return e&&s&&c(n,o,s),s};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktButton=class extends t.PktElement{constructor(){super(),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.form=void 0,this.isLoading=!1,this.disabled=!1,this.loadingAnimationPath=window.pktAnimationPath,this.slotController=new h.PktSlotController(this,this.defaultSlot)}attributeChangedCallback(n,o,e){super.attributeChangedCallback(n,o,e),n==="disabled"&&e==="false"&&(this.disabled=!1),(n==="isloading"||n==="isLoading")&&e==="false"&&(this.isLoading=!1)}firstUpdated(n){super.firstUpdated(n),this.disabled==="false"&&(this.disabled=!1),this.isLoading==="false"&&(this.isLoading=!1)}render(){const n=this.form??this.getAttribute("form")??void 0,o={"pkt-btn":!0,[`pkt-btn--${this.size}`]:!!this.size,[`pkt-btn--${this.skin}`]:!!this.skin,[`pkt-btn--${this.variant}`]:!!this.variant,[`pkt-btn--${this.color}`]:!!this.color,[`pkt-btn--${this.state}`]:!!this.state,"pkt-btn--disabled":!!this.disabled,"pkt-btn--isLoading":!!this.isLoading};return t.x`
+      <button
+        class=${u.e(o)}
+        type=${this.type}
+        ?disabled=${!!this.disabled}
+        aria-busy=${a.o(this.isLoading?"true":void 0)}
+        aria-disabled=${a.o(this.disabled?"true":void 0)}
+        form=${a.o(n)}
+      >
+        ${this.isLoading?t.x`<pkt-icon
+              class="pkt-btn__icon pkt-btn__spinner"
+              name="spinner-blue"
+              path=${a.o(this.loadingAnimationPath)}
+            ></pkt-icon>`:t.E}
+        ${this.variant!=="label-only"?t.x`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>`:t.E}
+        <span class="pkt-btn__text" ${d.n(this.defaultSlot)}></span>
+        ${this.variant==="icons-right-and-left"?t.x`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`:t.E}
+      </button>
+    `}};i([t.n({type:String})],exports.PktButton.prototype,"iconName",2);i([t.n({type:String})],exports.PktButton.prototype,"secondIconName",2);i([t.n({type:String})],exports.PktButton.prototype,"mode",2);i([t.n({type:String})],exports.PktButton.prototype,"size",2);i([t.n({type:String})],exports.PktButton.prototype,"color",2);i([t.n({type:String})],exports.PktButton.prototype,"skin",2);i([t.n({type:String})],exports.PktButton.prototype,"variant",2);i([t.n({type:String,reflect:!0})],exports.PktButton.prototype,"state",2);i([t.n({type:String})],exports.PktButton.prototype,"type",2);i([t.n({type:String})],exports.PktButton.prototype,"form",2);i([t.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"isLoading",2);i([t.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"disabled",2);i([t.n({type:String})],exports.PktButton.prototype,"loadingAnimationPath",2);exports.PktButton=i([t.t("pkt-button")],exports.PktButton);

package/dist/button-OLSvT2Im.js

@@ -0,0 +1,100 @@
+import { P as b, E as c, x as p, n as s, a as f } from "./element-gAd63VwC.js";
+import { P as m } from "./pkt-slot-controller-DtDaD9q_.js";
+import { e as y } from "./class-map-m7ZCZ49w.js";
+import { o as l } from "./if-defined-Cj-3Kdsr.js";
+import { e as g, n as k } from "./ref-DnSbnXsj.js";
+var u = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, o, n, r) => {
+  for (var a = r > 1 ? void 0 : r ? $(o, n) : o, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (a = (r ? h(o, n, a) : h(a)) || a);
+  return r && a && u(o, n, a), a;
+};
+window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
+let t = class extends b {
+  constructor() {
+    super(), this.defaultSlot = g(), 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.form = void 0, this.isLoading = !1, this.disabled = !1, this.loadingAnimationPath = window.pktAnimationPath, this.slotController = new m(this, this.defaultSlot);
+  }
+  // Lifecycle
+  attributeChangedCallback(e, o, n) {
+    super.attributeChangedCallback(e, o, n), e === "disabled" && n === "false" && (this.disabled = !1), (e === "isloading" || e === "isLoading") && n === "false" && (this.isLoading = !1);
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.disabled === "false" && (this.disabled = !1), this.isLoading === "false" && (this.isLoading = !1);
+  }
+  // Render
+  render() {
+    const e = this.form ?? this.getAttribute("form") ?? void 0, o = {
+      "pkt-btn": !0,
+      [`pkt-btn--${this.size}`]: !!this.size,
+      [`pkt-btn--${this.skin}`]: !!this.skin,
+      [`pkt-btn--${this.variant}`]: !!this.variant,
+      [`pkt-btn--${this.color}`]: !!this.color,
+      [`pkt-btn--${this.state}`]: !!this.state,
+      "pkt-btn--disabled": !!this.disabled,
+      "pkt-btn--isLoading": !!this.isLoading
+    };
+    return p`
+      <button
+        class=${y(o)}
+        type=${this.type}
+        ?disabled=${!!this.disabled}
+        aria-busy=${l(this.isLoading ? "true" : void 0)}
+        aria-disabled=${l(this.disabled ? "true" : void 0)}
+        form=${l(e)}
+      >
+        ${this.isLoading ? p`<pkt-icon
+              class="pkt-btn__icon pkt-btn__spinner"
+              name="spinner-blue"
+              path=${l(this.loadingAnimationPath)}
+            ></pkt-icon>` : c}
+        ${this.variant !== "label-only" ? p`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>` : c}
+        <span class="pkt-btn__text" ${k(this.defaultSlot)}></span>
+        ${this.variant === "icons-right-and-left" ? p`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>` : c}
+      </button>
+    `;
+  }
+};
+i([
+  s({ type: String })
+], t.prototype, "iconName", 2);
+i([
+  s({ type: String })
+], t.prototype, "secondIconName", 2);
+i([
+  s({ type: String })
+], t.prototype, "mode", 2);
+i([
+  s({ type: String })
+], t.prototype, "size", 2);
+i([
+  s({ type: String })
+], t.prototype, "color", 2);
+i([
+  s({ type: String })
+], t.prototype, "skin", 2);
+i([
+  s({ type: String })
+], t.prototype, "variant", 2);
+i([
+  s({ type: String, reflect: !0 })
+], t.prototype, "state", 2);
+i([
+  s({ type: String })
+], t.prototype, "type", 2);
+i([
+  s({ type: String })
+], t.prototype, "form", 2);
+i([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "isLoading", 2);
+i([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+i([
+  s({ type: String })
+], t.prototype, "loadingAnimationPath", 2);
+t = i([
+  f("pkt-button")
+], t);
+export {
+  t as P
+};

package/dist/{checkbox-CtM5Hr2H.js → checkbox-B67_cfqW.js}

@@ -30,6 +30,7 @@ let t = class extends k {
       "pkt-input-check__input-checkbox--error": this.hasError
     }), c = u({
       "pkt-input-check__input-label": !0,
+      "pkt-input-check__input-label--disabled": this.disabled,
       "pkt-input-check__input-label--left": this.labelPosition === "left",
       "pkt-input-check__input-label--right": this.labelPosition === "right",
       "pkt-sr-only": this.hideLabel

package/dist/{checkbox-Dqd2_fcU.cjs → checkbox-CiXWukkL.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("./element-90YeMNbV.cjs"),a=require("./input-element-CInrWeac.cjs"),k=require("./ref-B-w1vCo8.cjs"),o=require("./class-map-DWDPOqjO.cjs");var r=Object.defineProperty,u=Object.getOwnPropertyDescriptor,c=(l,t,s,h)=>{for(var i=h>1?void 0:h?u(t,s):t,n=l.length-1,p;n>=0;n--)(p=l[n])&&(i=(h?p(t,s,i):p(i))||i);return h&&i&&r(t,s,i),i};exports.PktCheckbox=class extends a.PktInputElement{constructor(){super(...arguments),this.inputRef=k.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition="right",this.hideLabel=!1,this.checked=null,this.type="checkbox"}connectedCallback(){super.connectedCallback()}attributeChangedCallback(t,s,h){t==="defaultChecked"&&!this.checked&&(this.checked=this.defaultChecked),t==="checked"&&(this.checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(t,s,h)}firstUpdated(t){t.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),super.firstUpdated(t)}render(){const t=o.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),s=o.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),h=o.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--left":this.labelPosition==="left","pkt-input-check__input-label--right":this.labelPosition==="right","pkt-sr-only":this.hideLabel}),i=()=>e.x`
+"use strict";const e=require("./element-90YeMNbV.cjs"),a=require("./input-element-CInrWeac.cjs"),k=require("./ref-B-w1vCo8.cjs"),o=require("./class-map-DWDPOqjO.cjs");var r=Object.defineProperty,u=Object.getOwnPropertyDescriptor,c=(l,t,s,h)=>{for(var i=h>1?void 0:h?u(t,s):t,n=l.length-1,p;n>=0;n--)(p=l[n])&&(i=(h?p(t,s,i):p(i))||i);return h&&i&&r(t,s,i),i};exports.PktCheckbox=class extends a.PktInputElement{constructor(){super(...arguments),this.inputRef=k.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition="right",this.hideLabel=!1,this.checked=null,this.type="checkbox"}connectedCallback(){super.connectedCallback()}attributeChangedCallback(t,s,h){t==="defaultChecked"&&!this.checked&&(this.checked=this.defaultChecked),t==="checked"&&(this.checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(t,s,h)}firstUpdated(t){t.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),super.firstUpdated(t)}render(){const t=o.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),s=o.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),h=o.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-input-check__input-label--left":this.labelPosition==="left","pkt-input-check__input-label--right":this.labelPosition==="right","pkt-sr-only":this.hideLabel}),i=()=>e.x`
         <label class=${h} for=${this.id+"-internal"}>
           ${this.label}
           ${this.checkHelptext?e.x`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:e.E}

package/dist/{consent-CkDh30xr.cjs → consent-D1r9LYda.cjs}

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

package/dist/{consent-B_cBTKCZ.js → consent-a09DlJZT.js}

@@ -1,5 +1,5 @@
 import { P as k, x as l, n as a, a as u } from "./element-gAd63VwC.js";
-import "./button-BSTI5da6.js";
+import "./button-OLSvT2Im.js";
 import "./icon-CO1TLSs5.js";
 const h = {
   i18n: {

package/dist/index.d.ts

@@ -355,8 +355,6 @@ export declare class PktBackLink extends PktElement<IPktBackLink> implements IPk
 }
 
 export declare class PktButton extends PktElement<IPktButton> implements IPktButton {
-    static formAssociated: boolean;
-    private internals;
     slotController: PktSlotController;
     defaultSlot: Ref<HTMLElement>;
     constructor();
@@ -369,18 +367,13 @@ export declare class PktButton extends PktElement<IPktButton> implements IPktBut
     variant: TPktButtonVariant;
     state?: TPktButtonState;
     type: TPktButtonType;
+    form: string | undefined;
     isLoading: Booleanish;
     disabled: Booleanish;
     loadingAnimationPath: string | undefined;
-    connectedCallback(): void;
-    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;
-    private handleClick;
-    private handleKeydown;
 }
 
 export declare class PktCalendar extends PktElement {

package/dist/pkt-button.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./button-oZThyRNI.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-KzBZ-Bff.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-BSTI5da6.js";
+import { P as t } from "./button-OLSvT2Im.js";
 const a = t;
 export {
   t as PktButton,

package/dist/pkt-checkbox.cjs

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

package/dist/pkt-checkbox.js

@@ -1,4 +1,4 @@
-import { P as o } from "./checkbox-CtM5Hr2H.js";
+import { P as o } from "./checkbox-B67_cfqW.js";
 const k = o;
 export {
   o as PktCheckbox,

package/dist/pkt-consent.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./consent-CkDh30xr.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-D1r9LYda.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-B_cBTKCZ.js";
+import { P as t } from "./consent-a09DlJZT.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-D2PhTV94.cjs"),l=require("./accordionitem-Dz6jwPpb.cjs"),d=require("./backlink-CcAZfB1d.cjs"),b=require("./button-oZThyRNI.cjs"),k=require("./calendar-BDeaGBaH.cjs"),m=require("./card-CmdIb2X9.cjs"),g=require("./combobox-lds6Lryq.cjs"),h=require("./consent-CkDh30xr.cjs"),f=require("./checkbox-Dqd2_fcU.cjs"),t=require("./element-90YeMNbV.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-B-w1vCo8.cjs"),O=require("./class-map-DWDPOqjO.cjs"),j=require("./datepicker-DpQV8G6g.cjs"),q=require("./helptext-AqNI_oFG.cjs"),x=require("./heading-CxJ0IqpU.cjs"),C=require("./icon-B1_BRNqf.cjs"),v=require("./input-wrapper-B_TtkGqo.cjs"),S=require("./link-BWJrqWi7.cjs"),$=require("./linkcard-0KLDuaGM.cjs"),L=require("./loader--5h6NKGl.cjs"),_=require("./messagebox-IJOkv427.cjs"),A=require("./modal-CBURcXBd.cjs"),B=require("./progressbar-BrXtjUvh.cjs"),p=require("./radiobutton-C7tqzN0V.cjs"),T=require("./tag-lU4vz70a.cjs"),I=require("./textarea-j8kBS-hf.cjs"),M=require("./textinput-kmcj-FlC.cjs"),R=require("./select-BUvu5SFp.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-D2PhTV94.cjs"),l=require("./accordionitem-Dz6jwPpb.cjs"),d=require("./backlink-CcAZfB1d.cjs"),b=require("./button-KzBZ-Bff.cjs"),k=require("./calendar-BDeaGBaH.cjs"),m=require("./card-CmdIb2X9.cjs"),g=require("./combobox-lds6Lryq.cjs"),h=require("./consent-D1r9LYda.cjs"),f=require("./checkbox-CiXWukkL.cjs"),t=require("./element-90YeMNbV.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-B-w1vCo8.cjs"),O=require("./class-map-DWDPOqjO.cjs"),j=require("./datepicker-DpQV8G6g.cjs"),q=require("./helptext-AqNI_oFG.cjs"),x=require("./heading-CxJ0IqpU.cjs"),C=require("./icon-B1_BRNqf.cjs"),v=require("./input-wrapper-B_TtkGqo.cjs"),S=require("./link-BWJrqWi7.cjs"),$=require("./linkcard-0KLDuaGM.cjs"),L=require("./loader--5h6NKGl.cjs"),_=require("./messagebox-IJOkv427.cjs"),A=require("./modal-CBURcXBd.cjs"),B=require("./progressbar-BrXtjUvh.cjs"),p=require("./radiobutton-x10h-JEh.cjs"),T=require("./tag-lU4vz70a.cjs"),I=require("./textarea-j8kBS-hf.cjs"),M=require("./textinput-kmcj-FlC.cjs"),R=require("./select-BUvu5SFp.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,13 +1,13 @@
 import { P as A } from "./alert-CoGYPbs-.js";
 import { P as B, a as E } from "./accordionitem-DkE9or0K.js";
 import { P as O } from "./backlink-BnlrDl9O.js";
-import { P as T } from "./button-BSTI5da6.js";
+import { P as T } from "./button-OLSvT2Im.js";
 import { c as f } from "./calendar-Beno8yU7.js";
 import { P as D } from "./calendar-Beno8yU7.js";
 import { P as G } from "./card-BxHlJq4J.js";
 import { P as K } from "./combobox-Ct7-a2Vy.js";
-import { P as U } from "./consent-B_cBTKCZ.js";
-import { P as q } from "./checkbox-CtM5Hr2H.js";
+import { P as U } from "./consent-a09DlJZT.js";
+import { P as q } from "./checkbox-B67_cfqW.js";
 import { P as k, t as h, x as P, n, a as c } from "./element-gAd63VwC.js";
 import { P as x } from "./pkt-slot-controller-DtDaD9q_.js";
 import { e as m, n as d } from "./ref-DnSbnXsj.js";
@@ -23,7 +23,7 @@ import { P as it } from "./loader-xkMMWgaj.js";
 import { P as lt } from "./messagebox-BLTBG8nD.js";
 import { P as mt } from "./modal-C6ljjVs6.js";
 import { P as ft } from "./progressbar-BSO0KWzv.js";
-import { P as ht, P as ct } from "./radiobutton-CxEBrLss.js";
+import { P as ht, P as ct } from "./radiobutton-BaIDDCwK.js";
 import { P as ut } from "./tag-CX-zbR-7.js";
 import { P as vt } from "./textarea-CmXiVLbl.js";
 import { P as bt } from "./textinput-LLaLZX3h.js";

package/dist/pkt-radiobutton.cjs

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

package/dist/pkt-radiobutton.js

@@ -1,4 +1,4 @@
-import { P as t } from "./radiobutton-CxEBrLss.js";
+import { P as t } from "./radiobutton-BaIDDCwK.js";
 const a = t;
 export {
   t as PktRadioButton,

package/dist/{radiobutton-CxEBrLss.js → radiobutton-BaIDDCwK.js}

@@ -1,12 +1,12 @@
-import { E as u, x as n, n as h, a as d } from "./element-gAd63VwC.js";
+import { x as n, E as u, n as p, a as d } from "./element-gAd63VwC.js";
 import { r as k } from "./state-BxrO4zNJ.js";
 import { P as f } from "./input-element-BEvaQK4g.js";
 import { e as _, n as b } from "./ref-DnSbnXsj.js";
 import { e as o } from "./class-map-m7ZCZ49w.js";
-var v = Object.defineProperty, C = Object.getOwnPropertyDescriptor, c = (e, i, p, l) => {
-  for (var s = l > 1 ? void 0 : l ? C(i, p) : i, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (s = (l ? a(i, p, s) : a(s)) || s);
-  return l && s && v(i, p, s), s;
+var $ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (e, i, s, l) => {
+  for (var h = l > 1 ? void 0 : l ? v(i, s) : i, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (h = (l ? a(i, s, h) : a(h)) || h);
+  return l && h && $(i, s, h), h;
 };
 let t = class extends f {
   constructor() {
@@ -15,8 +15,8 @@ let t = class extends f {
   connectedCallback() {
     super.connectedCallback();
   }
-  attributeChangedCallback(e, i, p) {
-    e === "defaultChecked" && (this._checked = this.defaultChecked), e === "checked" && (this._checked = this.checked === "" || this.checked === "true" || this.checked === !0), super.attributeChangedCallback(e, i, p);
+  attributeChangedCallback(e, i, s) {
+    e === "defaultChecked" && (this._checked = this.defaultChecked), e === "checked" && (this._checked = this.checked === "" || this.checked === "true" || this.checked === !0), super.attributeChangedCallback(e, i, s);
   }
   render() {
     const e = o({
@@ -26,7 +26,16 @@ let t = class extends f {
     }), i = o({
       "pkt-input-check__input-checkbox": !0,
       "pkt-input-check__input-checkbox--error": this.hasError
-    });
+    }), s = o({
+      "pkt-input-check__input-label": !0,
+      "pkt-input-check__input-label--disabled": this.disabled,
+      "pkt-sr-only": this.hideLabel
+    }), l = () => n`
+        <label class=${s} for=${this.id + "-internal"}>
+          ${this.label}
+          ${this.checkHelptext ? n`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : u}
+        </label>
+      `;
     return n`
       <div class="pkt-input-check">
         <div class=${e}>
@@ -45,10 +54,7 @@ let t = class extends f {
             @focus=${this.onFocus}
             ?checked=${this.checked}
           />
-          <label class="pkt-input-check__input-label" for=${this.id + "-internal"}>
-            ${this.label}
-            ${this.checkHelptext ? n`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : u}
-          </label>
+          ${l()}
         </div>
       </div>
     `;
@@ -58,22 +64,22 @@ let t = class extends f {
   }
 };
 c([
-  h({ type: String, reflect: !0 })
+  p({ type: String, reflect: !0 })
 ], t.prototype, "value", 2);
 c([
-  h({ type: String })
+  p({ type: String })
 ], t.prototype, "checkHelptext", 2);
 c([
-  h({ type: Boolean })
+  p({ type: Boolean })
 ], t.prototype, "defaultChecked", 2);
 c([
-  h({ type: Boolean })
+  p({ type: Boolean })
 ], t.prototype, "hasTile", 2);
 c([
-  h({ type: Boolean, reflect: !0 })
+  p({ type: Boolean, reflect: !0 })
 ], t.prototype, "checked", 2);
 c([
-  h({ type: String, reflect: !0 })
+  p({ type: String, reflect: !0 })
 ], t.prototype, "type", 2);
 c([
   k()

package/dist/{radiobutton-C7tqzN0V.cjs → radiobutton-x10h-JEh.cjs}

@@ -1,9 +1,14 @@
-"use strict";const e=require("./element-90YeMNbV.cjs"),p=require("./state-D-Recv7U.cjs"),r=require("./input-element-CInrWeac.cjs"),o=require("./ref-B-w1vCo8.cjs"),a=require("./class-map-DWDPOqjO.cjs");var d=Object.defineProperty,k=Object.getOwnPropertyDescriptor,i=(h,t,c,n)=>{for(var s=n>1?void 0:n?k(t,c):t,l=h.length-1,u;l>=0;l--)(u=h[l])&&(s=(n?u(t,c,s):u(s))||s);return n&&s&&d(t,c,s),s};exports.PktRadioButton=class extends r.PktInputElement{constructor(){super(...arguments),this.inputRef=o.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.checked=null,this.type="radio",this._checked=!1}connectedCallback(){super.connectedCallback()}attributeChangedCallback(t,c,n){t==="defaultChecked"&&(this._checked=this.defaultChecked),t==="checked"&&(this._checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(t,c,n)}render(){const t=a.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),c=a.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError});return e.x`
+"use strict";const e=require("./element-90YeMNbV.cjs"),p=require("./state-D-Recv7U.cjs"),r=require("./input-element-CInrWeac.cjs"),o=require("./ref-B-w1vCo8.cjs"),u=require("./class-map-DWDPOqjO.cjs");var d=Object.defineProperty,k=Object.getOwnPropertyDescriptor,s=(l,t,n,c)=>{for(var i=c>1?void 0:c?k(t,n):t,h=l.length-1,a;h>=0;h--)(a=l[h])&&(i=(c?a(t,n,i):a(i))||i);return c&&i&&d(t,n,i),i};exports.PktRadioButton=class extends r.PktInputElement{constructor(){super(...arguments),this.inputRef=o.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.checked=null,this.type="radio",this._checked=!1}connectedCallback(){super.connectedCallback()}attributeChangedCallback(t,n,c){t==="defaultChecked"&&(this._checked=this.defaultChecked),t==="checked"&&(this._checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(t,n,c)}render(){const t=u.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),n=u.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),c=u.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-sr-only":this.hideLabel}),i=()=>e.x`
+        <label class=${c} for=${this.id+"-internal"}>
+          ${this.label}
+          ${this.checkHelptext?e.x`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:e.E}
+        </label>
+      `;return e.x`
       <div class="pkt-input-check">
         <div class=${t}>
           <input
             id=${this.id+"-internal"}
-            class=${c}
+            class=${n}
             type="radio"
             role="radio"
             ?disabled=${this.disabled}
@@ -16,10 +21,7 @@
             @focus=${this.onFocus}
             ?checked=${this.checked}
           />
-          <label class="pkt-input-check__input-label" for=${this.id+"-internal"}>
-            ${this.label}
-            ${this.checkHelptext?e.x`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:e.E}
-          </label>
+          ${i()}
         </div>
       </div>
-    `}toggleChecked(t=null){t&&t.preventDefault(),t&&t.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this._checked=this.inputRef.value.matches(":checked"),this.valueChecked(this._checked))}};i([e.n({type:String,reflect:!0})],exports.PktRadioButton.prototype,"value",2);i([e.n({type:String})],exports.PktRadioButton.prototype,"checkHelptext",2);i([e.n({type:Boolean})],exports.PktRadioButton.prototype,"defaultChecked",2);i([e.n({type:Boolean})],exports.PktRadioButton.prototype,"hasTile",2);i([e.n({type:Boolean,reflect:!0})],exports.PktRadioButton.prototype,"checked",2);i([e.n({type:String,reflect:!0})],exports.PktRadioButton.prototype,"type",2);i([p.r()],exports.PktRadioButton.prototype,"_checked",2);exports.PktRadioButton=i([e.t("pkt-radiobutton")],exports.PktRadioButton);
+    `}toggleChecked(t=null){t&&t.preventDefault(),t&&t.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this._checked=this.inputRef.value.matches(":checked"),this.valueChecked(this._checked))}};s([e.n({type:String,reflect:!0})],exports.PktRadioButton.prototype,"value",2);s([e.n({type:String})],exports.PktRadioButton.prototype,"checkHelptext",2);s([e.n({type:Boolean})],exports.PktRadioButton.prototype,"defaultChecked",2);s([e.n({type:Boolean})],exports.PktRadioButton.prototype,"hasTile",2);s([e.n({type:Boolean,reflect:!0})],exports.PktRadioButton.prototype,"checked",2);s([e.n({type:String,reflect:!0})],exports.PktRadioButton.prototype,"type",2);s([p.r()],exports.PktRadioButton.prototype,"_checked",2);exports.PktRadioButton=s([e.t("pkt-radiobutton")],exports.PktRadioButton);

package/package.json

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

package/src/components/button/button.ts

@@ -3,6 +3,8 @@ import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
 import { html, nothing, PropertyValues } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
 import { createRef, Ref, ref } from 'lit/directives/ref.js'
 
 // Allow global override of animation assets path
@@ -51,8 +53,6 @@ export interface IPktButton {
 }
 @customElement('pkt-button')
 export class PktButton extends PktElement<IPktButton> implements IPktButton {
-  static formAssociated = true
-  private internals = this.attachInternals()
   slotController: PktSlotController
   defaultSlot: Ref<HTMLElement> = createRef()
 
@@ -70,25 +70,14 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
   @property({ type: String }) skin: TPktButtonSkin = 'primary'
   @property({ type: String }) variant: TPktButtonVariant = 'label-only'
   @property({ type: String, reflect: true }) state?: TPktButtonState = 'normal'
-  @property({ type: String, reflect: true }) type: TPktButtonType = 'button'
+  @property({ type: String }) type: TPktButtonType = 'button'
+  @property({ type: String }) form: string | undefined = undefined
   @property({ type: Boolean, reflect: true }) isLoading: Booleanish = false
   @property({ type: Boolean, reflect: true }) disabled: Booleanish = false
   @property({ type: String }) loadingAnimationPath: string | undefined = window.pktAnimationPath
 
   // Lifecycle
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', this.handleClick as EventListener)
-    this.addEventListener('keydown', this.handleKeydown as EventListener)
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.removeEventListener('click', this.handleClick as EventListener)
-    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
@@ -111,57 +100,36 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
     }
   }
 
-  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')
-      }
-      if (this.getAttribute('aria-disabled') !== 'true') {
-        this.setAttribute('aria-disabled', 'true')
-      }
-    } else {
-      if (this.getAttribute('tabindex') !== '0') {
-        this.setAttribute('tabindex', '0')
-      }
-      if (this.getAttribute('aria-disabled') !== 'false') {
-        this.removeAttribute('aria-disabled')
-      }
-    }
-    if (this.isLoading) {
-      if (this.getAttribute('aria-busy') !== 'true') {
-        this.setAttribute('aria-busy', 'true')
-      }
-    } else {
-      if (this.hasAttribute('aria-busy')) {
-        this.removeAttribute('aria-busy')
-      }
-    }
-
-    this.updateElementClasses()
-  }
-
   // Render
 
   render() {
+    const formId = this.form ?? this.getAttribute('form') ?? undefined
+
+    const classes = {
+      'pkt-btn': true,
+      [`pkt-btn--${this.size}`]: !!this.size,
+      [`pkt-btn--${this.skin}`]: !!this.skin,
+      [`pkt-btn--${this.variant}`]: !!this.variant,
+      [`pkt-btn--${this.color}`]: !!this.color,
+      [`pkt-btn--${this.state}`]: !!this.state,
+      'pkt-btn--disabled': !!this.disabled,
+      'pkt-btn--isLoading': !!this.isLoading,
+    }
+
     return html`
-      <div class="pkt-contents">
+      <button
+        class=${classMap(classes)}
+        type=${this.type}
+        ?disabled=${!!this.disabled}
+        aria-busy=${ifDefined(this.isLoading ? 'true' : undefined)}
+        aria-disabled=${ifDefined(this.disabled ? 'true' : undefined)}
+        form=${ifDefined(formId)}
+      >
         ${this.isLoading
           ? html`<pkt-icon
               class="pkt-btn__icon pkt-btn__spinner"
               name="spinner-blue"
-              path=${this.loadingAnimationPath}
+              path=${ifDefined(this.loadingAnimationPath)}
             ></pkt-icon>`
           : nothing}
         ${this.variant !== 'label-only'
@@ -171,73 +139,9 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
         ${this.variant === 'icons-right-and-left'
           ? html`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`
           : nothing}
-      </div>
+      </button>
     `
   }
-
-  // Methods
-
-  private updateElementClasses() {
-    const classes = new Set<string>()
-    const currentClasses = this.getAttribute('class')
-
-    classes.add('pkt-btn')
-
-    if (currentClasses) {
-      currentClasses.split(' ').forEach((classname) => classes.add(classname))
-    }
-    if (this.size) classes.add(`pkt-btn--${this.size}`)
-    if (this.skin) classes.add(`pkt-btn--${this.skin}`)
-    if (this.variant) classes.add(`pkt-btn--${this.variant}`)
-    if (this.color) classes.add(`pkt-btn--${this.color}`)
-    if (this.isLoading) classes.add('pkt-btn--active')
-    if (this.state) classes.add(`pkt-btn--${this.state}`)
-    if (this.disabled) classes.add('pkt-btn--disabled')
-
-    this.className = [...classes].join(' ')
-  }
-
-  private handleClick(event: MouseEvent) {
-    if (this.disabled || this.isLoading) {
-      event.preventDefault()
-      event.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
-    }
-
-    if (this.onClick && typeof this.onClick === 'function' && this.onClick !== this.handleClick) {
-      this.onClick(event)
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('button-click', {
-        bubbles: true,
-        composed: true,
-        detail: { originalEvent: event },
-      }),
-    )
-  }
-
-  private handleKeydown(event: KeyboardEvent) {
-    if (this.disabled || this.isLoading) return
-
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault()
-      const button = event.target as HTMLButtonElement
-      if (button) {
-        button.click()
-      }
-    }
-  }
 }
+
 export default PktButton

package/src/components/checkbox/checkbox.ts

@@ -54,6 +54,7 @@ export class PktCheckbox extends PktInputElement {
 
     const labelClasses = classMap({
       'pkt-input-check__input-label': true,
+      'pkt-input-check__input-label--disabled': this.disabled,
       'pkt-input-check__input-label--left': this.labelPosition === 'left',
       'pkt-input-check__input-label--right': this.labelPosition === 'right',
       'pkt-sr-only': this.hideLabel,

package/src/components/radiobutton/radiobutton.ts

@@ -44,6 +44,23 @@ export class PktRadioButton extends PktInputElement {
       'pkt-input-check__input-checkbox--error': this.hasError,
     })
 
+    const labelClasses = classMap({
+      'pkt-input-check__input-label': true,
+      'pkt-input-check__input-label--disabled': this.disabled,
+      'pkt-sr-only': this.hideLabel,
+    })
+
+    const labelAndHelptext = () => {
+      return html`
+        <label class=${labelClasses} for=${this.id + '-internal'}>
+          ${this.label}
+          ${this.checkHelptext
+            ? html`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`
+            : nothing}
+        </label>
+      `
+    }
+
     return html`
       <div class="pkt-input-check">
         <div class=${inputTileClasses}>
@@ -62,12 +79,7 @@ export class PktRadioButton extends PktInputElement {
             @focus=${this.onFocus}
             ?checked=${this.checked}
           />
-          <label class="pkt-input-check__input-label" for=${this.id + '-internal'}>
-            ${this.label}
-            ${this.checkHelptext
-              ? html`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`
-              : nothing}
-          </label>
+          ${labelAndHelptext()}
         </div>
       </div>
     `

package/dist/button-BSTI5da6.js

@@ -1,121 +0,0 @@
-import { n as a, P as c, E as p, x as l, a as b } from "./element-gAd63VwC.js";
-import { P as f } from "./pkt-slot-controller-DtDaD9q_.js";
-import { e as u, n as k } from "./ref-DnSbnXsj.js";
-var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (t, s, n, r) => {
-  for (var o = r > 1 ? void 0 : r ? y(s, n) : s, d = t.length - 1, h; d >= 0; d--)
-    (h = t[d]) && (o = (r ? h(s, n, o) : h(o)) || o);
-  return r && o && m(s, n, o), o;
-};
-window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
-let i = class extends c {
-  constructor() {
-    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.loadingAnimationPath = window.pktAnimationPath, this.slotController = new f(this, this.defaultSlot);
-  }
-  // Lifecycle
-  connectedCallback() {
-    super.connectedCallback(), 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
-  render() {
-    return l`
-      <div class="pkt-contents">
-        ${this.isLoading ? l`<pkt-icon
-              class="pkt-btn__icon pkt-btn__spinner"
-              name="spinner-blue"
-              path=${this.loadingAnimationPath}
-            ></pkt-icon>` : p}
-        ${this.variant !== "label-only" ? l`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>` : p}
-        <span class="pkt-btn__text" ${k(this.defaultSlot)}></span>
-        ${this.variant === "icons-right-and-left" ? l`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>` : p}
-      </div>
-    `;
-  }
-  // Methods
-  updateElementClasses() {
-    const t = /* @__PURE__ */ 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();
-    }
-  }
-};
-i.formAssociated = !0;
-e([
-  a({ type: String })
-], i.prototype, "iconName", 2);
-e([
-  a({ type: String })
-], i.prototype, "secondIconName", 2);
-e([
-  a({ type: String })
-], i.prototype, "mode", 2);
-e([
-  a({ type: String })
-], i.prototype, "size", 2);
-e([
-  a({ type: String })
-], i.prototype, "color", 2);
-e([
-  a({ type: String })
-], i.prototype, "skin", 2);
-e([
-  a({ type: String })
-], i.prototype, "variant", 2);
-e([
-  a({ type: String, reflect: !0 })
-], i.prototype, "state", 2);
-e([
-  a({ type: String, reflect: !0 })
-], i.prototype, "type", 2);
-e([
-  a({ type: Boolean, reflect: !0 })
-], i.prototype, "isLoading", 2);
-e([
-  a({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled", 2);
-e([
-  a({ type: String })
-], i.prototype, "loadingAnimationPath", 2);
-i = e([
-  b("pkt-button")
-], i);
-export {
-  i as P
-};

package/dist/button-oZThyRNI.cjs

@@ -1,12 +0,0 @@
-"use strict";const i=require("./element-90YeMNbV.cjs"),h=require("./pkt-slot-controller-Da-RgXfS.cjs"),d=require("./ref-B-w1vCo8.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};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";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.loadingAnimationPath=window.pktAnimationPath,this.slotController=new h.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),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=${this.loadingAnimationPath}
-            ></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,reflect:!0})],exports.PktButton.prototype,"state",2);e([i.n({type:String,reflect:!0})],exports.PktButton.prototype,"type",2);e([i.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"isLoading",2);e([i.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"disabled",2);e([i.n({type:String})],exports.PktButton.prototype,"loadingAnimationPath",2);exports.PktButton=e([i.t("pkt-button")],exports.PktButton);