@oslokommune/punkt-elements 13.5.6 → 13.5.10

package/CHANGELOG.md

@@ -5,6 +5,40 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [13.5.10](https://github.com/oslokommune/punkt/compare/13.5.9...13.5.10) (2025-09-11)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [13.5.9](https://github.com/oslokommune/punkt/compare/13.5.8...13.5.9) (2025-09-11)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.5.6](https://github.com/oslokommune/punkt/compare/13.5.5...13.5.6) (2025-09-09)
 
 ### ⚠ BREAKING CHANGES

package/dist/{datepicker-CmTrG5GE.cjs → datepicker-DonUad47.cjs}

@@ -1,12 +1,12 @@
-"use strict";const d=require("./class-map-BBG2gMX4.cjs"),u=require("./if-defined-Cni-RHLS.cjs"),l=require("./element-6DBpyGQm.cjs"),v=require("./state-DPobt-Yz.cjs"),o=require("./calendar-32W9p9uc.cjs"),y=require("./input-element-C4xJoM-X.cjs"),r=require("./ref-iJtiv3o2.cjs"),k=require("./repeat-CDsZqct8.cjs");require("./icon-B_ryAy4Q.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./tag-Bbs0U_Au.cjs");const $=require("./pkt-slot-controller-BzddBp7z.cjs"),b={dateformat:{default:"dd.MM.yyyy"},min:{default:null},max:{default:null},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},p={props:b};var x=Object.defineProperty,w=Object.getOwnPropertyDescriptor,n=(c,t,e,i)=>{for(var a=i>1?void 0:i?w(t,e):t,s=c.length-1,h;s>=0;s--)(h=c[s])&&(a=(i?h(t,e,a):h(a))||a);return i&&a&&x(t,e,a),a};const m=c=>new Promise(t=>setTimeout(t,c));exports.PktDatepicker=class extends y.PktInputElement{constructor(){super(),this._valueProperty="",this._value=[],this.label="Datovelger",this.dateformat=p.props.dateformat.default,this.multiple=p.props.multiple.default,this.maxlength=null,this.range=p.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=p.props.weeknumbers.default,this.withcontrols=p.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=r.e(),this.inputRefTo=r.e(),this.btnRef=r.e(),this.calRef=r.e(),this.popupRef=r.e(),this.helptextSlot=r.e(),this.addToSelected=t=>{const e=t.target;if(!e.value)return;const i=this.min?o.newDate(this.min):null,a=this.max?o.newDate(this.max):null,s=o.newDate(e.value.split(",")[0]);s&&!isNaN(s.getTime())&&(!i||s>=i)&&(!a||s<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(s),e.value=""},this.slotController=new $.PktSlotController(this,this.helptextSlot)}get value(){return this._valueProperty}set value(t){const e=this._valueProperty;this._valueProperty=Array.isArray(t)?t.join(","):t||"",this.valueChanged(this._valueProperty,e),this.requestUpdate("value",e)}async connectedCallback(){super.connectedCallback();const t=navigator.userAgent,e=/iP(hone|od|ad)/.test(t);this.inputType=e?"text":"date",document&&document.body.addEventListener("click",i=>{var a,s;(a=this.inputRef)!=null&&a.value&&((s=this.btnRef)!=null&&s.value)&&!this.inputRef.value.contains(i.target)&&!(this.inputRefTo.value&&this.inputRefTo.value.contains(i.target))&&!this.btnRef.value.contains(i.target)&&!i.target.closest(".pkt-calendar-popup")&&this.calendarOpen&&(this.onBlur(),this.hideCalendar())}),document&&document.body.addEventListener("keydown",i=>{i.key==="Escape"&&this.calendarOpen&&this.hideCalendar()}),this.value&&(this._value=Array.isArray(this.value)?this.value.filter(Boolean):this.value.split(",").filter(Boolean)),this.min=this.min||p.props.min.default,this.max=this.max||p.props.max.default,typeof this.excludedates=="string"&&(this.excludedates=this.excludedates.split(",")),typeof this.excludeweekdays=="string"&&(this.excludeweekdays=this.excludeweekdays.split(",")),(this.multiple||this.range)&&this.name&&!this.name.endsWith("[]")&&(this.name=this.name+"[]"),this.calendarOpen&&(await m(20),this.handleCalendarPosition())}disconnectedCallback(){super.disconnectedCallback(),document&&document.body.removeEventListener("click",t=>{var e,i;(e=this.inputRef)!=null&&e.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(t.target)&&!this.btnRef.value.contains(t.target)&&this.hideCalendar()})}onInput(){this.dispatchEvent(new Event("input",{bubbles:!0}))}valueChanged(t,e){if(t!==e){let i=[];if(t&&(typeof t=="string"?i=t.split(",").filter(Boolean):i=String(t).split(",").filter(Boolean)),this.min||this.max){const s=this.min?new Date(this.min):null,h=this.max?new Date(this.max):null;i=i.filter(f=>{const g=new Date(f);return!(isNaN(g.getTime())||s&&g<s||h&&g>h)})}this._value=i;const a=i.join(",");this._valueProperty!==a&&(this._valueProperty=a),super.valueChanged(a,e)}}attributeChangedCallback(t,e,i){t==="value"&&this.value!==e&&this.valueChanged(i,e),t==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=(i==null?void 0:i.split(","))??[]),t==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=(i==null?void 0:i.split(","))??[]),super.attributeChangedCallback(t,e,i)}updated(t){if(t.has("value")){const e=Array.isArray(this.value)?this.value.join(","):this.value,i=t.get("value"),a=Array.isArray(i)?i.join(","):i;this.valueChanged(e,a)}t.has("multiple")&&(this.multiple&&!Array.isArray(this._value)?this._value=typeof this.value=="string"?this.value?this.value.split(",").filter(Boolean):[]:[]:!this.multiple&&Array.isArray(this._value)&&(this._value=this._value.filter(Boolean)),!this.multiple&&!this.range&&Array.isArray(this._value)&&(this._value=[this._value[0]??""])),super.updated(t)}renderInput(){return l.x`
+"use strict";const d=require("./class-map-BBG2gMX4.cjs"),h=require("./if-defined-Cni-RHLS.cjs"),s=require("./element-6DBpyGQm.cjs"),v=require("./state-DPobt-Yz.cjs"),o=require("./calendar-32W9p9uc.cjs"),m=require("./input-element-C4xJoM-X.cjs"),r=require("./ref-iJtiv3o2.cjs"),y=require("./repeat-CDsZqct8.cjs");require("./icon-B_ryAy4Q.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./tag-Bbs0U_Au.cjs");const k=require("./pkt-slot-controller-BzddBp7z.cjs"),$={dateformat:{default:"dd.MM.yyyy"},min:{default:null},max:{default:null},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},p={props:$};var b=Object.defineProperty,x=Object.getOwnPropertyDescriptor,n=(c,t,e,i)=>{for(var a=i>1?void 0:i?x(t,e):t,l=c.length-1,u;l>=0;l--)(u=c[l])&&(a=(i?u(t,e,a):u(a))||a);return i&&a&&b(t,e,a),a};const g=c=>new Promise(t=>setTimeout(t,c));exports.PktDatepicker=class extends m.PktInputElement{constructor(){super(),this._valueProperty="",this._value=[],this.label="Datovelger",this.dateformat=p.props.dateformat.default,this.multiple=p.props.multiple.default,this.maxlength=null,this.range=p.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=p.props.weeknumbers.default,this.withcontrols=p.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=r.e(),this.inputRefTo=r.e(),this.btnRef=r.e(),this.calRef=r.e(),this.popupRef=r.e(),this.helptextSlot=r.e(),this.addToSelected=t=>{const e=t.target;if(!e.value)return;const i=this.min?o.newDate(this.min):null,a=this.max?o.newDate(this.max):null,l=o.newDate(e.value.split(",")[0]);l&&!isNaN(l.getTime())&&(!i||l>=i)&&(!a||l<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(l),e.value=""},this.slotController=new k.PktSlotController(this,this.helptextSlot)}get value(){return this._valueProperty}set value(t){const e=this._valueProperty;this._valueProperty=Array.isArray(t)?t.join(","):t||"",this.valueChanged(this._valueProperty,e),this.requestUpdate("value",e)}async connectedCallback(){super.connectedCallback();const t=navigator.userAgent,e=/iP(hone|od|ad)/.test(t);this.inputType=e?"text":"date",document&&document.body.addEventListener("click",i=>{var a,l;(a=this.inputRef)!=null&&a.value&&((l=this.btnRef)!=null&&l.value)&&!this.inputRef.value.contains(i.target)&&!(this.inputRefTo.value&&this.inputRefTo.value.contains(i.target))&&!this.btnRef.value.contains(i.target)&&!i.target.closest(".pkt-calendar-popup")&&this.calendarOpen&&(this.onBlur(),this.hideCalendar())}),document&&document.body.addEventListener("keydown",i=>{i.key==="Escape"&&this.calendarOpen&&this.hideCalendar()}),this.value&&(this._value=Array.isArray(this.value)?this.value.filter(Boolean):this.value.split(",").filter(Boolean)),this.min=this.min||p.props.min.default,this.max=this.max||p.props.max.default,typeof this.excludedates=="string"&&(this.excludedates=this.excludedates.split(",")),typeof this.excludeweekdays=="string"&&(this.excludeweekdays=this.excludeweekdays.split(",")),(this.multiple||this.range)&&this.name&&!this.name.endsWith("[]")&&(this.name=this.name+"[]"),this.calendarOpen&&(await g(20),this.handleCalendarPosition())}disconnectedCallback(){super.disconnectedCallback(),document&&document.body.removeEventListener("click",t=>{var e,i;(e=this.inputRef)!=null&&e.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(t.target)&&!this.btnRef.value.contains(t.target)&&this.hideCalendar()})}onInput(){this.dispatchEvent(new Event("input",{bubbles:!0}))}valueChanged(t,e){if(t===e)return;let i=[];t&&(typeof t=="string"?i=t.split(",").filter(Boolean):i=String(t).split(",").filter(Boolean)),this._value=i;const a=i.join(",");this._valueProperty!==a&&(this._valueProperty=a),super.valueChanged(a,e)}attributeChangedCallback(t,e,i){t==="value"&&this.value!==e&&this.valueChanged(i,e),t==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=(i==null?void 0:i.split(","))??[]),t==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=(i==null?void 0:i.split(","))??[]),super.attributeChangedCallback(t,e,i)}updated(t){if(t.has("value")){const e=Array.isArray(this.value)?this.value.join(","):this.value,i=t.get("value"),a=Array.isArray(i)?i.join(","):i;this.valueChanged(e,a)}t.has("multiple")&&(this.multiple&&!Array.isArray(this._value)?this._value=typeof this.value=="string"?this.value?this.value.split(",").filter(Boolean):[]:[]:!this.multiple&&Array.isArray(this._value)&&(this._value=this._value.filter(Boolean)),!this.multiple&&!this.range&&Array.isArray(this._value)&&(this._value=[this._value[0]??""])),super.updated(t)}renderInput(){return s.x`
       <input
         class="${d.e(this.inputClasses)}"
         .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0]??""}
