@oslokommune/punkt-react 12.37.6 → 12.37.8

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.37.7](https://github.com/oslokommune/punkt/compare/12.37.6...12.37.7) (2025-05-13)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* Støtte nextjs med 'use client' på alle React-komponenter (#2537). 
+
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.37.0](https://github.com/oslokommune/punkt/compare/12.36.2...12.37.0) (2025-05-05)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -343,7 +343,7 @@ export declare interface IPktRadioButton extends InputHTMLAttributes<HTMLInputEl
     defaultChecked?: boolean;
     disabled?: boolean;
     value?: string;
-    checkHelptext?: string | default_2.ReactNode | default_2.ReactNode[];
+    checkHelptext?: string | ReactNode | ReactNode[];
     ref?: ForwardedRef<HTMLInputElement>;
     onChange?: ChangeEventHandler<HTMLInputElement>;
     onInput?: ChangeEventHandler<HTMLInputElement>;

package/dist/punkt-react.es.js

@@ -25469,7 +25469,11 @@ let fn = class extends Gr {
     super.updated(n), n.has("dataTestid") && this.dataTestid && this.inputRef.value && (this.skipForwardTestid ? this.hasAttribute("data-testid") || this.setAttribute("data-testid", this.dataTestid) : (this.inputRef.value.dataset.testid = this.dataTestid, this.removeAttribute("data-testid")));
   }
   firstUpdated(n) {
-    if (super.firstUpdated(n), this.value && this.defaultValue !== null && (this.defaultValue = this.value), this.defaultValue !== null && !this.value && this.valueChanged(this.defaultValue, null), this.defaultChecked && (this.internals.ariaChecked = !0, this.checked = !0), this.required && (this.internals.ariaRequired = !0), this.disabled && (this.internals.ariaDisabled = !0), this.id && !this.name && (this.name = this.id), this.checked !== void 0) {
+    if (super.firstUpdated(n), !this.form) {
+      const i = this.internals.form || this.closest("form");
+      this.form = i;
+    }
+    if (this.value && this.defaultValue !== null && (this.defaultValue = this.value), this.defaultValue !== null && !this.value && this.valueChanged(this.defaultValue, null), this.defaultChecked && (this.internals.ariaChecked = !0, this.checked = !0), this.required && (this.internals.ariaRequired = !0), this.disabled && (this.internals.ariaDisabled = !0), this.id && !this.name && (this.name = this.id), this.checked !== void 0) {
       const i = this.checked === "" || this.checked === "true" || this.checked === !0;
       this.internals.ariaChecked = i, this.internals.setFormValue(
         i ? this.value || "on" : "",
@@ -28025,6 +28029,7 @@ let tc = class extends fn {
             type="radio"
             role="radio"
             ?disabled=${this.disabled}
+            form=""
             name=${this.name + "-internal"}
             ${Kt(this.inputRef)}
             @change=${this.toggleChecked}

package/dist/punkt-react.umd.js

@@ -580,7 +580,7 @@ You might need to use a local HTTP server (instead of file://): https://reactjs.
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const z1=(r,n,i)=>{const l=new Map;for(let c=n;c<=i;c++)l.set(r[c],c);return l},p0=Nf(class extends wh{constructor(r){if(super(r),r.type!==sl.CHILD)throw Error("repeat() can only be used in text expressions")}dt(r,n,i){let l;i===void 0?i=n:n!==void 0&&(l=n);const c=[],h=[];let m=0;for(const D of r)c[m]=l?l(D,m):m,h[m]=i(D,m),m++;return{values:h,keys:c}}render(r,n,i){return this.dt(r,n,i).values}update(r,[n,i,l]){const c=kP(r),{values:h,keys:m}=this.dt(n,i,l);if(!Array.isArray(c))return this.ut=m,h;const D=this.ut??(this.ut=[]),C=[];let T,$,N=0,O=c.length-1,R=0,I=h.length-1;for(;N<=O&&R<=I;)if(c[N]===null)N++;else if(c[O]===null)O--;else if(D[N]===m[R])C[R]=Of(c[N],h[R]),N++,R++;else if(D[O]===m[I])C[I]=Of(c[O],h[I]),O--,I--;else if(D[N]===m[I])C[I]=Of(c[N],h[I]),_g(r,C[I+1],c[N]),N++,I--;else if(D[O]===m[R])C[R]=Of(c[O],h[R]),_g(r,c[N],c[O]),O--,R++;else if(T===void 0&&(T=z1(m,R,I),$=z1(D,N,O)),T.has(D[N]))if(T.has(D[O])){const K=$.get(m[R]),Y=K!==void 0?c[K]:null;if(Y===null){const Ce=_g(r,c[N]);Of(Ce,h[R]),C[R]=Ce}else C[R]=Of(Y,h[R]),_g(r,c[N],Y),c[K]=null;R++}else r0(c[O]),O--;else r0(c[N]),N++;for(;R<=I;){const K=_g(r,C[I+1]);Of(K,h[R]),C[R++]=K}for(;N<=O;){const K=c[N++];K!==null&&r0(K)}return this.ut=m,v1(r,C),mo}}),U1=()=>("00000000000000000"+(Math.random()*18446744073709552e3).toString(16)).slice(-16),If=()=>{const r=U1(),n=U1();return r.slice(0,8)+"-"+r.slice(8,12)+"-4"+r.slice(13)+"-a"+n.slice(1,4)+"-"+n.slice(4)},m3={helptextDropdownButton:{default:"Les mer <span class='pkt-sr-only'>om feltet</span>"},counter:{default:!1},optionalTag:{default:!1},optionalText:{default:"Valgfritt"},requiredTag:{default:!1},requiredText:{default:"Må fylles ut"},hasError:{default:!1},disabled:{default:!1},inline:{default:!1},hasFieldset:{default:!1},useWrapper:{default:!0}},Wo={props:m3};var g3=Object.defineProperty,Bn=(r,n,i,l)=>{for(var c=void 0,h=r.length-1,m;h>=0;h--)(m=r[h])&&(c=m(n,i,c)||c);return c&&g3(n,i,c),c};let fn=class extends Hr{constructor(){super(),this.defaultValue=null,this.disabled=!1,this.readonly=!1,this.required=!1,this.max=null,this.maxlength=null,this.min=null,this.minlength=null,this.ariaDescribedBy=null,this.ariaLabelledby=null,this.name="",this.pattern=null,this.placeholder=null,this.id=If(),this.counter=!1,this.hasError=!1,this.inline=!1,this.hasFieldset=!1,this.optionalTag=!1,this.requiredTag=!1,this.skipForwardTestid=!1,this.useWrapper=!0,this.fullwidth=!1,this.counterMaxLength=0,this.errorMessage="",this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=Wo.props.helptextDropdownButton.default,this.label=null,this.optionalText=ws.forms.labels.optional,this.requiredText=ws.forms.labels.required,this.dataTestid="",this.touched=!1,this.internals=this.attachInternals()}static get formAssociated(){return!0}manageValidity(n){var i,l,c,h,m,D,C,T;n&&(this.required&&!this.value?this.internals.setValidity({valueMissing:!0},ws.forms.messages.required,n):(i=n.validity)!=null&&i.typeMismatch||(l=n.validity)!=null&&l.badInput?this.internals.setValidity({typeMismatch:!0},ws.forms.messages.invalid,n):(c=n.validity)!=null&&c.patternMismatch?this.internals.setValidity({patternMismatch:!0},ws.forms.messages.invalidPattern,n):(h=n.validity)!=null&&h.tooShort||this.minlength&&this.minlength>0&&this.value.length<this.minlength?this.internals.setValidity({tooShort:!0},ws.forms.messages.tooShort,n):(m=n.validity)!=null&&m.tooLong||this.maxlength&&this.maxlength>0&&this.value.length>this.maxlength?this.internals.setValidity({tooLong:!0},ws.forms.messages.tooLong,n):(D=n.validity)!=null&&D.rangeUnderflow?this.internals.setValidity({rangeUnderflow:!0},ws.forms.messages.rangeUnderflow,n):(C=n.validity)!=null&&C.rangeOverflow?this.internals.setValidity({rangeOverflow:!0},ws.forms.messages.rangeOverflow,n):(T=n.validity)!=null&&T.customError?this.internals.setValidity({customError:!0},n.validationMessage,n):this.internals.setValidity({}))}setFormValue(n){if(this.internals)if(Array.isArray(n)){const i=new FormData;n.forEach(l=>{i.append(this.name,l)}),this.internals.setFormValue(i)}else this.internals.setFormValue(n)}valueChecked(n){if(!this.touched)return;const i=this.internals.form||this.closest("form"),l=i?new FormData(i):null;i&&i.querySelectorAll(`pkt-radiobutton[name=${this.name}], input[type=radio][name=${this.name}]`).forEach(c=>{const h=c;h.name===this.name&&h.value!==this.value&&h.checked&&(h.checked=!1)}),typeof n=="string"?(this.checked=n==="true",this.internals.ariaChecked=n==="true"):typeof n=="boolean"&&(this.checked=n,this.internals.ariaChecked=n),this.checked?(this.internals.setFormValue(this.value||"on",this.value||"on"),l&&l.append(this.name,this.value||"on"),this.internals.states.add("--checked")):(this.internals.setFormValue(null,null),l&&l.delete(this.name),this.internals.states.delete("--checked")),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("value-change",{detail:this.checked,bubbles:!0,composed:!0})),this.internals.reportValidity()}valueChanged(n,i){(i!==this.value||i!==this._value)&&(typeof n=="string"?((this.multiple||this.range)&&n.includes(",")&&(n=n.split(",")),this.value=n,this._value=Array.isArray(n)?n:[n]):Array.isArray(n)?(this.value=this.multiple||this.range?n:n[0],this._value=n):(this.value="",this._value=[]),(!this.value||this.value.length===0)&&i&&i.length!==0?this.clearInputValue():this.value&&this.value.toString()!==(i==null?void 0:i.toString())&&this.onChange(this.value),this.updateComplete.then(()=>this.requestUpdate()))}clearInputValue(){const n=this.multiple||this.range?[]:"";this.value=n,this.internals.setFormValue(n),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("value-change",{detail:n,bubbles:!0,composed:!0}))}onFocus(){this.dispatchEvent(new FocusEvent("focus",{bubbles:!0,composed:!0}))}onBlur(){this.dispatchEvent(new FocusEvent("blur",{bubbles:!0,composed:!0}))}onInput(){this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))}onChange(n){if(!this.touched){this.touched=!0,n&&this.setFormValue(n);return}typeof n!="string"&&!Array.isArray(n)||((this.range||this.multiple)&&!Array.isArray(n)&&n.includes(",")&&(n=n.split(",")),!this.multiple&&!this.range&&Array.isArray(n)&&(n=n[0]),this.setFormValue(n),this.manageValidity(this.inputRef.value),this.inputRefTo&&this.manageValidity(this.inputRefTo.value),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("value-change",{detail:n,bubbles:!0,composed:!0})),this.internals.reportValidity())}formResetCallback(){this.touched=!1,this._options&&this._options.length&&this._options.forEach(n=>{n.selected=!1}),this.checked!==void 0?(this.checked=!1,this.internals.ariaChecked=!1,this.internals.setFormValue("",""),this.inputRef.value.checked=!1,this.valueChecked(this.checked)):(this.internals.setFormValue(""),this.value=this.defaultValue||(this.multiple||this.range?[]:""),this._value=this.value,this.valueChanged(this.value,null)),this.internals.ariaInvalid=!1}updated(n){super.updated(n),n.has("dataTestid")&&this.dataTestid&&this.inputRef.value&&(this.skipForwardTestid?this.hasAttribute("data-testid")||this.setAttribute("data-testid",this.dataTestid):(this.inputRef.value.dataset.testid=this.dataTestid,this.removeAttribute("data-testid")))}firstUpdated(n){if(super.firstUpdated(n),this.value&&this.defaultValue!==null&&(this.defaultValue=this.value),this.defaultValue!==null&&!this.value&&this.valueChanged(this.defaultValue,null),this.defaultChecked&&(this.internals.ariaChecked=!0,this.checked=!0),this.required&&(this.internals.ariaRequired=!0),this.disabled&&(this.internals.ariaDisabled=!0),this.id&&!this.name&&(this.name=this.id),this.checked!==void 0){const i=this.checked===""||this.checked==="true"||this.checked===!0;this.internals.ariaChecked=i,this.internals.setFormValue(i?this.value||"on":"",i?this.value||"on":"")}else this.internals.setFormValue(this.value);this.inputRef&&this.inputRef.value&&(this.inputRef.value.setAttribute("form",""),this.manageValidity(this.inputRef.value)),this.inputRefTo&&this.inputRefTo.value&&(this.inputRefTo.value.setAttribute("form",""),this.manageValidity(this.inputRefTo.value))}};Bn([z()],fn.prototype,"defaultValue"),Bn([z({type:Boolean,reflect:!0})],fn.prototype,"disabled"),Bn([z({type:Boolean,reflect:!0})],fn.prototype,"readonly"),Bn([z({type:Boolean,reflect:!0})],fn.prototype,"required"),Bn([z({type:Number,reflect:!0})],fn.prototype,"max"),Bn([z({type:Number,reflect:!0})],fn.prototype,"maxlength"),Bn([z({type:Number,reflect:!0})],fn.prototype,"min"),Bn([z({type:Number,reflect:!0})],fn.prototype,"minlength"),Bn([z({type:String})],fn.prototype,"ariaDescribedBy"),Bn([z({type:String})],fn.prototype,"ariaLabelledby"),Bn([z({type:String,reflect:!0})],fn.prototype,"name"),Bn([z({type:String,reflect:!0})],fn.prototype,"pattern"),Bn([z({type:String,reflect:!0})],fn.prototype,"placeholder"),Bn([z({type:String,reflect:!0})],fn.prototype,"id"),Bn([z({type:Boolean})],fn.prototype,"counter"),Bn([z({type:Boolean})],fn.prototype,"hasError"),Bn([z({type:Boolean})],fn.prototype,"inline"),Bn([z({type:Boolean})],fn.prototype,"hasFieldset"),Bn([z({type:Boolean})],fn.prototype,"optionalTag"),Bn([z({type:Boolean})],fn.prototype,"requiredTag"),Bn([z({type:Boolean})],fn.prototype,"skipForwardTestid"),Bn([z({type:Boolean,reflect:!1})],fn.prototype,"useWrapper"),Bn([z({type:Boolean,reflect:!0})],fn.prototype,"fullwidth"),Bn([z({type:Number})],fn.prototype,"counterMaxLength"),Bn([z({type:String})],fn.prototype,"errorMessage"),Bn([z({type:String})],fn.prototype,"helptext"),Bn([z({type:String})],fn.prototype,"helptextDropdown"),Bn([z({type:String,reflect:!1})],fn.prototype,"helptextDropdownButton"),Bn([z({type:String})],fn.prototype,"label"),Bn([z({type:String,reflect:!1})],fn.prototype,"optionalText"),Bn([z({type:String,reflect:!1})],fn.prototype,"requiredText"),Bn([z({type:String,attribute:"data-testid"})],fn.prototype,"dataTestid"),Bn([$n()],fn.prototype,"touched");let H1=class{constructor(n){this.nodes=[],this.options=[],this.host=n,this.host.addController(this),this.nodes=[],this.options=[],this.observer=new MutationObserver(i=>this.handleMutations(i))}hostConnected(){Array.from(this.host.childNodes).forEach(n=>{(n.nodeName==="OPTION"||n.nodeName==="DATA")&&this.addNode(n)}),this.observer.observe(this.host,{childList:!0})}hostDisconnected(){this.observer.disconnect()}addNode(n){(n.nodeName==="OPTION"||n.nodeName==="DATA")&&(n.setAttribute("class","pkt-hide"),n.setAttribute("hidden","true"),n.setAttribute("data-skip","true"),this.nodes.push(n))}createOptions(){this.options=this.nodes.map(n=>({value:n.getAttribute("value")||n.textContent||"",label:n.textContent||n.getAttribute("value")||"",selected:!!n.getAttribute("selected"),disabled:!!n.getAttribute("disabled")})),this.host.setAttribute("options",JSON.stringify(this.options))}handleMutations(n){let i=!1;n.forEach(l=>{l.type==="childList"&&(l.addedNodes.forEach(c=>{xg(c)&&(this.addNode(c),i=!0)}),l.removedNodes.forEach(c=>{xg(c)&&(this.nodes=this.nodes.filter(h=>h!==c),i=!0)}))}),i&&this.createOptions()}};var v3=Object.defineProperty,y3=Object.getOwnPropertyDescriptor,Eh=(r,n,i,l)=>{for(var c=l>1?void 0:l?y3(n,i):n,h=r.length-1,m;h>=0;h--)(m=r[h])&&(c=(l?m(n,i,c):m(c))||c);return l&&c&&v3(n,i,c),c};let Dd=class extends Hr{constructor(){super(),this.defaultSlot=dn(),this.forId=If(),this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=Wo.props.helptextDropdownButton.default,this.isHelpTextOpen=!1,this.slotController=new xa(this,this.defaultSlot)}render(){const n=()=>{const l=!this.isHelpTextOpen;this.isHelpTextOpen=l,this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!0,detail:{isOpen:l}}))},i=()=>this.helptextDropdown?Se`<div class="pkt-inputwrapper__helptext-expandable">
+ */const z1=(r,n,i)=>{const l=new Map;for(let c=n;c<=i;c++)l.set(r[c],c);return l},p0=Nf(class extends wh{constructor(r){if(super(r),r.type!==sl.CHILD)throw Error("repeat() can only be used in text expressions")}dt(r,n,i){let l;i===void 0?i=n:n!==void 0&&(l=n);const c=[],h=[];let m=0;for(const D of r)c[m]=l?l(D,m):m,h[m]=i(D,m),m++;return{values:h,keys:c}}render(r,n,i){return this.dt(r,n,i).values}update(r,[n,i,l]){const c=kP(r),{values:h,keys:m}=this.dt(n,i,l);if(!Array.isArray(c))return this.ut=m,h;const D=this.ut??(this.ut=[]),C=[];let T,$,N=0,O=c.length-1,R=0,I=h.length-1;for(;N<=O&&R<=I;)if(c[N]===null)N++;else if(c[O]===null)O--;else if(D[N]===m[R])C[R]=Of(c[N],h[R]),N++,R++;else if(D[O]===m[I])C[I]=Of(c[O],h[I]),O--,I--;else if(D[N]===m[I])C[I]=Of(c[N],h[I]),_g(r,C[I+1],c[N]),N++,I--;else if(D[O]===m[R])C[R]=Of(c[O],h[R]),_g(r,c[N],c[O]),O--,R++;else if(T===void 0&&(T=z1(m,R,I),$=z1(D,N,O)),T.has(D[N]))if(T.has(D[O])){const K=$.get(m[R]),Y=K!==void 0?c[K]:null;if(Y===null){const Ce=_g(r,c[N]);Of(Ce,h[R]),C[R]=Ce}else C[R]=Of(Y,h[R]),_g(r,c[N],Y),c[K]=null;R++}else r0(c[O]),O--;else r0(c[N]),N++;for(;R<=I;){const K=_g(r,C[I+1]);Of(K,h[R]),C[R++]=K}for(;N<=O;){const K=c[N++];K!==null&&r0(K)}return this.ut=m,v1(r,C),mo}}),U1=()=>("00000000000000000"+(Math.random()*18446744073709552e3).toString(16)).slice(-16),If=()=>{const r=U1(),n=U1();return r.slice(0,8)+"-"+r.slice(8,12)+"-4"+r.slice(13)+"-a"+n.slice(1,4)+"-"+n.slice(4)},m3={helptextDropdownButton:{default:"Les mer <span class='pkt-sr-only'>om feltet</span>"},counter:{default:!1},optionalTag:{default:!1},optionalText:{default:"Valgfritt"},requiredTag:{default:!1},requiredText:{default:"Må fylles ut"},hasError:{default:!1},disabled:{default:!1},inline:{default:!1},hasFieldset:{default:!1},useWrapper:{default:!0}},Wo={props:m3};var g3=Object.defineProperty,Bn=(r,n,i,l)=>{for(var c=void 0,h=r.length-1,m;h>=0;h--)(m=r[h])&&(c=m(n,i,c)||c);return c&&g3(n,i,c),c};let fn=class extends Hr{constructor(){super(),this.defaultValue=null,this.disabled=!1,this.readonly=!1,this.required=!1,this.max=null,this.maxlength=null,this.min=null,this.minlength=null,this.ariaDescribedBy=null,this.ariaLabelledby=null,this.name="",this.pattern=null,this.placeholder=null,this.id=If(),this.counter=!1,this.hasError=!1,this.inline=!1,this.hasFieldset=!1,this.optionalTag=!1,this.requiredTag=!1,this.skipForwardTestid=!1,this.useWrapper=!0,this.fullwidth=!1,this.counterMaxLength=0,this.errorMessage="",this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=Wo.props.helptextDropdownButton.default,this.label=null,this.optionalText=ws.forms.labels.optional,this.requiredText=ws.forms.labels.required,this.dataTestid="",this.touched=!1,this.internals=this.attachInternals()}static get formAssociated(){return!0}manageValidity(n){var i,l,c,h,m,D,C,T;n&&(this.required&&!this.value?this.internals.setValidity({valueMissing:!0},ws.forms.messages.required,n):(i=n.validity)!=null&&i.typeMismatch||(l=n.validity)!=null&&l.badInput?this.internals.setValidity({typeMismatch:!0},ws.forms.messages.invalid,n):(c=n.validity)!=null&&c.patternMismatch?this.internals.setValidity({patternMismatch:!0},ws.forms.messages.invalidPattern,n):(h=n.validity)!=null&&h.tooShort||this.minlength&&this.minlength>0&&this.value.length<this.minlength?this.internals.setValidity({tooShort:!0},ws.forms.messages.tooShort,n):(m=n.validity)!=null&&m.tooLong||this.maxlength&&this.maxlength>0&&this.value.length>this.maxlength?this.internals.setValidity({tooLong:!0},ws.forms.messages.tooLong,n):(D=n.validity)!=null&&D.rangeUnderflow?this.internals.setValidity({rangeUnderflow:!0},ws.forms.messages.rangeUnderflow,n):(C=n.validity)!=null&&C.rangeOverflow?this.internals.setValidity({rangeOverflow:!0},ws.forms.messages.rangeOverflow,n):(T=n.validity)!=null&&T.customError?this.internals.setValidity({customError:!0},n.validationMessage,n):this.internals.setValidity({}))}setFormValue(n){if(this.internals)if(Array.isArray(n)){const i=new FormData;n.forEach(l=>{i.append(this.name,l)}),this.internals.setFormValue(i)}else this.internals.setFormValue(n)}valueChecked(n){if(!this.touched)return;const i=this.internals.form||this.closest("form"),l=i?new FormData(i):null;i&&i.querySelectorAll(`pkt-radiobutton[name=${this.name}], input[type=radio][name=${this.name}]`).forEach(c=>{const h=c;h.name===this.name&&h.value!==this.value&&h.checked&&(h.checked=!1)}),typeof n=="string"?(this.checked=n==="true",this.internals.ariaChecked=n==="true"):typeof n=="boolean"&&(this.checked=n,this.internals.ariaChecked=n),this.checked?(this.internals.setFormValue(this.value||"on",this.value||"on"),l&&l.append(this.name,this.value||"on"),this.internals.states.add("--checked")):(this.internals.setFormValue(null,null),l&&l.delete(this.name),this.internals.states.delete("--checked")),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("value-change",{detail:this.checked,bubbles:!0,composed:!0})),this.internals.reportValidity()}valueChanged(n,i){(i!==this.value||i!==this._value)&&(typeof n=="string"?((this.multiple||this.range)&&n.includes(",")&&(n=n.split(",")),this.value=n,this._value=Array.isArray(n)?n:[n]):Array.isArray(n)?(this.value=this.multiple||this.range?n:n[0],this._value=n):(this.value="",this._value=[]),(!this.value||this.value.length===0)&&i&&i.length!==0?this.clearInputValue():this.value&&this.value.toString()!==(i==null?void 0:i.toString())&&this.onChange(this.value),this.updateComplete.then(()=>this.requestUpdate()))}clearInputValue(){const n=this.multiple||this.range?[]:"";this.value=n,this.internals.setFormValue(n),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("value-change",{detail:n,bubbles:!0,composed:!0}))}onFocus(){this.dispatchEvent(new FocusEvent("focus",{bubbles:!0,composed:!0}))}onBlur(){this.dispatchEvent(new FocusEvent("blur",{bubbles:!0,composed:!0}))}onInput(){this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))}onChange(n){if(!this.touched){this.touched=!0,n&&this.setFormValue(n);return}typeof n!="string"&&!Array.isArray(n)||((this.range||this.multiple)&&!Array.isArray(n)&&n.includes(",")&&(n=n.split(",")),!this.multiple&&!this.range&&Array.isArray(n)&&(n=n[0]),this.setFormValue(n),this.manageValidity(this.inputRef.value),this.inputRefTo&&this.manageValidity(this.inputRefTo.value),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("value-change",{detail:n,bubbles:!0,composed:!0})),this.internals.reportValidity())}formResetCallback(){this.touched=!1,this._options&&this._options.length&&this._options.forEach(n=>{n.selected=!1}),this.checked!==void 0?(this.checked=!1,this.internals.ariaChecked=!1,this.internals.setFormValue("",""),this.inputRef.value.checked=!1,this.valueChecked(this.checked)):(this.internals.setFormValue(""),this.value=this.defaultValue||(this.multiple||this.range?[]:""),this._value=this.value,this.valueChanged(this.value,null)),this.internals.ariaInvalid=!1}updated(n){super.updated(n),n.has("dataTestid")&&this.dataTestid&&this.inputRef.value&&(this.skipForwardTestid?this.hasAttribute("data-testid")||this.setAttribute("data-testid",this.dataTestid):(this.inputRef.value.dataset.testid=this.dataTestid,this.removeAttribute("data-testid")))}firstUpdated(n){if(super.firstUpdated(n),!this.form){const i=this.internals.form||this.closest("form");this.form=i}if(this.value&&this.defaultValue!==null&&(this.defaultValue=this.value),this.defaultValue!==null&&!this.value&&this.valueChanged(this.defaultValue,null),this.defaultChecked&&(this.internals.ariaChecked=!0,this.checked=!0),this.required&&(this.internals.ariaRequired=!0),this.disabled&&(this.internals.ariaDisabled=!0),this.id&&!this.name&&(this.name=this.id),this.checked!==void 0){const i=this.checked===""||this.checked==="true"||this.checked===!0;this.internals.ariaChecked=i,this.internals.setFormValue(i?this.value||"on":"",i?this.value||"on":"")}else this.internals.setFormValue(this.value);this.inputRef&&this.inputRef.value&&(this.inputRef.value.setAttribute("form",""),this.manageValidity(this.inputRef.value)),this.inputRefTo&&this.inputRefTo.value&&(this.inputRefTo.value.setAttribute("form",""),this.manageValidity(this.inputRefTo.value))}};Bn([z()],fn.prototype,"defaultValue"),Bn([z({type:Boolean,reflect:!0})],fn.prototype,"disabled"),Bn([z({type:Boolean,reflect:!0})],fn.prototype,"readonly"),Bn([z({type:Boolean,reflect:!0})],fn.prototype,"required"),Bn([z({type:Number,reflect:!0})],fn.prototype,"max"),Bn([z({type:Number,reflect:!0})],fn.prototype,"maxlength"),Bn([z({type:Number,reflect:!0})],fn.prototype,"min"),Bn([z({type:Number,reflect:!0})],fn.prototype,"minlength"),Bn([z({type:String})],fn.prototype,"ariaDescribedBy"),Bn([z({type:String})],fn.prototype,"ariaLabelledby"),Bn([z({type:String,reflect:!0})],fn.prototype,"name"),Bn([z({type:String,reflect:!0})],fn.prototype,"pattern"),Bn([z({type:String,reflect:!0})],fn.prototype,"placeholder"),Bn([z({type:String,reflect:!0})],fn.prototype,"id"),Bn([z({type:Boolean})],fn.prototype,"counter"),Bn([z({type:Boolean})],fn.prototype,"hasError"),Bn([z({type:Boolean})],fn.prototype,"inline"),Bn([z({type:Boolean})],fn.prototype,"hasFieldset"),Bn([z({type:Boolean})],fn.prototype,"optionalTag"),Bn([z({type:Boolean})],fn.prototype,"requiredTag"),Bn([z({type:Boolean})],fn.prototype,"skipForwardTestid"),Bn([z({type:Boolean,reflect:!1})],fn.prototype,"useWrapper"),Bn([z({type:Boolean,reflect:!0})],fn.prototype,"fullwidth"),Bn([z({type:Number})],fn.prototype,"counterMaxLength"),Bn([z({type:String})],fn.prototype,"errorMessage"),Bn([z({type:String})],fn.prototype,"helptext"),Bn([z({type:String})],fn.prototype,"helptextDropdown"),Bn([z({type:String,reflect:!1})],fn.prototype,"helptextDropdownButton"),Bn([z({type:String})],fn.prototype,"label"),Bn([z({type:String,reflect:!1})],fn.prototype,"optionalText"),Bn([z({type:String,reflect:!1})],fn.prototype,"requiredText"),Bn([z({type:String,attribute:"data-testid"})],fn.prototype,"dataTestid"),Bn([$n()],fn.prototype,"touched");let H1=class{constructor(n){this.nodes=[],this.options=[],this.host=n,this.host.addController(this),this.nodes=[],this.options=[],this.observer=new MutationObserver(i=>this.handleMutations(i))}hostConnected(){Array.from(this.host.childNodes).forEach(n=>{(n.nodeName==="OPTION"||n.nodeName==="DATA")&&this.addNode(n)}),this.observer.observe(this.host,{childList:!0})}hostDisconnected(){this.observer.disconnect()}addNode(n){(n.nodeName==="OPTION"||n.nodeName==="DATA")&&(n.setAttribute("class","pkt-hide"),n.setAttribute("hidden","true"),n.setAttribute("data-skip","true"),this.nodes.push(n))}createOptions(){this.options=this.nodes.map(n=>({value:n.getAttribute("value")||n.textContent||"",label:n.textContent||n.getAttribute("value")||"",selected:!!n.getAttribute("selected"),disabled:!!n.getAttribute("disabled")})),this.host.setAttribute("options",JSON.stringify(this.options))}handleMutations(n){let i=!1;n.forEach(l=>{l.type==="childList"&&(l.addedNodes.forEach(c=>{xg(c)&&(this.addNode(c),i=!0)}),l.removedNodes.forEach(c=>{xg(c)&&(this.nodes=this.nodes.filter(h=>h!==c),i=!0)}))}),i&&this.createOptions()}};var v3=Object.defineProperty,y3=Object.getOwnPropertyDescriptor,Eh=(r,n,i,l)=>{for(var c=l>1?void 0:l?y3(n,i):n,h=r.length-1,m;h>=0;h--)(m=r[h])&&(c=(l?m(n,i,c):m(c))||c);return l&&c&&v3(n,i,c),c};let Dd=class extends Hr{constructor(){super(),this.defaultSlot=dn(),this.forId=If(),this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=Wo.props.helptextDropdownButton.default,this.isHelpTextOpen=!1,this.slotController=new xa(this,this.defaultSlot)}render(){const n=()=>{const l=!this.isHelpTextOpen;this.isHelpTextOpen=l,this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!0,detail:{isOpen:l}}))},i=()=>this.helptextDropdown?Se`<div class="pkt-inputwrapper__helptext-expandable">
           <button
             class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
             type="button"
@@ -1150,6 +1150,7 @@ You might need to use a local HTTP server (instead of file://): https://reactjs.
             type="radio"
             role="radio"
             ?disabled=${this.disabled}
+            form=""
             name=${this.name+"-internal"}
             ${qt(this.inputRef)}
             @change=${this.toggleChecked}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.37.6",
+  "version": "12.37.8",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^12.37.6",
+    "@oslokommune/punkt-elements": "^12.37.8",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -112,5 +112,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "424c529acc9bd6f1ce9063cd79e7e39bcdac27a2"
+  "gitHead": "ff82b384dde195e97572a47eb6f9e13c5f3c9063"
 }

package/src/components/accordion/Accordion.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
 import { createComponent } from '@lit/react'
 import React, { ForwardRefExoticComponent, LegacyRef } from 'react'

package/src/components/accordion/AccordionItem.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardRefExoticComponent, LegacyRef, ReactElement, forwardRef } from 'react'
 import { PktElConstructor, PktElType, PktEventWithTarget } from '@/interfaces/IPktElements'
 import { createComponent, EventName } from '@lit/react'

