@oslokommune/punkt-elements 13.5.12 → 13.6.0

package/dist/pkt-index.js

@@ -1,39 +1,39 @@
 import { P as A } from "./alert-cUBtwi2k.js";
-import { P as B, a as E } from "./accordionitem-C9T3nlM0.js";
-import { P as O } from "./backlink-C2jbzu0U.js";
-import { P as T } from "./button-DhispFOY.js";
-import { c as f } from "./calendar-CJSxvwAq.js";
-import { P as D } from "./calendar-CJSxvwAq.js";
+import { P as w, a as B } from "./accordionitem-C9T3nlM0.js";
+import { P as E } from "./backlink-C2jbzu0U.js";
+import { P as O } from "./button-DhispFOY.js";
+import { c as d } from "./calendar-DJVaC_zI.js";
+import { P as j } from "./calendar-DJVaC_zI.js";
 import { P as G } from "./card-BDz4RWxK.js";
 import { P as K } from "./combobox-BXP1PL0M.js";
 import { P as U } from "./consent-BpcQFvbi.js";
 import { P as q } from "./checkbox-ym7z6cpt.js";
-import { P as k, t as h, x as P, n, a as c } from "./element-CgEWt74-.js";
+import { P as f, 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 m, n as k } from "./ref-BBYSqgeW.js";
 import { e as u } from "./class-map-BpTj9gtz.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";
-import { P as et } from "./input-wrapper-Dr__Sxql.js";
-import { P as ot } from "./link-AIyVfcyH.js";
-import { P as at } from "./linkcard-9CNlyT0S.js";
-import { P as it } from "./loader-h3d-3D7s.js";
-import { P as lt } from "./messagebox-C8KQgCl_.js";
-import { P as mt } from "./modal-Zj8yRX3K.js";
+import { P as F, a as J } from "./datepicker-X2o0j5kW.js";
+import { P as V } from "./helptext-B7eI0iBQ.js";
+import { P as Y } from "./heading-Bdh9absf.js";
+import { P as tt } from "./icon-CC1js8eR.js";
+import { P as rt } from "./input-wrapper-Dr__Sxql.js";
+import { P as st } from "./link-AIyVfcyH.js";
+import { P as nt } from "./linkcard-9CNlyT0S.js";
+import { P as pt } from "./loader-h3d-3D7s.js";
+import { P as Pt } from "./messagebox-C8KQgCl_.js";
+import { P as kt } from "./modal-Zj8yRX3K.js";
 import { P as ft } from "./progressbar-Dj_mI_A6.js";
-import { P as ht, P as ct } from "./radiobutton-CWxiIVfA.js";
-import { P as ut } from "./tag-DyXzTY68.js";
-import { P as vt } from "./textarea-BZL8Mkm0.js";
-import { P as bt } from "./textinput-DjPhmmkB.js";
-import { P as $t } from "./select-dcaJHvmR.js";
+import { P as ct, P as xt } from "./radiobutton-CWxiIVfA.js";
+import { P as gt } from "./tag-DyXzTY68.js";
+import { P as St } from "./textarea-BZL8Mkm0.js";
+import { P as Ct } from "./textinput-DjPhmmkB.js";
+import { P as yt } from "./select-VpX_cjMM.js";
 var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, e, i, a) => {
   for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);
   return a && r && g(e, i, r), r;
 };