-        min=${u.o(this.min)}
-        max=${u.o(this.max)}
-        placeholder=${u.o(this.placeholder)}
+        min=${h.o(this.min)}
+        max=${h.o(this.max)}
+        placeholder=${h.o(this.placeholder)}
         ?readonly=${this.readonly}
         aria-describedby="${this.id}-helptext"
         @click=${t=>{t.preventDefault(),this.showCalendar()}}
@@ -18,57 +18,57 @@
         @change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
         ${r.n(this.inputRef)}
       />
-    `}renderRangeInput(){const t={"pkt-input-prefix":this.showRangeLabels,"pkt-hide":!this.showRangeLabels};return l.x`
-      ${this.showRangeLabels?l.x` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `:l.E}
+    `}renderRangeInput(){const t={"pkt-input-prefix":this.showRangeLabels,"pkt-hide":!this.showRangeLabels};return s.x`
+      ${this.showRangeLabels?s.x` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `:s.E}
       <input
         class=${d.e(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0]??""}
-        min=${u.o(this.min)}
-        max=${u.o(this.max)}
-        placeholder=${u.o(this.placeholder)}
+        min=${h.o(this.min)}
+        max=${h.o(this.max)}
+        placeholder=${h.o(this.placeholder)}
         ?readonly=${this.readonly}
         ?disabled=${this.disabled}
         @click=${e=>{e.preventDefault(),this.showCalendar()}}
-        @keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRef.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const s=this.internals.form;s?s.requestSubmit():(a=this.inputRefTo.value)==null||a.focus()}}}
+        @keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRef.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const l=this.internals.form;l?l.requestSubmit():(a=this.inputRefTo.value)==null||a.focus()}}}
         @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
         @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
-        @blur=${e=>{var i,a;if(e.target.value){this.manageValidity(e.target);const s=o.fromISOToDate(e.target.value);s&&this._value[0]!==e.target.value&&this._value[1]&&(this.clearInputValue(),(a=(i=this.calRef)==null?void 0:i.value)==null||a.handleDateSelect(s))}else this._value[0]&&this.clearInputValue()}}
+        @blur=${e=>{var i,a;if(e.target.value){this.manageValidity(e.target);const l=o.fromISOToDate(e.target.value);l&&this._value[0]!==e.target.value&&this._value[1]&&(this.clearInputValue(),(a=(i=this.calRef)==null?void 0:i.value)==null||a.handleDateSelect(l))}else this._value[0]&&this.clearInputValue()}}
         @change=${e=>{e.stopImmediatePropagation()}}
         ${r.n(this.inputRef)}
       />
       <div class="${d.e(t)}" id="${this.id}-to-label">
         ${this.strings.generic.to}
       </div>
-      ${this.showRangeLabels?l.E:l.x` <div class="pkt-input-separator">–</div> `}
+      ${this.showRangeLabels?s.E:s.x` <div class="pkt-input-separator">–</div> `}
       <input
         class=${d.e(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-to"
         aria-labelledby="${this.id}-to-label"
         .value=${this._value[1]??""}
-        min=${u.o(this.min)}
-        max=${u.o(this.max)}
-        placeholder=${u.o(this.placeholder)}
+        min=${h.o(this.min)}
+        max=${h.o(this.max)}
+        placeholder=${h.o(this.placeholder)}
         ?readonly=${this.readonly}
         ?disabled=${this.disabled}
         @click=${e=>{e.preventDefault(),this.showCalendar()}}
-        @keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRefTo.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const s=this.internals.form;s?s.requestSubmit():(a=this.inputRefTo.value)==null||a.blur()}}}
+        @keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRefTo.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const l=this.internals.form;l?l.requestSubmit():(a=this.inputRefTo.value)==null||a.blur()}}}
         @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
         @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
-        @blur=${e=>{var i,a,s;if((i=this.calRef.value)!=null&&i.contains(e.relatedTarget)||this.onBlur(),e.target.value){this.manageValidity(e.target);const h=e.target.value;this.min&&this.min>h?this.internals.setValidity({rangeUnderflow:!0},this.strings.forms.messages.rangeUnderflow,e.target):this.max&&this.max<h&&this.internals.setValidity({rangeOverflow:!0},this.strings.forms.messages.rangeOverflow,e.target);const f=o.fromISOToDate(e.target.value);f&&this._value[1]!==o.formatISODate(f)&&((s=(a=this.calRef)==null?void 0:a.value)==null||s.handleDateSelect(f))}}}
+        @blur=${e=>{var i,a,l;if((i=this.calRef.value)!=null&&i.contains(e.relatedTarget)||this.onBlur(),e.target.value){this.manageValidity(e.target);const u=e.target.value;this.min&&this.min>u?this.internals.setValidity({rangeUnderflow:!0},this.strings.forms.messages.rangeUnderflow,e.target):this.max&&this.max<u&&this.internals.setValidity({rangeOverflow:!0},this.strings.forms.messages.rangeOverflow,e.target);const f=o.fromISOToDate(e.target.value);f&&this._value[1]!==o.formatISODate(f)&&((l=(a=this.calRef)==null?void 0:a.value)==null||l.handleDateSelect(f))}}}
         @change=${e=>{this.touched=!0,e.stopImmediatePropagation()}}
         ${r.n(this.inputRefTo)}
       />