package/src/components/alert/Alert.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktAlert as PktElAlert } from '@oslokommune/punkt-elements'

package/src/components/backlink/BackLink.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardRefExoticComponent, LegacyRef, AnchorHTMLAttributes, MouseEventHandler } from 'react'
 import { createComponent } from '@lit/react'
 import { PktBackLink as PktElBackLink } from '@oslokommune/punkt-elements'

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef, forwardRef } from 'react'
 import { Link } from 'react-router-dom'
 

package/src/components/button/Button.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   LegacyRef,

package/src/components/card/Card.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ReactElement, forwardRef, ReactNode, ForwardedRef } from 'react'
 import { createComponent } from '@lit/react'
 import { PktCard as PktElCard } from '@oslokommune/punkt-elements'

package/src/components/checkbox/Checkbox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ChangeEventHandler,
   FocusEventHandler,

package/src/components/combobox/Combobox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   ReactNode,

package/src/components/consent/Consent.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardRefExoticComponent, LegacyRef } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktConsent as PktElConsent } from '@oslokommune/punkt-elements'

package/src/components/datepicker/Datepicker.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   LegacyRef,

package/src/components/footer/Footer.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 
 import { PktIcon } from '../icon/Icon'

package/src/components/footerSimple/FooterSimple.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 
 import { PktIcon } from '../icon/Icon'