-let o = class extends k {
+let o = class extends f {
   constructor() {
     super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot = m(), this.namedSlot = m(), this.slotController = new x(this, this.defaultSlot, this.namedSlot);
   }
@@ -63,11 +63,11 @@ let o = class extends k {
         <div>${this.renderList(this.doStuff(this._list))}</div>
 
         <h2 class="pkt-txt-22">Slot</h2>
-        <div ${d(this.defaultSlot)}>defaultSlotRef</div>
+        <div ${k(this.defaultSlot)}>defaultSlotRef</div>
         <h2 class="pkt-txt-22">Named slot</h2>
         <select
           name="named-slot"
-          ${d(this.namedSlot)}
+          ${k(this.namedSlot)}
           @change=${(e) => alert(e.target.value)}
         >
           namedSlotRef
@@ -108,7 +108,7 @@ s([
   n({ type: String })
 ], o.prototype, "string", 2);
 s([
-  n({ converter: f })
+  n({ converter: d })
 ], o.prototype, "strings", 2);
 s([
   n({ type: Boolean })
@@ -120,32 +120,33 @@ o = s([
   c("pkt-component")
 ], o);
 export {
-  B as PktAccordion,
-  E as PktAccordionItem,
+  w as PktAccordion,
+  B as PktAccordionItem,
   A as PktAlert,
-  O as PktBackLink,
-  T as PktButton,
-  D as PktCalendar,
+  E as PktBackLink,
+  O as PktButton,
+  j as PktCalendar,
   G as PktCard,
   q as PktCheckbox,
   K as PktCombobox,
   o as PktComponent,
   U as PktConsent,
-  F as PktDatepicker,
-  X as PktHeading,
-  Q as PktHelptext,
-  Z as PktIcon,
-  et as PktInputWrapper,
-  ot as PktLink,
-  at as PktLinkCard,
-  it as PktLoader,
-  lt as PktMessagebox,
-  mt as PktModal,
+  F as PktDateTags,
+  J as PktDatepicker,
+  Y as PktHeading,
+  V as PktHelptext,
+  tt as PktIcon,
+  rt as PktInputWrapper,
+  st as PktLink,
+  nt as PktLinkCard,
+  pt as PktLoader,
+  Pt as PktMessagebox,
+  kt as PktModal,
   ft as PktProgressbar,
-  ht as PktRadioButton,
-  ct as PktRadiobutton,
-  $t as PktSelect,
-  ut as PktTag,
-  vt as PktTextarea,
-  bt as PktTextinput
+  ct as PktRadioButton,
+  xt as PktRadiobutton,
+  yt as PktSelect,
+  gt as PktTag,
+  St as PktTextarea,
+  Ct as PktTextinput
 };

package/dist/pkt-select.cjs

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

package/dist/pkt-select.js

@@ -1,4 +1,4 @@
-import { P as t } from "./select-dcaJHvmR.js";
+import { P as t } from "./select-VpX_cjMM.js";
 const a = t;
 export {
   t as PktSelect,

package/dist/select-Be--DBcR.cjs

@@ -0,0 +1,49 @@
+"use strict";const h=require("./element-6DBpyGQm.cjs"),u=require("./state-DPobt-Yz.cjs"),r=require("./ref-iJtiv3o2.cjs"),o=require("./if-defined-Cni-RHLS.cjs"),d=require("./input-element-C4xJoM-X.cjs"),c=require("./pkt-options-controller-CiuBG6Lt.cjs"),v=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");var f=Object.defineProperty,_=Object.getOwnPropertyDescriptor,a=(p,t,e,s)=>{for(var i=s>1?void 0:s?_(t,e):t,l=p.length-1,n;l>=0;l--)(n=p[l])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&f(t,e,i),i};exports.PktSelect=class extends d.PktInputElement{constructor(){super(),this.inputRef=r.e(),this.helptextSlot=r.e(),this._optionsProp=[],this.value="",this._options=[],this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new c.PktOptionsSlotController(this),this.slotController=new v.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}get options(){return this._options.map(t=>({...t,selected:t.value===this.value}))}set options(t){this._optionsProp=t,this.requestUpdate("_optionsProp",this._options)}connectedCallback(){super.connectedCallback();const t=this._optionsProp.length>0,e=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&e?this.optionsController.nodes.forEach(s=>{const i={value:s.hasAttribute("value")?s.getAttribute("value")??"":s.textContent??"",label:s.textContent||s.getAttribute("value")||"",disabled:s.hasAttribute("disabled"),selected:s.hasAttribute("selected"),hidden:s.hasAttribute("data-hidden")};s.getAttribute("selected")&&!this.value&&(this.value=i.value),this._options.push(i)}):(this._options=this._optionsProp,this._options.forEach(s=>{s.selected&&!this.value&&(this.value=s.value)}))}add(t,e){const s={value:t.value||t.text,label:t.text||t.value,selected:t.selected,disabled:t.disabled};if(e===void 0)this._options.push(s);else if(typeof e=="number")this._options.splice(e,0,s);else{const i=e.value||e.text,l=this._options.findIndex(n=>n.value===i);l>=0?this._options.splice(l,0,s):this._options.push(s)}t.selected&&(this.value=t.value||t.text,this.selectedIndex=this._options.findIndex(i=>i.value===this.value)),this.requestUpdate()}remove(t){var e;typeof t=="number"&&(this.selectedIndex===t&&(this.value=((e=this._options[0])==null?void 0:e.value)||""),this._options.splice(t,1),this.requestUpdate())}item(t){var e;return(e=this.inputRef.value)==null?void 0:e.item(t)}namedItem(t){var e;return(e=this.inputRef.value)==null?void 0:e.namedItem(t)}showPicker(){this.inputRef.value&&"showPicker"in this.inputRef.value&&this.inputRef.value.showPicker()}attributeChangedCallback(t,e,s){var i,l;t==="options"&&(this._options=s?JSON.parse(s):[]),t==="value"&&this.value!==e&&(this.selectedIndex=this.touched?this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex):this._options.findIndex(n=>n.value===s),this.selectedOptions=(l=this.inputRef.value)==null?void 0:l.selectedOptions,this.valueChanged(s,e)),super.attributeChangedCallback(t,e,s)}update(t){var e,s;super.update(t),t.has("_optionsProp")&&this._optionsProp.length>0&&(this._options=this._optionsProp,this.requestUpdate("_options"),!this.value&&this._options.length>0&&(this.value=this._options[0].value,this.selectedIndex=0)),t.has("value")&&this.value!==t.get("value")&&(this.selectedIndex=this.touched?this.returnNumberOrNull((e=this.inputRef.value)==null?void 0:e.selectedIndex):this._options.findIndex(i=>i.value===this.value),this.selectedOptions=(s=this.inputRef.value)==null?void 0:s.selectedOptions,this.valueChanged(this.value,t.get("value"))),t.has("id")&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(t){var e;super.firstUpdated(t),this._optionsProp.length&&(this._options=this._optionsProp),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(s=>s.value===this.value),this.selectedOptions=(e=this.inputRef.value)==null?void 0:e.selectedOptions}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return h.x`
+      <pkt-input-wrapper
+        ?counter=${this.counter}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        ?useWrapper=${this.useWrapper}
+        ariaDescribedBy=${o.o(this.ariaDescribedBy)}
+        class="pkt-select"
+        errorMessage=${o.o(this.errorMessage)}
+        forId=${this.id+"-input"}
+        helptext=${o.o(this.helptext)}
+        helptextDropdown=${o.o(this.helptextDropdown)}
+        helptextDropdownButton=${o.o(this.helptextDropdownButton)}
+        label=${o.o(this.label)}
+        optionalText=${o.o(this.optionalText)}
+        requiredText=${o.o(this.requiredText)}
+        tagText=${o.o(this.tagText)}
+      >
+        <select
+          class=${t}
+          aria-invalid=${this.hasError}
+          aria-errormessage=${`${this.id}-error`}
+          aria-labelledby=${o.o(this.ariaLabelledby)}
+          ?disabled=${this.disabled}
+          id=${this.id+"-input"}
+          name=${(this.name||this.id)+"-input"}
+          value=${this.value}
+          @change=${e=>{this.touched=!0,this.value=e.target.value,e.stopImmediatePropagation()}}
+          @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
+          @focus=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
+          @blur=${e=>{this.onBlur(),e.stopImmediatePropagation()}}
+          ${r.n(this.inputRef)}
+        >
+          ${this._options.length>0?this._options.map(e=>h.x`<option
+                    value=${e.value}
+                    ?selected=${this.value==e.value||e.selected}
+                    ?disabled=${e.disabled}
+                    ?hidden=${e.hidden}
+                  >
+                    ${e.label}
+                  </option>`):""}
+        </select>
+        <div class="pkt-contents" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+      </pkt-input-wrapper>
+    `}returnNumberOrNull(t){return t==null||isNaN(t)?null:t}};a([h.n({type:Array,attribute:"options"})],exports.PktSelect.prototype,"_optionsProp",2);a([h.n({type:String})],exports.PktSelect.prototype,"value",2);a([u.r()],exports.PktSelect.prototype,"_options",2);exports.PktSelect=a([h.t("pkt-select")],exports.PktSelect);

package/dist/select-VpX_cjMM.js

@@ -0,0 +1,173 @@
+import { x as r, n as c, a as v } from "./element-CgEWt74-.js";
+import { r as f } from "./state-Bo2bck5_.js";
+import { e as u, n as d } from "./ref-BBYSqgeW.js";
+import { o as l } from "./if-defined-CmuO4Vz9.js";
+import { P as _ } from "./input-element-NnrDmp4r.js";
+import { P as x } from "./pkt-options-controller-CZO1nxZ8.js";
+import { P as b } from "./pkt-slot-controller-BPGj-LC5.js";
+import "./input-wrapper-Dr__Sxql.js";
+var $ = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (t, e, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? m(e, s) : e, n = t.length - 1, p; n >= 0; n--)
+    (p = t[n]) && (o = (i ? p(e, s, o) : p(o)) || o);
+  return i && o && $(e, s, o), o;
+};
+let h = class extends _ {
+  constructor() {
+    super(), this.inputRef = u(), this.helptextSlot = u(), this._optionsProp = [], this.value = "", this._options = [], this.selectedIndex = -1, this.selectedOptions = void 0, this.optionsController = new x(this), this.slotController = new b(this, this.helptextSlot), this.slotController.skipOptions = !0;
+  }
+  // Getter and setter for options to expose the actual parsed options
+  get options() {
+    return this._options.map((t) => ({
+      ...t,
+      selected: t.value === this.value
+    }));
+  }
+  set options(t) {
+    this._optionsProp = t, this.requestUpdate("_optionsProp", this._options);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this._optionsProp.length > 0, e = this.optionsController.nodes.length && this.optionsController.nodes.length > 0;
+    !t && e ? this.optionsController.nodes.forEach((s) => {
+      const i = {
+        value: s.hasAttribute("value") ? s.getAttribute("value") ?? "" : s.textContent ?? "",
+        label: s.textContent || s.getAttribute("value") || "",
+        disabled: s.hasAttribute("disabled"),
+        selected: s.hasAttribute("selected"),
+        hidden: s.hasAttribute("data-hidden")
+      };
+      s.getAttribute("selected") && !this.value && (this.value = i.value), this._options.push(i);
+    }) : (this._options = this._optionsProp, this._options.forEach((s) => {
+      s.selected && !this.value && (this.value = s.value);
+    }));
+  }
+  // Support native Select method `add`
+  add(t, e) {
+    const s = {
+      value: t.value || t.text,
+      label: t.text || t.value,
+      selected: t.selected,
+      disabled: t.disabled
+    };
+    if (e === void 0)
+      this._options.push(s);
+    else if (typeof e == "number")
+      this._options.splice(e, 0, s);
+    else {
+      const i = e.value || e.text, o = this._options.findIndex((n) => n.value === i);
+      o >= 0 ? this._options.splice(o, 0, s) : this._options.push(s);
+    }
+    t.selected && (this.value = t.value || t.text, this.selectedIndex = this._options.findIndex((i) => i.value === this.value)), this.requestUpdate();
+  }
+  // Support native Select method `remove`
+  remove(t) {
+    var e;
+    typeof t == "number" && (this.selectedIndex === t && (this.value = ((e = this._options[0]) == null ? void 0 : e.value) || ""), this._options.splice(t, 1), this.requestUpdate());
+  }
+  // Support native Select method `item`
+  item(t) {
+    var e;
+    return (e = this.inputRef.value) == null ? void 0 : e.item(t);
+  }
+  // Support native Select method `namedItem`
+  namedItem(t) {
+    var e;
+    return (e = this.inputRef.value) == null ? void 0 : e.namedItem(t);
+  }
+  // Support native Select method `showPicker`
+  showPicker() {
+    this.inputRef.value && "showPicker" in this.inputRef.value && this.inputRef.value.showPicker();
+  }
+  attributeChangedCallback(t, e, s) {
+    var i, o;
+    t === "options" && (this._options = s ? JSON.parse(s) : []), t === "value" && this.value !== e && (this.selectedIndex = this.touched ? this.returnNumberOrNull((i = this.inputRef.value) == null ? void 0 : i.selectedIndex) : this._options.findIndex((n) => n.value === s), this.selectedOptions = (o = this.inputRef.value) == null ? void 0 : o.selectedOptions, this.valueChanged(s, e)), super.attributeChangedCallback(t, e, s);
+  }
+  update(t) {
+    var e, s;
+    super.update(t), t.has("_optionsProp") && this._optionsProp.length > 0 && (this._options = this._optionsProp, this.requestUpdate("_options"), !this.value && this._options.length > 0 && (this.value = this._options[0].value, this.selectedIndex = 0)), t.has("value") && this.value !== t.get("value") && (this.selectedIndex = this.touched ? this.returnNumberOrNull((e = this.inputRef.value) == null ? void 0 : e.selectedIndex) : this._options.findIndex((i) => i.value === this.value), this.selectedOptions = (s = this.inputRef.value) == null ? void 0 : s.selectedOptions, this.valueChanged(this.value, t.get("value"))), t.has("id") && !this.name && this.id && (this.name = this.id);
+  }
+  firstUpdated(t) {
+    var e;
+    super.firstUpdated(t), this._optionsProp.length && (this._options = this._optionsProp), !this.value && this._options.length > 0 ? (this.value = this._options[0].value, this.selectedIndex = 0) : this.selectedIndex = this._options.findIndex((s) => s.value === this.value), this.selectedOptions = (e = this.inputRef.value) == null ? void 0 : e.selectedOptions;
+  }
+  render() {
+    const t = `pkt-input ${this.fullwidth ? "pkt-input--fullwidth" : ""}`;
+    return r`
+      <pkt-input-wrapper
+        ?counter=${this.counter}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        ?useWrapper=${this.useWrapper}
+        ariaDescribedBy=${l(this.ariaDescribedBy)}
+        class="pkt-select"
+        errorMessage=${l(this.errorMessage)}
+        forId=${this.id + "-input"}
+        helptext=${l(this.helptext)}
+        helptextDropdown=${l(this.helptextDropdown)}
+        helptextDropdownButton=${l(this.helptextDropdownButton)}
+        label=${l(this.label)}
+        optionalText=${l(this.optionalText)}
+        requiredText=${l(this.requiredText)}
+        tagText=${l(this.tagText)}
+      >
+        <select
+          class=${t}
+          aria-invalid=${this.hasError}
+          aria-errormessage=${`${this.id}-error`}
+          aria-labelledby=${l(this.ariaLabelledby)}
+          ?disabled=${this.disabled}
+          id=${this.id + "-input"}
+          name=${(this.name || this.id) + "-input"}
+          value=${this.value}
+          @change=${(e) => {
+      this.touched = !0, this.value = e.target.value, e.stopImmediatePropagation();
+    }}
+          @input=${(e) => {
+      this.onInput(), e.stopImmediatePropagation();
+    }}
+          @focus=${(e) => {
+      this.onFocus(), e.stopImmediatePropagation();
+    }}
+          @blur=${(e) => {
+      this.onBlur(), e.stopImmediatePropagation();
+    }}
+          ${d(this.inputRef)}
+        >
+          ${this._options.length > 0 ? this._options.map(
+      (e) => r`<option
+                    value=${e.value}
+                    ?selected=${this.value == e.value || e.selected}
+                    ?disabled=${e.disabled}
+                    ?hidden=${e.hidden}
+                  >
+                    ${e.label}
+                  </option>`
+    ) : ""}
+        </select>
+        <div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
+      </pkt-input-wrapper>
+    `;
+  }
+  returnNumberOrNull(t) {
+    return t == null || isNaN(t) ? null : t;
+  }
+};
+a([
+  c({ type: Array, attribute: "options" })
+], h.prototype, "_optionsProp", 2);
+a([
+  c({ type: String })
+], h.prototype, "value", 2);
+a([
+  f()
+], h.prototype, "_options", 2);
+h = a([
+  v("pkt-select")
+], h);
+export {
+  h as P
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.5.12",
+  "version": "13.6.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -73,5 +73,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "0216f07fa821851a3768a219b1906aba297fbf94"
+  "gitHead": "02be3699565d6e962bf2a28742428505c2922363"
 }

package/src/components/datepicker/date-tags.test.ts

@@ -0,0 +1,126 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import './date-tags'
+import { PktDateTags } from './date-tags'
+
+expect.extend(toHaveNoViolations)
+
+export interface IDateTagsTest extends BaseTestConfig {
+  dates?: string[]
+  idBase?: string
+  className?: string
+  dateformat?: string
+}
+
+export const createDateTagsTest = async (config: IDateTagsTest = {}) => {
+  const { container, element } = await createElementTest('pkt-date-tags' as any, config)
+
+  return {
+    container,
+    dateTags: element as PktDateTags,
+  }
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktDateTags', () => {
+  test('renders nothing when no dates provided', async () => {
+    const { dateTags } = await createDateTagsTest()
+    await dateTags.updateComplete
+
+    expect(dateTags.querySelectorAll('time').length).toBe(0)
+  })
+
+  test('renders provided ISO dates and formats them', async () => {
+    const iso = '2025-09-17'
+    const { dateTags } = await createDateTagsTest()
+
+    dateTags.dates = [iso]
+    dateTags.idBase = 'base-'
+    await dateTags.updateComplete
+
+    const time = dateTags.querySelector('time')
+    expect(time).toBeTruthy()
+    expect(time?.getAttribute('datetime')).toBe(iso)
+
+    expect(time?.textContent?.trim()).toBe('17.09.2025')
+
+    const tag = dateTags.querySelector('pkt-tag')
+    expect(tag).toBeTruthy()
+    expect(tag?.id).toBe(`base-${iso}-tag`)
+  })
+
+  test('applies custom unicode-style dateformat', async () => {
+    const iso = '2025-09-17'
+    const { dateTags } = await createDateTagsTest()
+
+    dateTags.dates = [iso]
+    dateTags.dateformat = 'yyyy/MM/dd'
+    await dateTags.updateComplete
+
+    const time = dateTags.querySelector('time')
+    expect(time).toBeTruthy()
+    expect(time?.textContent?.trim()).toBe('2025/09/17')
+  })
+
+  test('normalizes overflow ISO dates (e.g. 2025-02-30 -> 02.03.2025)', async () => {
+    const iso = '2025-02-30'
+    const { dateTags } = await createDateTagsTest()
+
+    dateTags.dates = [iso]
+    await dateTags.updateComplete
+
+    const time = dateTags.querySelector('time')
+    expect(time).toBeTruthy()
+
+    // JS Date normalizes invalid dates; 2025-02-30 becomes 02.03.2025
+    expect(time?.textContent?.trim()).toBe('02.03.2025')
+  })
+
+  test('Moment-style tokens (DD.MM.YYYY) do not match date-fns tokens', async () => {
+    const iso = '2025-09-17'
+    const { dateTags } = await createDateTagsTest()
+
+    // Moment-style tokens are uppercase; date-fns expects lowercase (yyyy, dd)
+    dateTags.dates = [iso]
+    dateTags.dateformat = 'DD.MM.YYYY'
+
+    const spyWarn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    try {
+      await expect(dateTags.updateComplete).rejects.toThrow(/Use `dd` instead of `DD`/)
+    } finally {
+      spyWarn.mockRestore()
+    }
+  })
+
+  test('emits date-tag-removed when child pkt-tag dispatches close', async () => {
+    const iso = '2025-09-17'
+    const { dateTags } = await createDateTagsTest()
+    dateTags.dates = [iso]
+    await dateTags.updateComplete
+
+    const handler = vi.fn()
+    dateTags.addEventListener('date-tag-removed', (e: any) => handler(e.detail))
+
+    const tag = dateTags.querySelector('pkt-tag')
+    expect(tag).toBeTruthy()
+
+    // Simulate close event on child tag
+    tag?.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+
+    expect(handler).toHaveBeenCalledWith(iso)
+  })
+
+  test('is accessible (WCAG) with dates', async () => {
+    const iso = '2025-09-17'
+    const { container } = await createDateTagsTest({ dates: [iso] })
+
+    // Run axe on the rendered container
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})

package/src/components/datepicker/date-tags.ts

@@ -0,0 +1,59 @@
+import { PktElement } from '@/base-elements/element'
+import { html, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { repeat } from 'lit/directives/repeat.js'
+
+import '@/components/tag'
+import { fromISOtoLocal } from '@/utils/dateutils'
+import { uuidish } from '@/utils/stringutils'
+
+type TYear = `${number}${number}${number}${number}`
+type TMonth = `${number}${number}`
+type TDay = `${number}${number}`
+export type TISODate = `${TYear}-${TMonth}-${TDay}`
+
+/**
+ * OBS! `dateformat` er standard formatteringsstreng for visning av datoer.
+ * Denne brukes for å sette "menneskeleselig" format på datoene i tags.
+ *
+ * Følger denne unicode-standarden:
+ * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+ */
+
+@customElement('pkt-date-tags')
+export class PktDateTags extends PktElement {
+  @property({ type: Array }) dates: TISODate[] = []
+  @property({ type: String }) dateformat: string = 'dd.MM.yyyy' // se kommentar over
+  @property({ type: String, attribute: 'class' }) className: string = 'pkt-datepicker__tags'
+  @property({ type: String, attribute: 'id-base' }) idBase: string = uuidish()
+
+  render() {
+    this.classes = {
+      'pkt-date-tags': true,
+      [this.className]: true,
+    }
+
+    return html`
+      <div class=${classMap(this.classes)} aria-live="polite">
+        ${Array.isArray(this.dates) && !!this.dates[0]
+          ? repeat(
+              (this.dates ?? []).filter(Boolean).sort(),
+              (date) => date,
+              (date) =>
+                html` <pkt-tag
+                  id=${this.idBase + date + '-tag'}
+                  closeTag
+                  @close=${() => {
+                    this.dispatchEvent(new CustomEvent('date-tag-removed', { detail: date }))
+                  }}
+                  .ariaLabel=${`${this.strings?.calendar.deleteDate} ${fromISOtoLocal(date, this.dateformat)}`}
+                >
+                  <time datetime=${date}>${fromISOtoLocal(date, this.dateformat)}</time>
+                </pkt-tag>`,
+            )
+          : nothing}
+      </div>
+    `
+  }
+}

package/src/components/datepicker/datepicker.ts

@@ -1,24 +1,17 @@
 import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { customElement, property, state } from 'lit/decorators.js'
-import {
-  formatISODate,
-  fromISOToDate,
-  fromISOtoLocal,
-  newDate,
-  parseISODateString,
-} from '@/utils/dateutils'
+import { formatISODate, fromISOToDate, newDate, parseISODateString } from '@/utils/dateutils'
 import { html, nothing, PropertyValues } from 'lit'
 import { PktCalendar } from '@/components/calendar/calendar'
 import { PktInputElement } from '@/base-elements/input-element'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
-import { repeat } from 'lit/directives/repeat.js'
 import converters from '@/helpers/converters'
 import specs from 'componentSpecs/datepicker.json'
 import '@/components/calendar'
 import '@/components/icon'
 import '@/components/input-wrapper'
-import '@/components/tag'
+import './date-tags'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
@@ -527,31 +520,6 @@ export class PktDatepicker extends PktInputElement {
     `
   }
 
-  renderTags() {
-    return html`
-      <div class="pkt-datepicker__tags" aria-live="polite">
-        ${!!this._value[0]
-          ? repeat(
-              (this._value ?? []).filter(Boolean).sort(),
-              (date) => date,
-              (date) => html`
-                <pkt-tag
-                  .id="${this.id + date + '-tag'}"
-                  closeTag
-                  ariaLabel="${this.strings.calendar.deleteDate} ${fromISOtoLocal(
-                    date,
-                    this.dateformat,
-                  )}"
-                  @close=${() => this.calRef.value?.handleDateSelect(fromISOToDate(date))}
-                  ><time datetime="${date}">${fromISOtoLocal(date, this.dateformat)}</time></pkt-tag
-                >
-              `,
-            )
-          : nothing}
-      </div>
-    `
-  }
-
   renderCalendar() {
     return html`<div
       class="pkt-calendar-popup pkt-${this.calendarOpen ? 'show' : 'hide'}"
@@ -651,7 +619,17 @@ export class PktDatepicker extends PktInputElement {
         class="pkt-datepicker"
       >
         <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
-        ${this.multiple ? this.renderTags() : nothing}
+        ${this.multiple
+          ? html`<pkt-date-tags
+              .dates=${this._value}
+              dateformat=${this.dateformat}
+              strings=${this.strings}
+              id-base=${this.id}
+              @date-tag-removed=${(e: CustomEvent) => {
+                this.calRef.value?.handleDateSelect(fromISOToDate(e.detail))
+              }}
+            ></pkt-date-tags>`
+          : nothing}
         <div
           class="pkt-datepicker__inputs ${this.range && this.showRangeLabels
             ? 'pkt-input__range-inputs'

package/src/components/index.ts

@@ -9,6 +9,7 @@ export { PktCombobox } from './combobox'
 export { PktConsent } from './consent'
 export { PktCheckbox } from '@/components/checkbox'
 export { PktComponent } from '../base-elements/component-template.js'
+export { PktDateTags } from '@/components/datepicker/date-tags.js'
 export { PktDatepicker } from '@/components/datepicker/datepicker.js'
 export { PktHelptext } from '@/components/helptext'
 export { PktHeading } from '@/components/heading'