-    `}renderMultipleInput(){return l.x`
+    `}renderMultipleInput(){return s.x`
       <input
         class=${d.e(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
-        min=${u.o(this.min)}
-        max=${u.o(this.max)}
-        placeholder=${u.o(this.placeholder)}
+        min=${h.o(this.min)}
+        max=${h.o(this.max)}
+        placeholder=${h.o(this.placeholder)}
         ?readonly=${this.readonly}
         ?disabled=${this.disabled||this.maxlength&&this._value.length>=this.maxlength}
         @click=${t=>{t.preventDefault(),this.showCalendar()}}
@@ -79,9 +79,9 @@
         @change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
         ${r.n(this.inputRef)}
       />
-    `}renderTags(){return l.x`
+    `}renderTags(){return s.x`
       <div class="pkt-datepicker__tags" aria-live="polite">
-        ${this._value[0]?k.c((this._value??[]).filter(Boolean).sort(),t=>t,t=>l.x`
+        ${this._value[0]?y.c((this._value??[]).filter(Boolean).sort(),t=>t,t=>s.x`
                 <pkt-tag
                   .id="${this.id+t+"-tag"}"
                   closeTag
@@ -89,9 +89,9 @@
                   @close=${()=>{var e;return(e=this.calRef.value)==null?void 0:e.handleDateSelect(o.fromISOToDate(t))}}
                   ><time datetime="${t}">${o.fromISOtoLocal(t,this.dateformat)}</time></pkt-tag
                 >
-              `):l.E}
+              `):s.E}
       </div>
-    `}renderCalendar(){return l.x`<div
+    `}renderCalendar(){return s.x`<div
       class="pkt-calendar-popup pkt-${this.calendarOpen?"show":"hide"}"
       @focusout=${t=>{this.calendarOpen&&this.handleFocusOut(t)}}
       id="${this.id}-popup"
@@ -114,7 +114,7 @@
         @close=${()=>{this.onBlur(),this.hideCalendar()}}
         ${r.n(this.calRef)}
       ></pkt-calendar>
-    </div>`}render(){return this.inputClasses={"pkt-input":!0,"pkt-datepicker__input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-datepicker--hasrangelabels":this.showRangeLabels,"pkt-datepicker--multiple":this.multiple,"pkt-datepicker--range":this.range},this.buttonClasses={"pkt-input-icon":!0,"pkt-btn":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":!0,"pkt-datepicker__calendar-button":!0},l.x`
+    </div>`}render(){return this.inputClasses={"pkt-input":!0,"pkt-datepicker__input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-datepicker--hasrangelabels":this.showRangeLabels,"pkt-datepicker--multiple":this.multiple,"pkt-datepicker--range":this.range},this.buttonClasses={"pkt-input-icon":!0,"pkt-btn":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":!0,"pkt-datepicker__calendar-button":!0},s.x`
       <pkt-input-wrapper
         label="${this.label}"
         forId="${this.id}-input"
@@ -140,7 +140,7 @@
         class="pkt-datepicker"
       >
         <div class="pkt-contents" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
-        ${this.multiple?this.renderTags():l.E}
+        ${this.multiple?this.renderTags():s.E}
         <div
           class="pkt-datepicker__inputs ${this.range&&this.showRangeLabels?"pkt-input__range-inputs":""}"
         >
@@ -161,4 +161,4 @@
         </div>
       </pkt-input-wrapper>
       ${this.renderCalendar()}
-    `}handleCalendarPosition(){var t;if(this.popupRef.value&&this.inputRef.value){const e=this.multiple&&!!this.maxlength,i=((t=this.inputRef.value.parentElement)==null?void 0:t.getBoundingClientRect())||this.inputRef.value.getBoundingClientRect(),a=e?i.height+30:i.height,s=this.popupRef.value.getBoundingClientRect().height;let h=e?"calc(100% - 30px)":"100%";i&&i.top+s>window.innerHeight&&i.top-s>0&&(h=`calc(100% - ${a}px - ${s}px)`),this.popupRef.value.style.top=h}}handleFocusOut(t){this.contains(t.target)||(this.onBlur(),this.hideCalendar())}async showCalendar(){var t;this.calendarOpen=!0,await m(20),this.handleCalendarPosition(),this.isMobileSafari&&((t=this.calRef.value)==null||t.focusOnCurrentDate())}hideCalendar(){this.calendarOpen=!1}async toggleCalendar(t){t.preventDefault(),this.calendarOpen?this.hideCalendar():this.showCalendar()}clearInputValue(){this._value=[],this.value=""}};n([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",1);n([l.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);n([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);n([l.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);n([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);n([l.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);n([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);n([l.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);n([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);n([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);n([l.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);n([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);n([l.n({converter:o.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);n([l.n({converter:o.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);n([l.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);n([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);n([l.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);n([v.r()],exports.PktDatepicker.prototype,"inputClasses",2);n([v.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=n([l.t("pkt-datepicker")],exports.PktDatepicker);
+    `}handleCalendarPosition(){var t;if(this.popupRef.value&&this.inputRef.value){const e=this.multiple&&!!this.maxlength,i=((t=this.inputRef.value.parentElement)==null?void 0:t.getBoundingClientRect())||this.inputRef.value.getBoundingClientRect(),a=e?i.height+30:i.height,l=this.popupRef.value.getBoundingClientRect().height;let u=e?"calc(100% - 30px)":"100%";i&&i.top+l>window.innerHeight&&i.top-l>0&&(u=`calc(100% - ${a}px - ${l}px)`),this.popupRef.value.style.top=u}}handleFocusOut(t){this.contains(t.target)||(this.onBlur(),this.hideCalendar())}async showCalendar(){var t;this.calendarOpen=!0,await g(20),this.handleCalendarPosition(),this.isMobileSafari&&((t=this.calRef.value)==null||t.focusOnCurrentDate())}hideCalendar(){this.calendarOpen=!1}async toggleCalendar(t){t.preventDefault(),this.calendarOpen?this.hideCalendar():this.showCalendar()}clearInputValue(){this._value=[],this.value=""}};n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",1);n([s.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);n([s.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);n([s.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);n([s.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);n([s.n({converter:o.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);n([s.n({converter:o.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);n([v.r()],exports.PktDatepicker.prototype,"inputClasses",2);n([v.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=n([s.t("pkt-datepicker")],exports.PktDatepicker);

package/dist/{datepicker-BJKJBoy_.js → datepicker-F3TwE9o7.js}

@@ -1,16 +1,16 @@
 import { e as f } from "./class-map-BpTj9gtz.js";
-import { o } from "./if-defined-CmuO4Vz9.js";
-import { x as p, E as g, n as r, a as R } from "./element-CgEWt74-.js";
-import { r as x } from "./state-Bo2bck5_.js";
-import { n as y, f as $, a as C, b, p as _, d as w } from "./calendar-CJSxvwAq.js";
-import { P as S } from "./input-element-NnrDmp4r.js";
-import { e as m, n as d } from "./ref-BBYSqgeW.js";
-import { c as T } from "./repeat-C8BeHwYx.js";
+import { o as h } from "./if-defined-CmuO4Vz9.js";
+import { x as u, E as g, n as r, a as R } from "./element-CgEWt74-.js";
+import { r as k } from "./state-Bo2bck5_.js";
+import { n as v, f as y, a as w, b as $, p as C, d as x } from "./calendar-CJSxvwAq.js";
+import { P as _ } from "./input-element-NnrDmp4r.js";
+import { e as m, n as p } from "./ref-BBYSqgeW.js";
+import { c as S } from "./repeat-C8BeHwYx.js";
 import "./icon-CC1js8eR.js";
 import "./input-wrapper-Dr__Sxql.js";
 import "./tag-DyXzTY68.js";