package/src/components/header/Header.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import React, { ForwardedRef, forwardRef, HTMLAttributes } from 'react'
 

package/src/components/heading/Heading.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { createComponent } from '@lit/react'
 import { FC, forwardRef } from 'react'
 import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'

package/src/components/helptext/Helptext.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardRefExoticComponent, ReactNode, LegacyRef, FC, forwardRef, HTMLAttributes } from 'react'
 import { PktHelptext as PktElHelptext } from '@oslokommune/punkt-elements'
 import { createComponent, EventName } from '@lit/react'

package/src/components/icon/Icon.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC } from 'react'
 
 import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'

package/src/components/input/Input.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef } from 'react'
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {

package/src/components/inputwrapper/InputWrapper.tsx

@@ -1,12 +1,6 @@
-import React, {
-  FC,
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  LegacyRef,
-  ReactElement,
-  ReactNode,
-} from 'react'
+'use client'
+
+import React, { FC, forwardRef, ForwardRefExoticComponent, LegacyRef, ReactElement, ReactNode } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktInputWrapper as PktEl } from '@oslokommune/punkt-elements'
 import type { PktElType } from '@/interfaces/IPktElements'

package/src/components/link/Link.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktLink as PktElLink } from '@oslokommune/punkt-elements'

