@oslokommune/punkt-elements 12.6.3 → 12.6.6

package/dist/pkt-datepicker.js

@@ -1,11 +1,11 @@
-import { T as K, a as z, x as M, E as B, n as y } from "./index-CsTujnXs.js";
+import { T as K, a as z, x as M, E as N, n as y } from "./index-CF6_-ZoF.js";
 import { e as Z, i as tt, a as et, t as nt } from "./directive-Cxhakbpr.js";
-import { p as at, v as O, r as S, M as Y, m as rt, e as C, n as P } from "./ref-By_W8A-f.js";
-import { e as R } from "./class-map-DunDFQn7.js";
+import { p as at, v as O, r as S, M as Y, m as rt, e as C, n as P } from "./ref-rfvuMlT1.js";
+import { e as R } from "./class-map-luGhSuLj.js";
 import { a as G } from "./converters-DNCwIFwr.js";
-import { s as it, t as k, c as _, m as st, a as ot, g as ut, b as lt, d as dt } from "./index-BI6-RUqp.js";
+import { s as it, t as k, c as _, m as st, a as ot, g as ut, b as lt, d as dt } from "./index-BkXggpNp.js";
 import "./pkt-input-wrapper.js";
-import "./index-CyqOyy_9.js";
+import "./index-B-KXmo65.js";
 import "./pkt-tag.js";
 function I(t) {
   return it(t, { weekStartsOn: 1 });
@@ -18,11 +18,11 @@ function U(t) {
   const s = I(i);
   return e.getTime() >= r.getTime() ? n + 1 : e.getTime() >= s.getTime() ? n : n - 1;
 }
-function V(t) {
+function B(t) {
   const e = k(t);
   return e.setHours(0, 0, 0, 0), e;
 }
-function j(t) {
+function V(t) {
   const e = k(t), n = new Date(
     Date.UTC(
       e.getFullYear(),
@@ -37,7 +37,7 @@ function j(t) {
   return n.setUTCFullYear(e.getFullYear()), +t - +n;
 }
 function ct(t, e) {
-  const n = V(t), a = V(e), r = +n - j(n), i = +a - j(a);
+  const n = B(t), a = B(e), r = +n - V(n), i = +a - V(a);
   return Math.round((r - i) / st);
 }
 function ht(t) {
@@ -563,7 +563,7 @@ const b = {
   afternoon: "afternoon",
   evening: "evening",
   night: "night"
-}, H = {
+}, j = {
   // Era
   G: function(t, e, n) {
     const a = t.getFullYear() > 0 ? 1 : 0;
@@ -989,7 +989,7 @@ const b = {
       return "Z";
     switch (e) {
       case "X":
-        return L(a);
+        return A(a);
       case "XXXX":
       case "XX":
         return T(a);
@@ -1004,7 +1004,7 @@ const b = {
     const a = t.getTimezoneOffset();
     switch (e) {
       case "x":
-        return L(a);
+        return A(a);
       case "xxxx":
       case "xx":
         return T(a);
@@ -1021,7 +1021,7 @@ const b = {
       case "O":
       case "OO":
       case "OOO":
-        return "GMT" + A(a, ":");
+        return "GMT" + H(a, ":");
       case "OOOO":
       default:
         return "GMT" + T(a, ":");
@@ -1034,7 +1034,7 @@ const b = {
       case "z":
       case "zz":
       case "zzz":
-        return "GMT" + A(a, ":");
+        return "GMT" + H(a, ":");
       case "zzzz":
       default:
         return "GMT" + T(a, ":");
@@ -1051,18 +1051,18 @@ const b = {
     return o(a, e.length);
   }
 };
-function A(t, e = "") {
+function H(t, e = "") {
   const n = t > 0 ? "-" : "+", a = Math.abs(t), r = Math.trunc(a / 60), i = a % 60;
   return i === 0 ? n + String(r) : n + String(r) + e + o(i, 2);
 }
-function L(t, e) {
+function A(t, e) {
   return t % 60 === 0 ? (t > 0 ? "-" : "+") + o(Math.abs(t) / 60, 2) : T(t, e);
 }
 function T(t, e = "") {
   const n = t > 0 ? "-" : "+", a = Math.abs(t), r = o(Math.trunc(a / 60), 2), i = o(a % 60, 2);
   return n + r + e + i;
 }
-const Q = (t, e) => {
+const L = (t, e) => {
   switch (t) {
     case "P":
       return e.date({ width: "short" });
@@ -1089,7 +1089,7 @@ const Q = (t, e) => {
 }, Kt = (t, e) => {
   const n = t.match(/(P+)(p+)?/) || [], a = n[1], r = n[2];
   if (!r)
-    return Q(t, e);
+    return L(t, e);
   let i;
   switch (a) {
     case "P":
@@ -1106,7 +1106,7 @@ const Q = (t, e) => {
       i = e.dateTime({ width: "full" });
       break;
   }
-  return i.replace("{{date}}", Q(a, e)).replace("{{time}}", J(r, e));
+  return i.replace("{{date}}", L(a, e)).replace("{{time}}", J(r, e));
 }, zt = {
   p: J,
   P: Kt
@@ -1144,7 +1144,7 @@ function ce(t, e, n) {
     const c = u[0];
     if (c === "'")
       return { isToken: !1, value: he(u) };
-    if (H[c])
+    if (j[c])
       return { isToken: !0, value: u };
     if (c.match(de))
       throw new RangeError(
@@ -1162,7 +1162,7 @@ function ce(t, e, n) {
     if (!u.isToken) return u.value;
     const c = u.value;
     (ae(c) || ne(c)) && re(c, e, String(t));
-    const $ = H[c[0]];
+    const $ = j[c[0]];
     return $(d, c, r.localize, v);
   }).join("");
 }
@@ -1175,7 +1175,7 @@ function he(t) {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const X = (t, e, n) => {
+const Q = (t, e, n) => {
   const a = /* @__PURE__ */ new Map();
   for (let r = e; r <= n; r++) a.set(t[r], r);
   return a;
@@ -1205,11 +1205,11 @@ const X = (t, e, n) => {
     else if (d[m] === s[u]) g[u] = O(r[m], i[u]), m--, u--;
     else if (d[l] === s[u]) g[u] = O(r[l], i[u]), S(t, g[u + 1], r[l]), l++, u--;
     else if (d[m] === s[h]) g[h] = O(r[m], i[h]), S(t, r[l], r[m]), m--, h++;
-    else if (v === void 0 && (v = X(s, h, u), x = X(d, l, m)), v.has(d[l])) if (v.has(d[m])) {
+    else if (v === void 0 && (v = Q(s, h, u), x = Q(d, l, m)), v.has(d[l])) if (v.has(d[m])) {
       const c = x.get(s[h]), $ = c !== void 0 ? r[c] : null;
       if ($ === null) {
-        const N = S(t, r[l]);
-        O(N, i[h]), g[h] = N;
+        const q = S(t, r[l]);
+        O(q, i[h]), g[h] = q;
       } else g[h] = O($, i[h]), S(t, r[l], $), r[c] = null;
       h++;
     } else Y(r[m]), m--;
@@ -1411,7 +1411,7 @@ var ve = Object.defineProperty, we = Object.getOwnPropertyDescriptor, p = (t, e,
     (s = t[i]) && (r = (a ? s(e, n, r) : s(r)) || r);
   return a && r && ve(e, n, r), r;
 };
-const q = (t) => new Promise((e) => setTimeout(e, t));
+const X = (t) => new Promise((e) => setTimeout(e, t));
 let f = class extends z {
   constructor() {
     super(...arguments), this.value = "", this._value = this.value ? Array.isArray(this.value) ? this.value : this.value.split(",") : [], this.label = "Datovelger", this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = w.props.helptextDropdownButton.default, this.dateformat = w.props.dateformat.default, this.multiple = w.props.multiple.default, this.maxlength = w.props.maxlength.default, this.range = w.props.range.default, this.weeknumbers = w.props.weeknumbers.default, this.withcontrols = w.props.withcontrols.default, this.fullwidth = !1, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.calendarOpen = !1, this.inputRef = C(), this.inputRefTo = C(), this.btnRef = C(), this.calRef = C(), this.popupRef = C(), this.inputClasses = {
@@ -1446,7 +1446,7 @@ let f = class extends z {
     super.connectedCallback(), this.isMobileSafari = /iP(ad|od|hone)/i.test(window.navigator.userAgent) && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/), this.inputType = this.isMobileSafari ? "text" : "date", document && document.body.addEventListener("click", (t) => {
       var e, n;
       (e = this.inputRef) != null && e.value && ((n = this.btnRef) != null && n.value) && !this.inputRef.value.contains(t.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(t.target)) && !this.btnRef.value.contains(t.target) && !t.target.closest(".pkt-calendar-popup") && this.calendarOpen && (this.onBlur(), this.hideCalendar());
-    }), this.value.length && this._value.length === 0 && (this._value = Array.isArray(this.value) ? this.value : this.value.split(",")), this.min = this.min || w.props.min.default, this.max = this.max || w.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 q(20), this.handleCalendarPosition());
+    }), this.value.length && this._value.length === 0 && (this._value = Array.isArray(this.value) ? this.value : this.value.split(",")), this.min = this.min || w.props.min.default, this.max = this.max || w.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 X(20), this.handleCalendarPosition());
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document && document.body.removeEventListener("click", (t) => {
@@ -1487,7 +1487,7 @@ let f = class extends z {
         ?disabled=${this.disabled}
         @keydown=${(t) => {
       var e;
-      (t.key === "," || t.key === "Enter") && ((e = this.inputRef.value) == null || e.blur());
+      (t.key === "," || t.key === "Enter") && ((e = this.inputRef.value) == null || e.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t));
     }}
         @input=${(t) => {
       this.onInput(), t.stopImmediatePropagation();
@@ -1522,7 +1522,7 @@ let f = class extends z {
         ?disabled=${this.disabled}
         @keydown=${(t) => {
       var e;
-      (t.key === "," || t.key === "Enter") && ((e = this.inputRef.value) == null || e.blur());
+      (t.key === "," || t.key === "Enter") && ((e = this.inputRef.value) == null || e.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t));
     }}
         @input=${(t) => {
       this.onInput(), t.stopImmediatePropagation();
@@ -1543,11 +1543,12 @@ let f = class extends z {
     }}
         ${P(this.inputRef)}
       />
-      <div class="pkt-input-prefix">Til</div>
+      <div class="pkt-input-prefix" id="${this.id}-to-label">Til</div>
       <input
         class=${R(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}
@@ -1557,7 +1558,7 @@ let f = class extends z {
         ?disabled=${this.disabled}
         @keydown=${(t) => {
       var e;
-      (t.key === "," || t.key === "Enter") && ((e = this.inputRefTo.value) == null || e.blur());
+      (t.key === "," || t.key === "Enter") && ((e = this.inputRefTo.value) == null || e.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t));
     }}
         @input=${(t) => {
       this.onInput(), t.stopImmediatePropagation();
@@ -1612,7 +1613,7 @@ let f = class extends z {
       this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
         @keydown=${(t) => {
-      (t.key === "," || t.key === "Enter") && (t.preventDefault(), this.addToSelected(t));
+      (t.key === "," || t.key === "Enter") && (t.preventDefault(), this.addToSelected(t)), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t));
     }}
         ?disabled=${this.disabled || this.maxlength && this._value.length >= this.maxlength}
         @change=${(t) => {
@@ -1632,14 +1633,15 @@ let f = class extends z {
                 <pkt-tag
                   .id="${this.id + t + "-tag"}"
                   closeTag
-                  @onClose=${() => {
+                  ariaLabel="${this.strings.calendar.deleteDate} ${this.fromISOtoLocal(t)}"
+                  @close=${() => {
         var e;
         return (e = this.calRef.value) == null ? void 0 : e.handleDateSelect(this.fromISOToDate(t));
       }}
                   >${this.fromISOtoLocal(t)}</pkt-tag
                 >
               `
-    ) : B}
+    ) : N}
       </div>
     `;
   }
@@ -1653,6 +1655,7 @@ let f = class extends z {
       ${P(this.popupRef)}
     >
       <pkt-calendar
+        id="${this.id}-calendar"
         ?multiple=${this.multiple}
         ?range=${this.range}
         ?weeknumbers=${this.weeknumbers}
@@ -1696,12 +1699,13 @@ let f = class extends z {
         .helptextDropdownButton=${this.helptextDropdownButton}
         class="pkt-datepicker"
       >
-        ${this.multiple ? this.renderTags() : B}
+        ${this.multiple ? this.renderTags() : N}
         <div class="pkt-datepicker__inputs ${this.range ? "pkt-input__range-inputs" : ""}">
           <div class="pkt-input__container">
             ${this.range ? this.renderRangeInput() : this.multiple ? this.renderMultipleInput() : this.renderInput()}
             <button
               class="${R(this.buttonClasses)}"
+              type="button"
               @click=${this.toggleCalendar}
               ?disabled=${this.disabled}
               ${P(this.btnRef)}
@@ -1731,14 +1735,13 @@ let f = class extends z {
   }
   async showCalendar() {
     var t;
-    this.calendarOpen = !0, await q(20), this.handleCalendarPosition(), this.isMobileSafari && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
+    this.calendarOpen = !0, await X(20), this.handleCalendarPosition(), this.isMobileSafari && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
   }
   hideCalendar() {
     this.calendarOpen = !1;
   }
   async toggleCalendar(t) {
-    var e;
-    t.preventDefault(), this.calendarOpen ? this.hideCalendar() : this.showCalendar(), await q(20), this.isMobileSafari && ((e = this.calRef.value) == null || e.focusOnCurrentDate());
+    t.preventDefault(), this.calendarOpen ? this.hideCalendar() : this.showCalendar();
   }
 };
 p([

package/dist/pkt-element.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DSyh6tUw.cjs");exports.PktElement=e.PktElement;exports.PktInputElement=e.PktInputElement;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BYZhBzXZ.cjs");exports.PktElement=e.PktElement;exports.PktInputElement=e.PktInputElement;

package/dist/pkt-element.js

@@ -1,4 +1,4 @@
-import { P as a, a as m } from "./index-CsTujnXs.js";
+import { P as a, a as m } from "./index-CF6_-ZoF.js";
 export {
   a as PktElement,
   m as PktInputElement

package/dist/pkt-icon.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-DSyh6tUw.cjs");require("./directive-DtixNHDT.cjs");const e=require("./index-Bpc07w_P.cjs");Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>e.PktIcon});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-BYZhBzXZ.cjs");require("./directive-DtixNHDT.cjs");const e=require("./index-DAWAnAW_.cjs");Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>e.PktIcon});

package/dist/pkt-icon.js

@@ -1,6 +1,6 @@
-import "./index-CsTujnXs.js";
+import "./index-CF6_-ZoF.js";
 import "./directive-Cxhakbpr.js";
-import { P as p } from "./index-CyqOyy_9.js";
+import { P as p } from "./index-B-KXmo65.js";
 export {
   p as PktIcon
 };

package/dist/pkt-index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./pkt-alert.cjs"),t=require("./index-BNOnscrA.cjs"),r=require("./pkt-card.cjs"),n=require("./pkt-component-template.cjs"),o=require("./pkt-datepicker.cjs"),u=require("./index-Bpc07w_P.cjs"),a=require("./pkt-input-wrapper.cjs"),c=require("./pkt-link.cjs"),i=require("./pkt-messagebox.cjs"),P=require("./pkt-tag.cjs");Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>t.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>r.PktCard});Object.defineProperty(exports,"PktComponent",{enumerable:!0,get:()=>n.PktComponent});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>o.PktDatepicker});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>u.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>a.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>c.PktLink});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>i.PktMessagebox});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>P.PktTag});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./pkt-alert.cjs"),t=require("./index-CzPkBTm-.cjs"),r=require("./pkt-card.cjs"),n=require("./pkt-component-template.cjs"),o=require("./pkt-datepicker.cjs"),u=require("./index-DAWAnAW_.cjs"),a=require("./pkt-input-wrapper.cjs"),c=require("./pkt-link.cjs"),i=require("./pkt-messagebox.cjs"),P=require("./pkt-tag.cjs");Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>t.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>r.PktCard});Object.defineProperty(exports,"PktComponent",{enumerable:!0,get:()=>n.PktComponent});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>o.PktDatepicker});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>u.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>a.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>c.PktLink});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>i.PktMessagebox});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>P.PktTag});

package/dist/pkt-index.js

@@ -1,9 +1,9 @@
 import { PktAlert as t } from "./pkt-alert.js";
-import { P as p } from "./index-BI6-RUqp.js";
+import { P as p } from "./index-BkXggpNp.js";
 import { PktCard as P } from "./pkt-card.js";
 import { PktComponent as x } from "./pkt-component-template.js";
 import { PktDatepicker as a } from "./pkt-datepicker.js";
-import { P as s } from "./index-CyqOyy_9.js";
+import { P as s } from "./index-B-KXmo65.js";
 import { PktInputWrapper as c } from "./pkt-input-wrapper.js";
 import { PktLink as g } from "./pkt-link.js";
 import { PktMessagebox as l } from "./pkt-messagebox.js";

package/dist/pkt-input-wrapper.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DSyh6tUw.cjs"),k=require("./ref-C3InMDfU.cjs"),c=require("./index-Bpc07w_P.cjs"),u=require("./class-map-Ch54kkX5.cjs"),$=require("./directive-DtixNHDT.cjs");/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BYZhBzXZ.cjs"),k=require("./ref-BuQtfKiL.cjs"),c=require("./index-DAWAnAW_.cjs"),u=require("./class-map-DjxCaVFk.cjs"),$=require("./directive-DtixNHDT.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/pkt-input-wrapper.js

@@ -1,7 +1,7 @@
-import { P as w, v as T, E as o, x as i, n as r } from "./index-CsTujnXs.js";
-import { e as _, P as D, n as I } from "./ref-By_W8A-f.js";
-import { o as f } from "./index-CyqOyy_9.js";
-import { e as c } from "./class-map-DunDFQn7.js";
+import { P as w, v as T, E as o, x as i, n as r } from "./index-CF6_-ZoF.js";
+import { e as _, P as D, n as I } from "./ref-rfvuMlT1.js";
+import { o as f } from "./index-B-KXmo65.js";
+import { e as c } from "./class-map-luGhSuLj.js";
 import { t as E } from "./directive-Cxhakbpr.js";
 /**
  * @license

package/dist/pkt-link.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DSyh6tUw.cjs"),c=require("./ref-C3InMDfU.cjs"),k=require("./class-map-Ch54kkX5.cjs"),h=require("./directive-DtixNHDT.cjs");require("./index-Bpc07w_P.cjs");const f="pkt-link",u=!0,d={href:{name:"URL",description:"URL til lenken",type:"string",default:"#"},target:{name:"Mål",description:"Mål for lenken",type:["_blank","_self","_parent","_top"],default:"_self"},iconName:{name:"Ikon",description:"Ikon som skal vises ved siden av lenketeksten",type:"icon"},iconPosition:{name:"Ikonposisjon",description:"Posisjonen til ikonet i forhold til lenketeksten",type:["left","right"]},external:{name:"Ekstern lenke",description:"Vis ikon for ekstern lenke",type:"boolean",default:!1}},m={default:{description:"Innholdet i lenken"}},p={name:f,"css-class":"pkt-link","dark-mode":!0,isElement:u,props:d,slots:m};var P=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(s,n,r,o)=>{for(var t=o>1?void 0:o?y(n,r):n,l=s.length-1,a;l>=0;l--)(a=s[l])&&(t=(o?a(n,r,t):a(t))||t);return o&&t&&P(n,r,t),t};exports.PktLink=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.href=p.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=p.props.external.default,this.target=p.props.target.default,this.slotController=new c.PktSlotController(this,this.defaultSlot)}render(){const n={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition==="left"||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition==="right","pkt-link--external":this.external};return e.x`<a
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BYZhBzXZ.cjs"),c=require("./ref-BuQtfKiL.cjs"),k=require("./class-map-DjxCaVFk.cjs"),h=require("./directive-DtixNHDT.cjs");require("./index-DAWAnAW_.cjs");const f="pkt-link",u=!0,d={href:{name:"URL",description:"URL til lenken",type:"string",default:"#"},target:{name:"Mål",description:"Mål for lenken",type:["_blank","_self","_parent","_top"],default:"_self"},iconName:{name:"Ikon",description:"Ikon som skal vises ved siden av lenketeksten",type:"icon"},iconPosition:{name:"Ikonposisjon",description:"Posisjonen til ikonet i forhold til lenketeksten",type:["left","right"]},external:{name:"Ekstern lenke",description:"Vis ikon for ekstern lenke",type:"boolean",default:!1}},m={default:{description:"Innholdet i lenken"}},p={name:f,"css-class":"pkt-link","dark-mode":!0,isElement:u,props:d,slots:m};var P=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(s,n,r,o)=>{for(var t=o>1?void 0:o?y(n,r):n,l=s.length-1,a;l>=0;l--)(a=s[l])&&(t=(o?a(n,r,t):a(t))||t);return o&&t&&P(n,r,t),t};exports.PktLink=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.href=p.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=p.props.external.default,this.target=p.props.target.default,this.slotController=new c.PktSlotController(this,this.defaultSlot)}render(){const n={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition==="left"||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition==="right","pkt-link--external":this.external};return e.x`<a
       class=${k.e(n)}
       href=${this.href}
       @click=${this.handleClick}

package/dist/pkt-link.js

@@ -1,8 +1,8 @@
-import { P as f, x as k, E as h, n as i } from "./index-CsTujnXs.js";
-import { e as m, P as d, n as u } from "./ref-By_W8A-f.js";
-import { e as P } from "./class-map-DunDFQn7.js";
+import { P as f, x as k, E as h, n as i } from "./index-CF6_-ZoF.js";
+import { e as m, P as d, n as u } from "./ref-rfvuMlT1.js";
+import { e as P } from "./class-map-luGhSuLj.js";
 import { t as y } from "./directive-Cxhakbpr.js";
-import "./index-CyqOyy_9.js";
+import "./index-B-KXmo65.js";
 const g = "pkt-link", v = !0, _ = {
   href: {
     name: "URL",

package/dist/pkt-messagebox.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DSyh6tUw.cjs"),c=require("./ref-C3InMDfU.cjs"),b=require("./class-map-Ch54kkX5.cjs"),d=require("./directive-DtixNHDT.cjs");require("./index-Bpc07w_P.cjs");const k="pkt-messagebox",u=!0,g={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},m={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},h={default:{description:"Innholdet i meldingsboksen"}},p={name:k,"css-class":"pkt-messagebox",isElement:u,events:g,props:m,slots:h};var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,o=(i,t,n,l)=>{for(var s=l>1?void 0:l?x(t,n):t,r=i.length-1,a;r>=0;r--)(a=i[r])&&(s=(l?a(t,n,s):a(s))||s);return l&&s&&f(t,n,s),s};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closable=p.props.closable.default,this.compact=p.props.compact.default,this.title="",this.skin=p.props.skin.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0}))},this.slotController=new c.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return e.x`<div class=${b.e(t)}>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BYZhBzXZ.cjs"),c=require("./ref-BuQtfKiL.cjs"),b=require("./class-map-DjxCaVFk.cjs"),d=require("./directive-DtixNHDT.cjs");require("./index-DAWAnAW_.cjs");const k="pkt-messagebox",u=!0,g={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},m={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},h={default:{description:"Innholdet i meldingsboksen"}},p={name:k,"css-class":"pkt-messagebox",isElement:u,events:g,props:m,slots:h};var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,o=(i,t,n,l)=>{for(var s=l>1?void 0:l?x(t,n):t,r=i.length-1,a;r>=0;r--)(a=i[r])&&(s=(l?a(t,n,s):a(s))||s);return l&&s&&f(t,n,s),s};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closable=p.props.closable.default,this.compact=p.props.compact.default,this.title="",this.skin=p.props.skin.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0}))},this.slotController=new c.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return e.x`<div class=${b.e(t)}>
       ${this.closable?e.x`<div class="pkt-messagebox__close">
             <button
               @click=${this.close}

package/dist/pkt-messagebox.js

@@ -1,8 +1,8 @@
-import { r as b, P as k, x as c, E as d, n } from "./index-CsTujnXs.js";
-import { e as u, P as g, n as h } from "./ref-By_W8A-f.js";
-import { e as f } from "./class-map-DunDFQn7.js";
+import { r as b, P as k, x as c, E as d, n } from "./index-CF6_-ZoF.js";
+import { e as u, P as g, n as h } from "./ref-rfvuMlT1.js";
+import { e as f } from "./class-map-luGhSuLj.js";
 import { t as v } from "./directive-Cxhakbpr.js";
-import "./index-CyqOyy_9.js";
+import "./index-B-KXmo65.js";
 const _ = "pkt-messagebox", x = !0, y = {
   onClose: {
     description: "React: Event som trigges når meldingsboksen lukkes"

package/dist/pkt-tag.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-Ch54kkX5.cjs"),g=require("./directive-DtixNHDT.cjs"),t=require("./index-DSyh6tUw.cjs"),o=require("./ref-C3InMDfU.cjs");require("./index-Bpc07w_P.cjs");const h="pkt-tag",d=!0,f={closeTag:{type:"boolean",required:!1,default:!1},size:{required:!1,default:"medium",type:["small","medium","large"]},iconName:{type:"string",required:!1},skin:{required:!1,default:"blue",type:["blue","green","red","beige","yellow","gray","blue-light"]},textStyle:{required:!1,default:"normal-text",type:["thin-text","normal-text"]},type:{required:!1,default:"button",type:["button","submit","reset"]},ariaLabel:{type:"string",required:!1,default:"close"}},k={default:{description:"Teksten til tag"}},a={name:h,"css-class":"pkt-tag",isElement:d,props:f,slots:k};var y=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(n,e,l,r)=>{for(var i=r>1?void 0:r?b(e,l):e,p=n.length-1,c;p>=0;p--)(c=n[p])&&(i=(r?c(e,l,i):c(i))||i);return r&&i&&y(e,l,i),i};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=o.e(),this.closeTag=a.props.closeTag.default,this.size=a.props.size.default,this.skin=a.props.skin.default,this.textStyle=a.props.textStyle.default,this.iconName=void 0,this.type=a.props.type.default,this.ariaLabel=a.props.ariaLabel.default,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new o.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},l={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-DjxCaVFk.cjs"),g=require("./directive-DtixNHDT.cjs"),t=require("./index-BYZhBzXZ.cjs"),o=require("./ref-BuQtfKiL.cjs");require("./index-DAWAnAW_.cjs");const h="pkt-tag",d=!0,k={closeTag:{type:"boolean",required:!1,default:!1},size:{required:!1,default:"medium",type:["small","medium","large"]},iconName:{type:"string",required:!1},skin:{required:!1,default:"blue",type:["blue","green","red","beige","yellow","gray","blue-light"]},textStyle:{required:!1,default:"normal-text",type:["thin-text","normal-text"]},type:{required:!1,default:"button",type:["button","submit","reset"]},ariaLabel:{type:"string",required:!1,default:"Lukk"}},f={default:{description:"Teksten til tag"}},a={name:h,"css-class":"pkt-tag",isElement:d,props:k,slots:f};var y=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(n,e,r,l)=>{for(var i=l>1?void 0:l?b(e,r):e,p=n.length-1,c;p>=0;p--)(c=n[p])&&(i=(l?c(e,r,i):c(i))||i);return l&&i&&y(e,r,i),i};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=o.e(),this.closeTag=a.props.closeTag.default,this.size=a.props.size.default,this.skin=a.props.skin.default,this.textStyle=a.props.textStyle.default,this.iconName=void 0,this.type=a.props.type.default,this.ariaLabel=a.props.ariaLabel.default,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new o.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},r={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?t.x`
         <button
-          class=${u.e(l)}
+          class=${u.e(r)}
           type=${this.type}
           aria-label=${this.ariaLabel}
           @click=${this.close}

package/dist/pkt-tag.js

@@ -1,8 +1,8 @@
-import { e as h } from "./class-map-DunDFQn7.js";
+import { e as h } from "./class-map-luGhSuLj.js";
 import { t as d } from "./directive-Cxhakbpr.js";
-import { r as y, P as g, x as p, n as l } from "./index-CsTujnXs.js";
-import { e as m, P as k, n as f } from "./ref-By_W8A-f.js";
-import "./index-CyqOyy_9.js";
+import { r as y, P as g, x as p, n as l } from "./index-CF6_-ZoF.js";
+import { e as m, P as k, n as f } from "./ref-rfvuMlT1.js";
+import "./index-B-KXmo65.js";
 const b = "pkt-tag", S = !0, $ = {
   closeTag: {
     type: "boolean",
@@ -55,27 +55,27 @@ const b = "pkt-tag", S = !0, $ = {
   ariaLabel: {
     type: "string",
     required: !1,
-    default: "close"
+    default: "Lukk"
   }
 }, _ = {
   default: {
     description: "Teksten til tag"
   }
-}, r = {
+}, a = {
   name: b,
   "css-class": "pkt-tag",
   isElement: S,
   props: $,
   slots: _
 };
-var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (s, o, n, a) => {
-  for (var i = a > 1 ? void 0 : a ? C(o, n) : o, c = s.length - 1, u; c >= 0; c--)
-    (u = s[c]) && (i = (a ? u(o, n, i) : u(i)) || i);
-  return a && i && x(o, n, i), i;
+var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (s, r, n, o) => {
+  for (var i = o > 1 ? void 0 : o ? C(r, n) : r, c = s.length - 1, u; c >= 0; c--)
+    (u = s[c]) && (i = (o ? u(r, n, i) : u(i)) || i);
+  return o && i && x(r, n, i), i;
 };
 let t = class extends g {
   constructor() {
-    super(), this.defaultSlot = m(), this.closeTag = r.props.closeTag.default, this.size = r.props.size.default, this.skin = r.props.skin.default, this.textStyle = r.props.textStyle.default, this.iconName = void 0, this.type = r.props.type.default, this.ariaLabel = r.props.ariaLabel.default, this._isClosed = !1, this.close = (s) => {
+    super(), this.defaultSlot = m(), this.closeTag = a.props.closeTag.default, this.size = a.props.size.default, this.skin = a.props.skin.default, this.textStyle = a.props.textStyle.default, this.iconName = void 0, this.type = a.props.type.default, this.ariaLabel = a.props.ariaLabel.default, this._isClosed = !1, this.close = (s) => {
       this._isClosed = !0, this.dispatchEvent(
         new CustomEvent("close", { detail: { origin: s }, bubbles: !0, composed: !0 })
       ), this.dispatchEvent(
@@ -89,7 +89,7 @@ let t = class extends g {
       [`pkt-tag--${this.size}`]: !!this.size,
       [`pkt-tag--${this.skin}`]: !!this.skin,
       [`pkt-tag--${this.textStyle}`]: !!this.textStyle
-    }, o = {
+    }, r = {
       "pkt-tag": !0,
       "pkt-btn": !0,
       "pkt-btn--tertiary": !0,
@@ -101,7 +101,7 @@ let t = class extends g {
     };
     return this.closeTag ? p`
         <button
-          class=${h(o)}
+          class=${h(r)}
           type=${this.type}
           aria-label=${this.ariaLabel}
           @click=${this.close}

package/dist/{ref-C3InMDfU.cjs → ref-BuQtfKiL.cjs}

@@ -1,4 +1,4 @@
-"use strict";const A=require("./index-DSyh6tUw.cjs"),a=require("./directive-DtixNHDT.cjs");class p{constructor(e,...s){this.nodes=[],this.host=e,this.host.addController(this),this.slots=s,this.nodes=[]}hostConnected(){Array.from(this.host.childNodes).forEach(e=>{var s;if(e.nodeName==="#text"){if((s=e.nodeValue)!=null&&s.trim()){const i=document==null?void 0:document.createElement("template");i.content.appendChild(e),this.nodes.push(i)}}else this.nodes.push(e)})}hostUpdated(){this.slots.forEach(e=>{if(!e.value)return;const s=e.value.getAttribute("name"),i=this.nodes.flatMap(o=>o.getAttribute&&o.getAttribute("slot")==s?this.nodeFromElement(o,e):[]);i.length&&e.value.replaceChildren(...i)})}nodeFromElement(e,s){var i;return e===((i=s.value)==null?void 0:i.parentNode)?[]:e instanceof HTMLTemplateElement?Array.from(e.content.childNodes):e}}/**
+"use strict";const A=require("./index-BYZhBzXZ.cjs"),a=require("./directive-DtixNHDT.cjs");class p{constructor(e,...s){this.nodes=[],this.host=e,this.host.addController(this),this.slots=s,this.nodes=[]}hostConnected(){Array.from(this.host.childNodes).forEach(e=>{var s;if(e.nodeName==="#text"){if((s=e.nodeValue)!=null&&s.trim()){const i=document==null?void 0:document.createElement("template");i.content.appendChild(e),this.nodes.push(i)}}else this.nodes.push(e)})}hostUpdated(){this.slots.forEach(e=>{if(!e.value)return;const s=e.value.getAttribute("name"),i=this.nodes.flatMap(o=>o.getAttribute&&o.getAttribute("slot")==s?this.nodeFromElement(o,e):[]);i.length&&e.value.replaceChildren(...i)})}nodeFromElement(e,s){var i;return e===((i=s.value)==null?void 0:i.parentNode)?[]:e instanceof HTMLTemplateElement?Array.from(e.content.childNodes):e}}/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/{ref-By_W8A-f.js → ref-rfvuMlT1.js}

@@ -1,4 +1,4 @@
-import { Z as v, E as A } from "./index-CsTujnXs.js";
+import { Z as v, E as A } from "./index-CF6_-ZoF.js";
 import { i as p, a as m, e as g } from "./directive-Cxhakbpr.js";
 class H {
   constructor(e, ...s) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.6.3",
+  "version": "12.6.6",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.4.0",
-    "@oslokommune/punkt-css": "^12.6.3",
+    "@oslokommune/punkt-css": "^12.6.6",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.4",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "35d60829b1e58b95a4771db7ec1d93ea00574269"
+  "gitHead": "936cdb5ca60100a3356cfbf03994c85eebba732e"
 }

package/src/components/calendar/index.ts

@@ -167,6 +167,9 @@ export class PktCalendar extends PktElement {
   }
 
   handleArrowKey(e: KeyboardEvent, direction: number) {
+    if ((e.target as HTMLElement)?.nodeName === 'INPUT') return
+    if ((e.target as HTMLElement)?.nodeName === 'SELECT') return
+    if ((e.target as HTMLElement)?.nodeName === 'BUTTON') return
     e.preventDefault()
     if (!this.focusedDate) {
       this.focusOnCurrentDate()
@@ -213,7 +216,8 @@ export class PktCalendar extends PktElement {
       >
         <nav class="pkt-cal-month-nav">
           <div>
-            <div
+            <button
+              type="button"
               @click=${this.isPrevMonthAllowed() && this.prevMonth}
               @keydown=${(e: KeyboardEvent) => {
                 if (e.key === 'Enter' || e.key === ' ') {
@@ -230,11 +234,12 @@ export class PktCalendar extends PktElement {
             >
               <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=${(e: KeyboardEvent) => {
                 if (e.key === 'Enter' || e.key === ' ') {
@@ -251,7 +256,7 @@ export class PktCalendar extends PktElement {
             >
               <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
@@ -259,7 +264,12 @@ export class PktCalendar extends PktElement {
           role="grid"
           ?aria-multiselectable=${this.range || this.multiple}
         >
-          ${this.renderDayNames()} ${this.renderCalendarBody()}
+          <thead>
+            ${this.renderDayNames()}
+          </thead>
+          <tbody>
+            ${this.renderCalendarBody()}
+          </tbody>
         </table>
       </div>
     `
@@ -268,12 +278,12 @@ export class PktCalendar extends PktElement {
   private renderDayNames() {
     const days = []
     if (this.weeknumbers) {
-      days.push(html`<td><div>${this.weekString}<div></td>`)
+      days.push(html`<th><div>${this.weekString}</div></th>`)
     }
     for (let i = 0; i < this.dayStrings.length; i++) {
-      days.push(html`<td><div>${this.dayStrings[i]}</div></td>`)
+      days.push(html`<th><div>${this.dayStrings[i]}</div></th>`)
     }
-    return html`<tr class="pkt-cal-week-row" role="presentation">
+    return html`<tr class="pkt-cal-week-row">
       ${days}
     </tr>`
   }
@@ -283,8 +293,10 @@ export class PktCalendar extends PktElement {
     if (this.withcontrols) {
       monthView.push(
         html`<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=${(e: any) => {
               this.changeMonth(this.year, e.target.value)
             }}
@@ -294,8 +306,10 @@ export class PktCalendar extends PktElement {
                 html`<option value=${index} ?selected=${this.month === index}>${month}</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"