-import { P as D } from "./pkt-slot-controller-BPGj-LC5.js";
-const I = {
+import { P as T } from "./pkt-slot-controller-BPGj-LC5.js";
+const D = {
   dateformat: {
     default: "dd.MM.yyyy"
   },
@@ -33,15 +33,15 @@ const I = {
     default: !1
   }
 }, c = {
-  props: I
+  props: D
 };
-var P = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? B(e, i) : e, h = t.length - 1, u; h >= 0; h--)
-    (u = t[h]) && (s = (a ? u(e, i, s) : u(s)) || s);
-  return a && s && P(e, i, s), s;
+var I = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? P(e, i) : e, o = t.length - 1, d; o >= 0; o--)
+    (d = t[o]) && (a = (s ? d(e, i, a) : d(a)) || a);
+  return s && a && I(e, i, a), a;
 };
-const k = (t) => new Promise((e) => setTimeout(e, t));
-let l = class extends S {
+const b = (t) => new Promise((e) => setTimeout(e, t));
+let l = class extends _ {
   /**
    * Housekeeping / lifecycle methods
    */
@@ -49,9 +49,9 @@ let l = class extends S {
     super(), this._valueProperty = "", this._value = [], this.label = "Datovelger", this.dateformat = c.props.dateformat.default, this.multiple = c.props.multiple.default, this.maxlength = null, this.range = c.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = c.props.weeknumbers.default, this.withcontrols = c.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.buttonClasses = {}, this.inputRef = m(), this.inputRefTo = m(), this.btnRef = m(), this.calRef = m(), this.popupRef = m(), this.helptextSlot = m(), this.addToSelected = (t) => {
       const e = t.target;
       if (!e.value) return;
-      const i = this.min ? y(this.min) : null, a = this.max ? y(this.max) : null, s = y(e.value.split(",")[0]);
-      s && !isNaN(s.getTime()) && (!i || s >= i) && (!a || s <= a) && this.calRef.value && this.calRef.value.handleDateSelect(s), e.value = "";
-    }, this.slotController = new D(this, this.helptextSlot);
+      const i = this.min ? v(this.min) : null, s = this.max ? v(this.max) : null, a = v(e.value.split(",")[0]);
+      a && !isNaN(a.getTime()) && (!i || a >= i) && (!s || a <= s) && this.calRef.value && this.calRef.value.handleDateSelect(a), e.value = "";
+    }, this.slotController = new T(this, this.helptextSlot);
   }
   get value() {
     return this._valueProperty;
@@ -64,11 +64,11 @@ let l = class extends S {
     super.connectedCallback();
     const t = navigator.userAgent, e = /iP(hone|od|ad)/.test(t);
     this.inputType = e ? "text" : "date", document && document.body.addEventListener("click", (i) => {
-      var a, s;
-      (a = this.inputRef) != null && a.value && ((s = this.btnRef) != null && s.value) && !this.inputRef.value.contains(i.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(i.target)) && !this.btnRef.value.contains(i.target) && !i.target.closest(".pkt-calendar-popup") && this.calendarOpen && (this.onBlur(), this.hideCalendar());
+      var s, a;
+      (s = this.inputRef) != null && s.value && ((a = this.btnRef) != null && a.value) && !this.inputRef.value.contains(i.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(i.target)) && !this.btnRef.value.contains(i.target) && !i.target.closest(".pkt-calendar-popup") && this.calendarOpen && (this.onBlur(), this.hideCalendar());
     }), document && document.body.addEventListener("keydown", (i) => {
       i.key === "Escape" && this.calendarOpen && this.hideCalendar();
-    }), this.value && (this._value = Array.isArray(this.value) ? this.value.filter(Boolean) : this.value.split(",").filter(Boolean)), this.min = this.min || c.props.min.default, this.max = this.max || c.props.max.default, typeof this.excludedates == "string" && (this.excludedates = this.excludedates.split(",")), typeof this.excludeweekdays == "string" && (this.excludeweekdays = this.excludeweekdays.split(",")), (this.multiple || this.range) && this.name && !this.name.endsWith("[]") && (this.name = this.name + "[]"), this.calendarOpen && (await k(20), this.handleCalendarPosition());
+    }), this.value && (this._value = Array.isArray(this.value) ? this.value.filter(Boolean) : this.value.split(",").filter(Boolean)), this.min = this.min || c.props.min.default, this.max = this.max || c.props.max.default, typeof this.excludedates == "string" && (this.excludedates = this.excludedates.split(",")), typeof this.excludeweekdays == "string" && (this.excludeweekdays = this.excludeweekdays.split(",")), (this.multiple || this.range) && this.name && !this.name.endsWith("[]") && (this.name = this.name + "[]"), this.calendarOpen && (await b(20), this.handleCalendarPosition());
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document && document.body.removeEventListener("click", (t) => {
@@ -80,27 +80,19 @@ let l = class extends S {
     this.dispatchEvent(new Event("input", { bubbles: !0 }));
   }
   valueChanged(t, e) {
-    if (t !== e) {
-      let i = [];
-      if (t && (typeof t == "string" ? i = t.split(",").filter(Boolean) : i = String(t).split(",").filter(Boolean)), this.min || this.max) {
-        const s = this.min ? new Date(this.min) : null, h = this.max ? new Date(this.max) : null;
-        i = i.filter((u) => {
-          const v = new Date(u);
-          return !(isNaN(v.getTime()) || s && v < s || h && v > h);
-        });
-      }
-      this._value = i;
-      const a = i.join(",");
-      this._valueProperty !== a && (this._valueProperty = a), super.valueChanged(a, e);
-    }
+    if (t === e) return;
+    let i = [];
+    t && (typeof t == "string" ? i = t.split(",").filter(Boolean) : i = String(t).split(",").filter(Boolean)), this._value = i;
+    const s = i.join(",");
+    this._valueProperty !== s && (this._valueProperty = s), super.valueChanged(s, e);
   }
   attributeChangedCallback(t, e, i) {
     t === "value" && this.value !== e && this.valueChanged(i, e), t === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = (i == null ? void 0 : i.split(",")) ?? []), t === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = (i == null ? void 0 : i.split(",")) ?? []), super.attributeChangedCallback(t, e, i);
   }
   updated(t) {
     if (t.has("value")) {
-      const e = Array.isArray(this.value) ? this.value.join(",") : this.value, i = t.get("value"), a = Array.isArray(i) ? i.join(",") : i;
-      this.valueChanged(e, a);
+      const e = Array.isArray(this.value) ? this.value.join(",") : this.value, i = t.get("value"), s = Array.isArray(i) ? i.join(",") : i;
+      this.valueChanged(e, s);
     }
     t.has("multiple") && (this.multiple && !Array.isArray(this._value) ? this._value = typeof this.value == "string" ? this.value ? this.value.split(",").filter(Boolean) : [] : [] : !this.multiple && Array.isArray(this._value) && (this._value = this._value.filter(Boolean)), !this.multiple && !this.range && Array.isArray(this._value) && (this._value = [this._value[0] ?? ""])), super.updated(t);
   }
@@ -108,15 +100,15 @@ let l = class extends S {
    * Rendering
    */
   renderInput() {
-    return p`
+    return u`
       <input
         class="${f(this.inputClasses)}"
         .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0] ?? ""}
-        min=${o(this.min)}
-        max=${o(this.max)}
-        placeholder=${o(this.placeholder)}
+        min=${h(this.min)}
+        max=${h(this.max)}
+        placeholder=${h(this.placeholder)}
         ?readonly=${this.readonly}
         aria-describedby="${this.id}-helptext"
         @click=${(t) => {
@@ -126,8 +118,8 @@ let l = class extends S {
         @keydown=${(t) => {
       var e, i;
       if (t.key === "," && ((e = this.inputRef.value) == null || e.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t)), t.key === "Enter") {
-        const a = this.internals.form;
-        a ? a.requestSubmit() : (i = this.inputRef.value) == null || i.blur();
+        const s = this.internals.form;
+        s ? s.requestSubmit() : (i = this.inputRef.value) == null || i.blur();
       }
     }}
         @input=${(t) => {
@@ -143,7 +135,7 @@ let l = class extends S {
         @change=${(t) => {
       this.touched = !0, t.stopImmediatePropagation();
     }}
-        ${d(this.inputRef)}
+        ${p(this.inputRef)}
       />
     `;
   }
@@ -152,26 +144,26 @@ let l = class extends S {
       "pkt-input-prefix": this.showRangeLabels,
       "pkt-hide": !this.showRangeLabels
     };
-    return p`
-      ${this.showRangeLabels ? p` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : g}
+    return u`
+      ${this.showRangeLabels ? u` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : g}
       <input
         class=${f(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0] ?? ""}
-        min=${o(this.min)}
-        max=${o(this.max)}
-        placeholder=${o(this.placeholder)}
+        min=${h(this.min)}
+        max=${h(this.max)}
+        placeholder=${h(this.placeholder)}
         ?readonly=${this.readonly}
         ?disabled=${this.disabled}
         @click=${(e) => {
       e.preventDefault(), this.showCalendar();
     }}
         @keydown=${(e) => {
-      var i, a;
+      var i, s;
       if (e.key === "," && ((i = this.inputRef.value) == null || i.blur()), (e.key === "Space" || e.key === " ") && (e.preventDefault(), this.toggleCalendar(e)), e.key === "Enter") {
-        const s = this.internals.form;
-        s ? s.requestSubmit() : (a = this.inputRefTo.value) == null || a.focus();
+        const a = this.internals.form;
+        a ? a.requestSubmit() : (s = this.inputRefTo.value) == null || s.focus();
       }
     }}
         @input=${(e) => {
@@ -181,41 +173,41 @@ let l = class extends S {
       this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
         @blur=${(e) => {
-      var i, a;
+      var i, s;
       if (e.target.value) {
         this.manageValidity(e.target);
-        const s = $(e.target.value);
-        s && this._value[0] !== e.target.value && this._value[1] && (this.clearInputValue(), (a = (i = this.calRef) == null ? void 0 : i.value) == null || a.handleDateSelect(s));
+        const a = y(e.target.value);
+        a && this._value[0] !== e.target.value && this._value[1] && (this.clearInputValue(), (s = (i = this.calRef) == null ? void 0 : i.value) == null || s.handleDateSelect(a));
       } else this._value[0] && this.clearInputValue();
     }}
         @change=${(e) => {
       e.stopImmediatePropagation();
     }}
-        ${d(this.inputRef)}
+        ${p(this.inputRef)}
       />
       <div class="${f(t)}" id="${this.id}-to-label">
         ${this.strings.generic.to}
       </div>
-      ${this.showRangeLabels ? g : p` <div class="pkt-input-separator">–</div> `}
+      ${this.showRangeLabels ? g : u` <div class="pkt-input-separator">–</div> `}
       <input
         class=${f(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-to"
         aria-labelledby="${this.id}-to-label"
         .value=${this._value[1] ?? ""}
-        min=${o(this.min)}
-        max=${o(this.max)}
-        placeholder=${o(this.placeholder)}
+        min=${h(this.min)}
+        max=${h(this.max)}
+        placeholder=${h(this.placeholder)}
         ?readonly=${this.readonly}
         ?disabled=${this.disabled}
         @click=${(e) => {
       e.preventDefault(), this.showCalendar();
     }}
         @keydown=${(e) => {
-      var i, a;
+      var i, s;
       if (e.key === "," && ((i = this.inputRefTo.value) == null || i.blur()), (e.key === "Space" || e.key === " ") && (e.preventDefault(), this.toggleCalendar(e)), e.key === "Enter") {
-        const s = this.internals.form;
-        s ? s.requestSubmit() : (a = this.inputRefTo.value) == null || a.blur();
+        const a = this.internals.form;
+        a ? a.requestSubmit() : (s = this.inputRefTo.value) == null || s.blur();
       }
     }}
         @input=${(e) => {
@@ -225,39 +217,39 @@ let l = class extends S {
       this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
         @blur=${(e) => {
-      var i, a, s;
+      var i, s, a;
       if ((i = this.calRef.value) != null && i.contains(e.relatedTarget) || this.onBlur(), e.target.value) {
         this.manageValidity(e.target);
-        const h = e.target.value;
-        this.min && this.min > h ? this.internals.setValidity(
+        const o = e.target.value;
+        this.min && this.min > o ? this.internals.setValidity(
           { rangeUnderflow: !0 },
           this.strings.forms.messages.rangeUnderflow,
           e.target
-        ) : this.max && this.max < h && this.internals.setValidity(
+        ) : this.max && this.max < o && this.internals.setValidity(
           { rangeOverflow: !0 },
           this.strings.forms.messages.rangeOverflow,
           e.target
         );
-        const u = $(e.target.value);
-        u && this._value[1] !== C(u) && ((s = (a = this.calRef) == null ? void 0 : a.value) == null || s.handleDateSelect(u));
+        const d = y(e.target.value);
+        d && this._value[1] !== w(d) && ((a = (s = this.calRef) == null ? void 0 : s.value) == null || a.handleDateSelect(d));
       }
     }}
         @change=${(e) => {
       this.touched = !0, e.stopImmediatePropagation();
     }}
-        ${d(this.inputRefTo)}
+        ${p(this.inputRefTo)}
       />
     `;
   }
   renderMultipleInput() {
-    return p`
+    return u`
       <input
         class=${f(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
-        min=${o(this.min)}
-        max=${o(this.max)}
-        placeholder=${o(this.placeholder)}
+        min=${h(this.min)}
+        max=${h(this.max)}
+        placeholder=${h(this.placeholder)}
         ?readonly=${this.readonly}
         ?disabled=${this.disabled || this.maxlength && this._value.length >= this.maxlength}
         @click=${(t) => {
@@ -283,29 +275,29 @@ let l = class extends S {
         @change=${(t) => {
       this.touched = !0, t.stopImmediatePropagation();
     }}
-        ${d(this.inputRef)}
+        ${p(this.inputRef)}
       />
     `;
   }
   renderTags() {
-    return p`
+    return u`
       <div class="pkt-datepicker__tags" aria-live="polite">
-        ${this._value[0] ? T(
+        ${this._value[0] ? S(
       (this._value ?? []).filter(Boolean).sort(),
       (t) => t,
-      (t) => p`
+      (t) => u`
                 <pkt-tag
                   .id="${this.id + t + "-tag"}"
                   closeTag
-                  ariaLabel="${this.strings.calendar.deleteDate} ${b(
+                  ariaLabel="${this.strings.calendar.deleteDate} ${$(
         t,
         this.dateformat
       )}"
                   @close=${() => {
         var e;
-        return (e = this.calRef.value) == null ? void 0 : e.handleDateSelect($(t));
+        return (e = this.calRef.value) == null ? void 0 : e.handleDateSelect(y(t));
       }}
-                  ><time datetime="${t}">${b(t, this.dateformat)}</time></pkt-tag
+                  ><time datetime="${t}">${$(t, this.dateformat)}</time></pkt-tag
                 >
               `
     ) : g}
@@ -313,13 +305,13 @@ let l = class extends S {
     `;
   }
   renderCalendar() {
-    return p`<div
+    return u`<div
       class="pkt-calendar-popup pkt-${this.calendarOpen ? "show" : "hide"}"
       @focusout=${(t) => {
       this.calendarOpen && this.handleFocusOut(t);
     }}
       id="${this.id}-popup"
-      ${d(this.popupRef)}
+      ${p(this.popupRef)}
     >
       <pkt-calendar
         id="${this.id}-calendar"
@@ -333,14 +325,14 @@ let l = class extends S {
         .latest=${this.max}
         .excludedates=${Array.isArray(this.excludedates) ? this.excludedates : this.excludedates.split(",")}
         .excludeweekdays=${this.excludeweekdays}
-        .currentmonth=${this.currentmonth ? _(this.currentmonth) : null}
+        .currentmonth=${this.currentmonth ? C(this.currentmonth) : null}
         @date-selected=${(t) => {
       this.value = !this.multiple && !this.range ? t.detail[0] : Array.isArray(t.detail) ? t.detail.join(",") : t.detail, this._value = t.detail, this.inputRef.value && (this.range && this.inputRefTo.value ? (this.inputRef.value.value = this._value[0] ?? "", this.inputRefTo.value.value = this._value[1] ?? "", this.manageValidity(this.inputRef.value), this.manageValidity(this.inputRefTo.value)) : this.multiple || (this.inputRef.value.value = this._value.length ? this._value[0] : "", this.manageValidity(this.inputRef.value)));
     }}
         @close=${() => {
       this.onBlur(), this.hideCalendar();
     }}
-        ${d(this.calRef)}
+        ${p(this.calRef)}
       ></pkt-calendar>
     </div>`;
   }
@@ -358,7 +350,7 @@ let l = class extends S {
       "pkt-btn--icon-only": !0,
       "pkt-btn--tertiary": !0,
       "pkt-datepicker__calendar-button": !0
-    }, p`
+    }, u`
       <pkt-input-wrapper
         label="${this.label}"
         forId="${this.id}-input"
@@ -383,7 +375,7 @@ let l = class extends S {
         .ariaDescribedBy=${this.ariaDescribedBy}
         class="pkt-datepicker"
       >
-        <div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" ${p(this.helptextSlot)} name="helptext" slot="helptext"></div>
         ${this.multiple ? this.renderTags() : g}
         <div
           class="pkt-datepicker__inputs ${this.range && this.showRangeLabels ? "pkt-input__range-inputs" : ""}"
@@ -398,7 +390,7 @@ let l = class extends S {
       (t.key === "Enter" || t.key === " " || t.key === "Space") && (t.preventDefault(), this.toggleCalendar(t));
     }}
               ?disabled=${this.disabled}
-              ${d(this.btnRef)}
+              ${p(this.btnRef)}
             >
               <pkt-icon name="calendar"></pkt-icon>
               <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
@@ -415,9 +407,9 @@ let l = class extends S {
   handleCalendarPosition() {
     var t;
     if (this.popupRef.value && this.inputRef.value) {
-      const e = this.multiple && !!this.maxlength, i = ((t = this.inputRef.value.parentElement) == null ? void 0 : t.getBoundingClientRect()) || this.inputRef.value.getBoundingClientRect(), a = e ? i.height + 30 : i.height, s = this.popupRef.value.getBoundingClientRect().height;
-      let h = e ? "calc(100% - 30px)" : "100%";
-      i && i.top + s > window.innerHeight && i.top - s > 0 && (h = `calc(100% - ${a}px - ${s}px)`), this.popupRef.value.style.top = h;
+      const e = this.multiple && !!this.maxlength, i = ((t = this.inputRef.value.parentElement) == null ? void 0 : t.getBoundingClientRect()) || this.inputRef.value.getBoundingClientRect(), s = e ? i.height + 30 : i.height, a = this.popupRef.value.getBoundingClientRect().height;
+      let o = e ? "calc(100% - 30px)" : "100%";
+      i && i.top + a > window.innerHeight && i.top - a > 0 && (o = `calc(100% - ${s}px - ${a}px)`), this.popupRef.value.style.top = o;
     }
   }
   handleFocusOut(t) {
@@ -425,7 +417,7 @@ let l = class extends S {
   }
   async showCalendar() {
     var t;
-    this.calendarOpen = !0, await k(20), this.handleCalendarPosition(), this.isMobileSafari && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
+    this.calendarOpen = !0, await b(20), this.handleCalendarPosition(), this.isMobileSafari && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
   }
   hideCalendar() {
     this.calendarOpen = !1;
@@ -474,10 +466,10 @@ n([
   r({ type: Boolean, reflect: !0 })
 ], l.prototype, "withcontrols", 2);
 n([
-  r({ converter: w.csvToArray })
+  r({ converter: x.csvToArray })
 ], l.prototype, "excludedates", 2);
 n([
-  r({ converter: w.csvToArray })
+  r({ converter: x.csvToArray })
 ], l.prototype, "excludeweekdays", 2);
 n([
   r({ type: String })
@@ -489,10 +481,10 @@ n([
   r({ type: String })
 ], l.prototype, "timezone", 2);
 n([
-  x()
+  k()
 ], l.prototype, "inputClasses", 2);
 n([
-  x()
+  k()
 ], l.prototype, "buttonClasses", 2);
 l = n([
   R("pkt-datepicker")

package/dist/pkt-datepicker.cjs

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

package/dist/pkt-datepicker.js

@@ -1,4 +1,4 @@
-import { P as t } from "./datepicker-BJKJBoy_.js";
+import { P as t } from "./datepicker-F3TwE9o7.js";
 const a = t;
 export {
   t as PktDatepicker,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-7rUOhlNi.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),d=require("./backlink-JbBNi3qg.cjs"),b=require("./button-B8rdtaHB.cjs"),k=require("./calendar-32W9p9uc.cjs"),m=require("./card-DBlFf1ry.cjs"),g=require("./combobox-DjO0RMUB.cjs"),h=require("./consent-hYeFWNFr.cjs"),f=require("./checkbox-Gn7Wtk9h.cjs"),t=require("./element-6DBpyGQm.cjs"),y=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),j=require("./datepicker-CmTrG5GE.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-CNycsyMj.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-Cjl0xwSq.cjs"),$=require("./linkcard-DqIvb54H.cjs"),L=require("./loader-DNidjwH-.cjs"),_=require("./messagebox-CjPtPPrW.cjs"),A=require("./modal-CRtxhCaP.cjs"),B=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),T=require("./tag-Bbs0U_Au.cjs"),I=require("./textarea-CPXsMFUq.cjs"),M=require("./textinput-aNI5kibM.cjs"),R=require("./select-CD6Zn8YH.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-7rUOhlNi.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),d=require("./backlink-JbBNi3qg.cjs"),b=require("./button-B8rdtaHB.cjs"),k=require("./calendar-32W9p9uc.cjs"),m=require("./card-DBlFf1ry.cjs"),g=require("./combobox-DjO0RMUB.cjs"),h=require("./consent-hYeFWNFr.cjs"),f=require("./checkbox-Gn7Wtk9h.cjs"),t=require("./element-6DBpyGQm.cjs"),y=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),j=require("./datepicker-DonUad47.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-CNycsyMj.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-Cjl0xwSq.cjs"),$=require("./linkcard-DqIvb54H.cjs"),L=require("./loader-DNidjwH-.cjs"),_=require("./messagebox-CjPtPPrW.cjs"),A=require("./modal-CRtxhCaP.cjs"),B=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),T=require("./tag-Bbs0U_Au.cjs"),I=require("./textarea-CPXsMFUq.cjs"),M=require("./textinput-aNI5kibM.cjs"),R=require("./select-CD6Zn8YH.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

@@ -12,7 +12,7 @@ import { P as k, t as h, x as P, n, a as c } from "./element-CgEWt74-.js";
 import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as m, n as d } from "./ref-BBYSqgeW.js";
 import { e as u } from "./class-map-BpTj9gtz.js";
-import { P as F } from "./datepicker-BJKJBoy_.js";
+import { P as F } from "./datepicker-F3TwE9o7.js";
 import { P as Q } from "./helptext-B7eI0iBQ.js";
 import { P as X } from "./heading-Bdh9absf.js";
 import { P as Z } from "./icon-CC1js8eR.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.5.6",
+  "version": "13.5.10",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -19,14 +19,14 @@
     "build": "tsc && vite build",
     "build-app": "tsc && vite build --config vite.config-app.ts",
     "preview": "vite preview --outDir dist-app",
-    "test": "jest --config jest.config.cjs"
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:ui": "vitest --ui"
   },
   "dependencies": {
     "@date-fns/tz": "^1.2.0",
     "@lit-labs/router": "^0.1.3",
-    "@types/jest": "^29.5.14",
     "@types/node": "^20.17.30",
-    "@types/testing-library__jest-dom": "^5.14.9",
     "date-fns": "^4.1.0",
     "dialog-polyfill": "^0.5.6",
     "lit": "^3.3.0",
@@ -43,15 +43,15 @@
     "@oslokommune/punkt-assets": "^13.3.1",
     "@oslokommune/punkt-css": "^13.5.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "jest": "^29.7.0",
+    "@vitest/ui": "^1.0.0",
     "jest-axe": "^9.0.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^23.0.0",
     "sass": "^1.78.0",
-    "ts-jest": "^29.2.6",
     "typescript": "^5.6.2",
     "vite": "^5.4.18",
     "vite-plugin-dts": "^4.2.1",
-    "vite-plugin-web-components-hmr": "^0.1.3"
+    "vite-plugin-web-components-hmr": "^0.1.3",
+    "vitest": "^1.0.0"
   },
   "private": false,
   "publishConfig": {
@@ -73,5 +73,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "5f0019a262ea4b9086590f7b6d572f5a39142f31"
+  "gitHead": "620a533438712c433484060ce628f538354c2c55"
 }

package/src/components/alert/alert.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './alert'
@@ -215,8 +216,8 @@ describe('PktAlert', () => {
       await alert.updateComplete
 
       // Listen for close events
-      const closeSpy = jest.fn()
-      const onCloseSpy = jest.fn()
+      const closeSpy = vi.fn()
+      const onCloseSpy = vi.fn()
       alert.addEventListener('close', closeSpy)
       alert.addEventListener('on-close', onCloseSpy)
 

package/src/components/button/button.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './button'
@@ -241,7 +242,7 @@ describe('PktButton', () => {
 
     test('prevents click events when disabled', async () => {
       const { button } = await createButtonTest({ disabled: true, content: 'Test Button' })
-      const clickSpy = jest.fn()
+      const clickSpy = vi.fn()
 
       await button.updateComplete
 
@@ -255,7 +256,7 @@ describe('PktButton', () => {
 
     test('prevents keyboard events when disabled', async () => {
       const { button } = await createButtonTest({ disabled: true, content: 'Test Button' })
-      const clickSpy = jest.fn()
+      const clickSpy = vi.fn()
 
       await button.updateComplete
 
@@ -310,7 +311,7 @@ describe('PktButton', () => {
 
     test('prevents click events when loading', async () => {
       const { button } = await createButtonTest({ content: 'Test Button' })
-      const clickSpy = jest.fn()
+      const clickSpy = vi.fn()
 
       // Set isLoading as a property
       button.isLoading = true
@@ -375,7 +376,7 @@ describe('PktButton', () => {
   describe('Click functionality', () => {
     test('allows click events when not disabled or loading', async () => {
       const { button } = await createButtonTest({ content: 'Test Button' })
-      const clickSpy = jest.fn()
+      const clickSpy = vi.fn()
 
       await button.updateComplete
 
@@ -389,7 +390,7 @@ describe('PktButton', () => {
 
     test('allows keyboard activation when not disabled or loading', async () => {
       const { button } = await createButtonTest({ content: 'Test Button' })
-      const clickSpy = jest.fn()
+      const clickSpy = vi.fn()
 
       await button.updateComplete
 

package/src/components/card/card.test.ts

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './card'
@@ -43,9 +44,9 @@ afterEach(() => {
 })
 
 // Global console.warn spy to suppress validation warnings in tests
-let consoleWarnSpy: jest.SpyInstance
+let consoleWarnSpy: any
 beforeEach(() => {
-  consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+  consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 })
 
 afterEach(() => {
@@ -151,7 +152,7 @@ describe('PktCard', () => {
     test('validates skin values and logs warnings for invalid skins', async () => {
       // Clear the global spy and create a new one for this specific test
       consoleWarnSpy.mockRestore()
-      const localConsoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+      const localConsoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
       const { card } = await createCardTest({ skin: 'zebra' })
       await card.updateComplete
@@ -166,7 +167,7 @@ describe('PktCard', () => {
 
       // Restore and recreate global spy for subsequent tests
       localConsoleSpy.mockRestore()
-      consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+      consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
     })
 
     test('applies different layout properties correctly', async () => {

package/src/components/combobox/combobox.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 
 expect.extend(toHaveNoViolations)
 
@@ -706,7 +707,7 @@ describe('PktCombobox', () => {
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
-      const searchEventSpy = jest.fn()
+      const searchEventSpy = vi.fn()
       combobox.addEventListener('search', searchEventSpy)
 
       // Simulate search change

package/src/components/consent/consent.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './consent'
@@ -46,13 +47,13 @@ afterEach(() => {
   }
   // Clean up global variables
   delete window.cookieBanner_googleAnalyticsId
-  delete window.cookieBanner_hotjarId
-  delete window.cookieBanner_devMode
-  delete window.cookieBanner_cookieDomain
-  delete window.cookieBanner_cookieSecure
-  delete window.cookieBanner_cookieExpiryDays
-  delete window.cookieBanner
-  delete window.__cookieEvents
+  ;(window as any).cookieBanner_hotjarId = undefined
+  ;(window as any).cookieBanner_devMode = undefined
+  ;(window as any).cookieBanner_cookieDomain = undefined
+  ;(window as any).cookieBanner_cookieSecure = undefined
+  ;(window as any).cookieBanner_cookieExpiryDays = undefined
+  ;(window as any).cookieBanner = undefined
+  ;(window as any).__cookieEvents = undefined
 })
 
 describe('PktConsent', () => {
@@ -218,10 +219,10 @@ describe('PktConsent', () => {
       Object.defineProperty(window, 'cookieBanner', {
         value: {
           cookieConsent: {
-            validateConsentCookie: jest.fn().mockResolvedValue(true),
-            getConsentCookie: jest.fn().mockReturnValue('mock-cookie'),
+            validateConsentCookie: vi.fn().mockResolvedValue(true),
+            getConsentCookie: vi.fn().mockReturnValue('mock-cookie'),
           },
-          openCookieModal: jest.fn(),
+          openCookieModal: vi.fn(),
         },
         writable: true,
       })
@@ -229,21 +230,21 @@ describe('PktConsent', () => {
       // Mock window.__cookieEvents
       Object.defineProperty(window, '__cookieEvents', {
         value: {
-          on: jest.fn(),
-          off: jest.fn(),
+          on: vi.fn(),
+          off: vi.fn(),
         },
         writable: true,
       })
 
       // Use fake timers to control setTimeout
-      jest.useFakeTimers()
+      vi.useFakeTimers()
     })
 
     afterEach(() => {
       // Clean up mocks and timers
-      jest.useRealTimers()
-      delete (window as any).cookieBanner
-      delete (window as any).__cookieEvents
+      vi.useRealTimers()
+      ;(window as any).cookieBanner = undefined
+      ;(window as any).__cookieEvents = undefined
     })
 
     test('handles click event on button trigger', async () => {
@@ -255,7 +256,7 @@ describe('PktConsent', () => {
       fireEvent.click(button!)
 
       // Fast-forward time to trigger setTimeout
-      jest.runAllTimers()
+      vi.runAllTimers()
 
       expect(window.cookieBanner.openCookieModal).toHaveBeenCalled()
     })
@@ -271,7 +272,7 @@ describe('PktConsent', () => {
       fireEvent.click(link!)
 
       // Fast-forward time to trigger setTimeout
-      jest.runAllTimers()
+      vi.runAllTimers()
 
       expect(window.cookieBanner.openCookieModal).toHaveBeenCalled()
     })
@@ -415,12 +416,12 @@ describe('PktConsent', () => {
 
       // Mock the event system
       window.__cookieEvents = {
-        on: jest.fn(),
-        off: jest.fn(),
+        on: vi.fn(),
+        off: vi.fn(),
       }
 
       // Set up a handler
-      const mockHandler = jest.fn()
+      const mockHandler = vi.fn()
       consent['_cookieEventHandler'] = mockHandler
 
       // Disconnect the component

package/src/components/datepicker/datepicker.ts

@@ -179,44 +179,25 @@ export class PktDatepicker extends PktInputElement {
   }
 
   valueChanged(newValue: string | null, oldValue: string | null): void {
-    if (newValue !== oldValue) {
-      let validatedValue: string[] = []
-
-      if (newValue) {
-        // Handle case where newValue might be a string or need conversion
-        if (typeof newValue === 'string') {
-          validatedValue = newValue.split(',').filter(Boolean)
-        } else {
-          // If not a string, convert to string first
-          validatedValue = String(newValue).split(',').filter(Boolean)
-        }
-      }
-
-      // Validate dates against min/max boundaries
-      if (this.min || this.max) {
-        const minDate = this.min ? new Date(this.min) : null
-        const maxDate = this.max ? new Date(this.max) : null
-
-        validatedValue = validatedValue.filter((dateStr) => {
-          const date = new Date(dateStr)
-          if (isNaN(date.getTime())) return false
-          if (minDate && date < minDate) return false
-          if (maxDate && date > maxDate) return false
-          return true
-        })
+    if (newValue === oldValue) return
+
+    let parsedValue: string[] = []
+    if (newValue) {
+      if (typeof newValue === 'string') {
+        parsedValue = newValue.split(',').filter(Boolean)
+      } else {
+        parsedValue = String(newValue).split(',').filter(Boolean)
       }
+    }
 
-      this._value = validatedValue
-
-      // Update the public value property to reflect validated value
-      const validatedValueString = validatedValue.join(',')
-      if (this._valueProperty !== validatedValueString) {
-        this._valueProperty = validatedValueString
-      }
+    this._value = parsedValue
 
-      // Call base class valueChanged to handle events properly
-      super.valueChanged(validatedValueString, oldValue)
+    const parsedValueString = parsedValue.join(',')
+    if (this._valueProperty !== parsedValueString) {
+      this._valueProperty = parsedValueString
     }
+
+    super.valueChanged(parsedValueString, oldValue)
   }
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {

package/src/components/datepicker/datepicker.validation.test.ts

@@ -79,39 +79,31 @@ describe('PktDatepicker', () => {
       }
     })
 
-    test('validates dates against earliest/latest boundaries', async () => {
-      const container = await createDatepicker('min="2024-06-10" max="2024-06-20"')
+    test.each`
+      description                                                  | value           | expectedRangeUnderflow | expectedValid
+      ${'Test date before min - component should mark it invalid'} | ${'2024-06-05'} | ${true}                | ${false}
+      ${'Test date after max - component should mark it invalid'}  | ${'2024-06-25'} | ${false}               | ${false}
+      ${'Test valid date - should be accepted and marked valid'}   | ${'2024-06-15'} | ${false}               | ${true}
+    `(
+      'validates dates against earliest/latest boundaries - $description',
+      async ({ value, expectedRangeUnderflow, expectedValid }) => {
+        const container = await createDatepicker('min="2024-06-10" max="2024-06-20"')
 
-      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
-      await datepicker.updateComplete
-
-      const input = datepicker.querySelector('input') as HTMLInputElement
-
-      // Test date before min - component should filter it out
-      datepicker.value = '2024-06-05'
-      await datepicker.updateComplete
-
-      // Component should reject invalid date (filter it out)
-      expect(datepicker.value).toBe('')
-      expect(input.value).toBe('')
-
-      // Test date after max - component should filter it out
-      datepicker.value = '2024-06-25'
-      await datepicker.updateComplete
+        const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+        await datepicker.updateComplete
 
-      // Component should reject invalid date (filter it out)
-      expect(datepicker.value).toBe('')
-      expect(input.value).toBe('')
+        const input = datepicker.querySelector('input') as HTMLInputElement
 
-      // Test valid date - should be accepted
-      datepicker.value = '2024-06-15'
-      await datepicker.updateComplete
+        datepicker.value = value
+        await datepicker.updateComplete
 
-      // Valid date should be accepted
-      expect(datepicker.value).toBe('2024-06-15')
-      expect(input.value).toBe('2024-06-15')
-      expect(input.validity.valid).toBe(true)
-    })
+        expect(datepicker.value).toBe(value)
+        expect(input.value).toBe(value)
+        expect(datepicker._value).toEqual([value])
+        expect(input.validity.rangeUnderflow).toBe(expectedRangeUnderflow)
+        expect(input.validity.valid).toBe(expectedValid)
+      },
+    )
   })
 
   describe('Error handling and edge cases', () => {

package/src/components/heading/heading.test.ts

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 expect.extend(toHaveNoViolations)
 
@@ -241,7 +242,7 @@ describe('PktHeading', () => {
     })
 
     test('handles invalid levels gracefully', async () => {
-      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation()
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
       const container = await createHeading()
       const heading = container.querySelector('pkt-heading') as PktHeading

package/src/components/icon/icon.test.ts

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 import {
   createElementTest,
   BaseTestConfig,
@@ -43,7 +44,7 @@ afterEach(() => {
 })
 
 // Mock fetch for icon loading
-const mockFetch = jest.fn()
+const mockFetch = vi.fn()
 const mockSvgContent =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="test-path"></path></svg>'
 
@@ -270,7 +271,7 @@ describe('PktIcon', () => {
 
   describe('Global configuration', () => {
     test('uses custom pktFetch function when provided', async () => {
-      const customFetch = jest.fn().mockResolvedValue({
+      const customFetch = vi.fn().mockResolvedValue({
         ok: true,
         text: () => Promise.resolve('<svg>custom</svg>'),
       })

package/src/components/link/link.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './link'
@@ -147,7 +148,7 @@ describe('PktLink', () => {
       await link.updateComplete
 
       const anchor = link.querySelector('a')
-      const clickHandler = jest.fn()
+      const clickHandler = vi.fn()
       anchor?.addEventListener('click', clickHandler)
 
       fireEvent.click(anchor!)

package/src/components/messagebox/messagebox.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import { type IPktMessagebox } from './messagebox'
@@ -167,8 +168,8 @@ describe('PktMessagebox', () => {
     test('dispatches close events when closed', async () => {
       const { messagebox } = await createMessageboxTest({ closable: true })
 
-      const closeHandler = jest.fn()
-      const onCloseHandler = jest.fn()
+      const closeHandler = vi.fn()
+      const onCloseHandler = vi.fn()
       messagebox.addEventListener('close', closeHandler)
       messagebox.addEventListener('on-close', onCloseHandler)
 

package/src/components/radiobutton/radiobutton.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './radiobutton'
@@ -203,8 +204,8 @@ describe('pkt-radiobutton', () => {
   test('manages focus events correctly', async () => {
     const { radiobutton } = await createRadioButtonTest()
 
-    const focusSpy = jest.fn()
-    const blurSpy = jest.fn()
+    const focusSpy = vi.fn()
+    const blurSpy = vi.fn()
     radiobutton.addEventListener('focus', focusSpy)
     radiobutton.addEventListener('blur', blurSpy)
 

package/src/components/select/select.test.ts

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import { type IPktSelect, type TSelectOption } from './select'
@@ -159,8 +160,8 @@ describe('pkt-select', () => {
   test('manages focus events correctly', async () => {
     const { select } = await createSelectTest()
 
-    const focusSpy = jest.spyOn(select, 'onFocus')
-    const blurSpy = jest.spyOn(select, 'onBlur')
+    const focusSpy = vi.spyOn(select, 'onFocus')
+    const blurSpy = vi.spyOn(select, 'onBlur')
 
     const selectElement = select.querySelector('select') as HTMLSelectElement
 

package/src/components/tag/tag.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import { type IPktTag } from './tag'
@@ -125,7 +126,7 @@ describe('PktTag', () => {
 
     test('dispatches close event when close button is clicked', async () => {
       const { tag } = await createTagTest({ closeTag: true })
-      const closeSpy = jest.fn()
+      const closeSpy = vi.fn()
       tag.addEventListener('close', closeSpy)
 
       const button = tag.querySelector('button') as HTMLButtonElement