package/src/components/linkcard/LinkCard.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
 import { PktLinkCard as PktElLinkCard } from '@oslokommune/punkt-elements'

package/src/components/loader/Loader.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, ForwardedRef, FC, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
 import { PktLoader as PktElLoader } from '@oslokommune/punkt-elements'

package/src/components/messagebox/Messagebox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktMessagebox as PktElMessagebox } from '@oslokommune/punkt-elements'

package/src/components/modal/Modal.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
 import { PktModal as PktElModal } from '@oslokommune/punkt-elements'

package/src/components/preview/Preview.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { cloneElement, isValidElement, ReactNode, useRef, useState } from 'react'
 import reactElementToJSXString from 'react-element-to-jsx-string'
 import * as prettier from 'prettier/standalone'

package/src/components/preview/PreviewPropEditor.tsx

@@ -1,4 +1,6 @@
-import { ChangeEvent, FC } from 'react'
+'use client'
+
+import { FC } from 'react'
 import { PktCheckbox } from '../checkbox/Checkbox'
 import { PktDatepicker } from '../datepicker/Datepicker'
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'

package/src/components/preview/PreviewSpecs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 import { PktTable } from '../table/Table'
 import { PktTableHeader } from '../table/TableHeader'

package/src/components/progressbar/Progressbar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, ForwardedRef, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
 import { PktProgressbar as PktElProgressbar } from '@oslokommune/punkt-elements'

