@oslokommune/punkt-react 12.6.2 → 12.6.4

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.6.4](https://github.com/oslokommune/punkt/compare/12.6.3...12.6.4) (2024-11-07)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* Datepicker trigger mangler `type=button` (#2001 A Punkt Odyssey). Pluss tastaturnavigering i måned- og årvelger i kalenderen funket ikke. Og flere inputs manglet label.
+
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.6.2](https://github.com/oslokommune/punkt/compare/12.6.1...12.6.2) (2024-11-05)
 
 ### ⚠ BREAKING CHANGES

package/dist/punkt-react.es.js

@@ -1334,6 +1334,8 @@ const kg = {
 }, wg = {
   buttonAltText: "Åpne kalender"
 }, Cg = {
+  month: "Måned",
+  year: "År",
   days: [
     "Mandag",
     "Tirsdag",
@@ -2227,19 +2229,21 @@ let xe = class extends Pt {
     }
   }
   handleArrowKey(t, n) {
+    var r, i, o;
+    if (((r = t.target) == null ? void 0 : r.nodeName) === "INPUT" || ((i = t.target) == null ? void 0 : i.nodeName) === "SELECT" || ((o = t.target) == null ? void 0 : o.nodeName) === "BUTTON") return;
     t.preventDefault(), this.focusedDate || this.focusOnCurrentDate();
-    const r = this.focusedDate ? new Date(this.focusedDate) : new Date(this.year, this.month, 1);
-    let i = new Date(r.setDate(r.getDate() + n));
-    if (i) {
-      let o = this.querySelector(`div[data-date="${this.formatISODate(i)}"]`);
-      if (o instanceof HTMLDivElement) {
-        if (o.dataset.disabled) {
-          let u = new Date(r.setDate(r.getDate() + n)), c = this.querySelector(`div[data-date="${this.formatISODate(u)}"]`);
-          for (; c && c instanceof HTMLDivElement && c.dataset.disabled; )
-            u = new Date(u.setDate(u.getDate() + n)), c = this.querySelector(`div[data-date="${this.formatISODate(u)}"]`);
-          o = c;
+    const u = this.focusedDate ? new Date(this.focusedDate) : new Date(this.year, this.month, 1);
+    let c = new Date(u.setDate(u.getDate() + n));
+    if (c) {
+      let d = this.querySelector(`div[data-date="${this.formatISODate(c)}"]`);
+      if (d instanceof HTMLDivElement) {
+        if (d.dataset.disabled) {
+          let h = new Date(u.setDate(u.getDate() + n)), m = this.querySelector(`div[data-date="${this.formatISODate(h)}"]`);
+          for (; m && m instanceof HTMLDivElement && m.dataset.disabled; )
+            h = new Date(h.setDate(h.getDate() + n)), m = this.querySelector(`div[data-date="${this.formatISODate(h)}"]`);
+          d = m;
         }
-        o instanceof HTMLDivElement && !o.dataset.disabled && (this.focusedDate = this.formatISODate(i), o.focus());
+        d instanceof HTMLDivElement && !d.dataset.disabled && (this.focusedDate = this.formatISODate(c), d.focus());
       }
     }
   }
@@ -2257,7 +2261,8 @@ let xe = class extends Pt {
       >
         <nav class="pkt-cal-month-nav">
           <div>
-            <div
+            <button
+              type="button"
               @click=${this.isPrevMonthAllowed() && this.prevMonth}
               @keydown=${(t) => {
       (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.isNextMonthAllowed() && this.prevMonth());
@@ -2269,11 +2274,12 @@ let xe = class extends Pt {
             >
               <pkt-icon class="pkt-btn__icon" name="chevron-thin-left"></pkt-icon>
               <span class="pkt-btn__text">${this.prevMonthString}</span>
-            </div>
+            </button>
           </div>
           ${this.renderMonthNav()}
           <div>
-            <div
+            <button
+              type="button"
               @click=${this.isNextMonthAllowed() && this.nextMonth}
               @keydown=${(t) => {
       (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.isNextMonthAllowed() && this.nextMonth());
@@ -2285,7 +2291,7 @@ let xe = class extends Pt {
             >
               <pkt-icon class="pkt-btn__icon" name="chevron-thin-right"></pkt-icon>
               <span class="pkt-btn__text">${this.nextMonthString}</span>
-            </div>
+            </button>
           </div>
         </nav>
         <table
@@ -2311,8 +2317,10 @@ let xe = class extends Pt {
     let t = [];
     return this.withcontrols ? t.push(
       Y`<div class="pkt-cal-month-picker">
+          <label for="${this.id}-monthnav" class="pkt-hide">${this.strings.dates.month}</label>
           <select
             class="pkt-input pkt-input-compact"
+            id="${this.id}-monthnav"
             @change=${(n) => {
         this.changeMonth(this.year, n.target.value);
       }}
@@ -2321,8 +2329,10 @@ let xe = class extends Pt {
         (n, r) => Y`<option value=${r} ?selected=${this.month === r}>${n}</option>`
       )}
           </select>
+          <label for="${this.id}-yearnav" class="pkt-hide">${this.strings.dates.year}</label>
           <input
             class="pkt-input pkt-cal-input-year pkt-input-compact"
+            id="${this.id}-yearnav"
             type="number"
             size="4"
             placeholder="0000"
@@ -4835,11 +4845,12 @@ let qe = class extends Ye {
     }}
         ${st(this.inputRef)}
       />
-      <div class="pkt-input-prefix">Til</div>
+      <div class="pkt-input-prefix" id="${this.id}-to-label">Til</div>
       <input
         class=${ze(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-to"
+        aria-labelledby="${this.id}-to-label"
         .value=${this._value[1] ?? ""}
         min=${this.min}
         max=${this.max}
@@ -4945,6 +4956,7 @@ let qe = class extends Ye {
       ${st(this.popupRef)}
     >
       <pkt-calendar
+        id="${this.id}-calendar"
         ?multiple=${this.multiple}
         ?range=${this.range}
         ?weeknumbers=${this.weeknumbers}
@@ -4994,6 +5006,7 @@ let qe = class extends Ye {
             ${this.range ? this.renderRangeInput() : this.multiple ? this.renderMultipleInput() : this.renderInput()}
             <button
               class="${ze(this.buttonClasses)}"
+              type="button"
               @click=${this.toggleCalendar}
               ?disabled=${this.disabled}
               ${st(this.btnRef)}

package/dist/punkt-react.umd.js

@@ -92,7 +92,7 @@ React keys must be passed directly to JSX without using spread:
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function Yt(e){return O({...e,state:!0,attribute:!1})}for(var Je=[],Zi=0;Zi<256;++Zi)Je.push((Zi+256).toString(16).slice(1));function kh(e,t=0){return(Je[e[t+0]]+Je[e[t+1]]+Je[e[t+2]]+Je[e[t+3]]+"-"+Je[e[t+4]]+Je[e[t+5]]+"-"+Je[e[t+6]]+Je[e[t+7]]+"-"+Je[e[t+8]]+Je[e[t+9]]+"-"+Je[e[t+10]]+Je[e[t+11]]+Je[e[t+12]]+Je[e[t+13]]+Je[e[t+14]]+Je[e[t+15]]).toLowerCase()}var Na,wh=new Uint8Array(16);function Ch(){if(!Na&&(Na=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!Na))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return Na(wh)}var _h=typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto);const Tl={randomUUID:_h};function Bl(e,t,n){if(Tl.randomUUID&&!t&&!e)return Tl.randomUUID();e=e||{};var r=e.random||(e.rng||Ch)();return r[6]=r[6]&15|64,r[8]=r[8]&63|128,kh(r)}const xh={hi:"Hei!"},Sh={buttonAltText:"Åpne kalender"},Eh={days:["Mandag","Tirsdag","Onsdag","Torsdag","Fredag","Lørdag","Søndag"],daysShort:["Man","Tir","Ons","Tor","Fre","Lør","Søn"],months:["Januar","Februar","Mars","April","Mai","Juni","Juli","August","September","Oktober","November","Desember"],monthsShort:["Jan","Feb","Mar","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Des"],week:"Uke",prevMonth:"Forrige måned",nextMonth:"Neste måned"},Fh={labels:{optional:"Valgfritt",required:"Må fylles ut"},messages:{required:"Dette feltet er påkrevd",invalid:"Ugyldig verdi",invalidPattern:"Ugyldig format",tooShort:"For kort",tooLong:"For lang",rangeUnderflow:"For lav verdi",rangeOverflow:"For høy verdi",dateUnderflow:"For tidlig dato",dateOverflow:"For sen dato"},date:{multiple:"Her kan du velge flere datoer. Trykk komma eller enter når du har skrevet inn en dato."}},Tt={example:xh,calendar:Sh,dates:Eh,forms:Fh};var Ah=Object.defineProperty,ze=(e,t,n,r)=>{for(var i=void 0,o=e.length-1,u;o>=0;o--)(u=e[o])&&(i=u(t,n,i)||i);return i&&Ah(t,n,i),i};let Bt=class extends Ir{constructor(){super(),this.strings=Tt}connectedCallback(){super.connectedCallback()}createRenderRoot(){return this}hotReplacedCallback(){this.requestUpdate()}};ze([O({type:Object})],Bt.prototype,"strings");let Ge=class extends Bt{constructor(){super(),this.id=Bl(),this.name=this.id,this.required=!1,this.disabled=!1,this.placeholder="",this.min=null,this.max=null,this.minlength=0,this.maxlength=0,this.pattern="",this.optionalTag=!1,this.optionalText=Tt.forms.labels.optional,this.requiredTag=!1,this.requiredText=Tt.forms.labels.required,this.hasError=!1,this.errorMessage="",this.touched=!1,this.internals=this.attachInternals()}static get formAssociated(){return!0}manageValidity(t){this.required&&!this.value?this.internals.setValidity({valueMissing:!0},Tt.forms.messages.required,t):t.validity.typeMismatch||t.validity.badInput?this.internals.setValidity({typeMismatch:!0},Tt.forms.messages.invalid,t):t.validity.patternMismatch?this.internals.setValidity({patternMismatch:!0},Tt.forms.messages.invalidPattern,t):t.validity.tooShort||this.minLength>0&&this.value.length<this.minLength?this.internals.setValidity({tooShort:!0},Tt.forms.messages.tooShort,t):t.validity.tooLong||this.maxLength>0&&this.value.length>this.maxLength?this.internals.setValidity({tooLong:!0},Tt.forms.messages.tooLong,t):t.validity.rangeUnderflow?this.internals.setValidity({rangeUnderflow:!0},Tt.forms.messages.rangeUnderflow,t):t.validity.rangeOverflow?this.internals.setValidity({rangeOverflow:!0},Tt.forms.messages.rangeOverflow,t):t.validity.customError?this.internals.setValidity({customError:!0},t.validationMessage,t):this.internals.setValidity({})}setFormValue(t){if(this.internals)if(Array.isArray(t)){const n=new FormData;t.forEach(r=>{n.append(this.name,r)}),this.internals.setFormValue(n)}else this.internals.setFormValue(t)}valueChanged(t,n){typeof t=="string"?((this.multiple||this.range)&&t.includes(",")&&(t=t.split(",")),this.value=t,this._value=Array.isArray(t)?t:[t]):Array.isArray(t)?(this.value=t,this._value=t):(this.value="",this._value=[]),(!this.value||this.value.length===0)&&n&&n.length!==0?this.clearInputValue():this.value&&this.value.toString()!==(n==null?void 0:n.toString())&&this.onChange(this.value),this.updateComplete.then(()=>this.requestUpdate())}clearInputValue(){const t=this.multiple||this.range?[]:"";this.value=t,this.internals.setFormValue(t),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0}))}onFocus(){this.dispatchEvent(new FocusEvent("focus"))}onBlur(){this.dispatchEvent(new FocusEvent("blur"))}onInput(){this.dispatchEvent(new InputEvent("input"))}onChange(t){if(!this.touched){this.touched=!0,t&&this.setFormValue(t);return}typeof t!="string"&&!Array.isArray(t)||((this.range||this.multiple)&&!Array.isArray(t)&&t.includes(",")&&(t=t.split(",")),!this.multiple&&!this.range&&Array.isArray(t)&&(t=t[0]),this.setFormValue(t),this.manageValidity(this.inputRef.value),this.inputRef2&&this.manageValidity(this.inputRef2.value),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0})),this.internals.reportValidity())}firstUpdated(t){super.firstUpdated(t),this.required&&(this.internals.ariaRequired=!0),this.disabled&&(this.internals.disabled=!0,this.internals.ariaDisabled=!0),this.internals.setFormValue(this.value),this.manageValidity(this.inputRef.value)}};ze([O({type:String,reflect:!0})],Ge.prototype,"id"),ze([O({type:String,reflect:!0})],Ge.prototype,"name"),ze([O({type:Boolean,reflect:!0})],Ge.prototype,"required"),ze([O({type:Boolean,reflect:!0})],Ge.prototype,"disabled"),ze([O({type:String,reflect:!0})],Ge.prototype,"placeholder"),ze([O({type:Number,reflect:!0})],Ge.prototype,"min"),ze([O({type:Number,reflect:!0})],Ge.prototype,"max"),ze([O({type:Number,reflect:!0})],Ge.prototype,"minlength"),ze([O({type:Number,reflect:!0})],Ge.prototype,"maxlength"),ze([O({type:String,reflect:!0})],Ge.prototype,"pattern"),ze([O({type:Boolean,reflect:!0})],Ge.prototype,"optionalTag"),ze([O({type:String,reflect:!0})],Ge.prototype,"optionalText"),ze([O({type:Boolean,reflect:!0})],Ge.prototype,"requiredTag"),ze([O({type:String,reflect:!0})],Ge.prototype,"requiredText"),ze([O({type:Boolean,reflect:!0})],Ge.prototype,"hasError"),ze([O({type:String,reflect:!0})],Ge.prototype,"errorMessage"),ze([Yt()],Ge.prototype,"touched");/**
+ */function Yt(e){return O({...e,state:!0,attribute:!1})}for(var Je=[],Zi=0;Zi<256;++Zi)Je.push((Zi+256).toString(16).slice(1));function kh(e,t=0){return(Je[e[t+0]]+Je[e[t+1]]+Je[e[t+2]]+Je[e[t+3]]+"-"+Je[e[t+4]]+Je[e[t+5]]+"-"+Je[e[t+6]]+Je[e[t+7]]+"-"+Je[e[t+8]]+Je[e[t+9]]+"-"+Je[e[t+10]]+Je[e[t+11]]+Je[e[t+12]]+Je[e[t+13]]+Je[e[t+14]]+Je[e[t+15]]).toLowerCase()}var Na,wh=new Uint8Array(16);function Ch(){if(!Na&&(Na=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!Na))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return Na(wh)}var _h=typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto);const Tl={randomUUID:_h};function Bl(e,t,n){if(Tl.randomUUID&&!t&&!e)return Tl.randomUUID();e=e||{};var r=e.random||(e.rng||Ch)();return r[6]=r[6]&15|64,r[8]=r[8]&63|128,kh(r)}const xh={hi:"Hei!"},Sh={buttonAltText:"Åpne kalender"},Eh={month:"Måned",year:"År",days:["Mandag","Tirsdag","Onsdag","Torsdag","Fredag","Lørdag","Søndag"],daysShort:["Man","Tir","Ons","Tor","Fre","Lør","Søn"],months:["Januar","Februar","Mars","April","Mai","Juni","Juli","August","September","Oktober","November","Desember"],monthsShort:["Jan","Feb","Mar","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Des"],week:"Uke",prevMonth:"Forrige måned",nextMonth:"Neste måned"},Fh={labels:{optional:"Valgfritt",required:"Må fylles ut"},messages:{required:"Dette feltet er påkrevd",invalid:"Ugyldig verdi",invalidPattern:"Ugyldig format",tooShort:"For kort",tooLong:"For lang",rangeUnderflow:"For lav verdi",rangeOverflow:"For høy verdi",dateUnderflow:"For tidlig dato",dateOverflow:"For sen dato"},date:{multiple:"Her kan du velge flere datoer. Trykk komma eller enter når du har skrevet inn en dato."}},Tt={example:xh,calendar:Sh,dates:Eh,forms:Fh};var Ah=Object.defineProperty,ze=(e,t,n,r)=>{for(var i=void 0,o=e.length-1,u;o>=0;o--)(u=e[o])&&(i=u(t,n,i)||i);return i&&Ah(t,n,i),i};let Bt=class extends Ir{constructor(){super(),this.strings=Tt}connectedCallback(){super.connectedCallback()}createRenderRoot(){return this}hotReplacedCallback(){this.requestUpdate()}};ze([O({type:Object})],Bt.prototype,"strings");let Ge=class extends Bt{constructor(){super(),this.id=Bl(),this.name=this.id,this.required=!1,this.disabled=!1,this.placeholder="",this.min=null,this.max=null,this.minlength=0,this.maxlength=0,this.pattern="",this.optionalTag=!1,this.optionalText=Tt.forms.labels.optional,this.requiredTag=!1,this.requiredText=Tt.forms.labels.required,this.hasError=!1,this.errorMessage="",this.touched=!1,this.internals=this.attachInternals()}static get formAssociated(){return!0}manageValidity(t){this.required&&!this.value?this.internals.setValidity({valueMissing:!0},Tt.forms.messages.required,t):t.validity.typeMismatch||t.validity.badInput?this.internals.setValidity({typeMismatch:!0},Tt.forms.messages.invalid,t):t.validity.patternMismatch?this.internals.setValidity({patternMismatch:!0},Tt.forms.messages.invalidPattern,t):t.validity.tooShort||this.minLength>0&&this.value.length<this.minLength?this.internals.setValidity({tooShort:!0},Tt.forms.messages.tooShort,t):t.validity.tooLong||this.maxLength>0&&this.value.length>this.maxLength?this.internals.setValidity({tooLong:!0},Tt.forms.messages.tooLong,t):t.validity.rangeUnderflow?this.internals.setValidity({rangeUnderflow:!0},Tt.forms.messages.rangeUnderflow,t):t.validity.rangeOverflow?this.internals.setValidity({rangeOverflow:!0},Tt.forms.messages.rangeOverflow,t):t.validity.customError?this.internals.setValidity({customError:!0},t.validationMessage,t):this.internals.setValidity({})}setFormValue(t){if(this.internals)if(Array.isArray(t)){const n=new FormData;t.forEach(r=>{n.append(this.name,r)}),this.internals.setFormValue(n)}else this.internals.setFormValue(t)}valueChanged(t,n){typeof t=="string"?((this.multiple||this.range)&&t.includes(",")&&(t=t.split(",")),this.value=t,this._value=Array.isArray(t)?t:[t]):Array.isArray(t)?(this.value=t,this._value=t):(this.value="",this._value=[]),(!this.value||this.value.length===0)&&n&&n.length!==0?this.clearInputValue():this.value&&this.value.toString()!==(n==null?void 0:n.toString())&&this.onChange(this.value),this.updateComplete.then(()=>this.requestUpdate())}clearInputValue(){const t=this.multiple||this.range?[]:"";this.value=t,this.internals.setFormValue(t),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0}))}onFocus(){this.dispatchEvent(new FocusEvent("focus"))}onBlur(){this.dispatchEvent(new FocusEvent("blur"))}onInput(){this.dispatchEvent(new InputEvent("input"))}onChange(t){if(!this.touched){this.touched=!0,t&&this.setFormValue(t);return}typeof t!="string"&&!Array.isArray(t)||((this.range||this.multiple)&&!Array.isArray(t)&&t.includes(",")&&(t=t.split(",")),!this.multiple&&!this.range&&Array.isArray(t)&&(t=t[0]),this.setFormValue(t),this.manageValidity(this.inputRef.value),this.inputRef2&&this.manageValidity(this.inputRef2.value),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0})),this.internals.reportValidity())}firstUpdated(t){super.firstUpdated(t),this.required&&(this.internals.ariaRequired=!0),this.disabled&&(this.internals.disabled=!0,this.internals.ariaDisabled=!0),this.internals.setFormValue(this.value),this.manageValidity(this.inputRef.value)}};ze([O({type:String,reflect:!0})],Ge.prototype,"id"),ze([O({type:String,reflect:!0})],Ge.prototype,"name"),ze([O({type:Boolean,reflect:!0})],Ge.prototype,"required"),ze([O({type:Boolean,reflect:!0})],Ge.prototype,"disabled"),ze([O({type:String,reflect:!0})],Ge.prototype,"placeholder"),ze([O({type:Number,reflect:!0})],Ge.prototype,"min"),ze([O({type:Number,reflect:!0})],Ge.prototype,"max"),ze([O({type:Number,reflect:!0})],Ge.prototype,"minlength"),ze([O({type:Number,reflect:!0})],Ge.prototype,"maxlength"),ze([O({type:String,reflect:!0})],Ge.prototype,"pattern"),ze([O({type:Boolean,reflect:!0})],Ge.prototype,"optionalTag"),ze([O({type:String,reflect:!0})],Ge.prototype,"optionalText"),ze([O({type:Boolean,reflect:!0})],Ge.prototype,"requiredTag"),ze([O({type:String,reflect:!0})],Ge.prototype,"requiredText"),ze([O({type:Boolean,reflect:!0})],Ge.prototype,"hasError"),ze([O({type:String,reflect:!0})],Ge.prototype,"errorMessage"),ze([Yt()],Ge.prototype,"touched");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
@@ -150,7 +150,7 @@ React keys must be passed directly to JSX without using spread:
 
         ${this.date?K`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:ne}
       </div>
-    `}};pn([O({type:Boolean,reflect:!1})],It.prototype,"compact",2),pn([O({type:String,reflect:!0})],It.prototype,"title",2),pn([O({type:String,reflect:!0})],It.prototype,"skin",2),pn([O({type:String,reflect:!0})],It.prototype,"ariaLive",2),pn([O({type:Boolean,reflect:!0})],It.prototype,"closeAlert",2),pn([O({type:String,reflect:!0})],It.prototype,"date",2),pn([Yt()],It.prototype,"_isClosed",2),It=pn([Ot("pkt-alert")],It);const Ll=e=>{if(Array.isArray(e))return e;if(typeof e=="string")return e.split(",")},Xh=e=>e?new Date(e):null,Qh=e=>{if(typeof e=="string")return e.split(",").map(t=>new Date(t));if(Array.isArray(e))return e.map(t=>new Date(t))},rr={csvToArray:Ll,stringToDate:Xh,stringsToDate:Qh};function ot(e){const t=Object.prototype.toString.call(e);return e instanceof Date||typeof e=="object"&&t==="[object Date]"?new e.constructor(+e):typeof e=="number"||t==="[object Number]"||typeof e=="string"||t==="[object String]"?new Date(e):new Date(NaN)}function jn(e,t){return e instanceof Date?new e.constructor(t):new Date(t)}const Ol=6048e5,Zh=864e5;let ef={};function qa(){return ef}function Ur(e,t){var n,r,i,o;const u=qa(),c=(t==null?void 0:t.weekStartsOn)??((r=(n=t==null?void 0:t.locale)==null?void 0:n.options)==null?void 0:r.weekStartsOn)??u.weekStartsOn??((o=(i=u.locale)==null?void 0:i.options)==null?void 0:o.weekStartsOn)??0,d=ot(e),h=d.getDay(),m=(h<c?7:0)+h-c;return d.setDate(d.getDate()-m),d.setHours(0,0,0,0),d}function as(e,t){const n=ot(e.start),r=ot(e.end);let i=+n>+r;const o=i?+n:+r,u=i?r:n;u.setHours(0,0,0,0);let c=1;const d=[];for(;+u<=o;)d.push(ot(u)),u.setDate(u.getDate()+c),u.setHours(0,0,0,0);return i?d.reverse():d}function Il(e,t){var n,r,i,o;const u=ot(e),c=u.getFullYear(),d=qa(),h=(t==null?void 0:t.firstWeekContainsDate)??((r=(n=t==null?void 0:t.locale)==null?void 0:n.options)==null?void 0:r.firstWeekContainsDate)??d.firstWeekContainsDate??((o=(i=d.locale)==null?void 0:i.options)==null?void 0:o.firstWeekContainsDate)??1,m=jn(e,0);m.setFullYear(c+1,0,h),m.setHours(0,0,0,0);const v=Ur(m,t),y=jn(e,0);y.setFullYear(c,0,h),y.setHours(0,0,0,0);const b=Ur(y,t);return u.getTime()>=v.getTime()?c+1:u.getTime()>=b.getTime()?c:c-1}function tf(e,t){var n,r,i,o;const u=qa(),c=(t==null?void 0:t.firstWeekContainsDate)??((r=(n=t==null?void 0:t.locale)==null?void 0:n.options)==null?void 0:r.firstWeekContainsDate)??u.firstWeekContainsDate??((o=(i=u.locale)==null?void 0:i.options)==null?void 0:o.firstWeekContainsDate)??1,d=Il(e,t),h=jn(e,0);return h.setFullYear(d,0,c),h.setHours(0,0,0,0),Ur(h,t)}function Ml(e,t){const n=ot(e),r=+Ur(n,t)-+tf(n,t);return Math.round(r/Ol)+1}function nf(e){let t=ot(e).getDay();return t===0&&(t=7),t}const rf="pkt-calendar",af={id:{type:"string",name:"ID",description:"Unique identifier for the calendar"},currentmonth:{type:"date",converter:"stringToDate",description:"The current month to display"},selected:{type:"array",converter:"csvToArray",reflect:!0,items:{type:"date"},description:"Array of selected dates"},excludeweekdays:{type:"array",converter:"csvToArray",items:{type:"string"},description:"Array of weekdays (1-7) to exclude"},excludedates:{type:"array",converter:"stringsToDate",items:{type:"date"},description:"Array of specific dates to exclude"},earliest:{type:"date",converter:"stringToDate",default:null,description:"Earliest selectable date"},latest:{type:"date",converter:"stringToDate",default:null,description:"Latest selectable date"},weeknumbers:{type:"boolean",reflect:!0,default:!1,description:"Show week numbers in calendar"},withcontrols:{type:"boolean",reflect:!0,default:!1,description:"Show month and year navigation controls"},multiple:{type:"boolean",reflect:!0,default:!1,description:"Allow multiple date selection"},maxMultiple:{type:"number",default:4,description:"Maximum number of dates that can be selected"},range:{type:"boolean",reflect:!0,default:!1,description:"Allow date range selection"}},sf={"date-selected":{description:"Returns ISO formatted date string"}},Pn={name:rf,"css-class":"pkt-calendar",props:af,events:sf};var of=Object.defineProperty,lf=Object.getOwnPropertyDescriptor,Se=(e,t,n,r)=>{for(var i=r>1?void 0:r?lf(t,n):t,o=e.length-1,u;o>=0;o--)(u=e[o])&&(i=(r?u(t,n,i):u(i))||i);return r&&i&&of(t,n,i),i};let xe=class extends Bt{constructor(){super(...arguments),this.multiple=Pn.props.multiple.default,this.maxMultiple=Pn.props.maxMultiple.default,this.range=Pn.props.range.default,this.weeknumbers=Pn.props.weeknumbers.default,this.withcontrols=Pn.props.withcontrols.default,this.selected=[],this.earliest=Pn.props.earliest.default,this.latest=Pn.props.latest.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.dayStrings=this.strings.dates.daysShort,this.monthStrings=this.strings.dates.months,this.weekString=this.strings.dates.week,this.prevMonthString=this.strings.dates.prevMonth,this.nextMonthString=this.strings.dates.nextMonth,this._selected=[],this.year=0,this.month=0,this.week=0,this.rangeHovered=null,this.inRange={},this.focusedDate=null,this.selectableDates=[],this.currentmonthtouched=!1,this.tabIndexSet=0}connectedCallback(){super.connectedCallback()}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}attributeChangedCallback(t,n,r){t==="selected"&&r&&this.convertSelected(),super.attributeChangedCallback(t,n,r)}updated(t){t.has("selected")&&this.convertSelected(),super.updated(t)}firstUpdated(t){this.addEventListener("keydown",this.handleKeydown)}convertSelected(){if(typeof this.selected=="string"&&(this.selected=this.selected.split(",")),this.selected.length===1&&this.selected[0]===""&&(this.selected=[]),this._selected=this.selected.map(t=>new Date(t)),this.range&&this.selected.length===2){const t=as({start:new Date(this.selected[0]),end:new Date(this.selected[1])});if(this.inRange={},Array.isArray(t)&&t.length){const n={};for(let r=0;r<t.length;r++)n[this.formatISODate(t[r])]=this.isInRange(t[r]);this.inRange=n}}this.setCurrentMonth()}setCurrentMonth(){if(this.currentmonth===null&&!this.currentmonthtouched){this.currentmonthtouched=!0;return}this.selected.length&&this.selected[0]!==""?this.currentmonth=new Date(this.selected[this.selected.length-1]):this.currentmonth===null&&(this.currentmonth=new Date),this.year=this.currentmonth.getFullYear(),this.month=this.currentmonth.getMonth()}handleKeydown(t){switch(t.key){case"ArrowLeft":this.handleArrowKey(t,-1);break;case"ArrowRight":this.handleArrowKey(t,1);break;case"ArrowUp":this.handleArrowKey(t,-7);break;case"ArrowDown":this.handleArrowKey(t,7);break}}handleArrowKey(t,n){t.preventDefault(),this.focusedDate||this.focusOnCurrentDate();const r=this.focusedDate?new Date(this.focusedDate):new Date(this.year,this.month,1);let i=new Date(r.setDate(r.getDate()+n));if(i){let o=this.querySelector(`div[data-date="${this.formatISODate(i)}"]`);if(o instanceof HTMLDivElement){if(o.dataset.disabled){let u=new Date(r.setDate(r.getDate()+n)),c=this.querySelector(`div[data-date="${this.formatISODate(u)}"]`);for(;c&&c instanceof HTMLDivElement&&c.dataset.disabled;)u=new Date(u.setDate(u.getDate()+n)),c=this.querySelector(`div[data-date="${this.formatISODate(u)}"]`);o=c}o instanceof HTMLDivElement&&!o.dataset.disabled&&(this.focusedDate=this.formatISODate(i),o.focus())}}}render(){return K`
+    `}};pn([O({type:Boolean,reflect:!1})],It.prototype,"compact",2),pn([O({type:String,reflect:!0})],It.prototype,"title",2),pn([O({type:String,reflect:!0})],It.prototype,"skin",2),pn([O({type:String,reflect:!0})],It.prototype,"ariaLive",2),pn([O({type:Boolean,reflect:!0})],It.prototype,"closeAlert",2),pn([O({type:String,reflect:!0})],It.prototype,"date",2),pn([Yt()],It.prototype,"_isClosed",2),It=pn([Ot("pkt-alert")],It);const Ll=e=>{if(Array.isArray(e))return e;if(typeof e=="string")return e.split(",")},Xh=e=>e?new Date(e):null,Qh=e=>{if(typeof e=="string")return e.split(",").map(t=>new Date(t));if(Array.isArray(e))return e.map(t=>new Date(t))},rr={csvToArray:Ll,stringToDate:Xh,stringsToDate:Qh};function ot(e){const t=Object.prototype.toString.call(e);return e instanceof Date||typeof e=="object"&&t==="[object Date]"?new e.constructor(+e):typeof e=="number"||t==="[object Number]"||typeof e=="string"||t==="[object String]"?new Date(e):new Date(NaN)}function jn(e,t){return e instanceof Date?new e.constructor(t):new Date(t)}const Ol=6048e5,Zh=864e5;let ef={};function qa(){return ef}function Ur(e,t){var n,r,i,o;const u=qa(),c=(t==null?void 0:t.weekStartsOn)??((r=(n=t==null?void 0:t.locale)==null?void 0:n.options)==null?void 0:r.weekStartsOn)??u.weekStartsOn??((o=(i=u.locale)==null?void 0:i.options)==null?void 0:o.weekStartsOn)??0,d=ot(e),h=d.getDay(),m=(h<c?7:0)+h-c;return d.setDate(d.getDate()-m),d.setHours(0,0,0,0),d}function as(e,t){const n=ot(e.start),r=ot(e.end);let i=+n>+r;const o=i?+n:+r,u=i?r:n;u.setHours(0,0,0,0);let c=1;const d=[];for(;+u<=o;)d.push(ot(u)),u.setDate(u.getDate()+c),u.setHours(0,0,0,0);return i?d.reverse():d}function Il(e,t){var n,r,i,o;const u=ot(e),c=u.getFullYear(),d=qa(),h=(t==null?void 0:t.firstWeekContainsDate)??((r=(n=t==null?void 0:t.locale)==null?void 0:n.options)==null?void 0:r.firstWeekContainsDate)??d.firstWeekContainsDate??((o=(i=d.locale)==null?void 0:i.options)==null?void 0:o.firstWeekContainsDate)??1,m=jn(e,0);m.setFullYear(c+1,0,h),m.setHours(0,0,0,0);const v=Ur(m,t),y=jn(e,0);y.setFullYear(c,0,h),y.setHours(0,0,0,0);const b=Ur(y,t);return u.getTime()>=v.getTime()?c+1:u.getTime()>=b.getTime()?c:c-1}function tf(e,t){var n,r,i,o;const u=qa(),c=(t==null?void 0:t.firstWeekContainsDate)??((r=(n=t==null?void 0:t.locale)==null?void 0:n.options)==null?void 0:r.firstWeekContainsDate)??u.firstWeekContainsDate??((o=(i=u.locale)==null?void 0:i.options)==null?void 0:o.firstWeekContainsDate)??1,d=Il(e,t),h=jn(e,0);return h.setFullYear(d,0,c),h.setHours(0,0,0,0),Ur(h,t)}function Ml(e,t){const n=ot(e),r=+Ur(n,t)-+tf(n,t);return Math.round(r/Ol)+1}function nf(e){let t=ot(e).getDay();return t===0&&(t=7),t}const rf="pkt-calendar",af={id:{type:"string",name:"ID",description:"Unique identifier for the calendar"},currentmonth:{type:"date",converter:"stringToDate",description:"The current month to display"},selected:{type:"array",converter:"csvToArray",reflect:!0,items:{type:"date"},description:"Array of selected dates"},excludeweekdays:{type:"array",converter:"csvToArray",items:{type:"string"},description:"Array of weekdays (1-7) to exclude"},excludedates:{type:"array",converter:"stringsToDate",items:{type:"date"},description:"Array of specific dates to exclude"},earliest:{type:"date",converter:"stringToDate",default:null,description:"Earliest selectable date"},latest:{type:"date",converter:"stringToDate",default:null,description:"Latest selectable date"},weeknumbers:{type:"boolean",reflect:!0,default:!1,description:"Show week numbers in calendar"},withcontrols:{type:"boolean",reflect:!0,default:!1,description:"Show month and year navigation controls"},multiple:{type:"boolean",reflect:!0,default:!1,description:"Allow multiple date selection"},maxMultiple:{type:"number",default:4,description:"Maximum number of dates that can be selected"},range:{type:"boolean",reflect:!0,default:!1,description:"Allow date range selection"}},sf={"date-selected":{description:"Returns ISO formatted date string"}},Pn={name:rf,"css-class":"pkt-calendar",props:af,events:sf};var of=Object.defineProperty,lf=Object.getOwnPropertyDescriptor,Se=(e,t,n,r)=>{for(var i=r>1?void 0:r?lf(t,n):t,o=e.length-1,u;o>=0;o--)(u=e[o])&&(i=(r?u(t,n,i):u(i))||i);return r&&i&&of(t,n,i),i};let xe=class extends Bt{constructor(){super(...arguments),this.multiple=Pn.props.multiple.default,this.maxMultiple=Pn.props.maxMultiple.default,this.range=Pn.props.range.default,this.weeknumbers=Pn.props.weeknumbers.default,this.withcontrols=Pn.props.withcontrols.default,this.selected=[],this.earliest=Pn.props.earliest.default,this.latest=Pn.props.latest.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.dayStrings=this.strings.dates.daysShort,this.monthStrings=this.strings.dates.months,this.weekString=this.strings.dates.week,this.prevMonthString=this.strings.dates.prevMonth,this.nextMonthString=this.strings.dates.nextMonth,this._selected=[],this.year=0,this.month=0,this.week=0,this.rangeHovered=null,this.inRange={},this.focusedDate=null,this.selectableDates=[],this.currentmonthtouched=!1,this.tabIndexSet=0}connectedCallback(){super.connectedCallback()}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}attributeChangedCallback(t,n,r){t==="selected"&&r&&this.convertSelected(),super.attributeChangedCallback(t,n,r)}updated(t){t.has("selected")&&this.convertSelected(),super.updated(t)}firstUpdated(t){this.addEventListener("keydown",this.handleKeydown)}convertSelected(){if(typeof this.selected=="string"&&(this.selected=this.selected.split(",")),this.selected.length===1&&this.selected[0]===""&&(this.selected=[]),this._selected=this.selected.map(t=>new Date(t)),this.range&&this.selected.length===2){const t=as({start:new Date(this.selected[0]),end:new Date(this.selected[1])});if(this.inRange={},Array.isArray(t)&&t.length){const n={};for(let r=0;r<t.length;r++)n[this.formatISODate(t[r])]=this.isInRange(t[r]);this.inRange=n}}this.setCurrentMonth()}setCurrentMonth(){if(this.currentmonth===null&&!this.currentmonthtouched){this.currentmonthtouched=!0;return}this.selected.length&&this.selected[0]!==""?this.currentmonth=new Date(this.selected[this.selected.length-1]):this.currentmonth===null&&(this.currentmonth=new Date),this.year=this.currentmonth.getFullYear(),this.month=this.currentmonth.getMonth()}handleKeydown(t){switch(t.key){case"ArrowLeft":this.handleArrowKey(t,-1);break;case"ArrowRight":this.handleArrowKey(t,1);break;case"ArrowUp":this.handleArrowKey(t,-7);break;case"ArrowDown":this.handleArrowKey(t,7);break}}handleArrowKey(t,n){var r,i,o;if(((r=t.target)==null?void 0:r.nodeName)==="INPUT"||((i=t.target)==null?void 0:i.nodeName)==="SELECT"||((o=t.target)==null?void 0:o.nodeName)==="BUTTON")return;t.preventDefault(),this.focusedDate||this.focusOnCurrentDate();const u=this.focusedDate?new Date(this.focusedDate):new Date(this.year,this.month,1);let c=new Date(u.setDate(u.getDate()+n));if(c){let d=this.querySelector(`div[data-date="${this.formatISODate(c)}"]`);if(d instanceof HTMLDivElement){if(d.dataset.disabled){let h=new Date(u.setDate(u.getDate()+n)),m=this.querySelector(`div[data-date="${this.formatISODate(h)}"]`);for(;m&&m instanceof HTMLDivElement&&m.dataset.disabled;)h=new Date(h.setDate(h.getDate()+n)),m=this.querySelector(`div[data-date="${this.formatISODate(h)}"]`);d=m}d instanceof HTMLDivElement&&!d.dataset.disabled&&(this.focusedDate=this.formatISODate(c),d.focus())}}}render(){return K`
       <div
         class="pkt-calendar ${this.weeknumbers?"pkt-cal-weeknumbers":ne}"
         @focusout=${this.closeEvent}
@@ -158,7 +158,8 @@ React keys must be passed directly to JSX without using spread:
       >
         <nav class="pkt-cal-month-nav">
           <div>
-            <div
+            <button
+              type="button"
               @click=${this.isPrevMonthAllowed()&&this.prevMonth}
               @keydown=${t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.isNextMonthAllowed()&&this.prevMonth())}}
               class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only ${this.isPrevMonthAllowed()?"":"pkt-hide"}"
@@ -168,11 +169,12 @@ React keys must be passed directly to JSX without using spread:
             >
               <pkt-icon class="pkt-btn__icon" name="chevron-thin-left"></pkt-icon>
               <span class="pkt-btn__text">${this.prevMonthString}</span>
-            </div>
+            </button>
           </div>
           ${this.renderMonthNav()}
           <div>
-            <div
+            <button
+              type="button"
               @click=${this.isNextMonthAllowed()&&this.nextMonth}
               @keydown=${t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.isNextMonthAllowed()&&this.nextMonth())}}
               class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only ${this.isNextMonthAllowed()?"":"pkt-hide"}"
@@ -182,7 +184,7 @@ React keys must be passed directly to JSX without using spread:
             >
               <pkt-icon class="pkt-btn__icon" name="chevron-thin-right"></pkt-icon>
               <span class="pkt-btn__text">${this.nextMonthString}</span>
-            </div>
+            </button>
           </div>
         </nav>
         <table
@@ -196,14 +198,18 @@ React keys must be passed directly to JSX without using spread:
     `}renderDayNames(){const t=[];this.weeknumbers&&t.push(K`<td><div>${this.weekString}<div></td>`);for(let n=0;n<this.dayStrings.length;n++)t.push(K`<td><div>${this.dayStrings[n]}</div></td>`);return K`<tr class="pkt-cal-week-row" role="presentation">
       ${t}
     </tr>`}renderMonthNav(){let t=[];return this.withcontrols?t.push(K`<div class="pkt-cal-month-picker">
+          <label for="${this.id}-monthnav" class="pkt-hide">${this.strings.dates.month}</label>
           <select
             class="pkt-input pkt-input-compact"
+            id="${this.id}-monthnav"
             @change=${n=>{this.changeMonth(this.year,n.target.value)}}
           >
             ${this.monthStrings.map((n,r)=>K`<option value=${r} ?selected=${this.month===r}>${n}</option>`)}
           </select>
+          <label for="${this.id}-yearnav" class="pkt-hide">${this.strings.dates.year}</label>
           <input
             class="pkt-input pkt-cal-input-year pkt-input-compact"
+            id="${this.id}-yearnav"
             type="number"
             size="4"
             placeholder="0000"
@@ -406,11 +412,12 @@ React keys must be passed directly to JSX without using spread:
         @change=${e=>{e.stopImmediatePropagation()}}
         ${rt(this.inputRef)}
       />
-      <div class="pkt-input-prefix">Til</div>
+      <div class="pkt-input-prefix" id="${this.id}-to-label">Til</div>
       <input
         class=${He(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-to"
+        aria-labelledby="${this.id}-to-label"
         .value=${this._value[1]??""}
         min=${this.min}
         max=${this.max}
@@ -457,6 +464,7 @@ React keys must be passed directly to JSX without using spread:
       ${rt(this.popupRef)}
     >
       <pkt-calendar
+        id="${this.id}-calendar"
         ?multiple=${this.multiple}
         ?range=${this.range}
         ?weeknumbers=${this.weeknumbers}
@@ -499,6 +507,7 @@ React keys must be passed directly to JSX without using spread:
             ${this.range?this.renderRangeInput():this.multiple?this.renderMultipleInput():this.renderInput()}
             <button
               class="${He(this.buttonClasses)}"
+              type="button"
               @click=${this.toggleCalendar}
               ?disabled=${this.disabled}
               ${rt(this.btnRef)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.6.2",
+  "version": "12.6.4",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -47,8 +47,8 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.4.0",
-    "@oslokommune/punkt-css": "^12.5.2",
-    "@oslokommune/punkt-elements": "^12.6.1",
+    "@oslokommune/punkt-css": "^12.6.3",
+    "@oslokommune/punkt-elements": "^12.6.4",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -111,5 +111,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "3da397ade0b2e70292f9f120b8b0e5b374d9ddf1"
+  "gitHead": "e365aa2a36162a15aaa55bb5b404132a54b989a2"
 }