package/src/components/radio/RadioButton.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ChangeEventHandler,
   FocusEventHandler,
@@ -19,7 +21,7 @@ export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
   defaultChecked?: boolean
   disabled?: boolean
   value?: string
-  checkHelptext?: string | React.ReactNode | React.ReactNode[]
+  checkHelptext?: string | ReactNode | ReactNode[]
 
   ref?: ForwardedRef<HTMLInputElement>
   onChange?: ChangeEventHandler<HTMLInputElement>

package/src/components/searchinput/SearchInput.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ChangeEvent, forwardRef, HTMLProps, ReactNode } from 'react'
 
 import { PktButton } from '../button/Button'
@@ -151,7 +153,8 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
                     }`,
                     type: suggestion.onClick ? 'button' : undefined,
                     onClick: () => handleSuggestionClick(suggestion.onClick, index),
-                    onKeyUp: (event: { key: string }) => event.key === "Enter" && handleSuggestionClick(suggestion.onClick, index)
+                    onKeyUp: (event: { key: string }) =>
+                      event.key === 'Enter' && handleSuggestionClick(suggestion.onClick, index),
                   },
                   <>
                     {suggestion.title && <h3 className="pkt-searchinput__suggestion-title">{suggestion.title}</h3>}

package/src/components/select/Select.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   ReactNode,

package/src/components/stepper/Step.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import cn from 'classnames'
 
 export type TStepStatus = 'completed' | 'incomplete' | 'current'

package/src/components/stepper/Stepper.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { ReactElement, Ref, forwardRef } from 'react'
 import { IPktStep } from './Step'
 import classNames from 'classnames'

package/src/components/table/Table.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableBody.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableData.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 
 interface TableDataProps {

package/src/components/table/TableDataCell.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableHeader.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableHeaderCell.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableRow.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/tabs/Tabs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, Ref, useRef, useEffect, KeyboardEvent, Fragment } from 'react'
 import { PktIcon } from '../icon/Icon'
 import { PktTag } from '../tag/Tag'

package/src/components/tag/Tag.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktTag as PktElTag } from '@oslokommune/punkt-elements'

package/src/components/textarea/Textarea.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   LegacyRef,

package/src/components/textinput/Textinput.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   LegacyRef,

package/src/components/childrenWrapper/childrenWrapper.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-interface childrenWrapperProps {
-  wrapperType?: 'div' | 'span'; 
-  children?: React.ReactNode | React.ReactNode[];
-}
-
-export function childrenWrapper<P>(
-  Component: React.ComponentType<P>, 
-  defaultWrapper: 'div' | 'span' = 'div'
-): React.FC<P & childrenWrapperProps> { return ({ wrapperType = defaultWrapper, children, ...props }) => {
-    const Tag = wrapperType;
-
-    return (
-      <Component {...(props as P)}>
-        <Tag className="pkt-contents">{children}</Tag>
-      </Component>
-    );
-  };
-}